CSS入门二、美化页面元素

news2025/1/16 3:52:50

零、文章目录

文章地址

  • 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
  • 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

  • Gitee：https://gitee.com/bluecusliyou/TechLearn
  • Github：https://github.com/bluecusliyou/TechLearn

CSS入门二、美化页面元素

1、字体属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

image-20230110140232344

（1）字体系列font-family

  • font-family 属性定义文本的字体系列。

  • 各种字体之间必须使用英文逗号隔开，如果有空格隔开的多个单词组成的字体加引号。

  • 常见取值：

    • 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…
    • 字体系列：sans-serif、serif、monospace等……

  • 渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体，如果都不支持，此时会显示系统默认自带字体。

  • 兼容性：尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体系列</title>
    <style>
     h2 {
         font-family: '微软雅黑';
     }
     p {
        /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
        font-family: 'Times New Roman', Times, serif;
     }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

image-20221218102316065

（2）字体大小font-size

  • font-size 属性定义字体大小。
  • px（像素）大小是我们网页的最常用的单位。
  • 谷歌浏览器默认的文字大小为16px。不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
  • 可以给 body 指定整个页面文字的大小，标题标签需要单独指定大小才会生效。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体大小</title>
    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

image-20221218102459428

（3）字体粗细font-weight

  • font-weight 属性设置文本字体的粗细。
  • 实际开发时，我们更喜欢用数字表示粗细。
  • 要让加粗标签（比如 h 和 strong 等) 不加粗，设置font-weight：400就可以。

image-20221214152026018

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体大小</title>
    <style>
       .bold {
           /* font-weight: bold; */
           /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */
           /* 实际开发中,我们提倡使用数字 表示加粗或者变细 */
           font-weight: 700;    
       }
       h2 {
           font-weight: 400;   
           /* font-weight: normal;    */
       }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p class="bold">拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

image-20221218103612787

（4）文字样式font-style

  • font-style 属性设置文本的风格。
  • 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

image-20221214152427282

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之文字样式(风格)</title>
    <style>
      p {
          font-style: italic;
      }
      em {
          /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
          font-style: normal;
      }
    </style>
</head>
<body>
    <p>同学,上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

image-20221218123139225

（5）字体复合属性font

  • 字体属性可以把以上文字样式综合来写，这样可以更节约代码。
  • 记忆口诀：font : style weight size family; swsf （稍微舒服）
  • 使用 font 属性时，必须按语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。
  • 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性。
font: font-style font-weight font-size/line-height font-family;

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之复合属性</title>
    <style>
       /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>
</head>
<body>
   <div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>

image-20221218152911398

（6）字体属性总结

image-20221214152830951

2、文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

image-20230109151235797

（1）文本颜色color

  • color 属性用于定义文本的颜色，可以指定预定义颜色枚举，十六进制，或者RGB或者RGBA。
  • 开发中最常用的是十六进制，前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。
  • RGB可以指定三种颜色的值，或者RGBA，在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1。
color:#A983D8;
color:red;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观属性之颜色</title>
    <style>
       div {
           /* color: deeppink; */
           /* color: #cc00ff; */
           color: rgb(255, 0, 255);
       }
    </style>
</head>
<body>
   <div>听说喜欢pink色的男生,都喜欢男人</div>
</body>
</html>

image-20221218154510848

（2）对齐文本text-align

  • text-align 属性用于设置元素内文本内容的水平对齐方式。

image-20221214160548089

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文字对齐</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

image-20221218163850577

（3）装饰文本text-decoration

  • text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
  • 重点记住如何添加下划线， 如何删除下划线 ， 其余了解。

