第六章元素应用CSS

2024-10-20 10:57:53

6.1 使用CSS设置字体样式

在CSS中，设置字体样式（font style）是通过一系列与字体相关的属性来实现的。以下是一些常用的字体属性及其用法：

6.1.1.字体类型

在CSS中，设置字体类型是通过font-family属性来实现的。font-family属性允许你指定一个或多个字体系列名称，浏览器会按照你提供的顺序尝试加载这些字体。如果用户的计算机上没有安装第一个指定的字体，浏览器会尝试加载第二个指定的字体，依此类推，直到找到一个可用的字体或者尝试完所有指定的字体。

以下是使用font-family属性的示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			h1{
				font-family: fangsong;
			}
		</style>
	</head> 
	<body>
		<h1 >
			你好世界
		</h1>
	</body>
</html>

效果浏览如图：

6.1.2.字体大小

在CSS中，设置字体大小是通过font-size属性来实现的。font-size属性允许你指定文本字符的大小，可以使用多种单位来设置，包括像素（px）、相对单位（em、rem）、百分比（%）等。

以下是使用font-size属性的示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			h1{
				font-family: fangsong;
				font-size: 30px;
			}
		</style>
	</head> 
	<body>
		<h1 >
			你好世界
		</h1>
	</body>
</html>

效果浏览如图：

6.1.3.字体粗细

在CSS中，设置字体粗细是通过font-weight属性来实现的。font-weight属性允许你指定字体的粗细程度，可以使用预定义的关键字或数字值来设置。

以下是使用font-weight属性的示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			h1{
				font-family: fangsong;
				font-size: 30px;
				font-weight: 900;
			}
		</style>
	</head> 
	<body>
		<h1 >
			你好世界
		</h1>
	</body>
</html>

效果浏览如图：

6.1.4.字体倾斜

在CSS中，设置字体倾斜是通过font-style属性来实现的。这个属性允许你指定文本是否应该被渲染为斜体。

以下是使用font-style属性的示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			h1{
				font-family: fangsong;
				font-size: 30px;
				font-weight: 900;
				font-style: italic;
			}
		</style>
	</head> 
	<body>
		<h1 >
			你好世界
		</h1>
	</body>
</html>

效果浏览如图：

6.2 使用CSS设置文本样式

在CSS中，设置文本样式涉及多个属性，这些属性允许你控制文本的外观，包括字体、颜色、大小、对齐方式、行高、字间距、装饰（如下划线、删除线）等

6.2.1.文本水平对齐方式

在CSS中，有多种方式可以对文本进行水平对齐。下面是一些常见的方法：

1. 使用 text-align 属性

text-align 属性是最常用和直接的方法，适用于块级元素（如 <div>、<p> 等）内部的文本对齐。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			h1{
				text-align: center;
			}
		</style>
	</head> 
	<body>
		<h1 >
			你好世界
		</h1>
	</body>
</html>

效果浏览如图：

6.2.2.行高

在CSS中，line-height 属性用于设置文本行之间的垂直间距，也就是行高。行高会影响文本的可读性和整体布局。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			p{
				line-height: 200%;
			}
		</style>
	</head> 
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
		大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
		是就业、培训等方面皆具雄厚实力的院校。</p>
			
	</body>
</html>

效果浏览如图：

6.2.3.文本的修饰.

在CSS中，有多种方法可以对文本进行修饰，从基本的字体样式到高级的文本效果。以下是对文本修饰。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			p{
				line-height: 200%;
				text-decoration: underline;
			}
		</style>
	</head> 
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
		大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
		是就业、培训等方面皆具雄厚实力的院校。</p>
			
	</body>
</html>

效果浏览如图：

6.2.4.段落首行缩进

在CSS中，段落首行缩进可以通过text-indent属性来实现。这个属性允许你为段落的第一行设置一个固定的缩进量，通常用于增强文本的可读性和美观性，尤其是在排版较长的文章时。

以下是使用text-indent属性的示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			p{
				text-indent: 2em;
			}
		</style>
	</head> 
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
		大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
		是就业、培训等方面皆具雄厚实力的院校。</p>
			
	</body>
</html>

效果浏览如图：

6.2.5.首字下沉

在CSS中，实现首字下沉效果通常依赖于伪元素::first-letter以及浮动属性float。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			p::first-letter {
				color: #c69c6d;
				/* 设置首字母颜色（可选） */
				font-size: 2em;
				/* 设置首字母字体大小 */
				float: left;
				/* 将首字母浮动到左侧 */
				margin: 0.1em 0.2em 0 0;
				/* 调整首字母与后续文本之间的间距 */
			}
		</style>
	</head>
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
			大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
			是就业、培训等方面皆具雄厚实力的院校。</p>

	</body>
</html>

效果浏览如图：

6.2.6.字符间距

