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>1section>
<section>2section>
<section>3section>
<section>4section>
section>
<section class="content">
<section>1section>
<section>2section>
<section>3section>
<section>4section>
section>
<section class="content">
<section>1section>
<section>2section>
<section>3section>
<section>4section>
section>
section>
<section id="page">
<article><a href="#">1a>article>
<article><a href="#">2a>article>
<article><a href="#">3a>article>
<article><a href="#">4a>article>
<article><a href="#">5a>article>
<article><a href="#">6a>article>
section>
<footer>
<section class="footer">
<section class="footer_left">3section>
<section class="footer_center">5section>
<section class="footer_right">1section>
section>
<section class="footer_bottom">学院section>
footer>
body>
html>