HTML5 页面布局【结合案例】

新布局的意义

语义化
HTML5 可以让很多更语义化的结构化代码标签代替大量无意义的 div 标签

1. 这种语义化的特性提升了网页的质量和语义

2. 减少了以前用于CSS 调用的class 和 id 属性

对搜索引擎的友好 新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好

 

 额外补充点：新巩固

index.html 

    
    
    
    
    


    

        

            
            

                Home
                Course
                Actual
                Plan
                FAQ
                Notes
            
        
  
    
    

        

            

            

            

        
    
    

        

            
            
Recent  Course
            

                
Hyper Text Markup Language
                
HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.
                

            
            

                
Cascading Style Sheets
                
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
                

            
            

                
JavaScript
                
JavaScript is a high-level, dynamic, untyped, and interpreted programming language.
                

            
            

                
AngularJS
                
AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...
                

            
        
        

            
Welcome to Massive Open Online Course!
            
We provide the latest knowledge to help you cope with the changing world!
            
            
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.
            
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.
        
    
    

        

            
Copyright © 2016 imooc.com All Rights Reserved.
            
                
                
                
            
        
    

style.css 

/* 重置样式 通配符*/
*{
    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;
}
/*  标签表示一段用户应该对其没有什么其他解释的文本字符。
要从正常的上下文抽取这些字符时，通常要用到这个标签。*/
.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

}

效果图：