用css网站布局之十步实录！（九）_div+css布局教程(2)_H5之家

css3技术

用css网站布局之十步实录！（九）_div+css布局教程(2)

字号+ 作者：H5之家来源：H5之家 2015-09-21 18:18 我要评论( )

body class=about 以上css选择器就让li#about,li#about a,的背景向上移动100px，使其显示背景图片的下部。假如我们希望网站头部背景图片也根据body标签的类进行变换，就需修改css的#header为： Example Source Cod

　　以上css选择器就让li#about,li#about a,的背景向上移动100px，使其显示背景图片的下部。
　　假如我们希望网站头部背景图片也根据body标签的类进行变换，就需修改css的#header为：

div css xhtml xml Example Source Code

Example Source Code []

body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}

　　至此就完成了"About"网页的制作,依此类推，修改html中body的类为services/portfolio/contact制作相应html文件并分别保存。
　　在css文件中添加各个网页相应的头部背景图片路径(如services网页的头部背景图片为services.jpg,在css中添加如下代码)：

div css xhtml xml Example Source Code

Example Source Code []

body.services #header {
height: 150px;
background: #db6d16
url(../images/headers/services.jpg);
}

　　然后用超级链接将这些网页连接起来，就组成了一个网站了。