第六章元素应用CSS

最新推荐文章于 2025-05-28 23:39:14 发布

喜欢败给现实

最新推荐文章于 2025-05-28 23:39:14 发布

阅读量871

点赞数 21

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/2301_81053053/article/details/143082341

版权

6.1 使用CSS设置字体样式

字体的基本样式

属性	说明	属性	说明
font-family	设置字体的类型	font-weight	设置字体的粗细
font-size	设置字体的大小	font-style	设置字体的倾斜

6.1.1.字体类型

字体具有两方面的作用：一是传递语义功能，二是有美学效应。

font-family：字体名称；

参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。

说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows 系

统，其字体名就如 Word 中的“字体”列表中所列出的字体名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.1使用CSS设置字体样式 */
			h1{
				/* 6.1.1字体类型 */
				font-family: fangsong;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
	</body>
</html>

6.1.2.字体大小

在设计页面时，通常使用不同大小的字体来突出要表现的主题。

格式如下：

font-sire：绝对尺寸1相对尺寸；

参数：绝对字体尺寸是根据对象字体进行调节的，包括 xx-mall、x-small, small、 me

dium, large, x-large和 xx-large的7种字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不

同的设备下，这些关键字可能会显示不同的字号。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.1使用CSS设置字体样式 */
			h1{
				/* 6.1.2字体大小 */
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
	</body>
</html>

6.1.3.字体粗细

语法如下：

font-weight: boldI numberI nomalllighterl100-900；

参数：normal 表示默认字体，bold 表示粗体，bolder 表示粗体再加粗，lighter 表示比默认字体还

细，100~900共分为9个层次(100、200、.....、900,数字越小字体越细、数字越大字体越粗，数字

值 400 相当于关键字 normal,700 等价于 bold)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.1使用CSS设置字体样式 */
			h1{
				/* 6.1.3字体粗细 */
				font-weight: 500;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
	</body>
</html>

6.1.4.字体倾斜

语法如下：

font-style:normallitalicloblique;

参数：nomal 为“正常”（默认值），italic为“斜体”，oblique为“倾斜体”。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.1使用CSS设置字体样式 */
			h1{
				/* 6.1.4字体倾斜 */
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
	</body>
</html>

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

语法如下：

text-align:leftl right I center I justify;

参数：left 为左对齐，right 为右对齐，center 为居中，justify 为两端对齐。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.1使用CSS设置字体样式 */
			h1{
				/* 6.2.1文本水平对齐方式 */
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
	</body>
</html>

6.2.2.行高

段落中两行文本之间垂直的距离称为行高。

语法如下：

line-height:lengthl normal;

参数：length 为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其百

分比取值是基于字体的高度尺寸。normal 为默认行高。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.2.2.行高 */
			p{
				line-height: 200%;
			}
		</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.3.文本的修饰.

语法如下：

text-decoration:underlinel blinkl overline I line-through I none;

参数：underline 为下划线，blink 为闪烁，overline 为上划线，line-through 为贯穿线，

none 为无装饰。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.2.3.文本的修饰. */
			#id3{
				text-decoration: underline;
			}
			#id4{
				text-decoration: overline;
			}
			#id5{
				text-decoration: line-through;
			}
		</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.4.段落首行缩进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.2.4.段落首行缩进 */
			.first{
				text-indent: 2em;
			}
		</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.5.首字下沉

在许多文档中经常出现首字下沉的效果，即指设置段落的第一行第一个字的字体变大，并且向下一定的距离。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.2.5.首字下沉  伪类选择器*/
			.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:length I normal;

参数：normal 为默认值，定义字符间的标准间距。length 表示由浮点数字和单位标识符组成的长

度值，允许为负值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.2.6.字符间距 */
			.first{
				letter-spacing: 2em;
			}
		</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.7.文本的截断

语法如下：

text-overflow:clip I ellipsis;

参数：dip定义简单的裁切，不显示省略标记。ellipsis 定义当文本溢出时显示省略标记。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.2.7文本的截断 */
			.second{
				width: 300px;
				height: 20px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		</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.8.文本的颜色

在CSS样式中，对文本增加颜色修饰十分简单。

语法如下：

color：red；

颜色值可以使用多种书写方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.2.8文本的颜色 */
			h1{
				color: #ff0000;
			}
		</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.9.文本的背景颜色

语法如下：

background-color:color I transparent

参数：color 用于指定颜色。transparent 表示透明的意思，也是浏览器的默认值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.2.9文本的背景颜色 */
			.first{
				background-color: #ff0000;
			}
		</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.3 使用CSS设置图像样式

属性	说明	属性	说明
border	设置图像的边框样式	background-repeat	设置背景图像的重复样式
width、height	设置图像的缩放	background-position	设置背景图像的定位
background-image	设置背景图像

6.3.1.设置图像边框

图像的边框就是利用border属性作用于图像元素而呈现的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.3使用CSS设置图像样式 */
			/* 6.3.1设置图像边框 */
			img{
				border: #ff0000 10px solid;
				border-color: #ff0000 #00ff00 #0000ff #000000;
				border-width:  5px 10px 15px 20px;
				border-style: solid dashed dotted double;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" id="img1"/><br/>
		<img src="img/1.jpg" id="img2"/><br/>
		<img src="img/1.jpg" id="img3"/><br/>
	</body>
</html>

6.3.2.图像缩放

使用CSS样式控制图像的大小，可以通过width和height两个属性来实习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.3使用CSS设置图像样式 */
			/* 6.3.2图像缩放 */
			#img2{
				width: 400px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" id="img1"/><br/>
		<img src="img/1.jpg" id="img2"/><br/>
		<img src="img/1.jpg" id="img3"/><br/>
	</body>
</html>

6.3.3.设置背景图像

语法如下：

buckground-image:url(url) I none;

参数：url 表示要插入背景图像的路径。nome 表示不加载图像。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.3使用CSS设置图像样式 */
			/* 6.3.3设置图像背景 */
			body{
				background-color: #ff0000;
				background-image: url(img/2.jpg);
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" id="img1"/><br/>
		<img src="img/1.jpg" id="img2"/><br/>
		<img src="img/1.jpg" id="img3"/><br/>
	</body>
</html>

6.3.4设置背景重复

语法如下：

background-repeat:repeat I no-repeat I repeat-x I repeat-y;

参数：repeat 表示背景图像在水平和垂直方向平铺，是默认值；repeat-x 表示背景图像在水平方向

平铺；repeat-y 表示背景图像在垂直方向平铺；no-repeat 表示背景图像不平铺。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.3使用CSS设置图像样式 */
			#bg{
				width: 660px;
				height: 330px;
				background-color: #ff0000;
				background-image: url(img/3.png);
				/* 6.3.4设置背景重复 */
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" id="img1"/><br/>
		<img src="img/1.jpg" id="img2"/><br/>
		<img src="img/1.jpg" id="img3"/><br/>
		<div id="bg"></div>
	</body>
</html>

6.3.5.背景图像定位

语法如下：

background-position:length I length;

background-position:positional I position;

参数：length 为百分比或者由数字和单位标识符组成的长度值，position 可取 op.center、

bottom、left、right 之一。

6.3.5.1使用关键字进行背景定位
关键字参数的取值及含义如下：

top：将背景图像同元素的顶部对齐。

bottom：将背景图像同元素的底部对齐。

left：将背景图像同元素的左边对齐。

right：将背景图像同元素的右边对齐。

center：将背景图像相对于元素水平居中或垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.3使用CSS设置图像样式 */
			#bg{
				width: 660px;
				height: 330px;
				background-color: #ff0000;
				background-image: url(img/3.png);
				/* 6.3.4设置背景重复 */
				background-repeat: no-repeat;
				/* 6.3.5图像背景定位 */
				/* 6.3.5.1使用关键字进行背景定位 */
				background-position: right center ;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" id="img1"/><br/>
		<img src="img/1.jpg" id="img2"/><br/>
		<img src="img/1.jpg" id="img3"/><br/>
		<div id="bg"></div>
	</body>
</html>

6.3.5.1.使用关键字进行背景定位



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.3使用CSS设置图像样式 */
			#bg{
				width: 660px;
				height: 330px;
				background-color: #ff0000;
				background-image: url(img/3.png);
				/* 6.3.4设置背景重复 */
				background-repeat: no-repeat;
				/* 6.3.5图像背景定位 */
				/* 6.3.5.2使用关键词进行背景定位 */
				background-position: center bottom;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" id="img1"/><br/>
		<img src="img/1.jpg" id="img2"/><br/>
		<img src="img/1.jpg" id="img3"/><br/>
		<div id="bg"></div>
	</body>
</html>

6.3.5.2.使用长度进行背景定位

长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.3使用CSS设置图像样式 */
			#bg{
				width: 660px;
				height: 330px;
				background-color: #ff0000;
				background-image: url(img/3.png);
				/* 6.3.4设置背景重复 */
				background-repeat: no-repeat;
				/* 6.3.5图像背景定位 */
				/* 6.3.5.2使用长度进行背景定位 */
				background-position: 100px 50px;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" id="img1"/><br/>
		<img src="img/1.jpg" id="img2"/><br/>
		<img src="img/1.jpg" id="img3"/><br/>
		<div id="bg"></div>
	</body>
</html>

6.3.5.3.使用百分比进行背景定位

使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置对齐。也就是说，百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长度单位定位时，使用背景图像和元素的左上角为对齐基点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 6.3使用CSS设置图像样式 */
			#bg{
				width: 660px;
				height: 330px;
				background-color: #ff0000;
				background-image: url(img/3.png);
				/* 6.3.4设置背景重复 */
				background-repeat: no-repeat;
				/* 6.3.5图像背景定位 */
				/* 6.3.5.3使用百分比进行背景定位 */
				background-position: 30% 50%;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" id="img1"/><br/>
		<img src="img/1.jpg" id="img2"/><br/>
		<img src="img/1.jpg" id="img3"/><br/>
		<div id="bg"></div>
	</body>
</html>

6.4 使用CSS设置表单样式

6.4.1.使用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/top-bg.png) 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="textI"/>
		改变边框颜色和文字颜色的文本域，看起来更加醒目 
		</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);
				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="button1" type="submit"
			class="btn01" id="button1" value="自适应宽度按钮"/>
			自适应宽度按钮
		</p>
		<p>
			<input name="button2" type="submit"
			class="btn02"id="button2" value="免费注册"/>
			固定背景图片的按钮
		</p>
	</body>
</html>

6.4.1.3.制作登录表单

在许多网站中都有登录表单的应用，而登录表单所包含的元素通常有用户名文本域、密码域、登录

按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录表单的制作</title>
	</head>
		<style type="text/css">
			.login{
				margin: 0 auto;
				width: 280px;
				padding: 14px;
				border: dashed 2px #b7ddf2;
				background: #ebf4fb;
			}
			.login *{
				margin:0;
				padding:0;
				font-family:宋体;
				font-size:12px;
				line-height:1.5em;
			}
			.login h2{
				text-align:center;
				font-size:18px;
				font-weight:bold;
				margin-bottom:10px;
				padding-bottom:5px;
				border-bottom:solid 1px #b7ddf2;
			}
			.login .content{
				padding: 5px;
			}
			.login .frm-cont{
				margin-bottom: 8px;
			}
			.login .username input, .login .password input{
				width:180px;
				height:18px;
				padding:2px 0px 2px 18px;
				border: solid 1px #aacfe4;
			}
			.login .username input{
				background: #fff url(img/username.JPG)no-repeat left center;
			}
			.login .password input{
				background: #fff url(img/lock.JPG)no-repeat left center;
			}
			.login .btns{
				text-align:center;
			}
		</style>
	<body>
		<div class="login">
			<h2>用户登录</h2>
			<div class="content">
				<form action="" method="post">
					<div class="frm-cont username">用户名:
						<label for="username"></label>
						<input type="text" name="username" id="username"/>
					</div>
					<div class="frm-cont password">密&nbsp;&nbsp;码
						<label for="password"></label>
						<input type="password" name="password" id="password"/>
					</div>
					<div class="btns">
						<input type="submit" name="button1" id="button1" value="登录"/>
						<input type="button" name="button2" id="button2" value="注册"/>
					</div>
				</form>
			</div>
		</div>
	</body>
</html>

6.5 综合案例——商城的注册页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会员注册</title>
		<link type="text/css" rel="stylesheet" href="css/6.5综合案例.css"/>
	</head>
	<body style="background: #fff;">
		<div class="loginLogo">
		<div class="logoMid">
		<h1 class="logo" style="height: 71px; padding-top: 10px;">
		<a href="../index.html">
		<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" />
			我已经阅读并同意<a href="#">商城用户注册协议</a>
			</div>
			<div class="reg">
			<input type="image" src="img/reg.jpg"/>
			</div>
			</form>
			<div class="clears"></div>
			</div>
			</div>
			</div>
	</body>
</html>

*{
			margin : 0:				
			padding :0;			
		}
		body{
			font-size: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;
		}
		
		.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;
			position:relative;			
		}
		
		.regList{
			height:35px;
			line-height: 35px;
			margin-bottom:30px;
			position: relative;
		}
		
		.regList label{
			float: left;
			width:105px;
			margin-right: 10px;
			text-align:right;
			color: #999;
		}
		
		 .regList input{
			margin:0;
			padding:0;
			width:283px;
			height:33px;
			border:3738400 1px solid;
			background:#feffdf;
			padding-left: 3px;
		 }
		
		.regList.yanzheng{
			width: 135px;
		}
		
		.regList img{
			left:260px;
			position: absolute;
		}
		.xieyi{
			height:30px;
			line-height:30px;
			font-size:12px;
			padding-left: 115px;
		}
 
		.xieyi input{
			position: relative;
			top:2px;
		}
		
		.xieyi a{
				color:#7BC144;
		}
 
		.reg{
			padding-left:115px;
			margin-top: 10px;
		}
		
		.chengnuo{
			position:absolute;
			right:0;
			top:0;
		}