宣传册在线设计_广州旅游景点_网站关键词快速排名软件_网站如何进行网络推广

7.1 CSS链接的美化

7.1.1.文字链接的美化

要给CSS的文字链接美化，可以使用以下方法：

更改链接文字的颜色：使用 color 属性来改变链接的颜色。例如：a { color: blue; } 可以将链接文字的颜色设置为蓝色。
添加链接的下划线：使用 text-decoration 属性来添加链接的下划线。例如：a { text-decoration: underline; } 可以为链接添加下划线。
去除链接的下划线：如果你不想要链接有下划线，可以将 text-decoration 属性设置为 none。例如：a { text-decoration: none; } 可以去除链接的下划线。
更改链接的鼠标样式：使用 cursor 属性来改变鼠标在链接上的样式。例如：a { cursor: pointer; } 可以将鼠标样式改为手型。
添加链接的背景色：使用 background-color 属性来添加链接的背景色。例如：a { background-color: yellow; } 可以为链接添加黄色的背景色。
设置链接的字体样式：使用 font-family 属性来改变链接的字体样式。例如：a { font-family: Arial, sans-serif; } 可以将链接的字体样式设置为 Arial 字体。


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">#menu{text-align: center;}a{margin: 10px;}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="#" target="_blank">加入我们</a><a href="#" target="_blank">媒体报道</a><a href="#" target="_blank">官方博客</a><a href="#" target="_blank">帮助中心</a></div></body>
</html>

7.1.2.按钮链接的美化

要美化CSS按钮链接，可以使用以下几种方法：

背景颜色和文字颜色：通过设置按钮的背景颜色和文字颜色来增加对比度，使按钮更容易看清。可以使用CSS的background-color属性和color属性来设置。
鼠标悬停效果：通过设置鼠标悬停时的样式，使按钮在鼠标悬停时有视觉反馈。可以使用CSS的:hover伪类来实现。例如，可以设置按钮的背景颜色在鼠标悬停时改变，或者使用CSS的box-shadow属性添加投影效果。
圆角边框：通过设置按钮的圆角边框，使按钮看起来更加友好和现代。可以使用CSS的border-radius属性来设置按钮的圆角半径。
按钮阴影效果：通过添加按钮的阴影效果来增加按钮的立体感。可以使用CSS的box-shadow属性来添加按钮的阴影。
按钮大小和字体大小：通过调整按钮的大小和字体大小，可以使按钮更加醒目和易于点击。可以使用CSS的width属性和height属性来设置按钮的大小，使用font-size属性来设置字体大小。
按钮样式：可以使用CSS的text-decoration属性来增加按钮的下划线效果，使用CSS的text-transform属性来改变按钮文字的大小写，使用CSS的text-align属性来调整按钮文字的对齐方式。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">#menu{text-align: center;}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.1.3背景链接的美化

要美化背景链接，你可以使用 CSS 来添加样式。以下是一些常见的方法：

添加背景色：使用 background-color 属性来设置背景色
添加背景图像：使用 background-image 属性来设置背景图像。
添加背景重复：使用 background-repeat 属性来设置背景图像的重复方式。常见的值有 repeat（默认）、no-repeat（不重复）、repeat-x（水平重复）和 repeat-y（垂直重复）。
背景定位：使用 background-position 属性来设置背景图像的定位方式。
添加背景边框：使用 border 属性来设置背景边框样式。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>文字链接的美化</title><style type="text/css">#menu{text-align: center;}a{font-size: 20px;text-decoration: none;padding: 10px 15px;margin: -3px;}a:link,a:visited{background-color: lightgray;color: red;}a:hover{background-color: brown;color: white;}a:active{font-size: 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>


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>背景链接的美化</title><style type="text/css">#menu{text-align: center;}a{font-size: 20px;text-decoration: none;padding: 10px 15px;margin: -3px;}a:link,a:visited{/* 链接未被访问以及访问以后 *//* background-color: lightgray; */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-size: 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.2 CSS列表的美化

7.2.1.列表项类型（list-style-type）

list-style-type 是一个 CSS 属性，用于指定列表项的标记类型。它可以使用不同的值来改变列表项的标记样式。以下是一些常见的 list-style-type 值及其对应的列表项标记样式：

