下拉菜单卡顿
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style/style.css"> <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script> </head> <body> <header> <nav class="insteadnav"> IMOOC<a class="button">▼</a> </nav> <div class="navbox"> <a class="nav" href="#">前端</a> <a class="nav" href="#">Java</a> <a class="nav" href="#">iOS</a> <a class="nav" href="#">Android</a> <a class="nav" href="#">PHP</a> </div> </header> <section class="sec1"> <img src="./img/1.png"> <p>IMOOC</p> <input type="button" value="START"> </section> <section class="sec2"> <p>关于慕课网</p> <p>关于课程</p> <p>核心团队</p> <p>新增专题</p> </section> <section class="sec3"> <article> <p>响应式</p> <p>響應式網頁設計（英语：Responsive web design，通常縮寫为RWD），或稱自适应网页设计、回應式網頁設計、對應式網頁設計。 是一种网页设计的技術做法，该设计可使网站在不同的設備（从桌面电脑显示器到移动电话或其他流動產品裝置）上瀏覽時對應不同解析度皆有適合的呈現，减少使用者進行缩放、平移和滚动等操作行為。</p> </article> </section> <section class="sec4"> <p>IMOOC</p> <p>Welcome to <span>www.imooc.com</span></p> </section> <section class="sec5"> <p>主打课程</p> <div class="piccontainer"> <img src="./img/1.jpg"> <img src="./img/2.jpg"> <img src="./img/3.jpg"> <img src="./img/4.jpg"> <img src="./img/5.jpg"> <img src="./img/6.jpg"> </div> </section> <section class="sec6"> <p>Copyright ©2017 imooc.com All Rights Reserved</p> </section> <script src="./js/js.js"></script> </body> </html>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
header {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
background-color: #B2C5CC;
height: .3rem;
font-size: .1rem;
}
header > .insteadnav {
display: none;
}
header a {
width: .5rem;
color: #757575;
text-align: center;
font-size: .1rem;
padding: 10px 0;
}
header > a:not(:first-child):hover {
color: #afafaf;
background-color: rgb(255, 255, 255);
transition: color 1s;
transition: background-color 1s;
}
.sec1 {
width: 100%;
height: 2.5rem;
background-color: #B2C5CC;
display: flex;
flex-direction: column;
align-items: center;
font-size: .1rem;
}
.sec1 img {
width: .5rem;
height: .5rem;
margin-bottom: 40px;
margin-top: 30px;
}
.sec1 p {
color: white;
font-size: .14rem;
margin-bottom: 40px;
}
.sec1 input {
font-size: .15rem;
background-color: white;
padding: 10px 20px;
color: #757575;
border: none;
transition: color 1s;
}
.sec1 input:hover {
cursor: pointer;
color: #afafaf;
transition: color 1s;
}
.sec2 {
display: flex;
height: .6rem;
border-bottom: 2px solid rgba(200, 200, 200, .6);
justify-content: space-around;
align-items: center;
font-size: .1rem;
}
.sec2 p {
width: 20%;
text-align: center;
color: #bababa;
transition: color 1s;
}
.sec2 p:hover {
color: #545454;
transition: color 1s;
}
.sec3 article {
display: flex;
width: 100%;
height: 3.5rem;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sec3 article p {
width: 45%;
}
.sec3 article p:nth-child(1) {
font-size: .2rem;
font-weight: bold;
text-align: center;
height: 40px;
margin-bottom: .2rem;
}
.sec3 article p:nth-child(2) {
font-size: .1rem;
text-align: justify;
line-height: 2em;
}
.sec4 {
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
color: #aaa;
background-color: #f4f4f4;
padding: 0px 80px;
font-size: .1rem;
}
.sec4 p:nth-child(1) {
font-size: .2rem;
}
.sec4 p:nth-child(2) span {
color: black;
font-size: .1rem;
}
.sec5 {
width: 100%;
height: 800px;
background: url("../img/bg.jpg") no-repeat 100% 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: .1rem;
}
.sec5 p {
margin-top: 50px;
margin-left: 80px;
font-size: .15rem;
}
.sec5 .piccontainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
.sec5 .piccontainer img {
width: 25%;
height: 270px;
margin: 20px;
transition: all .4s;
}
.sec5 .piccontainer img:hover {
cursor: pointer;
transform: scale(1.2);
}
.sec6 {
height: 80px;
line-height: 80px;
font-size: .1rem;
background-color: #eee;
text-align: center;
}
@media screen and (max-width: 400px) {
header {
display: flex;
flex-direction: column;
height: 1.3rem;
z-index: 2;
justify-content: flex-start;
}
header>.insteadnav {
display: block;
width: 100%;
text-align: center;
font-size: .18rem;
line-height: .26rem;
padding: .05rem 0;
z-index: 2;
background-color: #7EA6B1;
color: white;
}
header>.insteadnav>.button {
position: absolute;
top: -.05rem;
right: .2rem;
z-index: 2;
}
header .navbox{
display: none;
position: relative;
z-index: 888;
width: 100%;
}
header .nav {
display: block;
width: 100%;
background-color: #7EA6B1;
/*z-index: 2;*/
border-bottom: 1px solid rgba(200, 200, 200, .5)
}
.sec4 {
display: flex;
flex-direction: column;
justify-content: center;
}
.sec5 {
width: 100%;
height: 4rem;
padding-bottom: .2rem;
}
.sec5 p {
margin-left: .16rem;
font-size: .15rem;
}
.sec5 .piccontainer img {
width: 40%;
height: 1rem;
margin: .04rem;
}
}$(document).ready(function() {
(function(win, doc) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : "resize",
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth <= 400) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 400) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
recalc();
})(window, document)
$(".button").click(function(){
$(".navbox").animate({
'height': 'toggle',
});
})
});按照老师的作业点评修改后，iphone6分辨率下浏览，下拉菜单仍然卡顿？
39
收起
正在回答 回答被采纳积分+1
2回答
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星