6.1 使用CSS设置字体样式
6.1.1.字体类型
语法：
font-fanily:字体名称；
参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。
说明：用 font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如 Word中的“字体”列表中所列出的字体名称。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{
font-family: fangsong;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p>校训：爱国明治，敢为人先</p>
</body>
</html>
}
6.1.2.字体大小
语法：
font-size:绝对尺寸|相对尺寸
参数：绝对字体尺寸是根据对象字体进行调节的，包括xx-mall、x-small, small、c dium, large, x-large 和xx-large的7种字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者em 以相对父元素大小的方式来设置字体尺寸。
h1{
font-size: 20px;
}运行结果：
6.1.3.字体粗细
语法：
font-weight:bold | number | normal | lighter | 100-900
参数：nomal 表示默认字体，bold 表示粗体，bolder 表示粗体再加粗，lighter 表示比默认字体还细，100~900共分为9个层次 (100、200、…、900，数字越小字体越细、数字越大字体越粗，数字值400 相当于关键字 normal,700 等价于 bold)。
font-weight: 500;
6.1.4.字体倾斜
语法：
font-style:normal | italic | obinque
参数：normal 为“正常”（默认值），italic为“斜体”，oblique 为“倾斜体”。
font-style: italic;运行结果：
6.2 使用CSS设置文本样式
6.2.1.文本水平对齐方式
语法：
text-align:left | right | center | justify;
参数：left 为左对齐，right 为右对齐，center 为居中，justify 为两端对齐。
text-align: center;运行结果：
6.2.2.行高
语法：
line-heighi:length | normal;
参数：length 为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其百
分比取值是基于字体的高度尺寸。normal 为默认行高。
p{
line-height: 200%;
}运行结果：
6.2.3.文本的修饰
语法：
text-decoration:underline | blink | overline | line-through | none;
参数：underline 为下划线，blink 为闪烁，overline 为上划线，line-through 为贯穿线，none 为无装饰。
说明：设置对象中文本的修饰。对象a、u、ins 的文本修饰默认值为 underline。对象stike、8、del的默认值是 line-through。如果应用的对象不是文本，则此属性不起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{
font-family: fangsong;
font-size: 20px;
font-weight: 500;
font-style: italic;
text-align: center;
}
p{
line-height: 200%;
}
#id1{
font-weight: 900;
}
#id2{
font-style: italic;
}
#id3{
text-decoration: underline;
}
#id4{
text-decoration: overline;
}
#id5{
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p>校训：<span id="id1">爱国明治</span><span id="id2"> 敢为人先</span>
</p>
<p><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应
用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、
服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！</p>
</body>
</html>
运行结果：
6.2.4.段落首行缩进
语法：
text-indent:length;
参数：length 为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{
font-family: fangsong;
font-size: 20px;
font-weight: 500;
font-style: italic;
text-align: center;
}
/*p{
line-height: 200%;
}*/
#id1{
font-weight: 900;
}
#id2{
font-style: italic;
}
#id3{
text-decoration: underline;
}
#id4{
text-decoration: overline;
}
#id5{
text-decoration: line-through;
}
.first{
text-indent: 2em;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p class="first">校训：<span id="id1">爱国明治</span><span id="id2"> 敢为人先</span>
</p>
<p><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应
用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、
服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！</p>
</body>
</html>
运行结果：
6.2.5.首字下沉
在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉是指设置段落的第一行第一个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。
在CSS样式中伪对象“：first-letter”可以实现对象内第一个字符的样式控制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{
font-family: fangsong;
font-size: 20px;
font-weight: 500;
font-style: italic;
text-align: center;
}
/*p{
line-height: 200%;
}*/
#id1{
font-weight: 900;
}
#id2{
font-style: italic;
}
#id3{
text-decoration: underline;
}
#id4{
text-decoration: overline;
}
#id5{
text-decoration: line-through;
}
.first{
text-indent: 2em;
}
.second:first-letter{
float: left;
font-size: 2em;
font-weight: 900;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p class="first">校训：<span id="id1">爱国明治</span><span id="id2"> 敢为人先</span>
</p>
<p class="second"><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应
用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、
服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！</p>
</body>
</html>
运行结果：
6.2.6.字符间距
letter-spacing 为字符间距属性，可以设置字符与字符间的距离。
语法：
letter-spacing:length | normal;
参数：nomal 为默认值，定义字符间的标准间距。length 表示由浮点数字和单位标识体组成的长度值，允许为负值。
说明：该属性定义元素中字符之间插入多少空白符。如果指定为长度值，会调整字符之间的标准间距，允许指定负长度值，这会让字符之间变得更拥挤。
.first{
letter-spacing: 2em;
}运行结果：
6.2.7.文本的截断
语法：
text-overflow:clip | ellipsis;
参数：dlip定义简单的裁切，不显示省略标记。ellipsis定义当文本溢出时显示省略标记。
说明：设置文本的截断。要实现溢出文本显示省略号的效果，除了使用 text-ovelow属性以外，还必须配合 white-space: nowrap （强制文本在一行内显示）和 overflow: hidden（溢出内容为隐藏）同时使用才能实现。
.second{
width: 300px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}运行结果：
6.2.8.文本的颜色
语法：
color: 颜色;
h1{
color: #ff0000;
}运行结果：
6.2.9.文本的背景颜色
语法：
background-color:color | transparent
参数：color用于指定颜色。transparent 表示透明的意思，也是浏览器的默认值。
说明：background-color 不能继承，默认值是transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才能看见。
.first{
background-color: #ff0000;
}运行结果：
6.3 使用CSS设置图像样式
图像是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受网页所要传达给浏览者的信息。本节详细介绍 CSS 设置图像风格样式的方法，包括图像的边框、图像的缩放和背景图像等。
6.3.1.设置图像边框
图像的边框就是利用 border 属性作用于图像元素而呈现的效果。在HTML 中可以直接通过<img>标记的 border 属性值为图像添加边框，属性值为边框的粗细，以像素为单位， 从而控制边框的粗细。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{
font-family: fangsong;
font-size: 20px;
font-weight: 500;
font-style: italic;
text-align: center;
}
/*p{
line-height: 200%;
}*/
#id1{
font-weight: 900;
}
#id2{
font-style: italic;
}
#id3{
text-decoration: underline;
}
#id4{
text-decoration: overline;
}
#id5{
text-decoration: line-through;
}
.first{
text-indent: 2em;
}
.second:first-letter{
float: left;
font-size: 2em;
font-weight: 900;
}
.first{
letter-spacing: 2em;
}
.second{
width: 300px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
h1{
color: #ff0000;
}
.first{
background-color: #ff0000;
}
img{
/*上 右 下 左*/
border: #ff0000 #00ff00 #0000ff #000000;
border-width: 5px 10px 15px 20px;
border-style: solid dashed dotted dotted;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p class="first">校训：<span id="id1">爱国明治</span><span id="id2"> 敢为人先</span>
</p>
<p class="second"><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应
用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、
服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！
</p>
<img src="img/school.jpg"/>
</body>
</html>
运行结果：
6.3.2.图像缩放
使用CSS样式控制图像大小，可以通过width和height两个属性来实现。需要注意的是，当widh 和 height两个属性的取值使用百分比数值时，它是相对于父元素而言的，如果将这两个属性设置为相对于body的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也发生相应变化的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{
font-family: fangsong;
font-size: 20px;
font-weight: 500;
font-style: italic;
text-align: center;
}
/*p{
line-height: 200%;
}*/
#id1{
font-weight: 900;
}
#id2{
font-style: italic;
}
#id3{
text-decoration: underline;
}
#id4{
text-decoration: overline;
}
#id5{
text-decoration: line-through;
}
.first{
text-indent: 2em;
}
.second:first-letter{
float: left;
font-size: 2em;
font-weight: 900;
}
.first{
letter-spacing: 2em;
}
.second{
width: 300px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
h1{
color: #ff0000;
}
.first{
background-color: #ff0000;
}
img{
/*上 右 下 左*/
border: #ff0000 #00ff00 #0000ff #000000;
border-width: 5px 10px 15px 20px;
border-style: solid dashed dotted dotted;
}
#img2{
width: 400px;
height: 300px;
}
#img3{
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p class="first">校训：<span id="id1">爱国明治</span><span id="id2"> 敢为人先</span>
</p>
<p class="second"><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应
用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、
服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！
</p>
<img src="img/school.jpg" id="img1"/><br />
<img src="img/school.jpg" id="img2"/><br />
<img src="img/school.jpg" id="img3"/><br />
</body>
</html>
运行结果：
6.3.3.设置背景图像
语法：
background-image:url(url) | none;
参数：url 表示要插人背景图像的路径。nome 表示不加载图像。
说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到<body标签中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{
font-family: fangsong;
font-size: 20px;
font-weight: 500;
font-style: italic;
text-align: center;
}
/*p{
line-height: 200%;
}*/
#id1{
font-weight: 900;
}
#id2{
font-style: italic;
}
#id3{
text-decoration: underline;
}
#id4{
text-decoration: overline;
}
#id5{
text-decoration: line-through;
}
.first{
text-indent: 2em;
}
.second:first-letter{
float: left;
font-size: 2em;
font-weight: 900;
}
.first{
letter-spacing: 2em;
}
.second{
width: 300px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
h1{
color: #ff0000;
}
.first{
background-color: #ff0000;
}
img{
/*上 右 下 左*/
border: #ff0000 #00ff00 #0000ff #000000;
border-width: 5px 10px 15px 20px;
border-style: solid dashed dotted dotted;
}
#img2{
width: 400px;
height: 300px;
}
#img3{
width: 50%;
height: 50%;
}
#bg{
width: 660px;
height: 330px;
background-color: #ff0000;
background-image: url(img/xiaohui.png);
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p class="first">校训：<span id="id1">爱国明治</span><span id="id2"> 敢为人先</span>
</p>
<p class="second"><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应
用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、
服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！
</p>
<img src="img/school.jpg" id="img1"/><br />
<img src="img/school.jpg" id="img2"/><br />
<img src="img/school.jpg" id="img3"/><br />
<div id="bg"></div>
</body>
</html>
运行结果：
#bg{
width: 660px;
height: 330px;
background-color: #ff0000;
background-image: url(img/xiaohui.png);
}运行结果：
6.3.4设置背景重复
语法：
backyround-repeat;repeat | no-repeat | repeat-x | repeat-y;
参数：repeat 表示背景图像在水平和垂直方向平铺，是默认值；repeat-x 表示背景图像在水平方向平铺；repeat-y 表示背景图像在垂直方向平铺；no-repeat 表示背景图像不平铺。
说明：设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。
background-repeat: no-repeat;
运行结果：
6.3.5.背景图像定位
语法：
background-position:length | length;
background-position:positional | position;
参数：length 为百分比或者由数字和单位标识符组成的长度值，position 可取 top、center、bottom、left、right 之一。
说明：利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用空格隔开，一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有 left、 center、right,关键宇在垂直方向的主要top、center、botom。水平方向和垂直方向相互搭配使用。
6.3.5.1.使用关键字进行背景定位
关键字参数的取值及含义如下：
top:将背景图像同元素的顶部对齐。
bottom:将背景图像同元素的底部对齐。
Left:将背景图像同元素的左边对齐。
right:将背景图像同元素的右边对齐。
center：将背景图像相对于元素水平居中或垂直居中。
background-position: center bottom;运行结果:
6.3.5.2.使用长度进行背景定位
长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置。
background-position: 100px 50px;运行结果：
6.3.5.3.使用百分比进行背景定位
使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置对齐。也就是说，百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长度单位定位时，使用背景图像和元素的左上角为对齐基点。
background-position: 30% 50%;运行结果：
6.4 使用CSS设置表单样式
在前面章节中讲解的表单设计大多采用表格布局，这种布局方法对表单元素的样式控制
很少，仅局限于功能上的实现。本节主要讲解如何使用 CSS 控制和美化表单。
6.4.1.使用CSS修饰常用的表单元素
表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。下面通过一个实例讲解怎样使用 CSS 修饰常用的表单元素。
6.4.1.1.修饰文本域
文本域主要用于采集用户在其中编辑的文字信息，通过 CSS样式可以对文本域内的字
体、颜色以及背景图像加以控制。下面以示例的形式介绍如何使用 CSS 修饰文本域。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本域修饰</title>
<style type="text/css">
.text1{
border: 1px solid #f60;
color: #03c;
}
.text2{
border: 1px solid #c3c;
height: 20px;
background: #fff url(img/password_bg.JPG)left center no-repeat;
padding-left: 20px;
}
.area{
border: 1px solid #00f;
overflow: auto;
width: 99%;
height: 100px;
}
</style>
</head>
<body>
<p>
<input type="text" name="normal" />
默认样式的文本域
</p>
<p>
<input name="chbd" type="text" value="请输入的文字显示为蓝色" class="text1"/>
改变边框颜色和文字颜色的文本域，看起来更加醒目
</p>
<p>
<input name="pass" type="password" class="text2"/>
增加了背景图片的文本域，看起来更加形象直观
</p>
<p>
<textarea name="cha" cols="45" rows="5" class="area">
</textarea>
</p>
</body>
</html>运行结果：
6.4.1.2.修饰按钮
按钮主要用于控制网页中的表单。通过 CSS 样式可以对按钮的字体、颜色、边框以及
背景图像加以控制。下面以示例的形式介绍如何使用 CSS 修饰按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮修饰</title>
<style type="text/css">
.btn01{
background: url(img/btn_bg02.jpg) repeat-x;
border: 1px solid #f00;
height: 32px;
font-weight: bold;
padding-top: 2px;
cursor: pointer; /*鼠标样式为手形*/
font-size: 14px;
color: #fff;
}
.btn02{
background: url(img/btn_bg03.jpg) 0 0 no-repeat;
width: 107px;
height: 37px;
border: none;
font-size: 14px;
font-weight: bold;
color: #d84700;
cursor: pointer;
}
</style>
</head>
<body>
<p>
<input name="button" type="submit" value="提交"/>
默认风格的“提交”按钮
</p>
<p>
<input name="button01"
class="btn01" id="button01"value="自适应宽度按钮"/>
自适应宽度按钮
</p>
<p>
<input name="button02" type="submit"
class="btn02" id="button02" value="免费注册" />
固定背景图片的按钮
</p>
</body>
</html>运行结果：
6.4.1.3.制作登录表单
在许多网站中都有登录表单的应用，而登录表单所包含的元素通常有用户名文本域、密码域、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。
6.5 综合案例——商城的注册页面
6.5.1.前期准备
/*页面全局样式——父元素*/
*{
margin: 0; /*所有元素外边距为0*/
padding: 0; /*所有元素内边距为0*/
}
/*设置页面整体样式*/
body{
font-size: 12px; /*文字大小为12px*/
color: #333; /*深灰色文字*/
}
ol,ul{
list-style: none; /*列表无修饰*/
}
img,a{ /*列表无修饰*/
border:0; /*图像无边框*/
text-decoration: none; /*链接无修饰*/
}
a{ /*设置超链接样式*/
color: #333; /*深灰色文字*/
}
a:hover{ /*设置悬停链接样式*/
color: #f00; /*红色文字*/
}
/*会员注册表单的样式(与登录表单的样式共享)*/
.loginLogo{ /*注册页面中的网站标志样式*/
width: 100%;
border-bottom:#efefef 1px solid; /*底部边框1px，深灰色实线*/
}
.logoMid{ /*顶部容器的样式*/
width: 1040px;
margin: 0 auto; /*容器水平居中对齐*/
}
.loginReg{ /*顶部注册提示的样式*/
height: 30px;
line-height: 30px; /*行高等于设定的高度，内容垂直方向居中对齐*/
text-align: right; /*文本水平居中对齐*/
}
.loginReg a{ /*顶部注册提示链接的样式*/
color: #7bc144; /*绿色文字*/
}
.loginReg a:hover{ /*顶部注册提示悬停链接的样式*/
color: #f00; /*红色文字*/
}
.loginBox{ /*注册内容区域的样式*/
width: 1050px;
margin: 30px auto; /*上下边距为30px,水平居中对齐*/
position: relative; /*相对定位*/
}
.regList{ /*注册内容项的样式*/
height: 35px;
line-height: 35px; /*行高等于设定的高度，内容垂直方向居中对齐*/
margin-bottom: 30px; /*上下边距30px*/
position: relative; /*相对定位*/
}
.regList label{ /*注册内容项提示标签的样式*/
float: left;
width: 105px;
margin-right: 10px; /*右外边距10px*/
text-align: right;
color: #999;
}
.regList input{ /*注册表单中input元素的样式*/
margin: 0; /*外边距0px*/
padding: 0; /*内边距0px*/
width: 283px;
height: 33px;
border: 3738400 1px solid; /*1px深红色实线边框*/
background: #feffdf; /*浅黄色背景*/
padding-left: 3px; /*左内边距3px*/
}
.regList.yanzheng{ /*注册表单中验证码区域的样式*/
width: 135px;
}
.regList img{ /*注册表单中验证码图片的样式*/
left: 260px; /*距离容器左侧为260px*/
position: absolute; /*绝对定位*/
}
.xieyi{ /*注册表单中注册协议的样式*/
height: 30px;
line-height: 30px; /*行高等于设定的高度，内容在垂直方向上居中对齐*/
font-size: 12px;
padding-left: 115px; /*左内边距115px*/
}
.xieyi input{ /*注册表单中接受协议复选框的样式*/
position: relative; /*相对定位*/
top: 2px; /*距离容器顶部为2px*/
}
.xieyi a{ /*注册表单中协议链接的样式*/
color: #7BC144; /*绿色文字*/
}
.reg{ /*注册表单中注册按钮的样式*/
padding-left: 115px; /*左内边距115px*/
margin-top: 10px; /*上外边距10px*/
}
.chengnuo{ /*注册表单中右侧的样式*/
position: absolute; /*绝对定位*/
right: 0;
top: 0;
}
6.5.2.制作页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>会员注册</title>
<link type="text/css" href="css/style.css" rel="stylesheet"/>
</head>
<body style="background: #fff;">
<div class="loginLogo">
<div class="logoMid">
<h1 class="logo" style="height: 71px;padding-top: 10px;">
<a href=" ">
<img src="img/logo.jpg"
</a>
</h1>
<div class="loginBox">
<img src="img/chengguo.jpg" width="295" height="393" class="chengnuo"/>
<form action="#.html"method="get" class="reg">
<div class="regList">
<label><span class="red">*</span>用户名</label>
<input type="text"/><span style="color: #999;">请输入邮箱/用户名/手机号</span>
</div>
<div class="regList">
<label><span class="red">*</span>请设置密码</label>
<input type="text"/>
</div>
<div class="regList">
<label><span class="password">*</span>请确认密码</label>
<input type="text"/>
</div>
<div class="regList">
<label><span class="red">*</span>验证码</label>
<input type="text" class="yanzheng"/>
<img src="img/yanzheng.jpg" width="103" height="38"/>
</div>
<div class="xieyi">
<input type="checkbox"/>
我已经阅读并同意商城用户注册协议
</div>
<div class="reg">
<input type="image" src="img/reg.jpg"/>
</div>
</form>
<div class="clears"></div>
</div>
</div>
</div>
</body>
</html>运行结果：