image-20221214160808306

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之装饰文本</title>
    <style>
        div {
            /* 下划线 */
            /* text-decoration: underline;   */
            /* 删除线 */
            /* text-decoration: line-through; */
            /* 上划线 */
            text-decoration: overline;
        }
        
        a {
            /* 取消a默认的下划线 */
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <a href="#">粉红色的回忆</a>
</body>
</html>

image-20221218213811967

（4）文本缩进text-indent

  • text-indent 属性用来指定文本的第一行的缩进长度，通常是将段落的首行缩进。甚至该长度可以是负值。
  • em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            /* 文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;  
        }
    </style>
</head>
<body>
       <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

image-20221218214652418

（5）行间距line-height

  • line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

image-20221214161211913

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之行间距</title>
    <style>
        div {
            line-height: 26px;
        }
        p {
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
    <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
    <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

image-20221218221153800

（6）文本属性总结

image-20221214161258499

（7）综合案例–天气预报

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天气预报</title>
    <style>
        body {
            font: 16px/28px 'Microsoft YaHei';
        }
        
        h1 {
            /* 文字不加粗 */
            font-weight: 400;
            /* 让h1里面的文字水平居中对齐 */
            text-align: center;
        }
        
        a {
            text-decoration: none;
        }
        
        .gray {
            color: #888888;
            font-size: 12px;
            text-align: center;
        }
        
        .search {
            color: #666;
            /* #666666     #666
           #ff00ff    #f0f */
            width: 170px;
        }
        
        .btn {
            font-weight: 700;
        }
        
        p {
            /* 首行缩进2个字的距离 */
            text-indent: 2em;
        }
        
        .pic {
            /* 想要图片居中对齐,则是让它的父亲 p标签添加 水平居中的代码 */
            text-align: center;
        }
        
        .footer {
            color: #888888;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <h1> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div class="gray"> 2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>
        <input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button>
    </div>
    <hr>
    <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>

    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
    <p class="pic">
        <img src="images/pic.jpeg" alt="">
    </p>
    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>



    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>

    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>

    <p> 不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>

    <p class="footer"> 本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>

</html>

image-20221221103453945

4、背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

（1）背景颜色background-color

  • background-color 属性定义了元素的背景颜色。
  • 一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。
background-color:颜色值;
background-color:transparent;

案例如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景颜色</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-color: transparent;   透明的 清澈的  */
            /* background-color: red; */
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20221222072738379

（2）背景图片background-image

  • background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片。
  • 优点：非常便于控制位置. (精灵图也是一种运用场景)。
  • 注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。
  • 页面元素可同时添加背景颜色和背景图片，背景图片会压住背景颜色。
background-image : none | url (url)

image-20221216153748015

案例如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* 不要落下 url()   */
            background-image: url(images/logo.png);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20221222072955721

（3）背景平铺background-repeat

  • background-repeat用来指定背景图像平铺。
  • 默认情况下是平铺的，不需要平铺需要指定no-repeat。
background-repeat: repeat | no-repeat | repeat-x | repeat-y

image-20221216154009710

案例如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片平铺</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认的情况下,背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3. 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4. 沿着Y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20221222073638747

（4）背景图片位置background-position

  • background-position 属性可以改变图片在背景中的位置。
  • 参数代表的意思是：x 坐标和 y 坐标。 可以使用方位名词或者精确单位。
background-position: x y;

image-20221222073851117

  1. 参数是方位名词
  • 如果指定两个方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致。
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
  1. 参数是精确单位
  • 如果指定两个数值，第一个肯定是 x 坐标，第二个一定是 y 坐标
  • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
  1. 参数是混合单位
  • 如果精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标。

方位名词说明如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-方位名词</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* background-position:  方位名词; */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
            /* background-position: center right; */
            /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
            /* background-position: right; */
            /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
            background-position: top;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

方位名词案例1如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置方位名词应用一</title>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            background-color: pink;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(images/icon.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 1.5em;
        }
    </style>
</head>

<body>
    <h3>
        成长守护平台
    </h3>
</body>

</html>

image-20221222075235795

方位名词案例2大图居中如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超大背景图片</title>
    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            /* background-position: center top; */
            background-position: center 40px;
        }
    </style>
</head>

<body>

</body>

</html>

image-20221222075757090

