html框架怎么添加背景颜色_随笔

html框架怎么添加背景颜色方法：

一、网页单色背景 - TOP

1、如果纯颜色的网页背景，只需要对body设置background背景颜色即可

body{background:#FFF}

设置网页背景为白色

二、规律背景图片 - TOP

1、从上到下渐变横向相同背景

渐变从上到下宽度全屏背景效果截图

这种网页背景只需要切出1像素宽，高度合适的图片作为背景素材，如下图

切出这样一个竖条图片素材作为背景素材

body{background:#FFF url(bg.gif) repeat-x 0}

这样设置这个图片为背景图片靠网页顶部水平平铺，背景为白色，这里注意根据你的图片路径设置好引入图片路径。

2、水平平铺类背景图片

原理和渐变平铺相同，也是切出一竖条后作为Body背景水平平铺实现，这样就全屏网页背景铺满。

代码和第1种相同，只是图片不同而已。对body设置背景图片水平平铺。

三、不规律大图背景

假如这张背景图片为：bg.jpg

设置CSS代码：

body{background: url(bg.jpg) no-repeat center 0}

代码解释：设置这个图片为网页背景，通常不平铺（no-repeat），水平居中，靠上显示

四、头部背景图片和底部背景图片内容多少高度可增减头部底部背景不变 - TOP

两种常见头部和底部不同背景图片技巧设置布局方法。

1、头部和版权图片

这种直接将头部背景图片设置为body背景居中靠上显示，底部版权地方DIV设置宽度100%；同时设置此背景图片或背景颜色。

body{background: url(bg.jpg) no-repeat center 0}

#footer{margin:0 autowidth:100%background: url(ft-bg.jpg) no-repeat center 0}

这样即可实现头部底部背景不同，同时不受内容多少高度影响。

2、网页靠顶部上背景图与固定底部靠下背景图

而靠底部背景图片远超出了版权底部盒子高度。

这样的结构上下不同图片，不随中间内容增高减少影响背景布局，通常对html标签和body设置背景即可实现。

假如顶部深蓝背景图片为“top.jpg”,底部浅蓝背景图片为“foot.jpg”

DIV CSS设置网页背景关键CSS代码：

html{background: url(top.jpg) no-repeat center 0}

body{background: url(foot.jpg) no-repeat center bottom}

设置深蓝背景图片为html背景水平居中靠上；设置浅蓝背景图片为body背景图片水平居中靠下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>

<head>

BODY {

MARGIN: 0px

background:#00ffff

}

.style1 {

color: #FF0000

font-weight: bold

}

</style>

</head>

<tr>

test

</div>

</td>

</tr>

<tr>

<td>

<tr>

<td>

</tr>

</table>

测试，测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试理。

</td>

</tr>

</table>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7501815.html

html框架怎么添加背景颜色

发表评论

评论列表（0条）