第七章利用CSS和多媒体美化页面-优快云博客

本文链接：https://blog.youkuaiyun.com/2402_83277711/article/details/143414697

7.1 CSS链接的美化
通过对超链接的CSS样式设置，来达到理想的视觉效果。

7.1.1.文字链接的美化
为了改变最基本的超链接样式，利用伪类选择器，按照“a: link→a: visited→a: hover→a: active→”的顺序，设置不同的链接访问状态效果，为文本超链接添加复杂而多样的样式。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>示例7.1</title>
       <style type="text/css">
           #manu {
               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="manu">
           <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.按钮链接的美化
为了让链接外观看起来像按钮特效，可以为来链接加上不同的边框阴影和相同的背景颜色加以实现。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>示例7.2</title>
       <style type="text/css">
           #manu {
               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="manu">
           <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背景链接的美化
设置不同的背景颜色或者背景图片，实现背景链接。

1.设置背景颜色

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>示例7.3</title>
       <style type="text/css">
           #manu {
               text-align: center;
           }
           a{
               font-size: 20px;
               text-decoration: none;
               margin: -3px;
               padding: 10px 15px;
           }
           a:link,a:visited {
               background-color: lightgrey;
               color: red;
           }
           a:hover {
               background-color: brown;
               color: white;
           }
           a:active {
               font-weight: 700;
               color: lawngreen;
           }
       </style>
   </head>
   <body>
       <div id="manu">
           <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列表的美化
在CSS样式中，主要通过list-style-type、list-style-image、list-style-position这三个属性改变列表修饰符类型

7.2.1.列表项类型（list-style-type）
此属性用来设置或检索对象的列表项所使用的标记类型。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>示例7.3</title>
       <style type="text/css">
           div {
               width: 200px;
               height: 200px;
               border: 1px solid red;
               float: left;
           }
           ol.one{
               l