none：不显示列表项标记。
disc：实心圆点作为列表项标记。
circle：空心圆圈作为列表项标记。
square：实心方块作为列表项标记。
decimal：十进制数字作为列表项标记。
decimal-leading-zero：有前导零的十进制数字作为列表项标记。
lower-roman：小写罗马数字作为列表项标记。
upper-roman：大写罗马数字作为列表项标记。
lower-alpha：小写字母作为列表项标记。
upper-alpha：大写字母作为列表项标记。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>7.2.1.列表项类型（list-style-type）</title><!-- 列表项类型（list-style-type） --><style>.fir{list-style-type: square;}.sec{list-style-type: circle;}.thr{list-style-type: decimal;}</style></head><body><div><h1>1</h1><ol class="fir"><li>张三</li><li>李四</li><li>王五</li></ol></div><div><h1>2</h1><ol class="sec"><li>李明</li><li>天琪</li><li>张舒</li></ol></div><div><h1>3</h1><ol class="thr"><li>刘禹锡</li><li>赵谦</li><li>孙俪</li></ol></div></body>
</html>

7.2.2.列表项图像（list-style-image）

列表项图像（list-style-image）是一种CSS属性，它允许您为无序列表（ul）或有序列表（ol）的列表项添加自定义图像作为项目标志。使用list-style-image属性，您可以将某个图像应用于每个列表项的前面，以取代默认的标记（例如圆点或数字）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>7.2.1.列表项类型（list-style-type）</title><style><!-- 7.2.2.列表项图像（list-style-image） -->.fir{list-style-image:url(img/list1.jpg);}.sec{list-style-image:url(img/list2.jpg);}.thr{list-style-image:url(img/list3.jpg);}</style></head><body><div><h1>1</h1><ol class="fir"><li>张三</li><li>李四</li><li>王五</li></ol></div><div><h1>2</h1><ol class="sec"><li>李明</li><li>天琪</li><li>张舒</li></ol></div><div><h1>3</h1><ol class="thr"><li>刘禹锡</li><li>赵谦</li><li>孙俪</li></ol></div></body>
</html>

7.2.3.列表项位置（list-style-position）

list-style-position 属性用于指定列表项标记的位置。它有两个可能的值：

inside：列表项标记位于列表项内容的内部。
outside：列表项标记位于列表项内容的外部。

