老师在iPhone6下如何实现下拉菜单
来源：7-2 作业题
慕仙0328516
2019-03-27 09:51:00
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
/*通用样式*/
*{
margin:0;
padding: 0;
border:none;
}
ul{
list-style: none;
}
a{
text-decoration: none
}
/*第一区域*/
header{
background:#B2C5CC;
text-align: center;
}
header nav{
width:60%;
margin:0 auto;
padding:40px 0;
}
header nav span{
display: inline-block;
width:18%;
text-align: center;
color: #757575;
cursor: pointer;
}
header nav span:nth-child(1){
color:#afafaf;
}
header img{
margin-top: 30px;
}
header p{
margin:30px 0 40px 0;
color:#fff;
}
header input{
width:100px;
height:40px;
background:#fff;
color:black;
border-radius: 2px;
cursor:pointer;
margin-bottom: 80px;
}
/*第二区域*/
body > nav{
display: flex;
width: 100%;
text-align: center;
padding:20px 0;
color: #bababa;
border-bottom:1px solid #ccc;
}
body > nav div{
flex:1;
}
body > nav div:first-child{
color:black;
}
/*第三区域*/
.intro{
width:52%;
margin:0 auto;
color:#bababa;
font-size: 14px;
line-height:30px;
padding:50px 0 70px 0;
}
.intro h2{
color: black;
margin:20px 0;
text-align: center;
color: rgb(170,156,156);
}
.intro p{
margin:0 auto;
}
/*第四区域*/
.web{
display:flex;
background:#f4f4f4;
padding:24px 50px;
justify-content: space-between;
align-items: center;
}
.web > h2{
font-weight: normal;
}
.web > div > span{
font-weight: bold;
}
/*第五区域*/
.main{
width:100%;
height:600px;
background:url(../img/bg.jpg) no-repeat center center;
background-size: cover;
}
.main .container{
width:90%;
margin:0 auto;
}
.main .container p{
margin:60px 0 20px 0;
font-size: 18px;
}
.main .container .phos{
width:100%;
display: flex;
flex-wrap:wrap;
}
.main .container .phos .pho{
width:32%;
height:220px;
margin-right:2%;
margin-top:2%;
}
.main .container .phos .pho1{
background-image: url(../img/1.jpg);
background-position: center center;
background-size: cover;
margin-top: 0;
}
.main .container .phos .pho2{
background-image: url(../img/2.jpg);
background-position: center center;
background-size: cover;
margin-top: 0;
}
.main .container .phos .pho3{
background-image: url(../img/3.jpg);
background-position: center center;
background-size: cover;
margin-right:0;
margin-top: 0;
}
.main .container .phos .pho4{
background-image: url(../img/4.jpg);
background-position: center center;
background-size: cover;
}
.main .container .phos .pho5{
background-image: url(../img/5.jpg);
background-position: center center;
background-size: cover;
}
.main .container .phos .pho6{
background-image: url(../img/6.jpg);
background-position: center center;
background-size: cover;
margin-right:0;
}
/*第六区域*/
footer{
background: #f4f4f4;
height:80px;
line-height: 80px;
text-align: center;
font-size: 18px;
font-weight: bold
}
/*在iPhone6设备下*/
@media screen and (max-width:600px){
/*第一区域*/
header nav{
position: relative;
width:100%;
margin:0 auto;
padding:0;
margin-bottom: 40px;
background:#7EA6B1;
color:#fff;
padding-top: 48px;
}
header nav span{
display: inline-block;
width:100%;
height:24px;
line-height: 24px;
text-align: center;
color: #757575;
cursor: pointer;
padding:4px 0 4px 0;
color:#fff;
border-top:1px solid #ccc;
display: none;
}
header nav span:nth-child(1){
color:#fff;
}
header nav::before{
display: block;
content:'imooc';
color:#fff;
height:48px;
line-height:48px;
font-size: 18px;
font-weight: bold;
position: absolute;
left:44%;
top:0;
}
header nav::after{
display: block;
content:'';
width:10px;
height: 10px;
border:1px solid #fff;
position: absolute;
right:6%;
top:38%;
}
/*第三区域*/
.intro{
width:80%;
}
/*第四区域*/
.web{
flex-direction: column;
justify-content: space-around;
}
/*第五区域*/
.main{
width:100%;
height:800px;
background:url(../img/bg.jpg) no-repeat center center;
background-size: cover;
}
.main .container .phos .pho{
width:46%;
height:220px;
margin:2%;
}
/*第六区域*/
footer{
font-size:11px;
}
}
</style>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<!--第一区域-->
<header>
<nav id="nav">
<span>前端</span>
<span>java</span>
<span>ios</span>
<span>Android</span>
<span>php</span>
</nav>
<img src="img/1.png">
<p>IMOOC</p>
<input type="button" value="start">
</header>
<!--第二区域-->
<nav>
<div>关于慕课网</div>
<div>关于课程</div>
<div>核心团队</div>
<div>新增专题</div>
</nav>
<!--第三区域-->
<section class="intro">
<h2>响应式</h2>
<p>当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客？起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面代码均采用HTML5和CSS3实现。起飞页提供了海量精美网站模板和成品网站，几乎覆盖了当今各个行业，您只需在模板上进行少量修改，即可完成自己的网站，这一切都是免费的。
</p>
</section>
<!--第四区域-->
<section class="web">
<h2>IMOOC</h2>
<div>welcome to
<span>www.imooc.com</span>
</div>
</section>
<!--第五区域-->
<section class="main">
<div class="container">
<p>主打课程</p>
<div class="phos">
<div class="pho pho1"></div>
<div class="pho pho2"></div>
<div class="pho pho3"></div>
<div class="pho pho4"></div>
<div class="pho pho5"></div>
<div class="pho pho6"></div>
</div>
</div>
</section>
<!--第六区域-->
<footer>
Copyright © 2017 imooc.com All Rights Reserved
</footer>
</body>
</html>
还有一个问题，伪类不可以设置id和class吧，如果想用js操作伪类应该怎么做？
1回答
-
你好，在js中伪类是获取不到的，所以建议小按钮可以使用一个空标签实现。
在iPhone6设备下，设置下拉菜单定位相对于顶部定位显示，给按钮绑定点击事件，点击按钮的时候改变下拉菜单定位的top值即可。
自己可以试着修改测试下，祝学习愉快！
0
