6.1 使用css设置字体样式
在学习HTML时，通常也会使用HTML对文本字体进行一些非常简单的样式设置，而使用css对字体样式进行设置远比HTML灵活、精确得多。
6.1.1 字体类型
字体具有两方面的作用：一是传递语义功能，二是由美学效应。由于不同的字体给人带来不同的风格感受，所以对于网页设计人员来说，首先需要考虑的问题就是准确的选择字体。
css提供font-family属性来控制文本的字体类型
格式如下：
font-family：字体名称；
参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。
说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。
<!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>
<p>爱国明志 敢为人先</p>
</body>
</html>
6.1.2 字体大小
在设计页面时，通常使用不同的字体来突出要表现的主题，在css样式中使用font-size属性设置字体的大小，其值可以是绝对值也可以是相对值。常见的有“px”、“pt”、“em”和“%”等
语法：
font-size：绝对尺寸|相对尺寸；参数：绝对字体尺寸 是根据据对象字体调节的，包括xx-mall、x-small，small、me-dium，large，x-large和xx-large的7中字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者em以相对父元素大小的方式来设置字体尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*6.1使用css设置字体样式*/
h1{
/*6.1.1字体样式*/
font-family:fangsong;
/*6.1.2字体大小*/
font-size:20px;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院校训</h1>
<p>爱国明志 敢为人先</p>
</body>
</html>
6.1.3 字体粗细
css样式中使用font-weight属性设置字体的粗细，它包含normal、bold、bolder、lighter、100、200、300、400、500、600、700、800和900多个属性值。
语法：
font-weight：bold|number|normal|lighter|100-900；参数：normal表示默认字体，bold表示粗体，bolder表示粗体再加粗，lighter表示比默认字体还细，100~900共分9个层次
说明：设置文本的粗细
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*6.1使用css设置字体样式*/
h1{
/*6.1.1字体样式*/
font-family:fangsong;
/*6.1.2字体大小*/
font-size:20px;
/*6.1.3字体粗细*/
font-weight: 500;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院校训</h1>
<p>爱国明志 敢为人先</p>
</body>
</html>
6.1.4 字体倾斜
css中的font-style属性用来设置字体的倾斜。
语法：
font-style：normal|italic|oblique；参数：normal为“正常”，italic为“倾斜”，oblique为“倾斜体”
说明：设置文本字体的倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*6.1使用css设置字体样式*/
h1{
/*6.1.1字体样式*/
font-family:fangsong;
/*6.1.2字体大小*/
font-size:20px;
/*6.1.3字体粗细*/
font-weight: 500;
/*6.1.4字体倾斜*/
font-style:italic;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院校训</h1>
<p>爱国明志 敢为人先</p>
</body>
</html>
6.2 使用css设置文本样式
6.2.1 文本水平对齐方式
使用text-align属性可以设置元素中文本的水平对齐方式
语法：
text-align：left|right | center | justify；参数：left为左对齐，right为右对齐；center未居中，justify为两段对齐；
说明：设置对象中文本的对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*6.1使用css设置字体样式*/
h1{
/*6.1.1字体样式*/
font-family:fangsong;
/*6.1.2字体大小*/
font-size:20px;
/*6.1.3字体粗细*/
font-weight: 500;
/*6.1.4字体倾斜*/
font-style:italic;
/*6.2.1文本水平对齐方式*/
text-align:center;
}
#id1{
/*6.1.3字体粗细*/
font-weight: 500;
}
#id2{
/*6.1.4字体倾斜*/
font-style:italic;
}
p{
/*6.2.2行高*/
}
</style>
</head>
<body>
<h1>江西应用工程职业学院校训</h1>
<p>
校训：
<span id="id1">爱国明志</span>
<span id="id2">敢为人先</span>
</p>
<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、
面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实
创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，
开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html>
6.2.2 行高
段落中两行文本之间垂直的距离成为行高。在HTML中是无法控制行高的，在css央视中，使用line-height属性控制行与行之间的垂直间距
语法:
line-height:length | normal;参数：length为百分比数字或由数值、单位标识符组成的长度值，允许为负值 。其百分比取值是基于字体的高度尺寸。normal为默认行高
说明：设置对象的行高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*6.1使用css设置字体样式*/
h1{
/*6.1.1字体样式*/
font-family:fangsong;
/*6.1.2字体大小*/
font-size:20px;
/*6.1.3字体粗细*/
font-weight: 500;
/*6.1.4字体倾斜*/
font-style:italic;
/*6.2.1文本水平对齐方式*/
text-align:center;
}
#id1{
/*6.1.3字体粗细*/
font-weight: 500;
}
#id2{
/*6.1.4字体倾斜*/
font-style:italic;
}
p{
/*6.2.2行高*/
line-height: 400%;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院校训</h1>
<p>
校训：
<span id="id1">爱国明志</span>
<span id="id2">敢为人先</span>
</p>
<p>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、
面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实
创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，
开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html>
6.2.3 文本的修饰
使用CSS样式可以对文本进行简单的修饰， text属性所提供的text-decoration属性，主要实现文本加下划线、顶线、删除线及文本闪烁等效果。
语法:
text-decoration: underline l blink l overline I line-through I none;
参数:underline为下划线，b1ink为闪烁，overline为上划线，line-through为贯穿线， none为无装饰。
说明:设置对象中文本的修饰。对象a、 u、ins 的文本修饰默认值为underline。对象strike、s、 del 的默认值是line-through。如果应用的对象不是文本，则此属性不起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*6.1使用css设置字体样式*/
h1{
/*6.1.1字体样式*/
font-family:fangsong;
/*6.1.2字体大小*/
font-size:20px;
/*6.1.3字体粗细*/
font-weight: 500;
/*6.1.4字体倾斜*/
font-style:italic;
/*6.2.1文本水平对齐方式*/
text-align:center;
}
#id1{
/*6.1.3字体粗细*/
font-weight: 500;
}
#id2{
/*6.1.4字体倾斜*/
font-style:italic;
}
p{
/*6.2.2行高*/
line-height: 400%;
}
/*6.2.3 文本的修饰*/
#id3{
text-decoration: underline;
}
#id4{
text-decoration: line-through;
}
#id5{
text-decoration: overline;
}
/*6.2.4 段落首行缩进*/
p{
text-indent: 2em;
}
</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 段落首行缩进
首行缩进是指段落的第一行从左向右缩进一定的距离，而首行以外的其他行保持不变，
其目的是便于阅读和区分文章整体结构。
在Web 页面中，将段落的第一行进行缩进，同样是一种最常用的文本格式化效果。在
CSS样式中text-indent属性可以方便地实现文本缩进。可以为所有块级元素应用text-indent，但不能应用于行级元素。如果想把一个行级元素的第一行缩进，可以用左内边距外边距创造这种效果。语法:
text-indent; length;
参数:length为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。 说明:设置对象中的文本段落的缩进。本属应用于整块的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*6.1使用css设置字体样式*/
h1{
/*6.1.1字体样式*/
font-family:fangsong;
/*6.1.2字体大小*/
font-size:20px;
/*6.1.3字体粗细*/
font-weight: 500;
/*6.1.4字体倾斜*/
font-style:italic;
/*6.2.1文本水平对齐方式*/
text-align:center;
}
#id1{
/*6.1.3字体粗细*/
font-weight: 500;
}
#id2{
/*6.1.4字体倾斜*/
font-style:italic;
}
p{
/*6.2.2行高*/
line-height: 400%;
}
/*6.2.3 文本的修饰*/
#id3{
text-decoration: underline;
}
#id4{
text-decoration: line-through;
}
#id5{
text-decoration: overline;
}
/*6.2.4 段落首行缩进*/
p{
text-indent: 2em;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院校训</h1>
<p>
校训：
<span id="id1">爱国明志</span>
<span id="id2">敢为人先</span>
</p>
<p>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、
面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实
创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，
开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html>
6.2.5 首字下沉
在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉是指设置段落的第一行第一个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。
在CSS样式中伪对象“:first-letter”可以实现对象内第一个字符的样式控制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
font-family: 黑体;
text-align: center;
}
p{
font-family: arial,"times new roman";
text-align: left;
}
p.center{
text-align: center;
}
p.right{
text-align: right;
}
p::first-letter{
float:left;
font-size: 2em;
font-weight: bold;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院校训</h1>
<p>
校训：
<span id="id1">爱国明志</span>
<span id="id2">敢为人先</span>
</p>
<p class="red">
江西应用工程职业学院
系一所经江西省政府批准、中国教育部备案、
面向全国招生的国有公办全日制普通高职院校，隶属
江西省教育厅
。求实
创新、扬帆远航，在新时代的奋进中，
江西应用工程职业学院承扬传统，
开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html>
6.2.6 字符间距
letter-spacing为字符间距属性，可以设置字符与字符间的距离。
语法:
letter-spacing:length I normal;
参数:normal为默认值，定义字符间的标准间距。length表示由浮点数字和单位标识存组成的长度值，允许为负值。
说明:该属性定义元素中字符之间插人多少空白符。如果指定为长度值，会调整字符之间的标准间距，允许指定负长度值，这会让字符之间变得更拥挤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
font-family: 黑体;
text-align: center;
}
p{
font-family: arial,"times new roman";
text-align: left;
}
p.center{
text-align: center;
}
p.right{
text-align: right;
}
p.lose{
letter-spacing: 30px;
}
p.tight{
letter-spacing: -0.25em;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院校训</h1>
<p>
校训：
<span id="id1">爱国明志</span>
<span id="id2">敢为人先</span>
</p>
<p>
江西应用工程职业学院
系一所经江西省政府批准、中国教育部备案、
面向全国招生的国有公办全日制普通高职院校，隶属
江西省教育厅
。<p class="loose">求实
创新、扬帆远航，在新时代的奋进中，</p>
江西应用工程职业学院承扬传统，
开拓新天。<p class="tight">江西应用工程职业学院将始终肩负培育国家金蓝领人才、
，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html>
6.2.7 文本的截段
在CSS样式中 lext-ovefow属性可以实现文本的截断效果，该属性包含c租晰e 个属性值。前者表示简单的裁切，不显示省略标记(.·);后者表示当文本溢出时的标记(.…)。
语法:
text-overflow:clip I ellipsis;
参数:clip定义简单的裁切，不显示省略标记。ellipsis定义当文本溢出时显示铺标记。
说明:设置文本的截断。要实现溢出文本显示省略号的效果，除了使用text-wedial 性以外，还必须配合white-space:nowrap (强制文本在一行内显示)和overlow:量(溢出内容为隐藏)同时使用才能实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
font-family: 黑体;
text-align: center;
}
p{
font-family: arial,"times new roman";
text-align: left;
}
p.ellipsis{
width:260px;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p class="ellipsis">
江西应用工程职业学院
系一所经江西省政府批准、中国教育部备案、
面向全国招生的国有公办全日制普通高职院校，隶属
江西省教育厅
。求实
创新、扬帆远航，在新时代的奋进中，
江西应用工程职业学院承扬传统，
开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html>
6.2.8 文本的颜色
在CSS样式中，对文本增加颜色修饰十分简单，只需添加 color属性即可。colorn属性的
语法:
color:颜色值；
这里颜色值可以使用多种书写方式:
color red; /*规定颜色值为颜色名称的颜色*/
color: #000000; /*规定颜色值为十六进制值的颜色*/
color:rgb(0,0,255); /*规定颜色值为rgb代码的颜色*/
color:rgb(0%,0%,80%); /*规定颜色值为rgb百分数的颜色*/6.2.9 文本的背景颜色
在HTML中，可以使用标签的bgcolor属性设置网页的背景颜色。而在CSS里，不仅可以用background- color属性来设置网页背景颜色，还可以设置文本的背景颜色。
语法:
background-color color I transparent
参数:color用于指定颜色。transparent表示透明的意思，也是浏览器的默认值。
说明:background-color不能继承，默认值是transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才能看见。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
font-family: 黑体;
text-align: center;
}
p{
font-family: arial,"times new roman";
text-align: left;
}
body{
background-color: #eee;
}
h1{
font-family:黑体;
background-color: orange;
}
p{
font-family: arial,"times new roman";
background: rgb(0,255,255);
}
</style>
</head>
<body>
<h1>江西应用工程职业学院校训</h1>
<p>
校训：
<span id="id1">爱国明志</span>
<span id="id2">敢为人先</span>
</p>
<p>
江西应用工程职业学院
系一所经江西省政府批准、中国教育部备案、
面向全国招生的国有公办全日制普通高职院校，隶属
江西省教育厅
。求实
创新、扬帆远航，在新时代的奋进中，
江西应用工程职业学院承扬传统，
开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html>
6.3 使用css设置图像样式
6.3.1 设置图像边框
图像的边框就是利用border属性作用于图像元素而呈现的效果。在HTML中可以直接通过<img>标记的border属性值为图像添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置border属性值为0时，则显示为没有边框。
例如以下代码:
< img srC=" images/fields.jpg" border="0”><!--显示为没有边框-->
< img src =" images/fields.jpg"border="1"><!--设置边框的粗细为1px-->
< img src=" images/fields.jpg'"border=”2"><!--设置边框的粗细为2px-->
< img sre="images/fields. jpg" border="3"> <!--设置边框的粗细为3px-->
使用这种方法存在很大的限制，即所有的边框都只能是黑色，而且风格十分单一，都是实线，只是在边框粗细上能够进行调整。
6.3.2 图像缩放
使用css样式控制图像的大小，可以通过width和height两个属性来实现。需要注意的是，当width和height两个属性的取值使用百分比数值时，他是相对于父元素而言的，如果将这两个属性设置为相当于body的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也会响应变化的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
padding: 10px;
width: 1000px;
height: 700px;
border: 2px dashed #9c3;
}
img.text1{
width: 30%;
height: 40%;
}
img.text2{
width: 150px;
height: 280px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/1.1.png">
<img src="img/1.1.png" class="text1">
<img src="img/1.1.png" class="text2">
</body>
</html> 
6.3.3 设置背景图像
在网页设计中，无论是单一的纯色背景，还是加载的背景图片，都能给整个页面带来丰富的视觉效果。css除了可以设置背景颜色，还可以用background-image来设置背景图像
语法:
background-image：url（url） | none；参数:ul表示要插人背景图像的路径。nome表示不加载图像。
说明:设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到body >标签中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: #7bc144;
background-image:url(img/1.1.png);
background-repeat: no-repeat;
}
</style>
</head>
<body></body>
</html>
6.3.4 设置背景重复
背景重复(background-repeat)属性的主要作用是设置背景图片以何种方式在网页中显示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节的大小。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。语法:
Ьасkgrоund-rереаt : rереаt | по-тереаt | rереаt-х | ереаt-у; 参数:repeat表示背景图像在水平和垂直方向平铺，是默认值；repeat-x表示背景图像在水平方向平铺；repeat-y表示背景图像在垂直方向平铺；no-repeat表示背景图像不平铺。
说明:设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。
6.3.5 背景图像定位
当在网页中插入背景图像时，每一次插人的位置，都是位于网页的左上角，可以通过
background-position属性来改变图像的插人位置。
语法:
background-position：length | length；
background-position： positional | position；参数:length为百分比或者由数字和单位标识符组成的长度值，position 可取top. center, bottom, left, right之一。
说明:利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用空
格隔开，一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right,关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。
设置背景定位有以下3种方法。
1.使用关键字进行背景定位
关键字参数的取值及含义如下:
top:将背景图像同元素的顶部对齐。
bottom:将背景图像同元素的底部对齐。
left:将背景图像同元素的左边对齐。
right:将背景图像同元素的右边对齐。
center:将背景图像相对于元素水平居中或垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color:#7bc144;
}
#box{
width:400px;
height: 700px;
border: 6px dashed;
background-image: url(img/1.1.png);
background-repeat: no-repeat;
background-position: center bottom;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
2.使用长度进行背景定位
长数参数可以对背景图像的位置进行更精确的控制，实际上定位的事图像左上角相对于元素左上角的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color:#7bc144;
}
#box{
width:900px;
height: 7000px;
border: 6px dashed #fff;
background-image: url(img/1.1.png);
background-repeat: no-repeat;
background-position: 150px 70px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
3.使用百分比进行背景定位
使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置对齐。也就是说，百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长度单位定位时，使用背景图像和元素的左上角为对齐基点。
6.4 使用css设置表单样式
6.4.1 使用css修饰常用的表单元素
表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。
1.修饰文本域
文本域主要用于采集用户在其中编辑的文字信息，通过CSS样式可以对文本域内的字体颜色以及背景图像加以控制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.text1{
border: 1px solid #f60;
color: aqua;
}
.text2{
border: 1px solid #c3c;
height: 20px;
background: #fff url(img/1.1.png)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="text"/>
改变边框颜色和文字颜色的文本域，看起来更加醒目
</p>
<p>
<input name="pass" type="password" class="text2"/>
增加了背景图片的文本域，看起来更加形象直观
<p>
<textarea name="cha" cols="45"row="5"class="area">改变边框颜色的多行文本域</textarea>
</p>
</body>
</html>
2.修饰按钮
按钮主要用于控制网页中的表单。通过css样式可对按钮的字体、颜色、边框以及背景图像加以控制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>按钮修饰</title>
<style type="text/css">
.htn01{
background: url(img/btn_bg02.jpg) repeat-x;
border: 2px solid #f00;
height: 32px;
font-weight: bold;
padding-top: 2px;
cursor: pointer;
font-size: 14px;
color: #fff;
}
.htn02{
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" type="submit" class="htn01" id="button1" value="自适应宽度按钮"/>
自适应宽度按钮
</p >
<p>
<input name="button02" type="submit" class="htn02" id="button2" value="免费注册"/>
固定背景图片的按钮
</p >
</body>
</html>
3.制作登录表单
在许多网站中都有登录表单的应用，而登录表单所包含的元素通常有用户名文本域、客码域、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.login{
margin: 0auto;
width: 280px;
padding: 14px;
border: dashed 2px #b7ddf2;
background: #ebf41b;
}
.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 Opx 2px 18px;
border: solid Ipx #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">密 码
<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>
<body>
</body>
</html> 
6.5 综合案例——商城的注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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="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" name="agreement" required/>
我已经阅读并同意商城用户注册协议
</div>
<div class="reg">
<input type="submit" value="注册" />
</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;
}
.regLst.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;
} 