响应性网站设计问题



嗨,我第一次尝试设计布局,设计应该是有响应的。在给出正文和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">&#9776</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

最新更新