一、实验目的
掌掌握表单与控件；
掌掌握CSS样式。
二、实验步骤及设计说明
实验1：
熟悉span的用法，主要是给动词和名称设置标签，动词设置相同类名，名词设置相同类名，设置样式就可以了。
实验2：
主要是文本的排版，自上而下实现，标题拥有相同格式，正文拥有相同格式，相同格式的部分采用相同的样式，设置三倍行距，在最外层加一个框，实验就完成了。
实验3：
根据实验要求，左边的文字为右对齐，为了实现点击左边文字，自动聚焦到后面文本框，采用label标签，由于label标签不是块标签，为了设置宽度和右对齐，将其强制转换为块标签。实现光标在文本框时，文本框背景为粉红色，通过hover实现。实现在同一行排列时，后面提示文本那一块会自动转入下一行，采用，左浮动，实现它们位于同一行。实现下拉框通过select标签，背景图片通过background，再设置一下行距，实验就基本完成了。
三、实验结果与结论：
实验1
实验2
实验3
Form表设置了action=""，method="GET"，输入结果会在网址栏显示。
附录：程序源程序（在此贴上网页源代码）
实验1：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>英语词汇</title>
<style type="text/css">
.blue {
color:blue;
}
.green {
color:green;
}
</style>
</head>
<body>
<p>
<span>
<span class="blue">Chinese President Xi Jinping Tuesday </span> <span class="green"> idvowed </span> to continue to <span class="green">serve</span> the <span class="blue">people </span> at the <span class="blue">closing meeting</span> of the 13th <span class="blue">National People's Congress (NPC) annual session</span>.
</span>
</p>
</body>
</html>
实实验2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#styl{
width:510px;
border:solid 1px;
padding: 10px;
margin:0px auto;
}
#next{
color: gray;
text-align: center;
}
.word{
text-indent:2em;
}
h1{
font-family:"黑体";
line-height: 3;
}
</style>
</head>
<body>
<div id="styl">
<div align="center">
<img src="img/moon.jpg" width="510px" height="286"/>
</div>
<h1 align="center">水调歌头▪明月几时有</h1>
<p align="center">[宋] 苏轼</p>
<p id="next">
<em>丙辰中秋，欢饮达旦，大醉，作此篇。兼怀子由。</em>
</p>
<div>
<p class="word">
<b>
明月几时有，把酒问青天。不知天上宫阙，今夕是何年。
我欲乘风归去。惟恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。
</b>
</p>
<p class="word">
<b>
转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
</b>
</p>
</div>
<hr/>
<div align="center">
<img src="img/next2.jpg"/>
</div>
<h1 align="center">念奴娇·赤壁怀古</h1>
<p align="center">[宋] 苏轼</p>
<p class="word">
<b>
大江东去，浪淘尽，千古风流人物。故垒西边，人道是，
三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。
</b>
</p>
<p class="word">
<b>
遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，
谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。
</b>
</p>
</div>
</body>
</html>
实验3：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>exp2_3</title>
<style type="text/css">
body {
font-size: 14px;
}
.div {
width: 500px;
margin: 0px auto;
border: 1px solid;
padding-left: 45px;
padding-top: 10px;
}
.color {
color: red;
}
.gray {
color: gray;
}
#b2 {
background: antiquewhite;
border: solid gray 1px;
height: 40px;
width: 180px;
margin-left: 7px;
}
#write1,
#write2,
#write3,
#write4 {
height: 30px;
}
input[type=text]:hover {
background: pink;
}
input[type=tel]:hover {
background: pink;
}
input.kt {
margin-left: 150px;
margin-bottom: 20px;
width: 157px;
height: 54px;
background-image: url(../img/new_btn.png);
background-position: -410px -0px;
}
input[type=submit]:hover {
background-image: url(../img/new_btn.png);
background-position: -566px -0px;
cursor: pointer;
}
.s1 {
text-align: right;
display: inline‐block;
width: 100px;
line‐height: 30px
}
#l1 {
display: inline-block;
width: 150px;
text-align: right;
float: left;
position: relative;
top: 10px;
height: 30px;
}
#l2 {
position: relative;
top: 8px;
}
.r1,.r2,.r3,.r4,.r5,.r6 {
height: 50px;
}
.r3,.r4,.r5,.r6 {
clear: both;
}
#boy,
#girl {
position: relative;
top: 9px;
}
.frame1,
.frame2 {
border: solid 1px;
float: left;
position: relative;
top: 4px;
color: gray;
width: 90px;
height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="div">
<form method="get" action="#">
<div class="r1">
<label for="write1" id="l1">
<span class="s1">
<span class="color">*</span>
<span>我的手机号码:</span>
</span>
</label>
<input type="tel" id="write1" name="phone" placeholder="输入手机" pattern="^1[3‐9]\d{9}" required="required" autofocus="autofocus"/>
<input type="button" id="b1" value="免费获取验证码" />
</div>
<p class="gray" style="padding-left: 150px;position:relative;top:-5px;">完成注册后，手机号码为你的微博登录号。</p>
<div class="r2" style="display: inline-block;">
<div style="float:left" ;>
<label for="write2" id="l1">
<span class="s1">
<span class="color" >*</span>
<span>创建密码:</span>
</span>
</label>
<input type="text" id="write2" name="password"/>
</div>
<div style="float:left;position:relative; top:-15px;">
<p id="b2">为了你的账户安全，请使用与其它网络不同的密码。</p>
</div>
</div>
<div class="r3">
<label for="write3" id="l1">
<span class="s1">
<span class="color">*</span>
<span>昵称:</span>
</span>
</label>
<input type="text" id="write3" placeholder="输入昵称" required="required" name="name"/>
</div>
<div class="r4">
<label id="l1">
<span class="s1">
<span class="color">*</span>
<span>性别:</span>
</span>
</label>
<input type="radio" id="boy" value="男" name="sex" checked="checked"/>
<label for="boy" id="l2">男</label>
<input type="radio" id="girl" value="女" name="sex" />
<label for="girl" id="l2">女</label>
</div>
<div class="r5">
<label id="l1">
<span class="s1">
<span class="color">*</span>
<span>所在地:</span>
</span>
</label>
<div class="frame1">
<select id="city">
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="广州市">广州市</option>
<option value="深圳市">深圳市</option>
</select>
</div>
<div class="frame2" style="margin-left: 5px;">
<select id="region">
<option value="海淀区">海淀区</option>
<option value="东城区">东城区</option>
<option value="海珠区">海珠区</option>
<option value="越秀区">越秀区</option>
<option value="福田区">福田区</option>
<option value="黄埔区">黄埔区</option>
</select>
</div>
</div>
<div class="r6">
<label for="write4" id="l1">
<span class="s1">
<span class="color">*</span>
<span>手机验证码:</span>
</span>
</label>
<input type="text" id="write4" name="kaitong" style="width: 60px;" />
</div>
<input type="submit" class="kt" value="" />
</form>
</div>
</body>
</html>