CSS字符间距是控制文本中字符之间距离的重要样式属性，它直接影响文本的阅读体验和视觉美感。在CSS中，主要通过letter-spacing属性来设置字符间距。

letter-spacing属性的使用

letter-spacing属性用于设置文本字符之间的间距。可以通过指定一个固定的像素值（如1px、2px等）或者一个相对值（如0.1em、0.2em等，其中em是相对于当前字体大小的单位）来调整字符之间的间距。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			p {
				letter-spacing: 2em;
			}
		</style>
	</head>
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
			大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
			是就业、培训等方面皆具雄厚实力的院校。</p>

	</body>
</html>

效果浏览如图：

6.2.7.文本的截断

CSS文本的截断是指当文本内容超过其容器的大小限制时，通过CSS样式来截断文本并显示省略号（...）或其他自定义的截断字符，以提示用户还有更多内容未显示。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			p {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
			大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
			是就业、培训等方面皆具雄厚实力的院校。</p>

	</body>
</html>

效果浏览如图：

6.2.8.文本的颜色

CSS文本的颜色主要通过color属性来设置。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			p {
				 color: #ff0000;
			}
		</style>
	</head>
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
			大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
			是就业、培训等方面皆具雄厚实力的院校。</p>

	</body>
</html>

效果浏览如图：

6.2.9.文本的背景颜色

在CSS中，文本的背景颜色主要通过background-color属性来设置。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			p {
				 background-color: #ff0000;
			}
		</style>
	</head>
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
			大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
			是就业、培训等方面皆具雄厚实力的院校。</p>

	</body>
</html>

效果浏览如图：

6.3 使用CSS设置图像样式

在CSS中，设置图像样式通常涉及调整图像的尺寸、边框、对齐方式、阴影效果以及其他视觉效果。以下是一些常用的CSS属性，用于设置图像的样式。

6.3.1.设置图像边框

使用border属性可以为图像添加边框。你可以指定边框的宽度、样式和颜色。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			img {  
			  border: 5px solid #000; /* 5像素宽的黑色实线边框 */  
			}
		</style>
	</head>
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
			大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
			是就业、培训等方面皆具雄厚实力的院校。</p>
			<img src="img/as.png"/>

	</body>
</html>

效果浏览如图：

6.3.2.图像缩放

在CSS中，图像缩放通常涉及调整图像的尺寸以适应特定的设计需求或响应不同的屏幕尺寸。以下是几种常见的CSS属性和技术，用于图像的缩放：

使用 width 和 height 属性

最直接的方法是使用 width 和 height 属性来指定图像的宽度和高度。这会导致图像按照指定的尺寸进行缩放。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			img {
				width: 200px;
				/* 设置图像的宽度 */
				height: auto;
				/* 高度自动调整以保持宽高比 */
			}
		</style>
	</head>
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
			大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
			是就业、培训等方面皆具雄厚实力的院校。</p>
		<img src="img/as.png" />

	</body>
</html>

效果浏览如图：

6.3.3.设置背景图像

在CSS中，设置背景图像是通过background-image属性来实现的。这个属性允许你指定一个图像的URL，该图像将作为元素的背景显示。以下是一些关于如何使用background-image属性以及其他相关背景属性的基本指南：

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
	     body {
			background-image: url(img/as.png);
			}
		</style>
	</head>
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
			大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
			是就业、培训等方面皆具雄厚实力的院校。</p>
		<img src="img/as.png" />

	</body>
</html>

效果浏览如图：

6.3.4设置背景重复

背景重复（background-repeat)属性的主要作用是设置背景图片以何种方式在网页中显示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节大小。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用 background-repeat属性来控制。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			body {
				width: 660px;
				height: 330px;
				background-color: #ffaa00;
				/* 6.3.3.设置背景图像 */
				background-image: url(img/bgcolor.png);
				/* 6.3.4设置背景重复 */
				/* background-repeat: repeat;*/
				/* 重复(默认值) */
				background-repeat: no-repeat;
				/* 不重复 */
				/* background-repeat: repeat-x;*/
				/* x轴重复 */
				/* background-repeat: repeat-y;*/
				/* y轴重复 */
			}
		</style>
	</head>
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
			大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
			是就业、培训等方面皆具雄厚实力的院校。</p>
		<img src="img/as.png" />

	</body>
</html>

效果浏览如图：

6.3.5.背景图像定位

在CSS中，背景图像的定位是通过background-position属性来实现的。这个属性允许你指定背景图像在元素背景区域中的起始位置。

一、基本语法

.element {  
  background-position: horizontal-position vertical-position;  
}

horizontal-position：表示水平方向上的位置。

vertical-position：表示垂直方向上的位置。

你可以使用多种类型的值来指定这两个位置，包括关键字、长度单位（如像素、百分比等）以及组合值。

二、定位方式

