自学内容网 自学内容网
自学内容网 > 正文

第七章利用CSS和多媒体美化页面

🕗 发布于 2024-11-16 00:42 css  前端  

 7.1 CSS 链接的美化

在网页设计中，超链接是构建网站的关键元素，它能将各个网页连接起来，形成一个完整的网站结构。前面我们已经对超链接的基础知识有所了解。然而，超链接默认的样式往往无法满足设计师对于视觉效果的要求，这时就需要通过 CSS 样式设置来美化超链接。

 7.1.1 文字链接的美化

在 HTML5 里，`<a></a>`标签专门用于定义超链接，其核心属性是 href，它决定了链接的目标地址。若未设置 href 属性，其他相关属性都无法发挥作用，此时这个标签仅仅是个超链接的占位符。

以下是一个文字链接美化的示例代码：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title></title>

  <style>

    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>

案例2：

<!DOCTYPE html>

<html lang="en">

<head>
    <!-- 设置页面字符编码为UTF-8，并指定页面语言为英语（可根据实际需求修改语言） -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务中心菜单栏</title>
    <style>
        /* 重置默认样式，使页面在不同浏览器上显示更一致 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 整体页面背景设置为淡灰色，营造简洁氛围 */
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
        }

        /* 菜单栏样式 */
        #menu {
            background-color: #ffffff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 20px;
            margin: 20px auto;
            width: 80%;
            border-radius: 5px;
        }

        /* 菜单栏标题样式 */
        #menu h2 {
            color: #333333;
            margin-bottom: 20px;
        }

        /* 链接样式 */
        a {
            text-decoration: none;
            color: #007BFF;
            font-size: 20px;
            margin: 10px;
            display: inline-block;
            transition: all 0.3s ease;
        }

        /* 鼠标悬停链接样式 */
        a:hover {
            color: #FF0000;
            font-size: 22px;
            text-decoration: underline;
        }

        /* 鼠标点击链接样式 */
        a:active {
            color: #008000;
            font-size: 18px;
            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>

 7.1.2 按钮链接的美化

为了让链接呈现出类似按钮的特效，设计师通常会为链接添加特定的边框阴影，并设置统一的背景颜色。

示例代码如下：

<!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>


案例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>服务中心菜单栏</title>
    <style type="text/css">
        /* 全局样式重置，确保在不同浏览器上显示更一致 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 页面主体背景设置为淡蓝色渐变，营造舒适氛围 */
        body {
            background: linear-gradient(to bottom, #e0f2f7, #b3d8e3);
            font-family: Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 菜单栏整体样式 */
        #menu {
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding: 30px;
            text-align: center;
        }

        /* 菜单栏标题样式 */
        #menu h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 28px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        /* 链接通用样式 */
        a {
            text-decoration: none;
            color: #FF5733; /* 链接文字颜色改为橙红色，更醒目 */
            font-size: 20px;
            font-weight: 700;
            margin: 10px;
            padding: 12px 20px;
            border-radius: 30px;
            background-color: rgba(240, 248, 255, 0.8); /* 链接背景色改为半透明浅蓝色 */
            box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.1), 5px 5px 10px rgba(0, 0, 0, 0.1); /* 增加内外阴影效果 */
            display: inline-block;
            transition: all 0.3s ease;
        }

        /* 未访问和已访问链接样式 */
        a:link,
        a:visited {
            box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.1), 5px 5px 10px rgba(0, 0, 0, 0.1);
        }

        /* 鼠标悬停链接样式 */
        a:hover {
            font-size: 24px;
            color: #FF0000; /* 悬停时文字颜色变为红色 */
            background-color: rgba(255, 240, 240, 0.8); /* 悬停时背景色变为半透明浅红色 */
            box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.1), 3px 3px 8px rgba(0, 0, 0, 0.1); /* 调整悬停时阴影效果 */
        }

        /* 鼠标点击链接样式 */
        a:active {
            font-size: 20px;
            color: #008000; /* 点击时文字颜色变为绿色 */
            background-color: rgba(240, 255, 240, 0.8); /* 点击时背景色变为半透明浅绿色 */
            box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2), -6px -6px 10px rgba(0, 0, 0, 0.2); /* 调整点击时阴影效果 */
        }
    </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 背景链接的美化

除了文字链接和按钮链接，为链接设置不同的背景颜色或背景图片也是常见的美化方式，以此实现背景链接的效果。

以下是多个背景链接美化的示例：

