在css中,可以使用“background-color”属性设置页面背景色,语法“background-color:颜色值”。background-color属性设置元素的背景颜色,元素背景是元素的总大小,包括填充和边界(但不包括边距)。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
设置页面的背景色
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中很容易实现,也是网页制作的常用方法。
以上就是CSS如何设置页面背景色的详细内容!
- 本站名称:清风资源网
- 本站永久地址:www.mcoxn.com
- 本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,请大家谅解!
- 本站资源解压密码一般都为www.mcoxn.com如发现链接失效,请联系在线客服更新。
- 本站所有代码模板仅供学习交流使用,请勿用于商业用途,及违法侵权行为使用均与本站无关。
- 源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。
- 本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
- 本站所有资源来源于公开互联网搜集和网友投稿提供,仅供个人学习研究使用,若本站收录的内容对您的版权或者利益造成损害,请提供相应的资质证明发邮件至kakbga@qq.com我们将于3个工作日内予以删除。
评论(0)