实训第二天，主要学习CSS
运用div进行框架搭建，Style里进行各类CSS定义
主要做了两个实例
一为彩色拼图，主要是根据div的嵌套，以及float浮动来控制位置
控制位置的还有绝对位置法和相对位置法
彩色拼图
以下为彩色拼图的代码
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <html>
<head>
<meta charset="utf-8">
<title>divwork</title>
<style>
.divA{
width:700px;
height:100px;
}
.divB{
width:700px;
height:300px;
}
.divC{
width:100px;
height:300px;
float:left;
}
.div1{
width:500px;
height:100px;
background-color:red;
float:left;
}
.div2{
width:200px;
height:100px;
background-color:blue;
float:left;
}
.div3{
width:500px;
height:300px;
background-color:yellow;
float:left;
}
.div41{
width:100px;
height:100px;
background-color:red;
float:left;
}
.div42{
width:100px;
height:100px;
background-color:aqua;
float:left;
}
.div43{
width:100px;
height:100px;
background-color:lime;
float:left;
}
.div5{
width:100px;
height:150px;
background-color:pink;
float:left;
}
.div6{
width:100px;
height:150px;
background-color:black;
float:left;
}
</style>
</head>
<body>
<div class="divA">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="divB">
<div class="div3"></div>
<div class="divC">
<div class="div41"></div>
<div class="div42"></div>
<div class="div43"></div>
</div>
<div class="div5"></div>
<div class="div6"></div>
</div>
</body>
</html>
|
注册页面
以下为第二个实例，注册页面，主要是div框架内的form表单，以及对各内容的CSS修饰。
以下为主页源码
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| <html>
<head>
<meta charset="utf-8">
<title>后台注册页面</title>
<link rel="stylesheet" type="text/css" href="Link_Button_p.css"/>
<link rel="stylesheet" type="text/css" href="Div.css"/>
</head>
<body>
<div class="divA">
<img src="images/head.jpg">
</div>
<br>
<div class="divB">
<form action="form_action.asp" method="get">
<div class="divB_0">
<p style="text-align:left;color:red;font-weight:bold;">以下均为必填项</p>
<br>
</div>
<div class="divB_1">
<p>
<p_Head>请填写您的Email地址：</p_Head>
<input type="text" value="" id="email" size="30" style="float:left;margin:1px 20px 1px;">
<p_Tail>此项为必填项，请输入您的Email地址。</p_Tail>
</p>
</div>
<div class="divB_2">
<p>
<p_Head>设置您在当当网的昵称：</p_Head>
<input type="text" value="" id="name" size="30" style="float:left;margin:1px 20px 1px;">
<p_Tail>此项为必填项，请输入您的昵称。</p_Tail>
</p>
</div>
<div class="divB_3">
<p>
<p_Head>设置密码：</p_Head>
<input type="text" value="" id="pwd" size="30" style="float:left;margin:1px 20px 1px;">
<p_Tail>此项为必填项，请输入您的密码</p_Tail>
</p>
</div>
<div class="divB_4">
<p>
<p_Head>再次输入您设置的密码：</p_Head>
<input type="text" value="" id="repwd" size="30" style="float:left;margin:1px 20px 1px;">
<p_Tail>此项为必填项，请再次输入您的密码。</p_Tail>
</p>
</div>
<div class="divB_Fun">
<input type="checkbox" name="vehicle" value="agree" checked="checked" />
我已阅读并同意《<a href="">当当网交易条款</a>》和《<a href="">当当网使用条款</a>》
<br>
<br>
<input type="reset" value="重置" class="FunButton">
<input type="submit" value="注册" class="FunButton">
</div>
</form>
</div>
<br>
<div class="divC">
<img src="images/foot.jpg">
</div>
</body>
</html>
|
以下为链接，按钮和文字的CSS源码
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
|
a{
text-decoration:none;
}
a:link {color:blue;}
a:visited {color:green;}
a:hover {color:red;text-decoration:underline;}
a:active {color:yellow;}
.FunButton{
background-color:rgba(0,0,255,0.5);
border:none;
width:100px;
height:30px;
border-radius: 15px 15px;
margin:0px 20px 0px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
p_Head{
color:black;
font-size:;
width:270px;
height:bold;
background-color:LightCyan;
text-align:right;
text-indent:;
white-space:nowrap;
float:left;
}
p_Tail{
color:red;
font-size:;
width:;
height:;
background-color:;
text-align:left;
font-weight:bold;
white-space:nowrap;
}
|
以下为主体div的css源码
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
|
.divA{
width:830px;
height:;
margin:0 auto;
}
.divB{
width:830px;
height:;
margin:0 auto;
border:1px solid;
}
.divB_1{
width:830px;
height:;
}
.divB_2{
width:830px;
height:;
}
.divB_3{
width:830px;
height:;
}
.divB_4{
width:830px;
height:;
}
.divB_Fun{
width:830px;
height:;
text-align:center;
}
.divC{
width:830px;
height:;
margin:0 auto;
}
|
