<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myweb006_</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
body,ul,li,a{
margin:0px;
padding:0px;
list-style:none;
text-decoration:none;
}
body{
background: #f4f4f4;
}
</*头部内容 */>
header{
width:100%;
height:60px;
background: #fff;
box-shadow:0px 0px 5px 5px #ccc;
margin-bootom:20px;
}
.top{
width:60%;
height:60px;
/* border: 1px solid blue; */
margin:0px auto;
display:flex;
justify-content:space-between;
}
/*
.top>section{
border:1px solid red;
}
*/
.top_left{
flex-grow:1;
/* border:1px solid red; */
}
.top_left>img{
height: 50px;
}
.top_center{
flex-grow:5;
/* border:1px solid green; */
}
.top_center>ul{
height: 60px;
display: flex; /*水平 */
justify-content: space-between;
align-items: center;
}
/* .top_center>ul>li{
border: 1px solid red;
} */
.top_center>ul>li>a,.top_right>ul>li>a{
font-size: 14px;
font-family: "微软雅黑";
color: rgba(31,45,61,0.5);
font-weight: bold;
}
.top_right{
flex-grow:2;
/* border:1px solid #000; */
}
.top_right>ul{
height: 60px;
display: flex;
justify-content: space-around;
align-items: center;
}
/*航部分 */
nav{
width:60%;
height:80px;
/*order:1px solid blue;*/
margin:0px auto;
box-shadow:0px 5px 5px #ccc;
background:#fff;
border-radius:10px;
margin:0px auto;
magrin-bottom:20px;
}
/*内容部分*/
#content{
width:60%;
height:auto;
border:1px solid blue;
margin:0px auto 20px;
}
.content{
width:100%;
display:flex;
justify-content:space-between;
margin-bottom: 50px;
}
.content>section{
width:23%;
height:200px;
border:1px solid green;
}
/* 分页部分 */
#page{
width: 60%;
margin: 0px auto 20px;
border: 1px solid blue;
display: flex;
justify-content: center;
}
#page>article{
border: 1px solid red;
padding: 7px 15px;
margin-left: 15px;
}
/* 底部内容 */
footer{
width: 100%;
background: #fff;
height: 370px;
/* border: 1px solid black; */
}
.footer{
width: 60%;
height: 350px;
border: 1px solid blue;
margin: 0px auto;
display: flex;
justify-content: space-between;
}
.footer_left{
flex-grow: 3;
border: 1px solid red;
}
.footer_center{
flex-grow: 5;
border: 1px solid blue;
}
.footer_right{
flex-grow: 1;
border: 1px solid green;
}
.footer_bottom{
width: 60%;
height: 20px;
margin: 0px auto;
text-align: center;
}
</style>
</head>
<body>
<!-- 头部内容-->
<header>
<section class="top">
<section class="top_left"><img src="img/logo2.png"></section>
<section class="top_center">
<ul>
<li><a href="#">更多课程</a></li>
<li><a href="#">猿生态</a></li>
<li><a href="#">猿著</a></li>
<li><a href="#">猿创</a></li>
<li><a href="#">猿材料</a></li>
<li><a href="#">猿工手册</a></li>
<li><a href="#">猿代码</a></li>
<li><a href="#">猿圈</a></li>
<li><a href="#">猿来如此</a></li>
</ul>
</section>
<section class="top_right">
<ul>
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</section>
</section>
</header>
<!-- 导航部分 -->
<nav></nav>
<!-- 内容部分 -->
<section id="content">
<section class="content">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</section>
<section class="content">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</section>
<section class="content">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</section>
</section>
<!-- 分页部分 -->
<section id="page">
<article><a href="#">1</a></article>
<article><a href="#">2</a></article>
<article><a href="#">3</a></article>
<article><a href="#">4</a></article>
<article><a href="#">5</a></article>
<article><a href="#">6</a></article>
</section>
<!-- 底部内容 -->
<footer>
<section class="footer">
<section class="footer_left">3</section>
<section class="footer_center">5</section>
<section class="footer_right">1</section>
</section>
<section class="footer_bottom">学院</section>
</footer>
</body>
</html>
