静态网页2

Posted 2020-10-10

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定义子级区块，因为定义位置需要先定义父级区块，会打乱整体布局。