7.1案例
<!--示例程序7.1-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.1</title>
<style type="text/css">
#menu {
text-align: center;
/*div内的元素水平居中*/
}
a {
margin: 10px;
/*链接元素外边距为10像素*/
}
a:link {
/*链接未被访问*/
font-size: 20px;
}
a:hover {
font-size: 18px;
/*鼠标悬停链接*/
color: red;
text-decoration: overline underline;
}
a:active {
/*链接活动*/
font-size: 20px;
color: green;
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<h2>服务中心菜单栏</h2>
<a href="index.html1" target="_blank">加入我们</a>
<a href="index.html2" target="_blank">媒体报道</a>
<a href="index.html3" target="_blank">官方博客</a>
<a href="index.html4" target="_blank">帮助中心</a>
</div>
</body>
</html>
7.1 CSS链接的美化
7.1.1.文字链接的美化
可以通过修改文字链接的颜色、字体、大小等属性来使其更加突出和吸引人。例如，设置链接在未被访问时为蓝色，鼠标悬停时变为橙色，已访问过的链接为紫色。还可以添加下划线、删除线等装饰效果，或者使用 CSS 的 text-decoration 属性来控制链接的装饰样式。通过设置链接的字体加粗、斜体等属性，可以进一步增强其视觉效果。
7.1.2.按钮链接的美化
将链接设计成按钮的样式，可以增加其可点击性和吸引力。可以使用 CSS 的 borderbackground-color、color 等属性来设计按钮的外观。为按钮添加鼠标悬停效果，如改变背景颜色、边框颜色或字体颜色等，以增强用户的交互体验。可以使用 CSS 的 box-shadow 属性为按钮添加阴影效果，使其看起来更加立体。
7.2 CSS列表的美化
7.2案例
<!--示例程序7.2-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.2</title>
<style type="text/css">
#menu {
text-align: center;
/*div内的元素水平居中*/
}
a {
font-size: 20px;
font-weight: 700;
text-decoration: none;
background-color: lightcyan;
color: red;
margin: 5px;
padding: 10px 15px;
border-radius: 30px;
}
a:link, a:visited {
/*链接未被访问以及访问过后*/
box-shadow: -5px -5px 10px black;
}
a:hover {
/*鼠标悬停链接*/
font-size: 26px;
}
a:active {
/*链接活动*/
font-size: 20px;
box-shadow: 6px 6px 10px black;
}
</style>
</head>
<body>
<div id="menu">
<h2>服务中心菜单栏</h2>
<a href="#" target="_blank">加入我们</a>
<a href="#" target="_blank">媒体报道</a>
<a href="#" target="_blank">官方博客</a>
<a href="#" target="_blank">帮助中心</a>
</div>
</body>
</html>
7.2.1.列表项类型（list-style-type）
.chanpin{
list-style-type: square;
}
.houduan{
list-style-type: circle;
}
.qianduan{
list-style-type: decimal;
} 
7.2.2.列表项图像（list-style-image）
.chanpin{
list-style-image: url(img/list1.jpg);
}
.houduan{
list-style-image: url(img/list2.jpg);
}
.qianduan{
list-style-image: url(img/list3.jpg);
} 
7.2.3.列表项位置（list-style-position）
li{
width: 100px;
border: 2px solid #000000;
}
.chanpin{
list-style-image: url(img/list1.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list2.jpg);
list-style-position: inside;
}
.qianduan{
list-style-image: url(img/list3.jpg);
list-style-position: inside;
}
.qianduan li{
padding-left: 20px;
} 
7.2.4.复合列表样式（list-style）
li{
width: 100px;
border: 2px solid #000000;
}
.chanpin{
list-style: square url(img/list1.jpg) outside;
}
.houduan{
list-style: circle url(img/list2.jpg) inside;
}
.qianduan{
list-style: decimal url(img/list3.jpg) inside;
}
.qianduan li{
padding-left: 20px;
}
7.2.5.利用背景图像实现列表项标记
除了使用 list-style-image 属性，还可以通过设置列表项的背景图像来实现自定义的列表项标记。
可以使用 CSS 的 background-position 和 background-repeat 属性来调整背景图像的位置和重复方式。
7.3案例
<!--示例程序7.3-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.3</title>
<style type="text/css">
#menu {
text-align: center;
/*div内的元素水平居中*/
}
a {
font-size: 20px;
text-decoration: none;
padding: 10px 15px;
margin: -3px;
}
a:link, a:visited {
/*链接未被访问以及访问过后*/
/* background-color: lightgrey; */
background-image: url(img/menu_1.jpg);
color: red;
}
a:hover {
/*鼠标悬停链接*/
/* background-color: brown; */
background-image: url(img/menu_2.jpg);
color: white;
}
a:active {
/*链接活动*/
font-weight: 700;
color: lawngreen;
}
</style>
</head>
<body>
<div id="menu">
<h2>服务中心菜单栏</h2>
<a href="#" target="_blank">加入我们</a>
<a href="#" target="_blank">媒体报道</a>
<a href="#" target="_blank">官方博客</a>
<a href="#" target="_blank">帮助中心</a>
</div>
</body>
</html>
7.3 CSS表格的美化
7.3.1.border-collapse
border-collapse 属性用于设置表格的边框合并方式。可以设置为 collapse（合并边框）或 separate（不合并边框）。合并边框可以使表格看起来更加简洁和整洁，而不合并边框则可以使表格的边框更加明显和突出
7.3.2..border-spacing
border-spacing 属性用于设置表格边框之间的间距。可以设置为一个具体的像素值或百分比。
调整边框间距可以使表格的布局更加合理和美观。
7.3.3.caption-side
caption-side 属性用于设置表格标题的位置。可以设置为 top（在表格上方）、bottom（在表格下方）、left（在表格左侧）或 right（在表格右侧）。根据表格的布局和设计需求，选择合适的标题位置可以使表格更加易于阅读和理解。
7.3.4.empty-cells
empty-cells 属性用于设置表格中空白单元格的显示方式。可以设置为 show（显示空白单元格）或 hide（隐藏空白单元格）。隐藏空白单元格可以使表格看起来更加整洁和紧凑。
7.4 多媒体的添加与美化
7.4.1.<embed>标签的使用
<embed> 标签用于在网页中嵌入多媒体内容，如音频、视频、Flash 动画等。可以通过设置 src、width、height 等属性来指定多媒体文件的路径和尺寸。还可以设置 autoplay、loop 等属性来控制多媒体的播放方式。
7.4.2.<bgsound>标签的使用
<bgsound> 标签用于在网页中添加背景音乐。可以通过设置 src 属性来指定音乐文件的路径，设置 loop 属性来控制音乐的播放次数。
7.4.3.HTML5新增的多媒体标签
7.4.3.1.<audio>标签
概念与用途：HTML5 用于嵌入音频，可添加背景音乐等。属性：src指定音频路径。controls提供播放控制界面。autoplay自动播放，需谨慎使用。loop循环播放。preload指定预加载方式。支持格式：MP3、WAV、Ogg 等，不同浏览器有差异。兼容性与替代方案：旧浏览器可用 Flash 等作为替代。
7.4.3.2.<video>标签
概念与用途：嵌入视频，用于播放宣传片等。属性：src指定视频路径。controls提供播放控制界面。autoplay自动播放可能影响体验。loop循环播放。preload指定预加载方式。width和height设置播放器尺寸。支持格式：MP4、WebM、Ogg 等。
7.5 综合案例——海洋旅游胜地
</style>
</head>
<body>
<div>
<h3>产品经理助理</h3>
<ol class="chanpin">
<li>韩馨雨</li>
<li>赖晓庆</li>
<li>陈云依</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="houduan">
<li>邱紫悦</li>
<li>詹文海</li>
<li>宁英鸿</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="qianduan">
<li>陈甜</li>
<li>黄星雨</li>
<li>杨欢</li>
</ol>
</div>
<!-- 7.4 多媒体的添加与美化 -->
<!-- 7.4.1.<embed>标签的使用 -->
<h1>插入动画：阳春三月</h1>
<embed src="media/阳春三月.swf"</embed>
<h1>插入视频：第五空间</h1>
<embed src="media/第五空间.mp4"></embed>
<h1>插入音频：听!是谁在唱歌</h1>
<embed src="media/听!是谁在唱歌.mp3"></embed>
<!-- 7.4.2.<bgsound>标签的使用 示例7.16 -->
<!-- 7.4.3.HTML5新增的多媒体标签 -->
<!-- 7.4.3.1.<audio>标签 -->
<h1>audio标签插入音频</h1>
<audio src="media/铃铛.wav" controls="controls"></audio>
<!-- 7.4.3.2.<video>标签 -->
<h1>video标签插入视频</h1>
<video src="media/第五空间.mp4" controls="controls"></video>
</body>
</html>
7.8案例
<!--示例程序7.8-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.8</title>
<style type="text/css">
li{
background: url(img/list4.jpg) no-repeat;
padding-left: 30px;
list-style-type: none;
}
</style>
</head>
<body>
<h3>快递公司</h3>
<ol>
<li>邮政快递</li>
<li>顺丰快递</li>
<li>京东快递</li>
<li>圆通速递</li>
<li>百世汇通</li>
<li>韵达快递</li>
<li>中通快递</li>
<li>申通快递</li>
</ol>
</body>
</html>
7.9案例
<!--示例程序7.9-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.9</title>
<style type="text/css">
table {
/* 默认值 不合并边框 */
/* border-collapse: separate; */
/* 合并边框 */
border-collapse: collapse;
/* 继承父元素设置 */
/* border-collapse: inherit; */
}
table,td,th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>课程</th>
<th>学分</th>
<th>考试形式</th>
</tr>
<tr>
<td>SQL数据库技术</td>
<td>4.0</td>
<td>笔试</td>
</tr>
<tr>
<td>PHP程序设计</td>
<td>6.0</td>
<td>机考</td>
</tr>
</table>
</body>
</html>
7.10案例
<!--示例程序7.10-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.10</title>
<style type="text/css">
.one{
/* 设定单元格间距 */
border-spacing: 10px;
}
.two{
/* 分别设定单元格横向间距、纵向间距 */
border-spacing: 10px 30px;
}
table,td {
border: 1px solid black;
}
</style>
</head>
<body>
<table class="one">
<tr>
<td>大数据</td>
<td>物联网</td>
</tr>
<tr>
<td>云计算</td>
<td>人工智能</td>
</tr>
</table>
<br>
<table class="two">
<tr>
<td>大数据</td>
<td>物联网</td>
</tr>
<tr>
<td>云计算</td>
<td>人工智能</td>
</tr>
</table>
</body>
</html>
7.11案例
<!--示例程序7.11-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.11</title>
<style type="text/css">
.cap{
/* 默认值 标题在表格上方 */
/* caption-side: top; */
/* 标题在表格下方 */
caption-side: bottom;
}
table,th,td {
border: 1px solid black;
}
</style>
</head>
<body>
<table class="cap">
<caption>值班表</caption>
<tr>
<th>时间</th>
<th>值日生</th>
</tr>
<tr>
<td>08：00-12:00</td>
<td>张红敏</td>
</tr>
<tr>
<td>14：00-17:00</td>
<td>李凯全</td>
</tr>
<tr>
<td>19：00-22:00</td>
<td>曾天艺</td>
</tr>
</table>
</body>
</html>
7.12案例
<!--示例程序7.12-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.12</title>
<style type="text/css">
.emp{
/* 默认值 空单元格也有边框 */
/* empty-cells: show; */
/* 空单元格没有边框 */
empty-cells: hide;
}
table,th,td {
border: 1px solid black;
}
</style>
</head>
<body>
<table class="emp">
<tr>
<td>有内容的单元格</td>
<td>有内容的单元格</td>
</tr>
<tr>
<td>有内容的单元格</td>
<td></td>
</tr>
<tr>
<td>有内容的单元格</td>
<td>有内容的单元格</td>
</tr>
</table>
</body>
</html>
7.16案例
<!--示例程序7.16-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.16</title>
</head>
<body>
<h2>童话镇--背景音乐</h2>
<embed src="media/童话镇.mp3"></embed>
</body>
</html>
扫一扫
957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
