新布局的意义
语义化
HTML5 可以让很多更语义化的结构化代码标签代替大量无意义的 div 标签1. 这种语义化的特性提升了网页的质量和语义
2. 减少了以前用于CSS 调用的class 和 id 属性
对搜索引擎的友好 新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好
额外补充点：新巩固
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5 页面布局</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header>
<div class="container">
<a href="./index.html"><img src="./images/logo.png" alt="logo"></a>
<nav>
<a class='Home active' href="#">Home</a>
<a class='Course' href="#">Course</a>
<a class='Actual' href="#">Actual</a>
<a class='Plan' href="#">Plan</a>
<a class='FAQ' href="#">FAQ</a>
<a class='Notes' href="#">Notes</a>
</nav>
</div>
</header>
<section class="banner">
<ul>
<li class="left"><a href="#"><img src="./images/banner/banner1.jpg" alt="1"></a></li>
<li class="active"><a href="#"><img src="./images/banner/banner2.jpg" alt="2"></a></li>
<li class="right"><a href="#"><img src="./images/banner/banner3.jpg" alt="3"></a></li>
</ul>
</section>
<section class="main">
<aside>
<!-- <samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签 -->
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
<dd><img src="./images/Course/05_05.png" alt="1"></dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
<dd><img src="./images/Course/06_04.png" alt="2"></dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
<dd><img src="./images/Course/09_07.png" alt="3"></dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
<dd><img src="./images/Course/02_09.png" alt="4"></dd>
</dl>
</aside>
<article>
<h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="./images/article.jpg" alt="11">
<p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
</article>
</section>
<footer>
<div class="container">
<p>Copyright © 2016 imooc.com All Rights Reserved.</p>
<span>
<img src="./images/icon/qq.png" alt="1">
<img src="./images/icon/sina.png" alt="2">
<img src="./images/icon/weichat.png" alt="3">
</span>
</div>
</footer>
</body>
</html>/* 重置样式 通配符*/
*{
font-family: Arial;
font-size:14px;
margin: 0;
padding: 0;
border: none
}
ul li {
list-style: none
}
a{
text-decoration: none
}
/* 头部 */
header{
position: relative;
height: 80px;
background-color: #000000;
}
header:after{
position: absolute;
bottom:0;
left: 0;
width: 100%;
height: 7px;
content: '';
background-color: #d6d6d6;
}
header > .container{
position: relative;
z-index: 1;
width:1260px;
margin: 0 auto
}
header > .container > a{
display: block;
float: left;
margin:5px 25px
}
header > .container > nav{
float: right;
}
header > .container > nav > a{
display: block;
float: left;
text-align: center;
font-size: 24px;
color: #ffffff;
width:100px;
height: 73px;
line-height: 73px;
}
header > .container > nav > a.Home {background-color: #433b90}
header > .container > nav > a.Course {background-color: #017fcb}
header > .container > nav > a.Actual {background-color: #78b917}
header > .container > nav > a.Plan {background-color: #feb800}
header > .container > nav > a.FAQ {background-color: #f27c01}
header > .container > nav > a.Notes {background-color: #d40112}
header > .container > nav > a:hover,
header > .container > nav > a.active{
padding-bottom: 7px
}
/* Banner */
.banner{
position: relative;
background-color: #eaeaea;
}
.banner:after{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
content: '';
background-color: #d6d6d6;
}
.banner > ul{
position: relative;
width: 1260px;
height: 538px;
margin: 0 auto;
padding-top: 10px;
}
.banner > ul > li{
position: absolute;
width: 610px;
height: 300px;
overflow: hidden;
}
.banner > ul > li.active{
z-index: 2;
top: 37px;
left: 0;
right: 0;
width: 960px;
height: 460px;
margin: auto;
border: 1px solid #ffffff;
box-shadow: 20px 20px 22px rgba(0, 0, 0, .2)
}
.banner > ul > li.left{
z-index: 1;
top: 0;
bottom: 0;
left: 0;
margin: auto;
box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35)
}
.banner > ul > li.right{
z-index: 1;
top: 0;
bottom: 0;
right: 0;
margin: auto;
box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35)
}
.banner > ul > li > a > img{
position: absolute;
left: -30%;
height: 100%;
}
/* main */
.main{
position: relative;
width: 1200px;
height: 500px;
margin: 37px auto 0 auto
}
.main > aside{
float: left;
width: 450px;
}
.main > aside > h1{
font-size: 30px;
font-weight: lighter;
margin-bottom: 23px;
}
/* <samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。
要从正常的上下文抽取这些字符时，通常要用到这个标签。*/
.main > aside > h1 >samp{
font-size: 30px;
color: #7c7c7c;
}
.main > aside > dl{
position: relative;
display: block;
margin-bottom: 23px;
height: 74px;
}
.main > aside > dl > dt{
position: absolute;
top: -1px;
left: 92px;
font-size: 16px;
font-weight: bold;
line-height: 16px;
text-decoration: underline;
}
.main > aside > dl > dd:first-of-type{
position: absolute;
left: 0;
}
.main > aside > dl > dd:first-of-type{
position: absolute;
top: 20px;
left: 92px;
}
.main > article{
float: right;
width: 700px;
overflow: hidden;
}
.main > article > h1{
font-size: 30px;
font-weight: lighter;
margin-bottom: 23px;
}
.main > article > h1 >samp{
font-size: 30px;
color: #7c7c7c;
}
.main > article > p,
.main > article > img{
margin-bottom: 20px
}
footer{
position: relative;
background-color: #000000;
}
footer:before{
position: absolute;
z-index: -1;
top: -6px;
left: 0;
width: 100%;
height: 7px;
content: '';
background-color: #d6d6d6;
}
footer > .container{
width: 1200px;
margin: 0 auto;
height: 63px;
}
footer > .container > p{
float:left;
line-height: 63px;
color: #ffffff;
font-size: 14px;
}
footer > .container > span{
float: right;
margin: 14px 30px
}
