嗨,我第一次尝试设计布局,设计应该是有响应的。在给出正文和html height : 100%
之后,我无法点击我的菜单。在此之前,响应更改的菜单运行良好。
如果我从html中删除节和页脚,并删除body和html标记的height : 100%
。我可以点击菜单。有人能帮我解决这个问题吗。两个问题1.响应菜单无法点击2.页脚不在底部。
html代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<header>
<input type ="checkbox" id ="menuToggle" checked ="checked"/>
<label for ="menuToggle" class ="menu-icon">☰</label>
<div id ="logo">Heading</div>
<nav class="main-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<section>
<p>
Lorem Ipsum is simply dummy text of the printing and rem Ipsum has been
</p>
</section>
<footer>
<div id="footer">
<p>
Copyright © 2016 by sample.com. All Rights Reserved.
</p>
</div>
</footer>
</body>
</html>
css代码
* {
padding: 0;margin: 0;
}
html {
height: 100%;margin:0;padding:0;
}
body {
font-family: sans-serif;height: 100%;margin: 0;padding: 0;
position: relative;
}
header {
width: 100%;height: 100px;margin: auto;z-index: 99;background: #FFF;
border-bottom: 1px solid #EEE;
}
section {
height : 100%;top:50px;position:relative;
}
footer {
width : 100%;background:#034676;height:20px;
bottom:0px;position:relative;
}
a {
text-decoration: none;color: blue;font-size: 14px;
}
li {
list-style-type: none;
}
#logo {
float: left;line-height: 50px;color: #147DC2;font-size: 30px;
}
header nav {
width: 100%;text-align: center;
}
header nav ul {
float: left;line-height: 50px;
}
header nav li {
display: inline-block;
}
header nav a {
padding: 10px;color: #f1e7d1;
}
header nav a:hover {
background: #032976;color: #FFF;border-radius: 5px;
}
.main-nav {
background: #034676;width: 100%;height: 50px;position: absolute;top: -101px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
z-index: -1;
}
.menu-icon {
float : right;padding : 10px 20px;background : #034676;
color : #FFF;cursor : pointer;border-radius : 5px;margin : 5px 5px 0 0;
}
#menuToggle {
display: none;
}
#menuToggle:checked ~ .main-nav {
position: absolute;top: 101px;
}
/********Responsive*/
@media screen and (max-width: 480px) {
header nav li {
display: block;
}
header nav a {
display: block;padding :0;border-bottom : 1px solid #040376
}
header nav a:hover {
border-radius: 0;
}
.main-nav {
top : -350px;height : auto;
}
header nav ul {
float : none;line-height : 50px;
}
}
关于问题一:你把z索引等于-1,这就是为什么链接不能点击
.main-nav {
z-index: 100;
}
关于问题2:不能使中间部分等于100%,这意味着它将占据整个窗口。不要设置或自动设置。您将节和页脚都设置为相对的,所以页脚不能跟在节后面。
<section></section>
<footer></footer>
默认设置可以。
看看这个:
header {width: 100%;height: 100px;margin: auto;z-index: 99;background: #FFF;
border-bottom: 1px solid #EEE;}
您将标题z-index设置为99。所以导航栏的z索引较小(默认为0)在标题下方。必要时设置z索引,而不是一直设置。:)
问题1:
从.menu-nav
类中删除z-index: -1
问题2:
在section
标签中使用margin-top: 50px
而不是top: 50px