<!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: lightgrey;
color: red;
}
a:hover{
background-color: brown;
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>


<!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-image: url(./img/menu_1.jpg);/*链接未被访问以及*/
color: red;
}
a:hover{
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>


<!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-image: url(./img/menu_1.jpg);/*链接未被访问以及*/
color: red;
}
a:hover{
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.2 CSS 列表的美化

在 CSS 样式中，主要通过`list - style - type`、`list - style - image`和`list - style - position`这三个属性来改变列表修饰符的类型。

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

这个属性用于设置或检索对象的列表项所使用的标记类型。当`list - style - image`属性值为`none`或者指定的`url`地址图片无法显示时，`list - style - type`属性就会生效。

示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>食品分类展示</title>
    <style type="text/css">
        /* 定义通用的div样式 */
        div {
            width: 110px;
            height: 130px;
            border: 1px solid red;
            float: left;
        }

        /* 定义各种列表样式的类名及对应样式 */
       .list-style-decimal {
            list-style-type: decimal;
            /* 标记阿拉伯数字 */
        }

       .list-style-lower-roman {
            list-style-type: lower-roman;
            /* 标记小写罗马数字 */
        }

       .list-style-upper-roman {
            list-style-type: upper-roman;
            /* 标记大写罗马数字 */
        }

       .list-style-lower-alpha {
            list-style-type: lower-alpha;
            /* 标记小写英文字母 */
        }

       .list-style-upper-alpha {
            list-style-type: upper-alpha;
            /* 标记大写英文字母 */
        }

       .list-style-square {
            list-style-type: square;
            /* 标记方块 */
        }

       .list-style-circle {
            list-style-type: circle;
            /* 标记空心圆 */
        }
    </style>
</head>

<body>
    <center>
        <h2>食品分类</h2>
    </center>

    <!-- 饮料分类及列表 -->
    <div>
        <h3>饮料</h3>
        <ol class="list-style-decimal">
            <li>咖啡</li>
            <li>茶</li>
            <li>可口可乐</li>
        </ol>
    </div>

    <!-- 甜品分类及列表 -->
    <div>
        <h3>甜品</h3>
        <ol class="list-style-lower-roman">
            <li>蛋糕</li>
            <li>糖水</li>
            <li>奶酪</li>
        </ol>
    </div>

    <!-- 水果分类及列表 -->
    <div>
        <h3>水果</h3>
        <ol class="list-style-upper-roman">
            <li>荔枝</li>
            <li>苹果</li>
            <li>猕猴桃</li>
        </ol>
    </div>

    <!-- 蔬菜分类及列表 -->
    <div>
        <h3>蔬菜</h3>
        <ol class="list-style-lower-alpha">
            <li>茄子</li>
            <li>南瓜</li>
            <li>西红柿</li>
        </ol>
    </div>

    <!-- 主食分类及列表 -->
    <div>
        <h3>主食</h3>
        <ol class="list-style-upper-alpha">
            <li>米饭</li>
            <li>饺子</li>
            <li>面条</li>
        </ol>
    </div>

    <!-- 调料分类及列表 -->
    <div>
        <h3>调料</h3>
        <ol class="list-style-square">
            <li>八角</li>
            <li class="list-style-circle">麻油</li>
            <li>胡椒粉</li>
        </ol>
    </div>
</body>

</html>

案例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>食品分类展示</title>
    <style type="text/css">
        /* 全局样式重置，确保在不同浏览器上显示更一致 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 页面主体背景设置为淡米色，营造温馨氛围 */
        body {
            background-color: #f9f6f2;
            font-family: Arial, sans-serif;
        }

        /* 食品分类容器样式，用于包裹每个分类的div */
       .food-category {
            width: 200px;
            height: 250px;
            margin: 20px;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            float: left;
            text-align: center;
            background-color: #fff;
            transition: all 0.3s ease;
        }

        /* 鼠标悬停在食品分类容器上的样式 */
       .food-category:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* 食品分类标题样式 */
       .food-category h3 {
            color: #333;
            margin-bottom: 10px;
        }

        /* 有序列表通用样式 */
        ol {
            list-style-position: inside;
            padding-left: 0;
        }

        /* 各种列表样式类的具体样式 */
      .list-style-decimal {
            list-style-type: decimal;
        }

      .list-style-lower-roman {
            list-style-type: lower-roman;
        }

      .list-style-upper-roman {
            list-style-type: upper-roman;
        }

      .list-style-lower-alpha {
            list-style-type: lower-alpha;
        }

      .list-style-upper-alpha {
            list-style-type: upper-alpha;
        }

      .list-style-square {
            list-style-type: square;
        }

      .list-style-circle {
            list-style-type: circle;
        }

        /* 列表项样式 */
        li {
            margin-bottom: 5px;
            color: #666;
        }
    </style>
</head>

<body>
    <h2 style="text-align: center; margin-top: 30px;">食品分类</h2>

    <!-- 饮料分类及列表 -->
    <div class="food-category">
        <h3>饮料</h3>
        <ol class="list-style-decimal">
            <li>咖啡</li>
            <li>茶</li>
            <li>可口可乐</li>
        </ol>
    </div>

    <!-- 甜品分类及列表 -->
    <div class="food-category">
        <h3>甜品</h3>
        <ol class="list-style-lower-roman">
            <li>蛋糕</li>
            <li>糖水</li>
            <li>奶酪</li>
        </ol>
    </div>

    <!-- 水果分类及列表 -->
    <div class="food-category">
        <h3>水果</h3>
        <ol class="list-style-upper-roman">
            <li>荔枝</li>
            <li>苹果</li>
            <li>猕猴桃</li>
        </ol>
    </div>

    <!-- 蔬菜分类及列表 -->
    <div class="food-category">
        <h3>蔬菜</h>
        <ol class="list-style-lower-alpha">
            <li>茄子</li>
            <li>南瓜</li>
            <li>西红柿</li>
        </ol>
    </div>

    <!-- 主食分类及列表 -->
        <div class="food-category">
        <h3>主食</h3>
        <ol class="list-style-upper-alpha">
            <li>米饭</li>
            <li>饺子</li>
            <li>面条</li>
        </ol>
    </div>

    <!-- 调料分类及列表 -->
    <div class="food-category">
        <h3>调料</h3>
        <ol class="list-style-square">
            <li>八角</li>
            <li>麻油</li>
            <li>胡椒粉</li>
        </ol>
    </div>
</body>

</html>

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

在网页设计与文档排版里，此属性很关键，用于设置或检索对象列表项标记的图像。构建列表时，默认标记是简单符号，而它可换成自定义图像，如精心设计的图标、和内容相关的小图。这能增强列表视觉独特性与吸引力，契合设计风格或主题，提升用户体验，让信息传达更生动。比如旅游推荐网页或购物清单应用里，可分别用景点标志性小图、商品缩略图作标记。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例7.5</title>
<style type ="text/css">
ol{
list-style-image: url(./img/list3.jpg);
list-style-type: upper-alpha;
}
li.none{
list-style-image: none;
}
</style>

</head>
<body>
<h3>护肤品系列</h3>
<ol>
<li>洗面奶</li>
<li>柔肤水</li>
<li class="none">保湿霜</li>
<li>眼部精华</li>
<li class="none">防晒霜</li>
</ol>
</body>
</html>

案例2 ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>示例7.5 - 护肤品系列</title>
    <style type="text/css">
        /* 全局样式重置，确保在不同浏览器上显示更一致 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 页面主体背景设置为淡粉色，营造柔和氛围 */
        body {
            background-color: #fce4ec;
            font-family: Arial, sans-serif;
        }

        /* 标题样式 */
        h3 {
            text-align: center;
            color: #333;
            margin-top: 30px;
            margin-bottom: 20px;
            font-size: 24px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        /* 有序列表整体样式 */
        ol {
            list-style-type: upper-alpha;
            list-style-position: inside;
            padding-left: 0;
            margin: 0 auto;
            width: 80%;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            padding: 20px;
        }

        /* 列表项通用样式 */
        li {
            margin-bottom: 10px;
            color: #666;
            font-size: 18px;
            transition: all 0.3s ease;
        }

        /* 鼠标悬停在列表项上的样式 */
        li:hover {
            color: #FF0000;
            background-color: rgba(255, 240, 240, 0.8);
            cursor: pointer;
        }

        /* 自定义列表项样式，去除特定列表项的图片样式 */
        li.none {
            list-style-image: none;
        }

        /* 列表项的图片样式，可根据实际需求调整图片路径和尺寸 */
        ol li {
            list-style-image: url(./img/list3.jpg);
            list-style-image-size: 20px;
            padding-left: 30px;
        }
    </style>
</head>

<body>
    <h3>护肤品系列</h3>
    <ol>
        <li>洗面奶</li>
        <li>柔肤水</li>
        <li class="none">保湿霜</li>
        <li>眼部精华</li>
        <li class="none">防晒霜</li>
    </ol>
</body>

</html>

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

此属性用于设置对象的列表项标记相对于列表内容的位置。

示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 统一设置li的公共样式 */
        li {
            width: 100px;
            border: 2px solid #000000;
        }

        /* 分别设置不同类名的ol的list-style-image和可选的list-style-position样式 */
       .cs {
            list-style-image: url(./img/list1.jpg);
            list-style-position: outside;
        }

       .hd {
            list-style-image: url(./img/list2.jpg);
            list-style-position: inside;
        }

       .qd {
            list-style-image: url(./img/list3.jpg);
        }
    </style>
</head>

<body>
    <div>
        <h3>测试工程师</h3>
        <ol class="cs">
            <li>李四</li>
            <li>王五</li>
            <li>白白</li>
            <li>安阳</li>
            <li>白柳</li>
        </ol>
    </div>
    <div>
        <h3>后端工程师</h3>
        <ol class="hd">
            <li>华星</li>
            <li>扬辉</li>
            <li>浩天</li>
            <li>彬丞</li>
            <li>成怿</li>
            <li>里文</li>
        </ol>
    </div>
    <div>
        <h3>前端工程师</h3>
        <ol class="qd">
            <li>梓扬</li>
            <li>正杰</li>
            <li>亚琪</li>
            <li>慧娟</li>
            <li>志鑫</li>
        </ol>
    </div>
</body>

</html>

案例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>工程师团队展示</title>
    <style>
        /* 全局样式重置，确保在不同浏览器上显示更一致 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 页面主体背景设置为淡灰色，营造简洁专业的氛围 */
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
        }

        /* 容器样式，用于包裹每个工程师分类的div */
        div {
            width: 300px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            text-align: center;
            transition: all 0.3s ease;
        }

        /* 鼠标悬停在容器上的样式 */
        div:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* 标题样式 */
        h3 {
            color: #333333;
            margin-bottom: 15px;
            font-size: 22px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        /* 有序列表通用样式 */
        ol {
            list-style-position: inside;
            padding-left: 0;
            margin: 0;
        }

        /* 列表项通用样式 */
        li {
            width: 100px;
            border: 2px solid #000000;
            margin-bottom: 10px;
            padding: 5px;
            color: #666666;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        /* 鼠标悬停在列表项上的样式 */
        li:hover {
            color: #FF0000;
            background-color: rgba(255, 240, 240, 0.8);
            cursor: pointer;
        }

        /* 不同类名的ol的样式调整 */
      .cs {
            list-style-image: url(./img/list1.jpg);
            list-style-image-size: 20px;
            list-style-position: outside;
            padding-left: 30px;
        }

      .hd {
            list-style-image: url(./img/list2.jpg);
            list-style-image-size: 20px;
            list-style-position: inside;
            padding-left: 30px;
        }

      .qd {
            list-style-image: url(./img/list3.jpg);
            list-style-image-size: 20px;
            list-style-position: inside;
            padding-left: 30px;
        }
    </style>
</head>

<body>
    <div>
        <h3>测试工程师</h3>
        <ol class="cs">
            <li>李四</li>
            <li>王五</li>
            <li>白白</li>
            <li>安阳</li>
            <li>白柳</li>
        </ol>
    </div>
    <div>
        <h3>后端工程师</h3>
        <ol class="hd">
            <li>华星</li>
            <li>扬辉</li>
            <li>浩天</li>
            <li>彬丞</li>
            <li>成怿</li>
            <li>里文</li>
        </ol>
    </div>
    <div>
        <h3>前端工程师</h3>
        <ol class="qd">
            <li>梓扬</li>
            <li>正杰</li>
            <li>亚琪</li>
            <li>慧娟</li>
            <li>志鑫</li>
        </ol>
    </div>
</body>

</html>

7.2.4 复合列表样式(list - style)

这个属性是一种用于设定列表项样式的快捷综合写法，通过它能够同时对列表项类型属性（`list - style - type`）、列表项图片属性（`list - style - image`）以及列表项位置属性（`list - style - position`）进行设置。 其语法为：`list - style： list - style - type | list - style - position | list - style - image`。也就是说，在使用这个语法时，可按照相应规则对上述三种属性进行统一的设定操作，方便快捷地完成列表项样式的整体规划。

示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 提取li的公共样式为一个类 */
      .common-li {
            width: 100px;
            border: 2px solid #000000;
        }

      .cs {
            list-style: decimal url(./img/list1.jpg) outside;
        }

      .hd {
            list-style: circle url(./img/list2.jpg) inside;
        }

      .qd {
            list-style: square url(./img/list3.jpg) inside;
        }

      .qd li {
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <div>
        <h3>测试工程师</h3>
        <ol class="cs">
            <li class="common-li">李四</li>
            <li class="common-li">王五</li>
            <li class="common-li">白白</li>
            <li class="common-li">安阳</li>
            <li class="common-li">白柳</li>
        </ol>
    </div>
    <div>
        <h3>后端工程师</h3>
        <ol class="hd">
            <li class="common-li">华星</li>
            <li class="common-li">扬辉</li>
            <li class="common-li">浩天</li>
            <li class="common-li">彬丞</li>
            <li class="common-li">成怿</li>
            <li class="common-li">里文</li>
        </ol>
    </div>
    <div>
        <h3>前端工程师</h3>
        <ol class="qd">
            <li class="common-li">梓扬</li>
            <li class="common-li">正杰</li>
            <li class="common-li">亚琪</li>
            <li class="common-li">慧娟</li>
            <li class="common-li">志鑫</li>
        </ol>
    </div>
</body>

</html>

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

虽然`list - style - image`属性可以方便地设置列表项图像，但它无法精确控制图像替换的项目符号与文字之间的距离。因此，可以利用`background - image`属性来实现更精准的控制。

示例：

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

</ol>
</body>
</html>

 7.3 CSS 表格的美化

 7.3.1 border—collapse

border - collapse 属性的作用在于决定表格边框的呈现形式，即这些边框是合并成一个单一的边框，还是按照标准的 HTML 样式分开显示。

其语法为：border - collapse:separate | collapse | inherit。

在参数方面，separate 是默认值，当取值为 separate 时，表格边框是分开的，不会进行合并，而且此时 border - spacing 和 empty - cells 属性会起作用。collapse 表示边框合并，若相邻边框则共用一个边框，在此情况下，border - spacing 和 empty - cells 属性会被忽略。Inherit 则表示从父元素继承相应的值。

示例如下：
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的美化</title>
<style type="text/css">
table{
border-collapse: collapse;/*单元格边框有合并*/
}
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>程序设计</td><td>6.0</td><td>机考</td>
</tr>
</table>
</body>
</html>

 7.3.2 border—spacing

在网页设计和 HTML 表格相关的样式设定中，border - spacing 属性有着重要的作用。它的功能实际上等同于 HTML 表格标签中的 cellspacing 属性。具体而言，当表格的边框呈现独立状态时，也就是 border - collapse 属性被设置为 separate 的情况下，border - spacing 属性开始发挥作用。此时，它主要负责设定相邻单元格边框之间的间距，这个间距包括横向和纵向两个方向。

从语法层面来看，其语法格式为：border - spacing：length。这里的参数 length 有着特定的要求，它是由数字和单位共同组成的长度值。需要注意的是，这个值不允许是负数，因为负的间距在实际的表格布局中没有合理的意义。而且在使用这个属性时，根据提供的 length 值的数量不同，其作用方式也有所区别。如果只提供一个 length 值，那么这个值将同时被应用于相邻单元格边框之间的横向和纵向的间距，实现了一种统一的设置。然而，如果提供了两个 length 值，那么第一个 length 值将会专门作用于横向间距，而第二个 length 值则会专门应用于纵向间距，这样就可以更加精细地对表格单元格之间的间距进行个性化的调整。这种特性使得开发者在设计表格样式时能够更加灵活地控制表格的外观，以满足不同的设计需求。

示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>间距</title>
    <style type="text/css">
        table {
            border: 1px solid black;
        }

        td {
            border: 1px solid black;
        }

        /* 统一设置两个表格类的公共样式，即单元格有边框 */
      .one {
            border-spacing: 10px;
        }

       .two {
            border-spacing: 10px 30px;
        }
    </style>
</head>

<body>
    <table class="one">
        <tr>
            <td>大数据</td>
            <td>物联网</td>
        </tr>
        <tr>
            <td>云计算</td>
            <td>人工智能</td>
        </tr>
    </table>
    <table class="two">
        <tr>
            <td>大数据</td>
            <td>物联网</td>
        </tr>
        <tr>
            <td>云计算</td>
            <td>人工智能</td>
        </tr>
    </table>
</body>

</html>

案例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>间距 - 技术领域展示</title>
    <style type="text/css">
        /* 全局样式重置，确保在不同浏览器上显示更一致 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 页面主体背景设置为淡灰色，营造简洁氛围 */
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
        }

        /* 表格整体样式 */
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
        }

        /* 表格边框样式 */
        table,
        td {
            border: 1px solid #ccc;
        }

        /* 统一设置两个表格类的公共样式，即单元格有边框 */
     .one {
            border-spacing: 10px;
        }

      .two {
            border-spacing: 10px 30px;
        }

        /* 表格单元格样式 */
        td {
            padding: 15px;
            color: #666;
            text-align: center;
        }

        /* 表格标题样式（可根据需要添加标题，这里仅示例样式） */
        caption {
            font-size: 18px;
            color: #333;
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table class="one">
        <caption>技术领域表格一</caption>
        <tr>
            <td>大数据</td>
            <td>物联网</td>
        </tr>
        <tr>
            <td>云计算</td>
            <td>人工智能</td>
        </tr>
    </table>
    <table class="two">
        <caption>技术领域表格二</caption>
        <tr>
            <td>大数据</td>
            <td>物联网</td>
        </tr>
        <tr>
            <td>云计算</td>
            <td>人工智能</td>
        </tr>
    </table>
</body>

</html>

 7.3.3 caption—side

caption - side属性的作用是设置或者检索表格标题位于表格的哪一侧，需要注意的是，该属性必须和表格的caption标签配合使用。 其语法为：caption - side：top | right | bottom | left。 在参数方面，top是默认值，意味着标题会被指定在表格的上方。right则表示将标题设置在表格的右侧。bottom是指定标题在表格的下方。而left是用于指定标题在表格的左边。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>7.11</title>
<style type="text/css">
.cap{
caption-side: bottom;/*设置表格标题的位置*/
}
table,td,th{
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>

案例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>7.11 - 值班表</title>
    <style type="text/css">
        /* 全局样式重置，确保在不同浏览器上显示更一致 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 页面主体背景设置为淡蓝色渐变，营造清新舒适的氛围 */
        body {
            background: linear-gradient(to bottom, #e0f2f7, #b3d8e3);
            font-family: Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 表格整体样式 */
        table {
            border-collapse: collapse;
            width: 60%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            overflow: hidden;
        }

        /* 表格标题样式 */
        caption {
            caption-side: bottom;
            font-size: 18px;
            color: #333;
            margin-top: 15px;
            text-align: center;
            font-style: italic;
        }

        /* 表头样式 */
        th {
            background-color: #4CAF50;
            color: white;
            font-weight: bold;
            padding: 12px 20px;
            text-align: center;
            border-bottom: 2px solid white;
        }

        /* 表格单元格样式 */
        td {
            padding: 10px 15px;
            text-align: center;
            color: #555;
            border-bottom: 1px solid #ccc;
        }

        /* 鼠标悬停在表格行上的样式 */
        tr:hover {
            background-color: rgba(240, 248, 255, 0.8);
        }

        /* 表格边框样式 */
        table,
        td,
        th {
            border: 1px solid #ccc;
        }
    </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.3.4 empty—cells

empty - cells属性在表格处理中有着重要的作用，它主要用于设置或者检索在表格的单元格没有内容时，是否要显示该单元格的边框这一情况。需要特别注意的是，此属性只有在表格边框独立的情况下才会生效，也就是说，当border - collapse属性的值等于separate时，empty - cells属性才能发挥其作用。 其语法结构为：empty - cells:show | hide。 在参数含义方面，show是该属性的默认值。当设置为show时，就意味着当表格中某个单元格没有内容时，依然会显示该单元格的边框，这样可以保持表格的完整性和视觉上的连贯性，让用户在浏览表格时，能清晰地看到每个单元格的范围。而当参数为hide时，则指定在表格的单元格无内容的情况下，隐藏该单元格的边框，这种设置在某些特定的设计场景中可能会更符合视觉上的简洁性需求。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>7.12</title>
<style type="text/css">
.emp{
border-collapse: separate;
empty-cells: hide;/*空单元格边框、背景均不显示*/
/*empty-cells: show;*//*默认键 空单元格正常显示*/
}
table,td,th{
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>

案例2:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>7.11 - 值班表</title>
    <style type="text/css">
        /* 全局样式重置，确保在不同浏览器上显示更一致 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 页面主体背景设置为淡灰色，营造简洁氛围 */
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
        }

        /* 表格整体样式 */
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
        }

        /* 表格标题样式 */
        caption {
            caption-side: bottom;
            font-size: 18px;
            color: #333;
            margin-top: 10px;
            text-align: center;
        }

        /* 表头样式 */
        th {
            background-color: #e0e0e0;
            color: #333;
            font-weight: bold;
            padding: 10px;
            text-align: center;
        }

        /* 表格单元格样式 */
        td {
            padding: 10px;
            text-align: center;
            color: #666;
        }

        /* 表格边框样式 */
        table,
        td,
        th {
            border: 1px solid #ccc;
        }
    </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.4 多媒体的添加与美化

多媒体的添加与美化是一个在多媒体内容中增加新元素或者对现有元素进行优化，从而提升其视觉效果和吸引力的过程。以下是一些常见的方法和技巧：

文字与字体：合适的字体和字号选择对于多媒体内容至关重要。同时，对文字的颜色、间距以及对齐方式等进行精细调整，能够让文本更加美观且易于阅读。比如，在设计一个宣传海报时，对于标题可以使用较大字号、醒目的颜色和独特的字体，以吸引观众的注意力；而正文部分则选择清晰易读的字体，保持适当的行距和字距，使内容不会显得拥挤。

图片与图形：添加高质量的图片和图形能够极大地丰富多媒体内容的表现力。专业的图片编辑软件可以用于对图片进行优化，例如调整色彩平衡使图片色彩更加鲜艳真实，提高对比度来突出重点部分，增强清晰度让细节更加清晰可见。在制作一个旅游宣传网页时，插入精美的风景图片能够让游客更直观地感受到目的地的魅力。

视频与音频：合适的音频和视频元素可以为多媒体内容增添趣味性和吸引力。利用专业的视频编辑软件，可以对视频进行剪辑，删除不必要的片段，使内容更加紧凑流畅。还可以添加各种特效，如转场特效、光影特效等，以及调整音频效果，如音量大小、音色等。比如在一个在线课程的多媒体资料中，添加清晰的讲解音频和生动的演示视频，可以帮助学生更好地理解知识。

动画与转场：动画效果和转场效果能够让多媒体内容更加生动流畅。通过使用专门的动画制作软件，可以创建各种类型的动画，如角色动画、物体运动动画等，并能对转场效果进行精心设计，使不同内容之间的切换更加自然。在一个电子相册中，运用淡入淡出等转场效果可以让照片之间的过渡更加平滑。

特效与滤镜：应用特效和滤镜能够改变多媒体内容的风格和氛围。例如，使用图像处理软件可以添加复古滤镜营造怀旧氛围，或者添加模糊特效来突出某个元素。在设计一个艺术展览的宣传资料时，通过添加特殊的艺术效果可以提升整个资料的艺术感。

排版与布局：合理的排版和布局能使多媒体内容更加整齐易读。专业的排版软件可以帮助调整文本的格式和布局，如将内容分为不同的板块，确定各个元素的位置和大小比例等。在制作一份报告的多媒体演示文稿时，清晰的排版可以让观众更容易理解内容结构。

互动与交互：添加互动和交互功能能够提升多媒体内容的用户参与度。例如，通过交互设计工具创建可点击的按钮、菜单、调查问卷等元素。在一个在线游戏的多媒体界面中，设计良好的交互功能可以让玩家更加沉浸在游戏体验中。

 7.4.1 <embed>标签的使用

<embed>标签在网页设计中具有重要作用，它可以在网页中插入各种类型的多媒体文件，像 WMV、MP3、AVI、MP4、SWF、MOV、RMVB 等格式都可以。不过需要注意的是，在使用<embed>标签之前，用户需要确保已经安装了相应的插件，否则多媒体文件将无法正常播放。

以下是一个使用<embed>标签插入多媒体文件的示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<center>
<h2>插入动画：阳春三月</h2>
<embed src="media/阳春三月.swf"></embed>
<h2>插入音频</h2>
<embed src="media/听!是谁在唱歌.mp3"></embed>
<h2>插入视频</h2>
<embed src="media/第五空间.mp4"></embed>
</center>
</body>
</html>

 7.4.2 <bgsound>标签的使用

<bgsound>标签是 IE 浏览器中用于设置网页背景音乐的元素。它可以将音乐文件嵌入到网页中，并且不会占据页面空间。它支持播放的声音文件格式包括 WAV、AU、MIDI、MP3 等。<bgsound>标签的参数设置并不多，常用的属性可以参考表 7 - 7。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>7.16</title>
</head>
<body>
<h2>童话镇:插入音频</h2>
<bgsound src="media/童话镇.mp3" loop="-1"></bgsound>/*loop是设置循环次数*/
<embed src="童话镇.mp3"></embed>
</body>
</html>
修改一下问题不能改变bgsound

 7.4.3 HTML5 新增的多媒体标签

7.4.3.1 <audio>标签

<audio>标签用于在网页中定义声音，比如音乐或其他音频流。此标签默认是隐藏的，用户可以通过设置相关属性来控制其显示和播放功能。

示例：

<h1>audio标签插入音频</h1>
<audio src="media/铃铛.mp3" controls="controls" ></audio>

7.4.3.2 <video>标签

<video>标签用于在网页中定义视频，例如电影片段或其他视频流。<video>标签在页面中嵌入视频的代码格式和<audio>标签的使用方式相似。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>video标签插入视频</title>
</head>
<body>
    <h1>video标签插入视频</h1>
    <video src="media/第五空间.mp4"controls="controls"></video>
</body>
</html>

 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:700px;

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:hover{
 font-size:14px;
}
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>
<a href="#" table="_blank">交通路况</a>
<a href="#" table="_blank">娱乐设施</a>
<a href="#" table="_blank">美食特产</a>
<a href="#" table="_blank">历史文化</a>
<a href="#" table="_blank">注意事项</a>
</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" controls="controls"></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>

在这个综合案例中，通过运用之前提到的各种 CSS 样式和多媒体元素，打造出了一个具有丰富内容和视觉吸引力的海洋旅游胜地介绍页面。页面中的链接经过美化，呈现出按钮式的外观，列表使用了特定的图像和类型进行修饰，表格的边框和间距也经过了精心设置，同时还嵌入了视频和音频元素，为用户带来更加生动的体验。


原文地址：https://blog.csdn.net/KO2131855283/article/details/143692353

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

  • VBA学习笔记：基础知识

    若提示宏被禁止，解决办法之一：工具-宏-安全性-安全级-中，关闭excel重新打开，启用宏。Dim arr(1 to 10) As Integer 数组。Dim x As Integer 整数。Dim

    阅读更多2024-11-16
  • swoole mysql连接池使用

    并不支持连结池的功能。连结池通常是数据库连接池的一种，它能够管理多个数据库连接，避免了频繁创建和关闭连接的开销，提高了系统的性能。释放连接，以便其他协程可以使用。这样就实现了连接的复用，提高了系统的性

    阅读更多2024-11-16
  • Jmeter中的监听器（三）

    假设我们需要测试一个Web应用，并使用比较断言来验证两个请求的响应数据是否一致，然后使用“比较断言可视化器”来查看比较结果。假设我们需要测试一个Web应用，并使用断言来验证响应数据的正确性，然后使用“

    阅读更多2024-11-16
  • Area-Composition模型部署指南

    Area-Composition模型可以通过输入不同的提示词，然后根据各部分提示词进行融合生成图片。本文详细介绍了如何实现该模型的本地部署。

    阅读更多2024-11-16
  • 3.task1 suimove helloword 上链

    水龙头”通常指的是一种分发加密货币或代币的机制，尤其是通过小额赠送或奖励的方式来吸引用户参与。网络问题 ，切换为国内源。move.toml中修改。

    阅读更多2024-11-16
  • Unity类银河战士恶魔城学习总结（P126 Item ToolTip物品提示）

    本章节实现了把鼠标放到物品上面就会显示物品属性

    阅读更多2024-11-16
  • 游戏如何应对内存修改

    由于进行内存修改需要提供root权限，GG修改器常运行虚拟机、虚拟框架等环境，在获取root权限后，可以使用magisk实现对游戏隐藏进程，来躲避游戏检测，让传统的检测手段失效，对抗难度大幅度提升。内

    阅读更多2024-11-16
  • C#从入门到放弃

    C#是一个编程语言。

    阅读更多2024-11-16
  • NCC前端调用查询弹框

    选择左侧 查询区 拖拽指右侧，并添加对应的查询模板字段，注意右上角 区域编码要维护card_query。2. 动态建模平台- 开发配置- 应用管理 - 应用注册 下找到对应的单据模板。6. 卡片下调用

    阅读更多2024-11-16
  • UI库架构设计

    工程架构：monorepo，core + components + hooks +utils …测试，单元测试，vitest，jest+react-testing-library。构建打包：rollu

    阅读更多2024-11-16
自学内容网
Copyright © 2015-2024