列表,表格,表单
项目符号样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >项目符号样式</ title >
< style type="text/css">
ol{
list-style-type: lower-roman;}
/* upper 大写 */
</ style >
</ head >
< body >
< h1 >The Complete Poems</ h1 >
< h2 > Emily Dickinson</ h2 >
< ol >
< li >Life</ li >
< li >Nature</ li >
< li >Love</ li >
< li >Time and Eternity</ li >
< li >The Single Hound</ li >
</ ol >
</ body >
</ html >
|
项目图像
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >项目图像</ title >
< style type="text/css">
ul{
list-style-image: url("images/star.png");}
li{
margin: 10px 0px 0px 0px;}
</ style >
</ head >
< body >
< h1 >Index of Translated Poems</ h1 >
< h2 >Arthur Rimbaud</ h2 >
< ul >
< li >Ophelia</ li >
< li >To Music</ li >
< li >A Dream for Winter</ li >
< li >Vowels</ li >
< li >The Drunken Boat</ li >
</ ul >
</ body >
</ html >
|
标记的定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >标记的定位</ title >
< style type="text/css">
ul{
width: 250px;}
li{
margin: 10px;}
ul.illuminations{
list-style-position: outside;}
ul.season{
list-style-position: inside;}
</ style >
</ head >
< body >
< h3 >Illuminations</ h3 >
< ul class="illuminations">
< li >That idol, black eyes and yellow mop, without parents or court ...</ li >
< li >Gracious son of Pan! Around your forehead crowned with flowerets ...</ li >
< li >When the world is reduced to a single dark wood for our four ...</ li >
</ ul >
< h3 >A Season in Hell</ h3 >
< ul class="season">
< li >Once, if my memory serves me well, my life was a banquet ...</ li >
< li >Hadn't I once a youth that was lovely, heroic, fabulous ...</ li >
< li >Autumn already! - But why regret the everlasting sun if we are ...</ li >
</ ul >
</ body >
</ html >
|
列表快捷方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >列表快捷方式</ title >
< style type="text/css">
ul{
list-style: inside circle;
width: 300px;}
li{
margin: 10px 0px 0px 0px ;}
</ style >
</ head >
< body >
< h1 >Quotes from Edgar Allan Poe</ h1 >
< ul >
< li >I have great faith in fools; self-confidence my friends call it.</ li >
< li >All that we see or seem is but a dream within a dream.</ li >
< li >I would define, in brief, the poetry of words as the rhythmical creation of Beauty.</ li >
</ ul >
</ body >
</ html >
|
空单元格的边框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >空单元格的边框</ title >
< style type="text/css">
td{
border: 1px solid #0088dd;
padding: 15px;}
table.one{
empty-cells: show;}
table.two{
empty-cells: hide;}
</ style >
</ head >
< body >
< table class="one">
< tr >
< td >1</ td >
< td >2</ td >
</ tr >
< tr >
< td >3</ td >
< td ></ td >
</ tr >
</ table >
< table class="two">
< tr >
< td >1</ td >
< td >2</ td >
</ tr >
< tr >
< td >3</ td >
< td ></ td >
</ table >
</ body >
</ html >
|
单元格之间的间隙
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >单元格之间的间隙</ title >
< style type="text/css">
td{
background-color: #0088dd;
padding: 15px;
border: 2px solid #000000;}
table.one{
border-spacing: 5px 15px;}
table.two{
border-collapse: collapse;}
</ style >
</ head >
< body >
< table class="one">
< tr >
< td >1</ td >
< td >2</ td >
</ tr >
< tr >
< td >3</ td >
< td >4</ td >
</ tr >
</ table >
< table class="two">
< tr >
< td >1</ td >
< td >2</ td >
</ tr >
< tr >
< td >3</ td >
< td >4</ td >
</ tr >
</ table >
</ body >
</ html >
|
定义提交按钮样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >定义提交按钮样式</ title >
< style type="text/css">
input{
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 5px 5px 10px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: block;
margin-bottom: 10px;}
input#submit{
color: #444444;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: #b9e4e3;
boakground: -webkit-gradient(linear, left top. left bottom, from(#beeae9),to(#a8cfce));
background: -moz-linear-gradient(top, #beeae9 ,#a8cfce);
background: -o-linear-gradient(top, #beeae9, #a8cfce);
background: -ms-linear-gradient(top, #beeae9, #a8cfce);}
input#submit:hover{
color: #333333;
border: 1px solid #a4a4a4;
border-top: 2px solid #b2b2b2;
background-color: #a0dbc4;
background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9));
background: -o-linear-gradient(top, #a8cfce, #beeae9);
background: -ms-linear-gradient(top, #a8cfce, #beeae9);
}
</ style >
</ head >
< body >
< form >
< input type="submit" value="Register" id="submit"/>
</ form >
</ body >
</ html >
|
定义字段集及其说明的样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >定义字段集及其说明的样式</ title >
< style type="text/css">
*{
font-family: Arial, Verdana, sans-serif;
color: #665544;}
input{
border-bottom: 1px dotted #dcdcdc;
border-top: none;
border-right: none;
border-left: none;
padding: 5px;
width: 280px;
margin-bottom: 20px;}
input:focus{
border: 1px dotted #dcdcdc;
outline: none;}
input#submit{
color: #ffffff;
background-color: #665544;
border: none;
border-radius: 5px;
width: 80px;}
input#submit:hover {
color: #665544;
background-color: #efefef;}
fieldset{
width: 350px;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 20px;
text-align: right;}
legend{
background-color: #efefef;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 10px 20px;
text-align: left;
text-transform: uppercase;}
</ style >
</ head >
< body >
< form >
< fieldset >
< legend >Newsletter</ legend >
< label for="name">Name:</ label >< input type="text" id="name"/>
< label for="email">Email:</ label >< input type="text" id="email"/>
< input type="submit" value="Subscribe" id="submit"/>
</ fieldset >
</ form >
</ body >
</ html >
|
表格控件的对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >表单控件的对齐:问题</ title >
< style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;}
div{
border-bottom: 1px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;}
.title{
float: left;
width: 100px;
text-align: right;
padding-right: 10px;}
.radio-buttons label{
float: none;}
.submit{
text-align: right;}
</ style >
</ head >
< body >
< form action="example.php" method="post">
< div >
< label for="name" class="title">Name:</ label >
< input type="text" id="name" name="name"/>
</ div >
< div >
< label for="email" class="title">Email:</ label >
< input type="email" id="email" name="email"/>
</ div >
< div class="radio-buttons">
< span class="title">Gender:</ span >
< input type="radio" name="gender" id="male" value="M" >
< label for="male">M</ label >
< input type="radio" name="gender" id="female" value="F">
< label for="female">F</ label >< br />
</ div >
< div class="submit">
< input type="submit" value="Register" id="submit"/>
</ div >
</ form >
</ body >
</ html >
|
光标样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >光标样式</ title >
< style type="text/css">
a{
cursor: move}
</ style >
</ head >
< body >
< p >
< a href="http://www.whitmanarchive.org">Walt Whitman</ a >
</ p >
</ body >
</ html >
|