CSS整理
目录
1. 排版
2. 调用css样式
3. CSS文字处理
4. CSS背景使用
5. CSS列表使用
6. CSS边框使用
7. CSS边界使用
8. CSS区块使用
9. CSS背景使用
10. CSS浮动使用
11. CSS定位使用
12. CSS溢出使用
13. CSS滚动条使用
14. CSS链接使用
15. CSS光标的使用
16. CSS中DHTML使用
17. CSS缩放使用
18. CSS滤镜
19. CSS表格
20. CSS构造表单
排版
排版专用标记:<div>与<span>
<div>占用一行，所以多个<div>会换行
<span>占用一行中的一块，因此可多个<span>显示在一行
调用css样式
内嵌式排版样本:
内嵌式排版中所有的样式定义都必须在<style>..</style> 之间,而<style>..</style>又
必须在<head>..</head>之间.
与其功能,又可以分为三种,
1. 标记定义型
2. class 定义型
3. id 定义型
标记定义型格式:
<head>
<style type=”text/css”>
标记名称{属性1:属性值1;属性2:属性值2;}
标记名称{属性1:属性值2;属性2:属性值2;}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
class定义型格式:
<head>
<style type=”text/css”>
.定义名称{属性1:属性值1;属性2:属性值2;}
.定义名称1,.定义名称2{属性1:属性值1;属性2:属性值2;}
</style>
</head>
<body>
<标记名称class=”定义名称”>…</标记名称>
</body>
id 定义型格式:
<head>
<style>
#定义名称{属性1:属性值1;属性2:属性值2;}
#定义名称1,#定义名称2{属性1:属性值1;属性2:属性值2;}
</style>
</head>
<body>
<标记名称id=”定义名称”>…</标记名称>
</body>
排版定义的优先级:
CSS 规定,范围越小,优先级越高.
由小到大排列:
1. 行内
2. class 和id 定义型
3. 标记定义行
id 的优先级高于class 级.
外部排版样式定义:
独立的样式排版:
标记名称{属性1:属性值1;属性2:属性值2;}
.定义名称{属性1:属性值1;属性2:属性值2;}
在<head>…</head>之间使用<link>
格式:
<head>
<link rel=”stylesheet” type=”text/css”href=URL />
</head>
在<head>…</head>之间使用import
格式：
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
CSS文字处理
CSS 中长度与颜色
长度单位说明
in 英寸
cm 公分
mm 公里
cm 以目前字体高度为单位
ex 以小写字母高度为单位（大部分不支持）
pt 1pt/72英寸
pc 1pc/12pt
px 像素（推荐使用）
颜色单位： 说明
十六进制如：color:#ff0000
颜色名称如：color:red
三原色单位如：rgb(255,0,0)
一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。。
每个值域在0－255之间
CSS 中的文字属性
属性名称 属性值 说明
font-style normal 正常显示
italic 斜体
font-variant normal 正常显示
small-caps 将英文大小写字母写调为同宽
font-weight normal 正常显示
bold 粗体
font-size 像素 字体大小
百分比 字体大小
font-family 字体名称 设置字体名称
font属性简化的使用方法：
font:是否斜体是否同宽是否粗体大小字体名称
例如:font:italicbold 200 隶书；
CSS中的文本属性
属性名称 属性值 说明
color 十六进制 颜色
英文名称 颜色
三原色单 位颜色
letter-spacing（字符间隔）
normal 正常显示
word-spacing（单词间隔）
normal 正常显示
white-space normal 文本自动处理换行
pre 换行和空白受保护
nowrap 强制在同一行显示
text-align left 文字靠左
right 文字靠右
center 文字靠中
text-decoration none 正常显示
underline 加上下划线
overline 加顶线
line-through 加删除线
text-indent 长度首行缩进
百分比同上
line-height 像素 行高
数字/百分比行高
text-transform none 正常显示可以包含大，小字符
capitalize字符串第一个字符大写
uppercase设置大写字符
lowercase设置小写字符
vertical-align
sub 设置文字为下标。
super 设置文字为上标。
top 元件往上端靠齐。
middle设置文字是在中线位置。
bottom元件往下端靠齐。
CSS中背景的使用
属性名称 属性值 说明
background-attachment scroll 设置背景图像会随视窗滚动条的移动而移动。
fixed 设置背景图像不会随视窗滚动条的移动而移动。
background-color 十六进制background-color:#ff0000;
英文名称background-color:red;
三原色background-color:rgb(255,0,0)
transparent background-color:transparent;透明
background-image URL background-image:url("bg.jpg")
背景图片
none不设置背景图片
background-position top left 设置背景图案出现在上左方。
topcenter 设置背景图案出现在上方中间。
topright 设置背景图案出现在上右方。
centerleft 设置背景图案出现在中间左方。
centercenter 设置背景图案出现在IE中间。
centerright 设置背景图案出现中间右方。
bottomleft 设置背景图案出现在下左方。
bottom设置背景图案出现在正下方。
bottom right 设置背景图案出现在下右方。
background-repeat repeat 将背景图案填满整个背景。
repeat-x将背景图案在水平方向添满。
repeat-y将背景图案在垂直方向添满。
no-repeat图案只出现一次。
背景图案简化方案：
background:颜色背景图片repeat attachment position
给标题加上一个小图标
H1 {
Padding-left: 20px;
Background: url (bullet.gif) no-repeat leftcenter;
}
如果希望使用百分比而不使用关键字,则0 50%这样就实现了垂直居中
圆顶角
<div class=”box”>
<h2>Headline</h2>
<p>Content</p>
</div>
.box {
Width: 418px;
Background: #ccc url(bottom.gif) no-repeatleft bottom;
}
.box h2 {
Background:url(top.gif) no-repeat left top;
}
如果不希望碰到边界,加上填充.
.box h2 {
Padding:10px 20px 0 20px;
}
.box p {
Padding:0 20px 10px 20px;
}
简单的CSS 阴影效果
<div class="img-wrapper">
<img src="images/dunstan.jpg"width="300" height="300" alt="Dunstan Orchard"/>
</div>
.img-wrapper {
background: url(images/shadow.gif)no-repeat bottom right;
clear: right;
float: left;
position: relative;
margin: 10px 0 0 10px;
}
.img-wrapper img {
display: block;
margin: -5px 5px 5px -5px;
position: relative;
}
CSS中列表的使用
属性名称 属性值 说明
list-style-type none 无符号
disc 实体的小圆点。
circle空心的小圆点。
square实心的小方块。
decimal1,2,3...
lower-romani,ii,iii...
upper-romanI,II,III...
lower-alphaa,b,c,d,e...
upper-alphaA,B,C,D,E...
list-style-position inside 清单项目较往右移。
outside 清单项目正常显示。
list-style-image URL list-style-image:url(lmk.gif)
none不会显示任何图象
清单的简化设置：
list-style:circle inside url("arrow.gif")
1. 内边距与外边距
Ul {
Margin: 0;
Padding: 0;
}
2. 使用图片作为列表图标
Ul {
Margin: 0;
Padding:0;
Width: 200px;
List-style-image:url(images/list.gif);
Line-height: 150%;
}
3. 以背景图片作为项目列表图标
Ul {
List-style-type:none;
}
Li {
Background: url(images/list.gif) no-repeatleft center;
Padding: 0 0 0 25px;
}
4. 内联列表
Ul {
List-style-type:disc;
}
Li {
Display: inline;
}
这里的display 属性是块级值的设置,定义是否要成为块.
Inline 是是内联,block 是区块.
5. 背景图片和内联列表
Ul {
List-style-type: none;
}
Li {
Display:inline;
Background url(images/list.gif) no-repeatleft center;
Margin: 0 0 0 10px;
Padding: 0 0 0 15px;
}
6.垂直导航栏
<div>
<ul>
<li><ahref="#">Drubjs Menu</a></li>
<li><ahref="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><ahref="#">Cola</a></li>
<li><ahref="#">Lemonade</a></li>
<li><ahref="#">Tea</a></li>
<li><ahref="#">Coffee</a></li>
</ul>
</div>
Ul {
List-style-type:none;
Margin:5px;
Padding:2px
Width: 160px;
Font-size: 12px;
}
Li {
Background: #ddd;
Margin: 0;
Padding: 2px 10px;
Border-left: 1px solid #fff;
Border-top: 1px solid #fff;
Border-right: 1px solid #666;
Border-bottom: 1px solid #aaa;
}
7.创建垂直翻转的列表
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Ul a{
Display: block;
Width: 200px;
Height: 40px; /*39px*/
Line-height: 40px; /*39px*/
Color:# 000;
Text-decoration: none;
Background: #94b8E9url(images/pixy-rollover.gif) no-repeat left center; /*left bottom*/
Text-indent: 50px;
}
a:hover {
background-position: right bottom;
}
8.创建水平导航条
ul {
Margin: 0;
Padding: 0 2em;
List-style: none;
line-height: 2.1em;
Width: 720px;
Background: #faa819url(images/mainNavBg.gif) repeat-x;
}
ul li {
float: left;
}
ul a {
color:#fff;
padding: 0 10px;
background: url(images/divider.gif)repeat-y left top;
text-decoration: none;
}
CSS 中边框的使用
属性名称 属性值 说明
border-color 十六进制可依序设置上，右，下，左线颜色
英文名称border-color:red(四边均为红色)
三原色border-color:red green(上下为红色，左右为绿色)
border-color: red green blue(上为红色、左右为绿色、下为蓝色)
border-color: red green blue yellow(上右下左分别为红绿蓝黄)
border-style none 不显示边线
dotted点线
dashed虚线
solid实线
double双线
border-width 长度border-0.2cm0.3cm 0.4cm 0.5cm;
border-1 2 3 4;
简化方案：border:形态长度颜色
例如border:1pxsolid black;
CSS 中边界的使用
padding 属性介绍
属性名称 属性值 说明
padding-bottom 长度/百分比元件下端边线的空隙
padding-left 长度/百分比元件左端边线的空隙
padding-right 长度/百分比元件右端边线的空隙
padding-top 长度/百分比元件上端边线的空隙
简易写法：padding:10px
padding:2px 4px
padding:2px 6px 10px
padding:1px 2px 3px 4px
margin 系列属性介绍
属性名称属性值说明
margin-bottom auto 自动调整空隙
长度/百分比设置下端空隙
margin-left auto 自动调整空隙
长度/百分比设置左端空隙
margin-right auto 自动调整空隙
长度/百分比设置右端空隙
margin-top auto 自动调整空隙
长度/百分比设置上端空隙
简化方案：margin:2px4px
margin:2px 6px 10px
margin:1px 2px 3px 4px
常用网页顶格设置：margin:0;
CSS 中区块的使用
属性名称 属性值 说明
width 像素/百分比 区块的宽度
auto
height 像素/百分比 区块的高度
auto
min-height 像素像素/百分比 区块最小高度
auto
max-height 像素像素/百分比 区块最大高度
auto
min-width 像素像素/百分比 区块最小宽度
auto
max-width 像素像素/百分比 区块最大宽度
auto
CSS 中浮动的使用
属性名称 属性值 说明
float none 正常显示
left 左浮动
right 右浮动
clear none 允许两边浮动
left 不允许左边浮动
right 不允许右边浮动
both 不允许两边浮动
CSS 中定位的使用
属性名称 属性值 说明
position relative 设置区块基准点为左上角
absolute 设置网页的为基准点左上角
static 无设置
left auto 以基准点定位在左边像素/百分比定位在左边
top auto 以基准点定位在上边像素/百分比定位在上边
right auto 以基准点定位在右边像素/百分比定位在右边
bottom auto 以基准点定位在下边像素/百分比定位在下边
数字
z-index auto 数字数字越大越往上层
数字
CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)
CSS 中滚动条的使用
属性名称 属性值 说明
scrollbar-3dlight-color 颜色/十六进 制滚动条亮边框
scrollbar-highlight-color 颜色/十六进制 滚动条3D 界面亮边
scrollbar-face-color 颜色/十六进制 滚动条3D 表面
scrollbar-arrow-color 颜色/十六进制 滚动条方向箭头
scrollbar-shadow-color 颜色/十六进制 滚动条3D 暗边
scrollbar-darkshadow-color 颜色/十六进制 滚动条暗边框
scrollbar-base-color 颜色/十六进制 滚动条基准颜色
scrollbar-track-color 颜色/十六进制 滚动条的拖动区域
CSS 中链接的使用
超链接伪类属性
a:link 表示该超链接文字尚未被点选
a:visited 表示该超链接文字已被点选过
a:active 表示该超链接文字正被点选,但未被放开
a:hover 表示当鼠标停留在文字上
1.给链接加上边框
A:link {
Color: #f00;
Text-decoration: none;
Border-bottom: 1px dashed #333;
Line-height: 150%;
}
2.在文章段落中加上超级链接
A:link {
Color: #f00;
Text-decoration: none;
Border: 1px solid #333;
Background: #ccc;
Padding: 2px;
Line-height: 150%;
}
3. 用背景图象添加记号
A:link {
Color:#f00;
Padding: 0 15px 0 0;
Background:url(images/arrow.gif) no-repeatright center;
}
A:visited {
Color:# 999;
Padding: 0 15px 0 0;
Background:url(images/checkmark.gif)no-repeat right center;
}
4.利用派生来影响链接
P a:link, p a:visited, p a:hover, pa:active {
Color:#f00;
}
Ul a {
Color:# 000;
}
5.利用图片作为下划线
A:link, a:visited {
Color: #666;
Text-decoration:none;
Background: url(images/underline1.gif)repeat-x left bottom;
}
A:hover, a:active {
Background:url(images/underline1-hover.gif);
}
6.突出显示不同类型的链接
.external {
Background:url(images/externalLink.gif)no-repeat right top;
Padding-right: 10px;
}
7.使用属性选择器来做链接
a[href^="http:"] {
background:url(images/externalLink.gif)no-repeat right top;
padding-right: 10px;
}
a[href^="mailto:"] {
background:url(images/email.png) no-repeatright top;
padding-right: 13px;
}
8.创建按钮和翻转
a {
Display: block;
Width: 6em;
Padding: 02.em;
Line-height: 1.4;
Background-color: #94b8e9;
Border: 1px solid black;
Color: #000;
Text-decoration: none;
Text-align: center;
}
a:hover {
background-color: #369;
color:#fff;
}
9.具有图象的翻转
a {
Display: block;
Width: 200px;
Height: 40px;
Line-height: 40px;
Background-color: #94b8e9;
Color: #000;
Text-decoration: none;
Text-indent:50px;
Background: #94b8ea url(images/button.gif)no-repeat left top;
}
A:hover {
Background: #369url(images/button_over.gif) no-repeat left top;
Color: #fff;
}
10.以访问链接样式
<ul>
<li><ahref="http://www.andybudd.com/">Andy Budd'sBlogography</a></li>
<li><ahref="http://www.stuffandnonsense.co.uk/">Stuff andNonsense</a></li>
<li><ahref="http://www.hicksdesign.co.uk/journal/">HicksDesign</a></li>
<li><ahref="http://www.clagnut.com/">Clagnut</a></li>
<li><ahref="http://www.htmldog.com/">HTML Dog</a></li>
<li><ahref="http://adactio.com/journal/">Adactio</a></li>
<li><ahref="http://www.allinthehead.com/">All In TheHead</a></li>
<li><ahref="http://www.markboulton.co.uk/journal/">MarkBoulton</a></li>
<li><ahref="http://www.ian-lloyd.com/">Ian Lloyd</a></li>
</ul>
ul {
list-style:none;
}
li {
margin: 5px 0;
}
li a {
display: block;
300px;
height: 30px;
line-height: 30px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/visited.gif)no-repeat left top;
text-indent: 10px;
}
li a:visited {
background-position: right top;
}
11.纯css 工具提示
<p>
<ahref="http://www.andybudd.com/" class="tooltip">AndyBudd<span> (This website
rocks) </span></a> is a webdeveloper based in Brighton England.
</p>
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover {
font-size: 100%; /* Fixes bug in IE5.x/Win*/
}
a.tooltip:hover span {
display:block;
position:absolute;
top:1em;
left:2em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:# 000;
}
CSS 中光标的使用
属性名称 属性值 说明
cursor auto 默认替换光标
crosshair 光标是十子形
default 光标是箭头
hand/pointer 光标是手形
move 光标是移动的符号
text 输入文字的符号
wait 漏斗
help 帮助
curso:url(“自定义光标.ani”);
CSS 中DHTML 的使用
属性名称 属性值 说明
behavior url DHTML 文件
CSS 中缩放的使用
属性名称 属性值 说明
zoom normal 使用对象的实际尺寸
百分数/浮点实数 放大缩小
CSS 滤镜
Filter 属性
设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。
内联要素要使用该属性，必须先设定对象的height 或width 属性，或者设定position属
性为absolute，或者设定display 属性为block。若要在img 对象上应用shadow 滤镜，可以在该对象img 对象的父容器上应用。
Alpha滤镜的使用
属性值 说明
opacity0-100 对象的亮度
style1,2,3 滤镜的样式
Blur滤镜的使用
属性值 说明
addtrue/false 是否印象派
direction0-360 角度
strength数字 模糊度
Fliph、Flipv 滤镜
无参数值
DropShadow滤镜
属性值 说明
color颜色阴影颜色
offx数字x 坐标偏移
offy数字y 坐标偏移
positivetrue/false 是否建立透明
Glow滤镜
属性值 说明
color颜色发光颜色
strength数字发光厚度
Gray,Invert,Xray 滤镜
无参数值
Shadow滤镜
属性值 说明
color颜色阴影颜色
direction0-360 阴影方向
strength数字
CSS表格
1. 简单表格
table {
auto;
border-collapse:collapse;
margin-left:20px;
border:1px solid black;
}
td,th {
50px;
border:1px solid black;
padding:5px;
background:gold;
text-align:center;
vertical-align:middle;
text-indent:5px;
}
<table>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
<table>
<tr><throwspan="2">1</th><thcolspan="2">2</th></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
2. 行组和列组
table.example1 thead {
background:orange;
color:black;
}
table.example1 tbody {
background:gold;
color:black;
}
table.example1 tfoot {
background:firebrick;
color:white;
}
*.col1 {
background:wheat;
}
*.col2 {
background:gold;
}
*.col3 {
background:orange;
}
*.col4 {
background:tomato;
}
*.col5 {
background:firebrick;
}
*.col6 {
background:black;
color:white;
}
<table class="example1">
<thead>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
</thead>
<tbody>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
<tfoot>
tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
</tfoot>
</table>
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
</colgroup>
<tr><throwspan="2">1</th><th colspan="2">2</th></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
3. 表格选择符
<table class="example1">
<thead>
<tr>
<th class="t1">1</th>
<th class="t2">2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
<tfoot>
<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
</tfoot>
</table>
4. 分隔的边框
table {
border-collapse:separate;
}
td,th {
50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
}
.boxed-table {
border:1px solid black;
}
.boxed-cells td {
border:1px solid black;
}
.boxed-cells td.x {
border:none;
}
<h2>封装的表格</h2>
<table class="boxed-table"cellspacing="5">
<tr><tdrowspan="2">1</td><tdcolspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td></td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格</h2>
<table class="boxed-cells"cellspacing="5">
<tr><tdrowspan="2">1</td><tdcolspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td></td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格和表格</h2>
<table class="boxed-tableboxed-cells" cellspacing="5">
<tr><tdrowspan="2">1</td><tdcolspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td></td><td> </td><td
class="x">11</td></tr>
</table>
5. 重复的边框
table {
border-collapse:collapse;
}
td,th {
50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
}
.boxed-table {
border:1px solid black;
}
.boxed-cells td {
border:1px solid black;
}
.boxed-cells td.x {
border:none;
}
<h2>封装的表格</h2>
<table class="boxed-table"cellspacing="0">
<tr><tdrowspan="2">1</td><tdcolspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td></td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格</h2>
<table class="boxed-cells"cellspacing="0">
<tr><tdrowspan="2">1</td><tdcolspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td></td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格和表格</h2>
<table class="boxed-tableboxed-cells" cellspacing="0">
<tr><tdrowspan="2">1</td><tdcolspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td></td><td> </td><td
class="x">11</td></tr>
</table>
6. 隐藏和删除单元格、行、列
table {
border-collapse:separate;
}
td,th {
50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
border:1px solid black;
}
.hidden {
visibility:hidden;
}
.delete {
display:none;
}
<table>
<colgroup>
<col class="hidden delete"/>
</colgroup>
<tr><tdclass="delete">1</td><td>2</td><td>3</td><td>4</td></tr>
<tr>
<tdclass="hidden">5</td>
<tdclass="hidden">6</td>
<td>7</td>
<td>8</td>
</table>
7. 垂直对齐数据
.x {
vertical-align:middle;
}
CSS 构造表单
1.表单标签的使用
<label for=”name”>姓名: <inputtype=”text” name=”name” id=”name” />
2.去掉默认的表单间隔
Form {
Margin: 0;
Padding: 0;
}
3.给文本框添加漂亮的边框
Input,textarea {
Border: 3px double #333;
}
4.给下拉菜单设置背景色
select {
background:red;
}
5.给文本区域添加滚动条
textarea {
SCROLLBAR-FACE-COLOR: #333;
SCROLLBAR-HIGHLIGHT-COLOR: #666;
SCROLLBAR-SHADOW-COLOR: #333;
SCROLLBAR-3DLIGHT-COLOR: #999;
SCROLLBAR-ARROW-COLOR: #999;
SCROLLBAR-TRACK-COLOR: #000;
SCROLLBAR-DARKSHADOW-COLOR: #000;
}
6.表单外边框设置fieldset legend
Fieldset {
Margin:0 0 10px 0;
Padding: 5px;
Border: 1px solid #333;
}
Legend {
Background-color: #ddd;
Margin:0;
Padding: 5px;
Border-style: solid;
Border- 1px;
Border-color: #fff #aaa #666 #fff;
}
Fieldset {
Background: #ddd;
}
7.结构化表单布局
<form id="regForm">
<fieldset>
<legend>登陆信息</legend>
<div class="dataAreafrist">
<label for="username"> 用户名： </label><inputtype="text"
id="username"class="input" />
</div>
<div class="dataArea">
<label for="password"> 密码： </label><inputtype="text"
id="password"class="input" />
</div>
<div class="dataArea">
<labelfor="passwordVerify"> 确认密码： </label><input
type="text"id="passwordVerify" class="input" />
</div>
</fieldset>
<fieldset>
<legend>个人信息</legend>
<div class="dataAreafrist">
<label for="nickname"> 昵称： </label><inputtype="text"
id="nickname" />
</div>
<div class="dataArea">
<label for="email"class="hint"> 电子邮件： </label><input
type="text" id="email"/>
</div>
<div class="subArea">
<input type="submit"value="注册" /><input type="button"
value="返回" />
</div>
</fieldset>
</form>
#regForm fieldset {
padding:0 20px 10px;
border:0;
border-top:1px #d0d0bf solid;
}
#regForm legend {
padding:0 10px;
font-weight:bold;
}
#regForm .dataArea {
padding:2px 0;
}
#regForm .frist {
padding:8px 0 2px;
}
#regForm .subArea input {
padding:1px 4px;
}
#regForm label {
110px;
text-align:right;
float:left;
}