精确单位说明如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-精确单位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px 50px; x轴一定是 20  y轴一定是 50 */
            /* background-position: 20px 50px; */
            /* background-position: 50px 20px; */
            background-position: 20px;

        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

混合单位说明如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-混合单位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px */
            /* background-position: 20px center; */
            /* 水平是居中对齐  垂直是 20 */
            background-position: center 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

（5）背景图像固定background-attachment

  • background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
  • background-attachment默认值是滚动scroll的，要设置固定需要指定fixed。
background-attachment : scroll | fixed

image-20221222080356883

案例如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景固定</title>
    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            color: #fff;
            font-size: 200px;
        }
    </style>
</head>

<body>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
</body>

</html>

页面滚动背景不动

image-20221222162859120

（6）背景复合写法background

  • 为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。
  • 简写时，没有书写顺序要求，一般约定顺序：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;。
  • 这是实际开发中，我们更提倡的写法。
background: transparent url(image.jpg) repeat-y fixed top ;

案例如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景属性复合写法</title>
    <style>
        body {
            /* background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top; */
            /* 把背景图片固定住 */
            /* background-attachment: fixed;
            background-color: black; */
            background: black url(images/bg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 200px;
        }
    </style>
</head>

<body>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
</body>

</html>

（7）背景总结

image-20221223213330220

（8）综合案例–五彩导航

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例-五彩导航</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(images/bg1.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(images/bg11.png);
        }

        .nav .bg2 {
            background: url(images/bg2.png) no-repeat;
        }

        .nav .bg2:hover {
            background-image: url(images/bg22.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
    </div>
</body>

</html>

image-20221223215204885

5、列表样式

  • 通常我们不使用网页默认的列表样式，而是使用设计的图标。

  • list-style-type：列表小圆点的类型。

  • list-style-image：列表图标。

  • list-style-position：列表图标的位置。

  • list-style：列表样式。

image-20230109163447507

案例如下：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>列表样式</title>
    <style>
        #nav {
            width: 300px;
            background: #a0a0a0;
        }
        
        .title {
            font-size: 18px;
            font-weight: bold;
            text-indent: 1em;
            line-height: 35px;
            /*  颜色，图片，图片位置，平铺方式  */
            background: red url("../images/d.gif") 270px 10px no-repeat;
        }
        
        ul li {
            height: 30px;
            list-style: none;
            text-indent: 1em;
            background-image: url("../images/r.gif");
            background-repeat: no-repeat;
            background-position: 236px 2px;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
            color: #000;
        }
        
        a:hover {
            color: orange;
            text-decoration: underline;
        }
    </style>
</head>

<body>

    <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
            <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
            <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
            <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
            <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
            <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
            <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
            <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a>
            </li>
        </ul>
    </div>
</body>

</html>

image-20230109163930139

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/156043.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【高速数字化仪应用案例系列】虹科数字化仪在光纤领域的应用

【高速数字化仪应用案例系列】虹科数字化仪在光纤领域的应用

光纤应用 光纤越来越多地应用于各种领域。它们能够以光速长距离传输信息&#xff0c;并且损耗低&#xff0c;这使它们成为大容量远程数据通信的主要媒介。因此&#xff0c;光纤网络可以在电信系统中找到&#xff0c;它们用于传输和接收的目的。它们还用于提供各种数字服务&…
阅读更多...
Docker命令-常用命令讲解

Docker命令-常用命令讲解

Docker常用命令 一&#xff1a;帮助命令二&#xff1a;镜像命令1. docker images 查看所有本地的主机上的镜像2. docker search 镜像名3. docker pull 下载镜像4. docker rmi三&#xff1a;容器命令1.docker run 新建容器并启动2.从容器返回到主机&#xff1a;3.docker ps 列出…
阅读更多...
收银软件哪家强？2023年收银软件排行榜新鲜出炉！

收银软件哪家强？2023年收银软件排行榜新鲜出炉！

每家实体店都少不了收银的程序&#xff0c;每个实体店老板都离不开收银的工具。随着信息技术的发展&#xff0c;收银的工具不再只有收银机&#xff0c;更高效、更方便的收银软件&#xff0c;已经成为了零售店老板们的新宠。收银机和收银软件有什么区别&#xff1f;收银机只能对…
阅读更多...
1.11 LED灯点亮串口解析器

1.11 LED灯点亮串口解析器

LED点灯实验 一&#xff0e;电路图&#xff1a; 三极管&#xff1a; NPN类型&#xff1a; PNP类型&#xff1a; NPN类型当基极为高电平时&#xff0c;集电极和发射极导通 PNP类型当基极为低电平时&#xff0c;集电极和发射极导通 由电路图可知LED电路图中三极管为NPN类型&am…
阅读更多...
我在CSDN的2022---2023Flag

我在CSDN的2022---2023Flag

一、加入CSDN我是在2020年12月注册的CSDN&#xff0c;大一上学期就听同学给我讲了这个软件&#xff0c;然后就下载了&#xff0c;里面确实很多优质文章&#xff0c;对于当时向我们这样的初学者来说就是很实用。还记得都是搜什么&#xff0c;求最大值&#xff0c;最小值&#xf…
阅读更多...
Redis热点数据处理

Redis热点数据处理

1、概念热点数据就是访问量特别大的数据。2、热点数据引起的问题流量集中&#xff0c;达到物理网卡上限。请求过多&#xff0c;缓存分片服务被打垮。redis作为一个单线程的结构&#xff0c;所有的请求到来后都会去排队&#xff0c;当请求量远大于自身处理能力时&#xff0c;后面…
阅读更多...
RabbitMQ消息可靠性问题、死信交换机、延迟消息、惰性队列

RabbitMQ消息可靠性问题、死信交换机、延迟消息、惰性队列

目录消息可靠性生产者确保将消息成功送入队列消息确认消息回执消费者确保消息成功从队列中取出并成功消费消费确认机制消费失败重试机制失败策略使用第三种方式&#xff1a;消费者指定失败后转发的交换机使用第一种方式&#xff1a;在队列中指定死信交换机消息持久化问题交换机…
阅读更多...
软件测试常见性能问题案例分析

软件测试常见性能问题案例分析

在用户场景不确定的情况下&#xff0c;我们为了保障软件的正常运行就必须对软件的性能进行测试。下面我们一起来看看在软件测试中常见的性能问题&#xff0c;希望大家可以通过这七个比较典型的案例分析&#xff0c;充分掌握各种性能问题的解决方法。 案例一&#xff1a;某次压…
阅读更多...
Spring Cloud 03 --- Nacos注册中心

Spring Cloud 03 --- Nacos注册中心

前言 注册中心以Map形式存储消费者与生产者的IP和端口 基本概念 &#xff08;1&#xff09;Nacos 是阿里巴巴推出来的一个新开源项目&#xff0c;是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供…
阅读更多...
2023年使用率会很高的9个SSH远程连接工具有这些！网工、运维你们用的是哪个？

2023年使用率会很高的9个SSH远程连接工具有这些！网工、运维你们用的是哪个？

网络工程师和运维工程师我想每天做的最多的一件事就是远程连接了&#xff0c;例如远程连接网络设备、远程连接服务器&#xff08;物理服务器或者云服务器&#xff09;&#xff0c;这个时候大多数用的工具都是基于SSH协议的&#xff0c;每位工程我想都有自己熟悉或者青睐的SSH工…
阅读更多...
时序图文献精度——5.2019-IJCIA-Node Embedding over Temporal Graphs

时序图文献精度——5.2019-IJCIA-Node Embedding over Temporal Graphs

Node Embedding over Temporal Graphs Abstract 作者提出了一种在时间图中嵌入节点的方法。学习时间图的节点和边随时间的演变&#xff0c;并将这种动态整合到时间节点嵌入框架中&#xff0c;用于不同的图预测任务。作者也提出了一个联合损失函数&#xff0c;它通过学习组合节…
阅读更多...
【java算法】稀疏数组/队列/单双链表

【java算法】稀疏数组/队列/单双链表

文章目录线性和非线性结构稀疏数组前言代码刷类型题队列非环形队列环形队列刷题单链表单链表的定义案例演示--代码1.按照顺序添加2.按英雄排名插入3.根据no编号来修改节点信息4.删除节点单链表刷题1.求单链表中有效节点的个数2.查找单链表中的倒数第k个节点3.单链表的反转4.从尾…
阅读更多...
SAP入门技术分享三：OPEN SQL

SAP入门技术分享三：OPEN SQL

OPEN SQL1. 概要&#xff08;1&#xff09;R/3体系结构&#xff08;2&#xff09;SQL定义&#xff08;3&#xff09;OPEN SQL经常使用的命令2. OPEN SQL&#xff08;1&#xff09;SELECT 语句&#xff08;2&#xff09;INTO语句3. FROM语句&#xff08;1&#xff09;选择静态表…
阅读更多...
JSONArray

JSONArray

目录1. 需求2. 测试3. 实现需求4. 相关操作1. 将JSONObject装入JSONArray2. JSONArray与String的相互转换1. 需求 最近有个需求&#xff1a; 要接收某个接口的 JSON 数据&#xff0c;而这个JSON数据有可能是一个 JSON 对象&#xff0c;也有可能是一个 JSON数组。 "{name…
阅读更多...
python数据结构之字符串

python数据结构之字符串

一、字符串的格式化输出 1.1、格式化运算符 print("我跑完了第" str(lap 1) "圈")上面这段输出的代码使用了两个加号做了字符串拼接&#xff0c;并且将整形转换成了字符串。也可以使用一种更好的办法&#xff0c;格式化输出来打印这句话。 print(&quo…
阅读更多...
内存取证——基础知识（volatility内存取证）

内存取证——基础知识（volatility内存取证）

目录 一、基本概念 二、运行内存镜像的获取 2.1 Windows内存镜像获取 2.1.1 Magnet RAM Capture获取内存镜像 2.1.2 AccessData FTK Imager软件获取内存镜像 2.1.3 DumpIt软件获取内存镜像 2.1.4 额外知识补充&#xff1a; 2.2 Linux\Mac OS 下内存镜像获取方法 三、内…
阅读更多...
什么是云渲染？云渲染速度快吗？

什么是云渲染？云渲染速度快吗？

近年来随着计算机技术的逐步发展&#xff0c;万物上‘’云‘’的趋势越发明显&#xff0c;一种基于云计算的SAAS服务平台——云渲染农场开始走入CG行业。而且云渲染农场&#xff08;如Renderbus瑞云渲染&#xff09;也在众多CG小伙伴的眼里成为了不可或缺的一部分。有人问云渲染…
阅读更多...
[ docker相关知识 ] 删除 docker 拉取的容器 -- 解决删除镜像报错问题

[ docker相关知识 ] 删除 docker 拉取的容器 -- 解决删除镜像报错问题

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…
阅读更多...
CSS入门八、CSS3动画

CSS入门八、CSS3动画

零、文章目录 文章地址 个人博客-CSDN地址&#xff1a;https://blog.csdn.net/liyou123456789个人博客-GiteePages&#xff1a;https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee&#xff1a;https://gitee.com/bluecusliyou/TechLearnGithub&#xff1a;https:…
阅读更多...
三、Gradle使用

三、Gradle使用

文章目录三、Gradle使用1 在 idea 中创建普通 java 工程2 在 idea 中创建 ssm 工程3 项目部署3.1 本地tomcat部署项目3.2 Gretty 部署项目3.3 具体使用4 Gradle 对测试支持4.1 默认测试目录及标准输出4.2 Junit 使用4.3 包含和排除特定测试【尚硅谷】Gradle教程-讲师&#xff1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023