个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在构建一个网站，但我对 CSS 比较陌生，而且我在网站上定位元素时遇到问题。我想要一个页眉，其中将有一个菜单，其中包含网站不同部分的选项，内容部分将有内容和页脚，其中包含社交媒体上的链接。我已经用菜单制作了标题部分，但内容一直与它重叠，更准确地说它在菜单栏下。如果您能帮助我，我将不胜感激。
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-weight: 100;
font-family: 'Lato';
}
a {
text-decoration: none !important;
color: white;
}
.container {
width: 100%;
}
.content {
text-align: center;
font-size: 96px;
}
.footer-social {
float: right;
margin-bottom: 5px;
}
.footer-social ul {
float: right;
padding: 0;
margin: 0;
}
.footer-social li {
float: right;
list-style: none;
margin-left: 5px;
}
HTML:
<body>
<div class="container">
<div class="menu">
<ul>
<li>
<a href="#Home">Home</a>
</li>
<li>
<a href="#Photos">Photos</a>
</li>
<li>
<a href="#Events">Events</a>
</li>
<li>
<a href="#Contact">Contact</a>
</li>
</ul>
</div>
<div class="content">
Text
</div>
<div class="footer-social">
<a href="http://www.facebook.com">
<img src='http://www.womenactionmedia.org/cms/assets/themes/crate/images/social/facebook.png' />
</a>
</div>
</div>
</body>
最佳答案
试试下面的代码，它可能对你有帮助
html, body {
height: 100%;
margin: 0;
padding: 0;
background : #ddd;
}
body {
margin: 0;
padding: 0;
font-weight: 100;
font-family: 'Lato';
}
a {
text-decoration: none !important;
color: white;
}
.menu{
background : black;
}
.menu ul li{
display : inline-block;
padding : 8px;
}
.menu ul li:hover, a:hover{
background : white;
color : black;
}
.container {
width: 100%;
}
.content {
text-align: center;
font-size: 96px;
}
.footer-social {
float: right;
margin-bottom: 5px;
}
.footer-social ul {
float: right;
padding: 0;
margin: 0;
}
.footer-social li {
float: right;
list-style: none;
margin-left: 5px;
}<div class="container">
<div class="menu">
<ul>
<li>
<a href="#Home">Home</a>
</li>
<li>
<a href="#Photos">Photos</a>
</li>
<li>
<a href="#Events">Events</a>
</li>
<li>
<a href="#Contact">Contact</a>
</li>
</ul>
</div>
<div class="content">
Text
</div>
<div class="footer-social">
<a href="http://www.facebook.com">
<img src='http://www.womenactionmedia.org/cms/assets/themes/crate/images/social/facebook.png' />
</a>
</div>
</div>关于html - CSS 元素重叠但我想要一个在另一个下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35626637/
25
4
0
使用登录后，我想吐出用户名。 但是，当我尝试单击登录按钮时， 它给了我力量。 我看着logcat，但是什么也没显示。 这种编码是在说。 它将根据我在登录屏幕中输入的名称来烘烤用户名。 不会有任何密码。
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎是题外话，因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或include a min
我是一名优秀的程序员,十分优秀！