段落內列表佈局
在描述產品特點時，一般會把特定或優勢列表顯示，這時就需要對每行列表的行間距和符號進行佈局。
- 行間距佈局
line-height:35px;
- 首行縮進
text-indent:5mm;
- 列表頭原點佈局
list-style-type : disc; (實心原點，參考list-style-type屬性)
- 內邊距
padding:20px;
最終效果如下圖：
鏈接設置
鏈接包括四種狀態：
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位於鏈接的上方
a:active - 鏈接被點擊的時刻
在實際使用中，不會單獨設置樣式，而是把link和visited同組，hover和active同組。
對以上四種狀態，通常設定三個樣式屬性，分別如下：
- 文本修飾：text-decoration ，大多用於去掉鏈接中的下劃線，如
a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標指針移動到鏈接上 */
a:active {color:#0000FF;} /* 正在被點擊的鏈接 */
- 文本修飾：text-decoration ，大多用於去掉鏈接中的下劃線，如
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
- 背景色：background-color，規定鏈接的背景色，示例如下：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
此外，有時爲了更加美觀，會設置鏈接的屬性，比如希望實現一個顯眼又美觀的下載鏈接，代碼和效果分別如下：
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:100px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/index.html" target="_blank">下載</a>
</body>
</html>
代碼效果如下：
小提示： 關於鏈接，有時鼠標劃過時，發現不變成手型，這是因爲沒有添加href屬性。
下圖爲上述鏈接原理綜合製作的效果展示：
表格製作
在產品介紹中，一般以表格的形式給出產品技術參數，這時就需要製作一個表格。表格設計主要是對錶頭、行、列的屬性進行設置。這些屬性主要包括：邊框、字體、文字顏色、背景色、文字位置、行列比例等。下面介紹如何製作一個用於產品參數的表格。
設計目標
我們希望設計一個背景色交替的單邊框n行2列表格，列比例爲3:7。顏色設定爲：
- 表頭背景色：background-color:#A7C942；表頭文字顏色：color:white;
- 交替背景色：background-color:#000000、background-color:#EAF2D3；文字顏色：color:black
實現步驟
爲方便設置屬性，把參數表格命名爲 id=“table_parameters”，結合class，在css代碼中對錶格屬性進行設定。爲方便交替背景色實現，本段會涉及到javascript代碼，用於實現交替功能。主要屬性設置如下：
- 單邊框設置
border-collapse:collapse;
- 列比例設置
<tr>
<td width="30%">波長範圍</td>
<td width="70%">900-1700nm</td>
</tr>
- 表格、表頭顏色設置
<style>
.table_parameters
{
width:100%;
border-collapse:collapse;
}
.table_parameters th
{
font-size:1.1em;
color:white;
background-color:#A7C942;
border:1px solid #98bf21;
height:35px;
padding:5px;
}
</style>
- 交替背景色設置
<script type="text/javascript">
//Js實現表格單雙行交替色
function SetTrColor(tableId) {
var rows = document.getElementById(tableId).getElementsByTagName("tr");//根據table的 id 屬性值獲得對象
for (var i = 0; i < rows.length; i++) {
if (i % 2 == 0) {
rows[i].style.backgroundColor = "#D9F5D4";//偶數行時背景色爲#D9F5D4
}
else {
rows[i].style.backgroundColor = "White";//單數行時背景色爲white
}
}
}
window.onload = function trColor() {//窗口加載時調用
SetTrColor("table_parameters");
}
</script >
產品參數展示效果如下
【未完待續】