CSS整理

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-width:0.2cm0.3cm 0.4cm 0.5cm;

border-width: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;

width: 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 {

width:auto;

border-collapse:collapse;

margin-left:20px;

border:1px solid black;

}

td,th {

width: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 {

width: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>&nbsp;</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>&nbsp;</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>&nbsp;</td><td

class="x">11</td></tr>

</table>

5. 重复的边框

table {

border-collapse:collapse;

}

td,th {

width: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>&nbsp;</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>&nbsp;</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>&nbsp;</td><td

class="x">11</td></tr>

</table>

6. 隐藏和删除单元格、行、列

table {

border-collapse:separate;

}

td,th {

width: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-width: 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 {

width:110px;

text-align:right;

float:left;

}

 

你可能感兴趣的