前端开发：div+css制作一个产品详情页

段落内列表布局

在描述产品特点时，一般会把特定或优势列表显示，这时就需要对每行列表的行间距和符号进行布局。

1. 行间距布局

line-height:35px;

2. 首行缩进

 text-indent:5mm;

3. 列表头原点布局

list-style-type : disc; (实心原点，参考list-style-type属性)

4. 内边距

padding:20px;

最终效果如下图：

链接设置

链接包括四种状态：

    a:link - 普通的、未被访问的链接
    a:visited - 用户已访问的链接
    a:hover - 鼠标指针位于链接的上方
    a:active - 链接被点击的时刻

在实际使用中，不会单独设置样式，而是把link和visited同组，hover和active同组。

对以上四种状态，通常设定三个样式属性，分别如下：

1. 文本修饰：text-decoration ，大多用于去掉链接中的下划线，如

	a:link {color:#FF0000;}		/* 未被访问的链接 */
	a:visited {color:#00FF00;}	/* 已被访问的链接 */
	a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
	a:active {color:#0000FF;}	/* 正在被点击的链接 */

2. 文本修饰：text-decoration ，大多用于去掉链接中的下划线，如

    a:link {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover {text-decoration:underline;}
    a:active {text-decoration:underline;}

3. 背景色：background-color，规定链接的背景色，示例如下：

	a:link {background-color:#B2FF99;}
	a:visited {background-color:#FFFF85;}
	a:hover {background-color:#FF704D;}
	a:active {background-color:#FF704D;}

此外，有时为了更加美观，会设置链接的属性，比如希望实现一个显眼又美观的下载链接，代码和效果分别如下：

	
	
	
	
	
	
		下载
	
	

代码效果如下：

小提示： 关于链接，有时鼠标划过时，发现不变成手型，这是因为没有添加href属性。

下图为上述链接原理综合制作的效果展示：

表格制作

在产品介绍中，一般以表格的形式给出产品技术参数，这时就需要制作一个表格。表格设计主要是对表头、行、列的属性进行设置。这些属性主要包括：边框、字体、文字颜色、背景色、文字位置、行列比例等。下面介绍如何制作一个用于产品参数的表格。

设计目标

我们希望设计一个背景色交替的单边框n行2列表格，列比例为3:7。颜色设定为：

1. 表头背景色：background-color:#A7C942；表头文字颜色：color:white;
2. 交替背景色：background-color:#000000、background-color:#EAF2D3；文字颜色：color:black

实现步骤

为方便设置属性，把参数表格命名为 id=“table_parameters”，结合class，在css代码中对表格属性进行设定。为方便交替背景色实现，本段会涉及到javascript代码，用于实现交替功能。主要属性设置如下：

1. 单边框设置

	border-collapse:collapse;

2. 列比例设置

	
		波长范围
		900-1700nm
	

3. 表格、表头颜色设置

4. 交替背景色设置

产品参数展示效果如下

【未完待续】