css:頁面布局：.分析網頁布局，尋找共性標簽，公共部分為頁眉和背景插入模式：

1.當給定背景圖片與ps不一致時采用，插入路徑後加center使圖片居中布置，避免後面的文本與標簽定位不準。

/*版面概況*/
/*搜索框*/
header{
    width: 100%;
    height: 58px;
    background-color: black;
}
/*橫幅*/
.banner{
    width: 100%;
    background: url("../img/top_banner.jpg")center;
}

2.網頁除開頁眉和橫幅就是文本中心，文本中心分階段布局，先把body分為多個div模塊，定義模塊的尺寸和背景，使頁面功能分區明顯，切記查看源代碼，區塊的界限和銜接

/*中心位置 上部*/
 .container_top{
    height: 482px;
    background-color: white;
}
 /*中心位置 間隔*/
.bian{
    height: 137px;
    background-color: bisque;
}
/*中心位置 中部*/
.container_center_1{
    width: 100%;
    height: 502px;
    background: url("../img/movie_bj.jpg")center;

}
/*中心位置 中部2*/
.container_center_2{
    width: 100%;
    height: 557px;
    background: url("../img/watch_bj.jpg")center;
}
/*中心位置 下部*/
.container_bottom{
    background: url("../img/am_bj.jpg")center;
    width: 100%;
    height: 557px;
}
/*腳本*/
.foot{
    background-color: black;
    width: 1503.2PX ;
    height: 200px;
}

3.區塊間的銜接：區塊間分父子級與兄弟級，父子級為包含和嵌套模式，一般與margin和padding連用，父子級關系影響整個網頁布局；  而兄弟級一般為並列關系一般與float和position連用，一般解決排列問題

/*中間文本 上部*/
.container_top_2{
    background-color: aqua;
    width: 1100px;
    height: 330px;
    margin: auto;
}
.container_top_2 figure{
    background-color:lightgrey;
    width: 248px;
    height: 328px;
    float: left;
    margin-top: 0;
}
.container_top_2 figcaption{
    width: 248px;
    height: 78px;
    text-align: center;
 

.center_1 li:nth-child(5){
    width: 115px;
    height: 32px;
    font-size: 12px;
    background-color: black;
    float: right;
    padding-top: 10px ;
}
.center_1 li:nth-child(2) a,.center_1 li:nth-child(3) a,.center_1 li:nth-child(4) a{
    text-decoration: none;
    width: 107px;
    height: 40px;
    padding-left: 20px;
}

.center_2 li {
    position: absolute;
    left: 300px;
    float: left;

4.分功能，變動塊與不變動塊之間的區別：變動塊就是沒有共性，即區塊存在特性，需要分別詳細布置，不存在繼承性；不變動塊：有共性，可以縮寫布置，實現功能縮寫

/*/!*不變動標簽，次文本為漫威和角色*!/*/
body{
    position: relative;
}
h1:nth-child(1){
    width: 122px;
    height: 46px;
    font-size: 24px;
    position: absolute;
    left: 461px;
    top: 1174px;
}
h1:nth-child(2){
    width: 122px;
    height: 46px;
    font-size: 24px;
    position: absolute;
    left: 461px;
    top: 1754px;
}

.bubian{
    width:115px;
    height: 32px;
    background-color: black;
    text-align: center;
    position: absolute;
    left: 1348px;
    top: 1173px;

}
.bubian a{
    text-decoration: none;
    color: white;
    font-size: 14px;
}
5.整個區塊至中,必須存在父子級關系，定義父級尺寸，在子級裏用margin:atuo;子級（一般為文本和圖片）至中一般在子級裏padding設置或者margin-left或者line-height:文本框高度，一般不建議使用position定義子級區塊，因為定義位置需要先定義父級區塊，會打亂整體布局。

靜態網頁2