我正处于学习网络开发的初级阶段。我想到布局并尝试为其编写代码。
我想在网站的右上角设置社交媒体导航。我想出了以下 html。
<nav class="snav">
<a href="#"><img src="../desktop/linked.png" height="32px" width="32px"></a>
<a href="#"><img src="../desktop/fb.png" height="32px" width="32px"></a>
<a href="#"><img src="../desktop/twitter.png" height="32px" width="32px"></a>
<a href="#"><img src="../desktop/google.png" height="32px" width="32px"></a>
</nav>
还有CSS
.snav {
position: absolute;
top: 50px;
right: 50px;
}
.snav a {
padding-right: 5px;
padding-left: 5px;
}
但是，只有 google + 图标出现在屏幕上。
这是网站的完整代码。
body {
background-image: url('../desktop/image.jpg');
background-repeat: no-repeat;
margin: 0;
}
.header {
background-color: #fcfcfc;
opacity: 0.5;
max-width: 100%;
height: 120px;
border-bottom: 0.4px solid #bd0000;
position: relative;
top: 0;
}
.bar_1 {
position: absolute;
left: 0px;
margin-left: 5%;
margin-top: 80px;
height: 50vh;
width: 25%;
background-color: #fcfcfc;
opacity: 0.5;
border-radius: 10px;
border: 0.4px solid #bd0000;
}
.bar_2 {
position: absolute;
left: 38.33%;
margin-top: 80px;
height: 50vh;
width: 23.33%;
background-color: #fcfcfc;
opacity: 0.5;
border-radius: 10px;
border: 0.4px solid #bd0000;
}
.bar_3 {
position: absolute;
left: 71.66%;
margin-right: 5%;
margin-top: 80px;
height: 50vh;
width: 23.33%;
background-color: #fcfcfc;
opacity: 0.5;
border-radius: 10px;
border: 0.4px solid #bd0000;
}
.bar_1:hover {
background-color: #bd0000;
}
.bar_2:hover {
background-color: #bd0000;
}
.bar_3:hover {
background-color: #bd0000;
}
#footer {
position: relative;
top: 100vh;
background-color: #fcfcfc;
max-width: 100%;
height: 70px;
border-top: 0.4px solid #bd0000;
}
* {
box-sizing: border-box;
}
.search_bar {
position: absolute;
top: 650px;
left: 29%;
right: 33.33%;
}
#search {
border: 2px solid #bd0000;
background-color: #fff;
opacity: 0.5;
font-color: #fcfcfc;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
width: 600px;
height: 50px;
border-radius: 2px;
}
#search:hover {
background-color: #f0f0f0;
font-color: #000;
opacity: 50;
}
img {
position: absolute;
top: 10px;
left: 30px;
}
.mnav {
position: absolute;
top: 30px;
right: 515px;
}
.mnav a {
font-family: Tahoma;
font-size: 18px;
font-weight: bolder;
color: #000;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
}
.snav {
position: absolute;
top: 50px;
right: 50px;
}
.snav a {
padding-right: 5px;
padding-left: 5px;
}<!Doctype html>
<html>
<head>
<title>Two Website</title>
<link rel="stylesheet" href="two-website.css">
</head>
<body>
<div class="body_con">
<div class="header">
</div>
<nav class="mnav">
<a href="#">Home</a>
<a href="#">Page 1</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
</nav>
<img src="../desktop/logo.png">
<nav class="snav">
<a href="https://www.linkedin.com/uas/login">
<img src="../desktop/linked.png" height="32px" width="32px">
</a>
<a href="https://www.facebook.com/">
<img src="../desktop/fb.png" height="32px" width="32px">
</a>
<a href="https://twitter.com/">
<img src="../desktop/twitter.png" height="32px" width="32px">
</a>
<a href="https://plus.google.com/">
<img src="../desktop/google.png" height="32px" width="32px">
</a>
</nav>
<div class="bar_1">
</div>
<div class="bar_2">
</div>
<div class="bar_3">
</div>
<form action="\" method="get" class="search_bar">
<input type="text" name="search" placeholder="Search" id="search">
</form>
</div>
<footer id="footer">
</footer>
</body>
</html>请帮助我。
谢谢
最佳答案
snav 的宽度是:
5 * (32 + 5 + 5) = 5 * 42 = 210
所以:
.snav {
position: absolute;
top: 50px;
right: 50px;
width: 210px;
height: 32px;
}
附注正如评论中所说，最好考虑相对定位而不是绝对定位。
关于html - 仅出现在导航中的四张图片中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39388754/