6.3.5.1.使用关键字进行背景定位
- top left：左上角。
- top center：顶部*。
- top right：右上角。
- center left：左侧*。
- center center：*。
- center right：右侧*。
- bottom left：左下角。
- bottom center：底部*。
- bottom right：右下角。
6.3.5.2.使用长度进行背景定位
- 可以使用像素（px）或其他长度单位来指定位置。
- 例如：background-position: 10px 20px; 表示背景图像从元素的左上角向右偏移10像素，向下偏移20像素。
6.3.5.3.使用百分比进行背景定位
- 使用百分比（%）来指定位置。
- 百分比定位是基于背景区域的尺寸来计算的。
- 例如：background-position: 50% 50%; 表示背景图像的中心点与背景区域的中心点对齐。
- 需要注意的是，百分比定位与关键字和长度单位定位的机制不同。在百分比定位中，图像本身的某个点与背景区域的某个点重合，而不是将图像的左上角放置在指定位置。。

三、注意事项

如果只指定了一个值，那么该值将用于横坐标（水平方向），而纵坐标（垂直方向）将默认为50%（即*）。
当使用百分比定位时，要考虑到背景区域的尺寸以及图像的尺寸，以确保图像能够正确地显示在期望的位置。
在进行响应式设计时，可以使用百分比定位来确保背景图像在不同屏幕尺寸上都能良好显示。

四、示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			body {
				width: 300px;
				height: 200px;
				background-image: url('example.jpg');
				background-repeat: no-repeat;
				/* 防止图像重复 */
				background-position: 50% 50%;
				/* 将图像中心与元素中心对齐 */
			}
		</style>
	</head>
	<body>
		<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
			大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业*技能等级证和从业资格打造了良好的平台，
			是就业、培训等方面皆具雄厚实力的院校。</p>
		<img src="img/as.png" />

	</body>
</html>

效果浏览如图：

6.4 使用CSS设置表单样式

表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。

6.4.1.使用CSS修饰常用的表单元素

使用CSS修饰表单元素是提升网页用户体验和美观度的关键步骤。以下是一些常用的表单元素及其CSS修饰方法：

6.4.1.1.修饰文本域

文本域主要用于采集用户在其中编辑的文字信息，通过CSS样式可以对文本域内的字体、颜色以及背景图像加以控制。

示例6.21：

<!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/aaa.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="norml"/>
			默认样式的文本域
		</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样式可以对按钮的字体、颜色、边框以及
背景图像加以控制。

示例6.22：

<!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>

效果浏览如图：

6.4.1.3.制作登录表单

在许多网站中都有登录表单的应用，而登录表单所包含的元素通常有用户名文本域、密
码域、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。

示例6.23：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录表单的制作</title>
		<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;
			}
			.username input{
				background: #fff url(img/username.JPG)no-repeat left center;
			}
			.password input{
				background: #fff url(img/lock.JPG)no-repeat left center;
			}
			.login.btns{
				text-align: center;
			}
		</style>
	</head>
	<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 综合案例——商城的注册页面

CSS文件代码如下：


*{
	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:hovert{                    /*顶部注册提示悬停链接的样式*/
	color: #f00;                            /*红色文字*/
}
.loginBox{                             /*注册内容区域的样式*/
	width: 1050px;
	margin: 30px auto;                      /*上下边距为30px，水平居中对齐*/
	position: relative;                   /*相对定位*/
}
.regList{                              /*注册内容项的样式*/
	height: 35px;
	line-height: 35px;                     /*行高等于设定的高度，内容垂直方向居中对齐*/
	margin-bottom: 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: #ff0000 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*/
	 }
.chengguo{                          /* 注册表单中右侧的样式 */
	position:absolute;                    /* 绝对定位 */
	right:0;
	top:0;
}

html代码如下：

<!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="index.html">
						<img src="img/logo.jpg"/>
					</a>
				</h1>
				<div class="loginBox">
					<img src="img/chengguo.jpg" width="295" height ="393" class="chengguo"/>
					<form action="#.html" method="get" class="reg">
					<div class="regList">
						<label><span class="red">*</span>用户名</label>
						<input type="text"/><span style="color:0999;">请输入邮箱/用户名/手机号码</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>

本例浏览效果如图：

码农公寓

6.1 使用CSS设置字体样式

6.1.1.字体类型

6.1.2.字体大小

6.1.3.字体粗细

6.1.4.字体倾斜

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

6.2.2.行高

6.2.3.文本的修饰.

6.2.4.段落首行缩进

6.2.5.首字下沉

6.2.6.字符间距

6.2.7.文本的截断

6.2.8.文本的颜色

6.2.9.文本的背景颜色

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

6.3.2.图像缩放

6.3.3.设置背景图像

6.3.4设置背景重复

6.3.5.背景图像定位

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

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

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

6.4 使用CSS设置表单样式

6.4.1.使用CSS修饰常用的表单元素

6.4.1.1.修饰文本域

6.4.1.2.修饰按钮

6.4.1.3.制作登录表单

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

相关文章