CSS设置页面背景色

来源：互联网发布：mysql批量insert bug 编辑：程序博客网时间：2024/06/11 08:49

CSS设置页面背景色

设置页面的背景色

CSS通过设置body标记的background-color属性来实现，背景色主要突出页面的主题，跟前景的文字颜色相配合。

具体的设定方法和文字颜色值的设定一样，可以采用十六进制、RGB各分量，或者颜色的英文单词等。

<span style="font-size:24px;"><html>       <head>              <title>                     背景颜色              </title>              <style>                     <!--                     body{                     background-color:#5b8a00;                     margin:0px;                     padding:0px;                     color:#c4f762;              }                     p{                     font-size:15px;                     padding-left:10px;                     padding-top:8px;                     line-height:120%;              }                     span{                     font-size:80px;                     font-family:黑体;                     float:left;                     padding-right:5px;                     padding-left:10px;                     padding-top:8px;              }                     -->              </style>       </head>             <body>              <img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg"style="float:right;">              <span>春</span>              <p>季，地球的北半球开始倾向太阳，收到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁移，离开越冬地向繁衍地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p>              <p>对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，收到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁移，离开越冬地向繁衍地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p>       </body></html></span>

代码如上，可以看到背景颜色为深绿色，文字的颜色为亮绿色，再加上图片以及文字内容本身，将春天万物复苏显示了出来。

用背景色给页面分块

Background-color属性不仅可以设置页面的背景颜色，几乎所有的HTML元素的背景色都可以通过它来设定。

因此，很多网页都通过设定不同的背景色来实现分块的效果。

<span style="font-size:24px;"><html>       <head>              <title>                     利用背景颜色分块              </title>              <style>                     <!--                     body{                     padding:0px;                     margin:0px;                     background-color:#ffebe5;              }                     .topbanner{                     background-color:#fbc9ba;              }                     .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="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.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>       </body></html></span>

代码如上，顶端的Banner、左侧的导航条和中间的正文部分分别运用了3中不同的背景颜色，实现了页面分块的目的，这种分块的方法在网页制作中经常使用。

这里，顶端的Banner图片可以是一副，从左到右颜色渐变的图片，颜色由本身的图片过渡到页面的背景颜色，就会显示十分自然，这种效果在Photoshop中很容易实现，也是网页制作的常用方法。

0 0