靜態網頁2

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定義子級區塊，由於定義位置須要先定義父級區塊，會打亂總體佈局。