7-2项目的iPhone6的下拉菜单没有思路写出来
来源：7-1 items区域的布局
qq_顺其自然_67
2018-08-19 20:51:32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"/>
<title>7-2作业</title>
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<!--第一区域-->
<nav>
<a href="#">前端</a>
<a href="#">java</a>
<a href="#">ios</a>
<a href="#">Ardroid</a>
<a href="#">php</a>
</nav>
</header>
<section class="container">
<article>
<div class="header-img">
<img src="img/1.png" title="花朵" />
<p>IMOOC</p>
<button value="start">start</button>
</div>
</article>
<!--第二区域-->
<nav class="nav-mooc">
<a href="#" class="active">关于慕课网</a>
<a href="#">关于课程</a>
<a href="#">核心团队</a>
<a href="#">新增专题</a>
</nav>
<!--第三区域-->
<section class="main">
<div class="main-content">
<h3>响应式</h3>
<p>当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文</p>
<p>内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用</p>
<p>户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建</p>
<p>一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客？</p>
<p>起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面代码均</p>
<p>采用HTML5和css3实现。起飞页提供了海量精美网站模板和成品网站。几乎覆盖了</p>
<p>当今各个行业，您只需在模板上进行少量修改，即可完成自己的网站，这一切都是</p>
<p class="main-left">免费的。</p>
</div>
</section>
<!--第四区域-->
<nav class="nav-come">
<a href="#">IMOOC</a>
<p>welcome to<span>www.imooc.com</span></p>
<span></span>
</nav>
<!--第五区域-->
<section class="main-img">
<div class="main-zhuda">
<h3>主打课程</h3>
<div class="main-dance">
<div class="main-wudiao"><img src="img/1.jpg" title="舞蹈" /></div>
<div class="main-wudiao"><img src="img/2.jpg" title="舞蹈" /></div>
<div class="main-wudiao"><img src="img/3.jpg" title="舞蹈" /></div>
<div class="main-wudiao"><img src="img/4.png" title="舞蹈" /></div>
<div class="main-wudiao"><img src="img/5.jpg" title="舞蹈" /></div>
<div class="main-wudiao"><img src="img/6.png" title="舞蹈" /></div>
</div>
</div>
</section>
<footer>
Copyright © 2017 imooc.com All Rights Reserved
</footer>
</section>
</body>
</html>
CSS样式
body,html {
height:100%;
width:100%;
}
* {
padding:0px;
margin:0px;
}
a {
text-decoration:none;
}
ul li {
list-style:none;
}
/*头部*/
header {
width:100%;
height:50px;
}
nav {
background-color:#B2C5CC;
width:100%;
height:50px;
display:flex;
justify-content:center;/*属性定义了项目在主轴上的对齐方式。*/
align-items:center;/*属性定义项目在交叉轴上如何对齐,居中对齐*/
}
nav a {
margin-left:50px;
}
header a {
color:#95a2aa;
}
header nav a:hover {
color:#afafaf;
}
/*中间部分*/
.container {
width:100%;
height:100%;
}
article {
width:100%;
margin-top:-2px;
border:none;
display:flex;
background-color:#B3C6CD;
}
.header-img{
color:#fff;
width:100%;
height:500px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
.header-img img {
margin-bottom:40px;
}
.header-img p {
margin-bottom:40px;
}
.header-img button {
width:100px;
height:30px;
line-height:30px;
text-align:center;
border:none;
background:#fff;
}
.header-img button:hover {
background-color:rgb(255,255,255);
}
/*第二区域*/
.nav-mooc {
width:100%;
display:flex;
justify-content:space-around;
height:80px;
border-bottom:1px solid #E2E2E2;
color:#bababa;
align-items:center;
}
.nav-mooc a {
color:#bababa;
}
.nav-mooc a:hover {
color:#545454;
}
.nav-mooc .active{
color:#000;
}
/*第三区域*/
.main {
width:100%;
height:300px;
display:flex;
justify-content:center;
flex-direction:column;
color:#757575;
}
.main-content {
margin:0px auto;
}
.main-content h3 {
text-align:center;
font-size:25px;
font-weight:400;
margin-bottom:25px;
}
/*第四区域*/
.nav-come a {
color:#CDCDCD;
}
.nav-come {
width:100%;
height:100px;
line-height:100px;
background-color:#f4f4f4;
color:#CDCDCD;
}
.nav-come span {
color:#000;
margin-left:7px;
margin-right:35px;
}
.nav-come p {
float:right;
}
.main-img {
background:url(../img/bg.jpg) top center no-repeat;
background-size:100% 100%;
}
/*第五区域*/
.main-img {
width:100%;
display:flex;
}
.main-zhuda {
margin:0px 30px 0px 45px;
width:100%;
}
.main-zhuda h3 {
color:#757575 ;
margin-bottom:10px;
}
.main-dance {
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:cneter;
}
.main-wudiao {
width:30%;
height:30%;
margin:0px 20px 20px 0px;
}
.main-dance img {
height:100%;
width:100%;
}
footer {
background-color:#f1f1f1;
height:65px;
display:flex;
justify-content:center;
align-items:center;
}
/*ipone6*/
@media screen and (max-width:375px) {
header {
color:#fff;
display:flex;
height:250px;
}
nav {
display:flex;
width:100%;
height:250px;
flex-direction:column;
align-content:flex-start;
justify-content:flex-start;/*覆盖前面样式的项目在主轴上的对齐方式。，现在主轴是Y方向*/
}
header nav a {
width:100%;
color:#fff;
height:50px;
line-height:50px;
display:none;
margin-left:0px;
text-align:center;
background-color:#7ea6ae;
animation:Border 1s;
}
header nav a:nth-child(1) {
display:block;
}
header nav a:after {
content:"";
background-color:rgba(255,255,255,0.3);
width:100%;
height:2px;
display:flex;
-webkit-animation-duration:0.5s;/*属性定义动画完成一个周期所需要的时间*/
animation-duration:0.5s;
-webkit-animation-fill-mode:both;/*规定填充模式*/
animation-fill-mode:both;/*规定填充模式*/
-webkit-animation-name:slideInBorder;/*属性定义动画名字*/
animation-name:slideInBorder;
}
header nav a:nth-child(1)::after {
-webkit-animation-delay:0s;
}
header nav a:nth-child(2)::after {
-webkit-animation-delay:0.1s;
}
header nav a:nth-child(3)::after {
-webkit-animation-delay:0.2s;
}
header nav a:nth-child(4)::after {
-webkit-animation-delay:0.3s;
}
header nav a:nth-child(5)::after {
-webkit-animation-delay:0.4s;
}
/*动画*/
@-webkit-keyframes slideInBorder {
0% {
-webkit-transform:translate(52%,-24px) scaleY(0.07) rotate(90deg);
transform:translate(52%,-24px) scaleY(0.07) rotate(90deg);
}
100% {
-webkit-transform:translate(0,0) scaleY(1) rotate(0deg);
transform:translate(0,0) scaleY(1) rotate(0deg);
}
}
@-webkit-keyframes Border {
0% {
display:none;
}
100% {
display:block;
}
}
}
1回答
-
樱桃小胖子
2018-08-20
你的布局代码不规范，建议布局代码书写如下：
iphone6下，右侧点击图标现实下啦菜单需要使用js实现，自己动手尝试一下~
祝学习愉快！
0
相似问题