正文
精通CSS+DIV基础总结(二)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
上一篇我们已经总结了部分CSS+DIV相关知识，这篇我们接着总结，从下边几个方面学习一下：
一，我们看如何设置网页的背景，顾名思义背景可以通过颜色和图片来设置，下边我们看一下如何设置：
颜色的设置非常简单，就是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>
对于图片的设置，我们可以通过属性background-image来设置，当然我们还可以设置他的位置，重复次数等等，看这个例子：
<html>
<head>
<title>背景水平重复</title>
<style>
<!--
body{
padding:0px;
margin:0px;
}
.topbanner{
background-image:url(bg2.jpg);/* 背景图片 */
background-repeat:repeat-x;/* 水平方向重复 */
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
<td class="topbanner"><img src="banner2.jpg" border="0"></td>
<!-- 配上banner图片 -->
</tr>
</table>
</body>
<html>
二，下边我们看表格与表单的制作，首先看一下表格的制作，主要是利用<table>,<caption>,<tr>,<th>,<td>几个标签来，制作来说相对简单，当然加上CSS和javascript，XML，Ajax来说就非常复杂了。这里看下边简单制作的例子：
<html>
<head>
<title>年度收入</title>
<style>
<!--
.datalist{
border:1px solid #429fff;/* 表格边框 */
font-family:Arial;
border-collapse:collapse;/* 边框重叠 */
}
.datalist caption{
padding-top:3px;
padding-bottom:2px;
font:bold 1.1em;
background-color:#f0f7ff;
border:1px solid #429fff;/* 表格标题边框 */
}
.datalist th{
border:1px solid #429fff;/* 行、列名称边框 */
background-color:#d2e8ff;
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
text-align:center;
}
.datalist td{
border:1px solid #429fff;/* 单元格边框 */
text-align:right;
padding:4px;
}
-->
</style>
</head>
<body>
<table class="datalist">
<caption>年度收入 2004 - 2007</caption><!--添加表头-->
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">拨款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope="row">捐款</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope="row">投资</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope="row">募捐</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
<tr>
<th scope="row">销售</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope="row">杂费</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope="row">总计</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
</body>
</html>
2，表单是我们提交个人信息的，也是网页经常出现的一条，我们通过一个常用表单的例子来学习：
<html>
<head>
<title>表单</title>
<style>
<!--
form{
border: 1px dotted #AAAAAA;
padding: 1px 6px 1px 6px;
margin:0px;
font:14px Arial;
}
input{/* 所有input标记 */
color: #00008B;
}
input.txt{/* 文本框单独设置 */
border: 1px inset #00008B;
background-color: #ADD8E6;
}
input.btn{/* 按钮单独设置 */
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
padding: 1px 2px 1px 2px;
}
select{
width: 80px;
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}
textarea{
width: 200px;
height: 40px;
color: #00008B;
background-color: #ADD8E6;
border: 1px inset #00008B;
}
-->
</style>
</head>
<body>
<form method="post">
<p>请输入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p>
<p>请选择你最喜欢的颜色:<br>
<select name="color" id="color">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="yellow">黄</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>
<p>请问你的性别:<br>
<input type="radio" name="sex" id="male" value="male" class="rad">男<br>
<input type="radio" name="sex" id="female" value="female" class="rad">女</p>
<p>你喜欢做些什么:<br>
<input type="checkbox" name="hobby" id="book" value="book" class="check">看书
<input type="checkbox" name="hobby" id="net" value="net" class="check">上网
<input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡觉</p>
<p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p>
</form>
</body>
</html>
效果如图：
三，下边我们看一下一些浏览器中的特殊元素：
1，超链接特效：对于一些超链接，鼠标放上去会变色，并且会改变鼠标的形状，CSS如何设置，看这个例子：
<html>
<head>
<title>动态超链接</title>
<style>
<!--
body{
background:url(bg9.gif);/* 页面背景图片 */
margin:0px; padding:0px;
cursor:pointer;
}
.chara1{
font-size:12px;
background-color:#90bcff;/* 导航条的背景颜色 */
}
.chara1 td{
text-align:center;
}
a:link{/* 超链接正常状态下的样式 */
color:#005799;/* 深蓝 */
text-decoration:none;/* 无下划线 */
}
a:visited{/* 访问过的超链接 */
color:#000000;/* 黑色 */
text-decoration:none;/* 无下划线 */
}
a:hover{/* 鼠标经过时的超链接 */
color:#FFFF00;/* 黄色 */
text-decoration:underline;/* 下划线 */
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="1" cellspacing="0">
<tr><td><img src="banner3.jpg" border="0"></td></tr>
</table>
<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">
<tr>
<td><a href="#">首页</a></td>
<td><a href="#">心情日记</a></td>
<td><a href="#">Free</a></td>
<td><a href="#">一起走到</a></td>
<td><a href="#">从明天起</a></td>
<td><a href="#">纸飞机</a></td>
<td><a href="#">下一站</a></td>
</tr>
</table>
</body>
</html>
效果图：
2，当有出现帮助按钮时，我们希望将鼠标形状变为与众不同的，就是有特效的，看这个例子：
<html>
<head>
<title>鼠标变幻超链接</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#efe5e2;
}
table.banner{
background:url(banner2_bg.jpg) repeat-x;
width:100%;
}
table.links{
background:url(button3_bg.jpg) repeat-x;
font-size:12px;
width:100%
}
a{
width:80px; height:32px;
padding-top:10px;
text-decoration:none;
text-align:center;
background:url(button3.jpg) no-repeat;/* 超链接背景图片 */
}
a:link, a visited{color:#2d2d26;}
a:hover{
color:#FFFFFF;
text-decoration:none;
background:url(button4.jpg) no-repeat;/* 变换背景图片 */
}
a.help:hover{/* “帮助”按钮的样式 */
cursor:help;/* 变幻鼠标形状 */
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="banner">
<tr><td><img src="banner2_left.jpg" border="0"></td></tr>
</table>
<table cellpadding="0" cellspacing="0" class="links">
<tr><td><a href="#">首页导读</a><a href="#">推荐版面</a><a href="#">推荐文章</a><a href="#">收藏夹</a><a href="#">我的信箱</a><a href="#">休闲娱乐</a><a href="#" class="help">帮助</a></td></tr>
</table>
</body>
</html>
3，文本过多，需要设置滚动条，看这个例子的设置：
<html>
<head>
<title>页面滚动条</title>
<style>
<!--
body{/* 页面滚动条 */
background-color:#efe5e2;
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #34547E;
scrollbar-base-color: #FF0000;/* 基调颜色 */
scrollbar-darkshadow-color: #1D4272;
scrollbar-face-color: #CFDFF4;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #5380BA;
}
.largetext {/* 文本框滚动条 */
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #8BA9CF;
scrollbar-darkshadow-color: #436DA3;
scrollbar-face-color: #34547E;
scrollbar-highlight-color: #E6ECF4;
scrollbar-shadow-color: #000000;
}
.largetext1 {scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #8BA9CF;
scrollbar-darkshadow-color: #436DA3;
scrollbar-face-color: #34547E;
scrollbar-highlight-color: #E6ECF4;
scrollbar-shadow-color: #000000;
}
.largetext11 {scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #8BA9CF;
scrollbar-darkshadow-color: #436DA3;
scrollbar-face-color: #34547E;
scrollbar-highlight-color: #E6ECF4;
scrollbar-shadow-color: #000000;
}
-->
</style>
</head>
<body>
<textarea name="textarea" cols="50" rows="6" class="largetext11">
.largetext {
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #8BA9CF;
scrollbar-darkshadow-color: #436DA3;
scrollbar-face-color: #34547E;
scrollbar-highlight-color: #E6ECF4;
scrollbar-shadow-color: #000000;
}
</textarea>
<p>
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。
</p>
</body>
</html>
效果图：
四,在制作使用菜单,我以百度的首页为例子,通过这个例子学习一下:
<html>
<head>
<title>百度——全球最大中文搜索引擎</title>
<style type="text/css">
td,p{font-size:12px;}
p{width:600px; margin:0px; padding:0px;}
.ff{font-family:Verdana; font-size:16px;}
#navigation{
margin:0px auto;
font-size:12px;
padding:0px;
border-bottom:1px solid #00c;
background:#eee;
width:600px;height:18px;
}
#navigation li{
float:left;/* 水平菜单 */
list-style-type:none;/* 不显示项目符号 */
margin:0px;padding:0px;
width:67px;
}
#navigation li a{
display:block;/* 块显示 */
text-decoration:none;
padding:4px 0px 0px 0px;
margin:0px;
}
#navigation li a:link, #navigation li a:visited{
color:#0000CC;
}
#navigation li a:hover{/* 鼠标经过时 */
text-decoration:underline;
background:#FFF;
padding:4px 0px 0px 0px;
margin:0px;
}
#navigation li#h{width:56px;height:18px;}/* 左侧空间 */
#navigation li#more{width:85px;height:18px;}/* “更多”按钮 */
#navigation .current{/* 当前页面所在 */
background:#00C;
color:#FFF;
padding:4px 0px 0px 0px;
margin:0px;
font-weight:bold;
}
</style>
</head>
<body>
<center><br><img src="http://www.baidu.com/img/logo.gif"><br><br><br><br>
<div id="navigation">
<ul>
<li id="h"></li>
<li><a href="#">资 讯</a></li>
<li class="current">网 页</li>
<li><a href="#">贴 吧</a></li>
<li><a href="#">知 道</a></li>
<li><a href="#">MP3</a></li>
<li><a href="#">图 片</a></li>
<li id="more"><a href="#">更 多 >></a></li>
</ul>
</div>
<p style="height:44px;"> </p>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="92"></td>
<td><form><input type="text" name="wd" class="ff" size="35">
<input type="submit" value="百度搜索"></form></td>
<td width="92" valign="top"><a href="#">搜索帮助</a><br><a href="#">高级搜索</a></td>
</tr>
</table>
</center>
</body>
</html>
效果图:
五,对于CSS的滤镜作用,主要是通过对一些图片设置一些滤镜效果,来更加符合我们的要求,先看一下有哪些功能:
下边为简单说明：
1、滤镜：Alpha
语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
说明：
Opacity：起始值，取值为0～100, 0为透明，100为原图。
FinishOpacity：目标值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、滤镜：blur
语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
说明：
Add：一般为1，或0。
Direction：角度，0～315度，步长为45度。
Strength：效果增长的数值，一般5即可。
例子：filter:Blur(Add="1",Direction="45",Strength="5")
3、滤镜：Chroma
语法：STYLE="filter:Chroma(Color = color)"
说明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color="#FFFFFF")
4、滤镜：DropShadow
语法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
说明：Color:#rrggbb格式，任意。
Offx：X轴偏离值。
Offy：Y轴偏离值。
Positive：1或0。
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、滤镜：FlipH
语法：STYLE="filter:FlipH"
例子：filter:FlipH
6、滤镜：FlipV
语法：STYLE="filter:FlipV"
例子：filter:FlipV
7、滤镜：glow
语法：STYLE="filter:Glow(Color=color, Strength=strength)"
说明：
Color：发光颜色。
Strength：强度(0－100)
例子：filter:Glow(Color="#6699CC",Strength="5")
8、滤镜：gray
语法：STYLE="filter:Gray"
例子：filter:Gray
9、滤镜：invert
语法：STYLE="filter:Invert"
例子：filter:Invert
10、滤镜：mask
语法：STYLE="filter:Mask(Color=color)"
例子：filter:Mask (Color="#FFFFE0")
11、滤镜：shadow
语法：filter:Shadow(Color=color, Direction=direction)
说明：
Color：#rrggbb格式。
Direction：角度，0－315度，步长为45度。
例子：filter:Shadow (Color="#6699CC", Direction="135")
12、滤镜：wave
语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
说明：
Add：一般为1，或0。
Freq：变形值。
LightStrength：变形百分比。
Phase：角度变形百分比。
Strength：变形强度。
例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、滤镜：Xray
语法：STYLE="filter:Xray"
例子：filter:Xray
对于滤镜的功能是微软为增强浏览器的功能而特意开发的并整合到IE浏览器中的集合。只使用于IE浏览器中！所以有必要的话，还需要我们学习PS的使用。
综上为CSS+DIV总结的第二篇，也是我们在开发中经常使用的。这里我把上次我学习总结的与HTML为主的博客链接网页制作基础学习——HTML+CSS ，结合学习会更好。
