实训第二天，主要学习CSS
运用div进行框架搭建，
主要做了两个实例
一为彩色拼图，主要是根据div的嵌套，以及float浮动来控制位置
控制位置的还有绝对位置法和相对位置法
彩色拼图
以下为彩色拼图的代码
<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修饰。
以下为源码
<html>
<head>
<meta charset="utf-8">
<title>后台注册页面</title>
<style>
.divA{
width:830px;
height:;
margin:0 auto;
}
.divB{
width:830px;
height:;
margin:0 auto;
}
.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;
}
p_Head{
color:black;
font-size:;
width:270px;
height:bold;
background-color:LightCyan;
text-align:right;
text-indent:;
white-space:nowrap;
}
p_Tail{
color:red;
font-size:;
width:;
height:;
background-color:;
text-align:left;
font-weight:bold;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="divA"><!--头部图片-->
<img src="images/head.jpg">
</div>
<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>
</div>
<div class="divB_1">
<p>
<p_Head style="float:left;">请填写您的Email地址：</p_Head>
<input type="text" value="" id="email" size="30" style="float:left;">
<p_Tail>此项为必填项，请输入您的Email地址。</p_Tail>
</p>
</div>
<div class="divB_2">
<p>
<p_Head style="float:left;">设置您在当当网的昵称：</p_Head>
<input type="text" value="" id="name" size="30" style="float:left;">
<p_Tail>此项为必填项，请输入您的昵称。</p_Tail>
</p>
</div>
<div class="divB_3">
<p>
<p_Head style="float:left;">设置密码：</p_Head>
<input type="text" value="" id="pwd" size="30" style="float:left;">
<p_Tail>此项为必填项，请输入您的密码</p_Tail>
</p>
</div>
<div class="divB_4">
<p>
<p_Head style="float:left;">再次输入您设置的密码：</p_Head>
<input type="text" value="" id="repwd" size="30" style="float:left;">
<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="重置" style="background-color:rgba(0,0,255,0.5);border:none;width:100px;height:30px;">
<input type="submit" value="注册" style="background-color:rgba(0,0,255,0.5);border:none;width:100px;height:30px;">
</div>
</form>
</div>
<div class="divC"><!--尾部图片-->
<img src="images/foot.jpg">
</div>
</body>
</html>
