2
У меня есть три изображения в социальных сетях в div в нижней части страницы. Я их размещал центр div, но когда я добавляю ссылку на изображение, он отталкивает другие изображения, а область вокруг изображения также связана.Граница ссылок на гиперссылку
На других сайтах я не имел эту проблему, поэтому я не уверен, что происходит
Благодарности
<head>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="assets/hover.css" rel="stylesheet" media="all">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NolanD</title>
</head>
<body>
<div id="nav">
<header>
<div class="logo">NolanD</div>
<div id="logo">
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</header>
</div>
<body>
<div class="rowone">
</div>
<div class="rowtwo">
<p>
</p>
</div>
<div class="rowthree">
</div>
</div>
<div class="rowfour">
</div>
<div class="rowfive">
</div>
<div class="rowsix">
<a href="https://twitter.com/NolanD><img src=" assets/images/twitter.png " height="24 " width="24 " border="0 " class="hvr-bounce-in "> </a>
<img src="assets/images/linkedin.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
<img src="assets/images/github-2.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
</div>
</body>
And the CSS, where I think the issues is coming from.
html, body {
margin:0;
padding:0;
}
* {
margin: 0;
padding:0;
}
#nav {position:absolute;
width:100%;
height: 60px;
background:#F4F2F2 ;
text-align: right; left: 0; top: 0; }
#nav a { font-size:26px; padding: 3px; margin-right: 1rem; font-family: Roboto;
font-weight:100; }
#nav li { display: inline-block; }
#nav h1 { text-align: left; }
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
.logo {
float: left;
color: #1D7090;
font-size: 26px;
font-family: Roboto;
font-weight:100;
line-height: 31px;
display: inline-block;
margin-left: 1rem;
}
body {
background-color:#6A6262;
}
.rowone {
background-color:#7DB3BF;
width: 100%;
height: 600px; }
.rowtwo {
text-align: center;
font-size:72px;
color:#000000;
padding-top: 1rem;
background-color:#F9F2F2;
width: 100%;
height: 540px;
}
.rowthree {
background-color:#B34042;
width: 100%;
height: 500px;
}
.rowfour {
background-color:#FF5700;
width: 100%;
height: 500px;
}
.rowfive {
background-color:#DDD39B;
width: 100%;
height: 500px;
}
.rowsix{
background-color:#3E3E3E;
width: 100%;
height: 175px;
text-align:center;
}
.rowsix img { display: block;
padding-top: 5rem;
text-align:center;
display:inline-block;
margin:5px 15px;
}
@media all and (max-width:600px) {
.logo { display:none; }
#nav {text-align: center; }
}
Вы можете предоставить jsfiddle..It будет очень полезно для нас решить проблему ур. –
Вы добавили переход с дополнением на зависание, который вызывает эту проблему? Для привязки тега в целом> padding: 10rem ; переход: .4s; –