默认情况下，list-style-position 的值是 outside，即标记位于列表项内容的左侧。但是，有时我们可能需要将标记放在列表项内容的内部，以提供更紧凑的布局或者更好的视觉效果。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>7.2.3.列表项位置（list-style-position）</title><style>/* 7.2.3.列表项位置（list-style-position） */li{border: 2px solid #ff00aa;width: 100px;}.fir{list-style-image:url(img/list1.jpg);list-style-position: outside;}.sec{list-style-image:url(img/list2.jpg);list-style-position: inside;}.thr{list-style-image:url(img/list3.jpg);}.sec li{padding-left: 50px;}</style></head><body><div><h1>1</h1><ol class="fir"><li>张三</li><li>李四</li><li>王五</li></ol></div><div><h1>2</h1><ol class="sec"><li>李明</li><li>天琪</li><li>张舒</li></ol></div><div><h1>3</h1><ol class="thr"><li>刘禹锡</li><li>赵谦</li><li>孙俪</li></ol></div></body>
</html>

7.2.4.复合列表样式（list-style）

当我们使用 CSS 的 list-style 属性来改变列表样式时，有三个子属性可以使用：

list-style-type：用于指定列表项的标记类型，比如实心圆（disc）、空心圆（circle）、实心方块（square）、小写字母（lower-alpha）、大写字母（upper-alpha）等等。
list-style-position：用于指定列表项的标记位置，可以是内部（inside）或者外部（outside）。
list-style-image：用于指定列表项的自定义标记图像，可以使用图像的 URL。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>7.2.4.复合列表样式（list-style）</title><style>/* 7.2.3.列表项位置（list-style-position） */li{border: 2px solid #ff00aa;width: 100px;}.fir{list-style: spure url(img/list1.jpg) outside;}.sec{list-style: circle url(img/list2.jpg) intside;}.thr{list-style: decimal url(img/list3.jpg) intside;}.sec li{padding-left: 50px;}</style></head><body><div><h1>1</h1><ol class="fir"><li>张三</li><li>李四</li><li>王五</li></ol></div><div><h1>2</h1><ol class="sec"><li>李明</li><li>天琪</li><li>张舒</li></ol></div><div><h1>3</h1><ol class="thr"><li>刘禹锡</li><li>赵谦</li><li>孙俪</li></ol></div></body>
</html>

7.2.5.利用背景图像实现列表项标记

可以使用CSS的list-style-image属性来使用背景图像作为列表项的标记。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.8</title><style>li{background: url(img/list4.jpg) no-repeat;padding-left: 30px;list-style-type: none;height: 50px;}</style></head><body><h3>快递公司</h3><ol><li>邮政快递</li><li>顺丰快递</li><li>京东快递</li><li>圆通快递</li></ol></body>
</html>

7.3 CSS表格的美化

7.3.1.border-collapse

border-collapse属性用于定义表格的边框合并方式。它有两个可能的值：

collapse：相邻单元格的边框会合并为一个单一边框。
separate：相邻单元格的边框会保持独立。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.9</title><style type="text/css">table{/* 默认值	单元格边框不合并 *//* border-collapse: separate; *//* 单元格边框合并 */border-collapse: collapse;}table,td,th{border: 1px solid black;}</style></head><body><table><tr><th>课程</th><th>学分</th><th>考试形式</th></tr><tr><th>数据库技术</th><th>4.0</th><th>笔试</th></tr><tr><th>PHP程序设计</th><th>6.0</th><th>机考</th></tr></table></body>
</html>

7.3.2..border-spacing

border-spacing属性用于定义表格中单元格之间的间距。它可以为表格添加一些空隙，从而使表格看起来更美观。

border-spacing属性有两个值，分别表示水平和垂直间距，它们之间由一个斜杠分隔。

<!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.3.3.caption-side

在CSS中，可以使用caption-side属性来调整表格标题（caption）的位置。caption-side属性有以下几个属性值：

top：默认值，表格标题位于表格顶部。
bottom：表格标题位于表格底部。
initial：使用浏览器默认的表格标题位置。
inherit：继承父元素的表格标题位置。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.11</title><style type="text/css">.cap{/* 默认值 设置标题在表格上方 *//* caption-side: bottom; *//* 设置标题在表格下方 */caption-side: bottom;}table,th,td {border: 1px solid black;}</style></head><body><table class="cap"><caption><h2>值班表</h2></caption><tr><th>时间</th><th>值班生</th></tr><tr><th>08:00——12:00</th><th>张红敏</th></tr><tr><th>14:00——17:00</th><th>李凯金</th></tr><tr><th>19:00——22:00</th><th>曾天艺</th></tr></table></body>
</html>

7.3.4.empty-cells

在CSS中，可以使用empty-cells属性来美化表格中的空单元格。empty-cells属性有以下两个属性值：

show：默认值，表示显示空单元格。这意味着即使一个单元格没有内容，也会显示出来。
hide：表示隐藏空单元格。这意味着如果一个单元格没有内容，它将不会显示出来。

<!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.4 多媒体的添加与美化

7.4.1.<embed>标签的使用

需要注意的是，<embed>标签的显示效果可能因浏览器的不同而有所不同。为了更好地控制并提供一致的多媒体体验，推荐使用HTML5的<audio>和<video>标签以及相关的JavaScript API。

还有一个类似的HTML标签是<object>标签，它也可以用于嵌入多媒体内容，但它提供了更多的灵活性和功能。如果需要更复杂的多媒体嵌入和交互，可以考虑使用<object>标签。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 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></body>
</html>

7.4.2.<bgsound>标签的使用

<bgsound>标签是一种过时的HTML标签，它用于在Web页面中嵌入背景音乐。然而，自HTML5发布以来，<bgsound>标签已经被废弃，不再被HTML规范所支持。相反，现在推荐使用<audio>标签来嵌入音频文件。

<audio>标签的src属性指定了音频文件的URL。autoplay属性告诉浏览器在页面加载完成后自动播放音乐。loop属性确保音乐循环播放。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.16</title></head><body><h2>童话镇-背景音乐</h2><bgsound src="media/童话镇.mp3" loop="-1"></bgsound><embed src="media/童话镇.mp3"></embed></body>
</html>

7.4.3.HTML5新增的多媒体标签

HTML5新增了一些多媒体标签，用于更轻松地嵌入和控制多媒体内容。以下是其中的一些标签：

<video>：用于嵌入视频文件，并可以通过控制台进行播放、暂停、调整音量等操作。
<audio>：用于嵌入音频文件，并可以通过控制台进行播放、暂停、调整音量等操作。
<source>：用于为<video>和<audio>标签指定多个源文件，以便在不同的浏览器和设备上选择最合适的文件进行播放。
<track>：用于为<video>和<audio>标签添加字幕、章节、描述等附加的文本轨道。

这些标签的出现使得在HTML页面中嵌入和控制多媒体内容变得更加简单和灵活。同时，HTML5还提供了JavaScript API，使开发者可以通过编程方式控制媒体的播放、暂停、音量等操作。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 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.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.4.3.1.<audio>标签

<audio>标签是HTML5中新增的一个多媒体标签，用于在Web页面中嵌入音频内容。

<audio>标签的src属性指定了音频文件的URL。其中，controls属性用于显示音频播放器的控制按钮，如播放/暂停、音量控制等。在<audio>和</audio>之间的文本内容是在不支持<audio>标签的浏览器中显示的备用文本。

除了src属性和controls属性，<audio>标签还有其他一些常用的属性，例如：

autoplay：自动播放音频。
loop：循环播放音频。
preload：指定浏览器在页面加载时是否预先加载音频文件。

同时，<audio>标签也支持嵌套其他标签，例如<source>标签，用于指定不同的音频格式，以便在不同的浏览器中使用不同的音频格式。

<!-- 7.4.3.HTML5新增的多媒体标签 --><!-- 7.4.3.1.<audio>标签 --><h1>audio标签</h1><audio src="media/铃铛.wav" controls="controls"></audio>

7.4.3.2.<video>标签

<video>标签是HTML5中新增的一个多媒体标签，用于在Web页面中嵌入视频内容。

<video>标签的src属性指定了视频文件的URL。其中，controls属性用于显示视频播放器的控制按钮，如播放/暂停、快进/快退、音量控制等。在<video>和</video>之间的文本内容是在不支持<video>标签的浏览器中显示的备用文本。

<!-- 7.4.3.2.<video>标签 --><h1>video标签</h1><video src="media/第五空间.mp4" controls="controls"></video>

7.5 综合案例——海洋旅游胜地

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>海洋旅游胜地</title><style type="text/css">body{background-image: url(img/bg-0.jpg);}.all{margin: 0px auto;width: 704px;height: 600px;background-image: url(img/bg.jpg);}.top{width: 700px;height: 100px;background-image: url(img/top.jpg);}.menu{width: 700px;height: 60px;text-align: center;}.left,.right{width: 350px;height: 440px;float: left;}a{font-size: 13px;font-weight:700;text-decoration: none;background-color: lightcyan;color: red;margin: 20px;padding: 10px 15px;border-radius: 10px;}a:link,a:visited{box-shadow: 6px 6px 10px black;}a:active{font-size: 13px;box-shadow: -5px -5px 10px black;}h3{color: brown;}ol{list-style-image: url(img/list2.jpg);list-style-type: upper-alpha;}table{border-collapse: separate;border-spacing: 20px;}p{text-indent: 2em;line-height: 22px;font-weight: 700;color: brown;}</style></head><body><div class="all"><div class="top"></div><div class="menu"><br>交通路况	娱乐设施美食特产历史文化注意事项</div><div class="left"><h3>新闻动态</h3><ol><li>英比奥山顶景区</li><li>新加坡空中缆车</li><li>天际线斜坡滑车</li><li>圣淘沙名胜世界</li><li>海洋馆和水上探险乐园</li></ol><video src="media/第五空间.mp4" width="320px" height="250px"></video></div><div class="right"><table><tr><td><img src="img/table1.jpg"/></td><td><img src="img/table2.jpg"/></td></tr><tr><td><img src="img/table3.jpg"/></td><td><img src="img/table4.jpg"/></td></tr></table><p>这里不过是个平凡的小岛，岛上居民过着简单质朴的生活。当新加坡政府正式收回这个小岛时，决定将它改造成一个休闲度假的胜地。</p ><br><br><br><audio src="media/铃铛.mp3" controls="controls" loop="loop"></audio></div></div></body></html>