本章讲解表格样式、表单样式、链接和创建导航菜单的内容。将文字样式、表格样式和表单样式结合形成一个简单的网页，效果图如下（源代码在文章末尾）：
目录
一、表格样式
CSS 表格属性可以帮助设计者极大地改善表格的外观。
常用的 CSS 表格属性
| 属性 | 说明 |
|---|---|
| border-collapse | 设置表格的行和单元格的边是合并在一起还是按照标准的 HTML 样式分开 |
| border-spacing | 设置当表格边框独立时，行和单元格的边框在横向和纵向上的间距 |
| empty-cells | 设置当表格的单元格无内容时，是否显示该单元格的边框 |
（一）border-collapse属性
border-collapse 属性用于设置表格的边框是合并成单边框，还是分别有各自的边框。separate 为默认值，表示边框分开，不合并；collapse 表示边框合并，即如果两个边框相邻，则共用同一个边框。
语法格式：
border-collapse:separate | collapse
补充：border-collapse 属性设置为 collapse (合并边框)，然后设置表格单元格 td 的 border (边框) 为 1px，即可显示细线表格的样式。
（二）border-spacing 属性
border-spacing 属性用来设置相邻单元格边框间的距离。length 为由浮点数字和单位标识符组成的长度值，不可为负值。
语法格式：
border-spacing:length || length
补充：该属性用于设置当表格边框独立（border-collapse 属性等于 separate）时，单元格的边框在横向和纵向上的间距。当只指定一个 length 值时，这个值将作用于横向和纵向上的间距；当指定了全部两个 length 值时，第 1 个作用于横向间距，第 2 个作用于纵向间距。
（三）empty-cells 属性
empty-cells 属性用于设置当表格的单元格无内容时，是否显示该单元格的边框。show 为默认值，表示当表格的单元格无内容时显示单元格的边框；hide 表示当表格的单元格无内容时隐藏单元格的边框。
语法格式：
empty-cells:hide | show
补充：只有当表格边框独立时，该属性才起作用。
表格样式样例，涉及border-collapse、border-spacing和empty-cells属性，效果图：
源代码：
<style>
table {
border: 1px solid black; /* 为表格添加边框 */
width: 300px;
}
table.collapse-table {
border-collapse: collapse; /* 合并边框，相邻边框共用一条 */
}
table.spacing-table {
border-collapse: separate; /* 边框分开，不合并，这样border-spacing属性才能生效 */
border-spacing: 50px; /* 单元格边框间横向和纵向间距都为10px */
}
table.empty-cells-table {
border-collapse: separate; /* 同样需边框分开，该属性才有效 */
empty-cells: hide; /* 当单元格无内容时，隐藏其边框 */
}
</style><h3>border-collapse: collapse效果</h3>
<table class="collapse-table">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td></td> <!-- 空单元格 -->
</tr>
</table>
<h3>border-spacing: 50px效果</h3>
<table class="spacing-table">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td></td> <!-- 空单元格 -->
</tr>
</table>
<h3>empty-cells: hide效果</h3>
<table class="empty-cells-table">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td></td> <!-- 空单元格，其边框会被隐藏 -->
</tr>
</table>二、表单样式
表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。
（一）修饰文本域
文本域主要用于采集用户在其中编辑的文字信息，通过 CSS 样式可以对文本域内的字体、颜色，以及背景图像加以控制。
样例效果图：
源代码：
<style type="text/css">
.text1 {
border:3px double #f60; /*3px双线红色边框*/
color:#03c; /*文字颜色为蓝色*/
}
.text2 {
border:1px dashed #c3c; /*1px实线紫红色边框*/
height:20px;
background:#fff url(images/action.jpg) left center no-repeat; /*背景图像无重复*/
padding-left:20px;
}
.area {
border:1px solid #00f; /*1px实线蓝色边框*/
overflow:auto;
width:99%;
height:100px;
}
</style><body>
<p>
<input type="text" name="normal"/>
默认样式的文本域
</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="60" rows="5" class="area">改变边框颜色的多行文本域
</textarea>
</p>
</body>（二）修饰按钮
按钮主要用于控制网页中的表单。通过 CSS 样式可以对按钮的字体、颜色、边框，以及背景图像加以控制。可用background属性url（图像链接）设置背景图像。
样例效果图：
源代码：
<style type="text/css">
.btn01 {
background: url() repeat-x; /*背景图像水平重复*/
border:1px solid #f00; /*1px实线红色边框*/
height:32px;
font-weight:bold; /*字体加粗*/
padding-top:2px;
cursor:pointer; /*鼠标指针样式为手形*/
font-size:14px;
color:#fff; /*文字颜色为白色*/
}
.btn02 {
background: url() 0 0 no-repeat; /*背景图像无重复*/
width:107px;
height:37px;
border:none; /*无边框，背景图像本身就是边框风格的图像*/
font-size:14px;
font-weight:bold;
}
</style><p>
<input name="button" type="submit" value="提交" />默认风格的提交按钮
</p>
<p>
<input name="button01" type="submit" class="btn01" id="button1" value="自适应宽度按钮" />
自适应宽度按钮
</p>
<p>
<input name="button02" type="submit" class="btn02" id="button2" value="免费注册" />
固定背景图片的按钮
</p>三、设置链接
超链接是网页上最普通的元素，通过超链接能够实现页面的跳转、功能的激活等，而要实现链接的多样化效果则离不开 CSS 样式的辅助。
（一）设置文字链接的外观
在 HTML 语言中，超链接是通过标记<a>来实现的，链接的具体地址则是利用<a>标记的 href 属性。
<a href="http://www.baidu.com">百度</a>
伪类中通过:link、:visited、:hover和:active来控制链接内容访问前、访问后、鼠标指针悬
时，以及用户激活时的样式。这 4 种状态的顺序不能颠倒，否则可能会导致伪类式不能实现。这 4
种状态并不是每次都要用到，一般情况下只需要定义链接标签的样式以及:hove伪类样式即可。
样例效果图：
源代码：
<style type="text/css">
a:link{
font-size: 13pt;
color: #0000ff;
text-decoration: none;
}
a:visited{
font-size: 13pt;
color: #00ffff;
text-decoration: none;
}
a:hover{
font-size: 13pt;
color: #cc3333;
text-decoration: underline;
}
.navi a:link{
font-size: 13pt;
color: #00ff00;
text-decoration: none;
}
.navi a:visited {
color: #0000ff;
text-decoration: none;
font-size: 17pt;
font-family: "黑体";
}
.navi a:hover {
color: #000;
font-family: "黑体";
font-size: 17pt;
text-decoration: overline;
}
.footer{
text-align:center;
margin-top:120px;
}
</style> <h2 align="center">H5创新学院</h2>
<p class="navi">
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">客服</a>
<a href="#">联系</a>
</p>
<div class="footer">
<a href="mailto:laoli@163.com">联系我们</a>
</div>（二）图文链接
网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步美化。
样例效果图：
源代码：
<style type="text/css">
.a{
padding-left:40px; /*设置左内边距用于增加空白显示背景图片*/
font-size:16px;
text-decoration: none; /*无修饰*/
}
.a:hover {
background:url(./图片.jpg) no-repeat left center; /*增加背景图*/
text-decoration: underline; /*下画线*/
}
</style><a href="#" class="a">鼠标指针悬停在超链接上时将显示图像</a>
四、创建导航菜单
使用 CSS 来制作导航菜单，将大大简化设计流程。导航菜单按照菜单的布局显示来分，可以分为纵向导航菜单和横向导航菜单。
（一）纵向列表模式的导航菜单
应用 Web 标准进行网页制作时，通常使用无序列表<ul>标签构建菜单，其中纵向列表模式的导航菜单又是应用比较广泛的一种。由于纵向列表模式的导航菜单的内容并没有逻辑上的先后顺序，因此可以使用无序列表来实现。
1、建立网页结构
首先建立一个包含无序列表的 Div 容器，列表包含 5 个选项，每个选项中包含 1 个用于实现导航菜单的文字链接。
源代码：
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">工程</a></li>
<li><a href="#">会员</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</body>2、设置容器及列表的 CSS 样式
下面设置菜单 Div 容器的整体区域样式，设置菜单的宽度、字体，以及列表和列表选项的类型和边框样式。
源代码：
#nav{
width:200px; /*设置菜单的宽度*/
font-family:Arial;
}
#nav ul{
list-style-type:none; /*不显示项目符号*/
margin:0px; /*外边距为0px*/
padding:0px; /*内边距为0px*/
}
#nav li{
border-bottom:1px solid #ed9f9f; /*设置列表选项(菜单项)的下边框线*/
}3、设置菜单项超链接的 CSS 样式
在设置容器的 CSS 样式之后，还需要进一步美化。设置菜单项超链接的区域显示、左边的粗红边框、右侧阴影及内边距。最后，建立未访问过的链接、访问过的链接及鼠标指针悬停于菜单项上时的样式。
源代码：
#nav li a{
display:block; /*区块显示*/
padding:5px 5px 5px 0.5em;
text-decoration:none; /*链接无修饰*/
border-left:12px solid #711515; /*左边的粗红边框*/
border-right:1px solid #711515; /*右侧阴影*/
}
#nav li a:link, #nav li a:visited{
background-color:#c11136; /*未访问过的链接、访问过的链接的样式：改变背景色*/
color:#fff; /*改变文字颜色*/
}
#nav li a:hover{
background-color:#990020; /*鼠标指针悬停于菜单项上时的样式：改变背景色*/
color:#ff0; /*改变文字颜色*/
} 结合效果图：
（二）横向列表模式的导航菜单
在设计人员制作网页时，经常要求导航菜单能够在水平方向上显示。通过 CSS 属性的控制，可以实现列表模式导航菜单的横竖转换。在保持原有 HTML 结构不变的情况下，将纵向导航转变成横向导航。其中最重要的环节就是设置<li>标签为浮动。
1、建立网页结构
与纵向列表模式的导航菜单一样，建立一个包含无序列表的 Div 容器，列表包含 5 个选项，每个选项中包含 1 个用于实现导航菜单的文字链接。
2、设置容器及列表的 CSS 样式
接着设置菜单 Div 容器的整体区域样式，设置菜单的宽度、字体，以及列表和列表选项的类型和边框样式。
源代码：
#nav{
width:360px; /*设置菜单水平显示的宽度*/
font-family:Arial;
}
#nav ul{
list-style-type:none; /*设置列表的类型，不显示项目符号*/
margin:0px; /*外边距为0px*/
padding:0px; /*内边距为0px*/
}
#nav li{
float:left; /*使得菜单项都水平显示*/
}3、设置菜单项超链接的 CSS 样式
在设置容器的 CSS 样式之后，菜单项的显示横向拥挤在一起，效果非常不理想，还需要进一步美化。接下来设置菜单项超链接的区块显示、四周的边框线及内外边距。最后，建立未访问过的链接、访问过的链接及鼠标指针悬停于菜单项上时的样式。
源代码：
#nav li a{
display:block; /*块级元素*/
padding:3px 6px 3px 6px;
text-decoration:none; /*链接无修饰*/
border:1px solid #711515; /*超链接区块四周的边框线效果相同*/
margin:2px;
}
#nav li a:link, #nav li a:visited{ /*未访问过的链接、访问过的链接的样式*/
background-color:#c11136; /*改变背景色*/
color:#fff; /*改变文字颜色*/
}
#nav li a:hover{ /*鼠标指针悬停于菜单项上时的样式*/
background-color:#990020; /*改变背景色*/
color:#ff0; /*改变文字颜色*/
} 结合效果图：
源代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单表格属性练习</title>
<style>
table{
width: 400px;
height: 200px;
border: 2px solid red;
border-collapse: collapse;
}
th{
background-color: darkgray;
text-align: right;
color: blue;
text-align: right;
vertical-align: bottom;
}
td{
background-color: yellow;
text-align: right;
vertical-align: bottom;
}
.text1{
border: 3px double goldenrod;
color: blue;
}
.text2{
height: 20px;
background: red url() left center no-repeat;
padding-left: 20px;
}
.btn00{
padding: 12px 24px;
border: 2px dashed #FFC0CB;
background-color: rgba(255, 192, 203, 0.3);
color: rgb(132, 130, 130,0.3);
font-size: 16px;
}
.btn01{
border: none;
color: black;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th scope="col" id="th0">无</th>
<th scope="col">列标题1</th>
<th scope="col">列标题2</th>
</tr>
<tr>
<th scope="col">行标题1</th>
<td id="td5">普通单元格1</td>
<td>普通单元格2</td>
</tr>
<tr>
<th scope="col">行标题2</th>
<td>普通单元格3</td>
<td>普通单元格4</td>
</tr>
</table>
<br><br><hr><br><br>
<p>
<input type="text" name="normal">
默认样式的文本域
</p>
<p>
<input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1">
改变了边框颜色和文字颜色的文本域
</p>
<p>
<input name="password" type="password" class="text2">
增加了背景图片的文本域
</p>
<p>
<input name="button" type="submit" value="提交" />
默认风格的提交按钮
</p>
<p>
<input name="button00" type="submit" class="btn00" id="button0" value="登录">
这是一个加大的虚线边框，填充粉色，透明度为0.3的按钮
</p>
<p>
<input name="button01" type="submit" class="btn01" id="button1" value="注册">
鼠标悬停变手指的无边框按钮
</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
