精通CSS.DIV网页式样与布局（四） ——页面背景
日期：2014-05-17 浏览次数：21293 次
精通CSS.DIV网页样式与布局（四） ——页面背景
咱们这回来讲讲CSS如何对网页的背景进行设置，网页的背景是整个网页的重要组成部分，他直接决定了整个网页的风格和色调。我们这回主要来学习如何用CSS来设置背景颜色、背景图片。
背景颜色：CSS设置背景颜色特别简单：background-color：采用十六进制的设计方法。
背景颜色不但可以给网页设置背景颜色，同样也可以给网页分块。我们接下来看，用背景色给页面分块：我们看代码：
<html>
<head>
<title>利用背景颜色分块</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#ffebe5; /* 页面背景色 */
}
.topbanner{
background-color:#fbc9ba; /* 顶端banner的背景色 */
}
.leftbanner{
width:22%; height:330px;
vertical-align:top;
background-color:#6d1700; /* 左侧导航条的背景色 */
color:#FFFFFF;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
<td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td>
</tr>
<tr>
<td class="leftbanner">
<br><br>首页<br><br>分类讨论
<br><br>谈天说地<br><br>精华区
<br><br>我的信箱<br><br>休闲娱乐
<br><br>立即注册<br><br>离开本站
</td>
<td class="mainpart">正文内容...</td>
</tr>
</table>
</body>
</html>
在整个body中采用了table来进行分块，我们来看显示效果：
这里还要说一点的是：正文咱们并没有给他设置颜色，然而在topbanner和leftbanner中却设置了颜色，所以没有设置颜色的就继承body的，设置了之后就覆盖原来的。通过背景色和对整个网页进行分块，能达到很好的排版的效果。
CSS不但可以设置页面的背景颜色，同样可以给背景添加图片：我们看一下代码
<html>
<head>
<title>背景图片</title>
<style>
<!--
body{
background-image:url(03.jpg); /* 页面背景图片 */
}
-->
</style>
</head>
<body>
</body>
</html>
我们看一下这个03.jpg：
然后我们看一下效果：
我们看到这个小图片在横向和纵向都布满了这个页面，效果很好。
我们刚才看到了一个小小的图片的重复能布满整个页面，但是倘若我们不希望这样重复，我们应该怎么设置:
<html>
<head>
<title>背景重复</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(bg1.jpg); /* 背景图片 */
background-repeat:repeat-y; /* 垂直方向重复 */
background-color:#0066FF; /* 背景颜色 */
}
-->
</style>
</head>
<body>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
