CSS — 让网页美起来（一）

最新推荐文章于 2024-07-30 16:49:30 发布

畅谈、

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量2.3k

点赞数 6

分类专栏：前端 CSS3 文章标签：前端 css3 html

本文链接：https://blog.csdn.net/qq_52174675/article/details/122265614

版权

前端同时被 2 个专栏收录

17 篇文章 11 订阅

订阅专栏

CSS3

4 篇文章 2 订阅

订阅专栏

文章目录

1、初识 CSS

1.1、什么是 CSS

CSS（Cascading Style Sheet）层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.2、第一个 CSS 程序

首先在 IDEA 中建立文件夹，按照 HTML 和 CSS 分离的原则，分开建立

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DTrNybMx-1641003724678)(E:\Note\image\CSS\1.png)]$

现在我们要实现将标题变色的功能，HTML 无法为我们做到这点，这就需要 CSS 的帮助

HTML 文件：

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

<head>

    <meta charset="UTF-8">
    <title>index</title>
    <!-- 通过 link 标签让 HTML 文件和 CSS 文件链接在一起-->
    <link rel="stylesheet" href="css/style.css"/>

</head>

<body>

<h1>这是一级标题</h1>

</body>
</html>

CSS 文件：

h1{
    color: blueviolet;
}

/*<!--注意所有的 CSS 语法结构都如此

选择器{
    属性1：属性值1;
    属性2：属性值2;
    属性3：属性值3;
}*/

最终样式：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0HQ7JDNy-1641003724680)(E:\Note\image\CSS\2.png)]$

现在我们已经使用 CSS 完成了第一个任务，让我们正式开始 CSS 的学习

1.3、CSS 的 3 种导入方式

1、在 HTML 文件中利用 < style > 标签设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
	<!-- 在 <head> 标签中使用 <style> 标签设置样式-->
    <style>
        h1{
            color: bisque;
        }
    </style>
</head>

<body>

<h1>这是一个标题</h1>

</body>
</html>

2、行内样式，直接在标签元素中使用 style 属性设置（不推荐）

<body>

<h1 style="color: bisque">这是一个标题</h1>

</body>

3、外部样式，利用 CSS 文件设置，就和上边第一个案例一样（推荐）

注：优先级采用就近原则，离元素越近的，优先被显示，所以行内样式一定是优先级最高的

2、选择器

2.1、简单选择器

作用：选择页面上某一个或者某一类元素

2.1.1、元素选择器

使用标签名称作为选择的对象，往往会选择一类的元素（因为一个网页中同一标签的元素很多），所以缺点也很明显，无法修改某一标签下特定的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>

        h1{
            color: #35dbdb;
        }

    </style>
</head>

<body>

<h1 class="first">这是一个标题</h1>
<h1 class="second">这也是一个标题</h1>
<h1 class="third">这还是一个标题</h1>

</body>
</html>

网页效果：

$[[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-crsAr59Q-1641003724681)(E:\Note\image\CSS\3.png)]$

2.2.2、类选择器

使用 class 类名作为选择的方式，这种方择相比第一种更加灵活，而且可以选择同一类名的元素（即复用性）。使用格式：

.类名{

属性1：属性值1；

属性2：属性值2；

}

注意：类名不能以数字开头！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>

        .first {
            color: #35dbdb;
        }
        .second {
            color: #119c9c;
        }
        .third {
            color: #015252;
        }

    </style>
</head>

<body>

<h1 class="first">这是一个标题</h1>
<h1 class="second">这也是一个标题</h1>
<h1 class="third">这还是一个标题</h1>

</body>
</html>

网页界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FoeEWqBl-1641003724681)(E:\Note\image\CSS\4.png)]$

2.2.3、id 选择器

顾名思义，使用 id 作为选择的标准，既然是 id，那么就必须是唯一的，不能和 class 类名一样可以做到重复哦。使用格式：

#id{

属性1：属性值1；

属性2：属性值2；

}

注意：id 名称不能以数字开头！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>

        #aaa{
            color: #b385de;
        }
        #bbb{
            color: #64368e;
        }
        #ccc{
            color: #2d0850;
        }

    </style>
</head>

<body>

<h1 id="aaa">这是一个标题</h1>
<h1 id="bbb">这也是一个标题</h1>
<h1 id="ccc">这还是一个标题</h1>

</body>
</html>

网页界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HIEHmCl7-1641003724682)(E:\Note\image\CSS\5.png)]$

2.2.4、通用选择器

这玩意会改变一个 HTML 文件中所有元素的样式，使用格式：

属性1：属性值1；

属性2：属性值2；

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>

        /*通用选择器*/
        *{
            text-align: center;
            color: rgba(0, 0, 255, 0.51);
        }

    </style>
</head>

<body>

<h1>这是一个标题</h1>
<h1>这也是一个标题</h1>
<h1>这还是一个标题</h1>

</body>
</html>

网页界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1C76B2Yk-1641003724683)(E:\Note\image\CSS\6.png)]$

2.3、组合器

CSS 有四种不同的组合器：

后代选择器：匹配属于指定元素后代的所有元素
子选择器：匹配属于指定元素子元素的所有元素
相邻兄弟选择器：匹配所有作为指定元素的相邻同级的元素
通用兄弟选择器：匹配属于指定元素的同级元素的所有元素

<!-- 后代选择器和子选择器的例子-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        /* 使用后代选择器设置 body 标签下所有 ol 标签元素的样式 */
        body ol {
            border-style: dashed;
            border-color: #9b40f8;
        }

        /* 使用子选择器设置 body 标签下第一代 ul 元素的样式 */
        body > ul {
            border: 2px solid #d159ee;
        }

        /* 并没有任何的作用，因为子选择器只能为下一代，不能隔代设置 */
        /*body > ol {
            border: 2px solid #d159ee;
        }*/

    </style>
</head>

<body>

<!--模拟三个段落，四点，其中第四点包含三个小点-->
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<ul>第一行</ul>
<ul>第二行</ul>
<ul>第三行</ul>
<ul>第四行
    <ol>4.1</ol>
    <ol>4.2</ol>
    <ol>4.3</ol>
    <ul>4.4</ul>
</ul>

</body>
</html>

网页界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SjBthT0C-1641003724684)(E:\Note\image\CSS\7.png)]$

<!-- 相邻兄弟选择器和通用选择器的例子 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index2</title>
    <style>
        /* 使用相邻兄弟选择器设置 class name = “aaa” 的相邻的 p 标签的样式
        注意：是向下，上面相邻的没用 */
        .aaa + p {
            background: #9defd3;
        }

        /* 使用通用兄弟选择器设置 class name = “aaa” 的相邻的 p 标签的样式 
        注意：和相邻兄弟选择器一样，只能向下，不能向上 */
        .bbb ~ p {
            background: #11e39a;
        }
    </style>
</head>

<body>

<p>p1</p>
<p class="aaa">p2</p>
<p>p3</p>
<p class="bbb">p4</p>
<p>p5</p>
<p>p6</p>

</body>

</html>

网页界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kE3GIXI1-1641003724685)(E:\Note\image\CSS\8.png)]$

总结：

符号不要弄错，后代选择器（空格）、子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~），每种选择器的使用范围需要了解。

2.4、结构伪类选择器

结构伪类选择器是为了提供更多的选择元素的方式，具体看代码

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

<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>

        /* 设置 ul 标签内第一个元素的样式 */
        ul li:first-child{
            background: #c2f8a7;
        }

        /* 设置 ul 标签内最后一个元素的样式 */
        ul li:last-child{
            background: #82e349
        }

        /* 选择 p 标签的父类标签下第二个 p 标签的属性样式
        注意：第一个标签必须是 p 标签，否则无效，其实这就是按照顺序查找*/
        p:nth-child(1){
            background: #539c25;
        }

        /* 选择 p 标签的父类标签下第一个孩子（元素）的属性样式
        注意：与 nth-child 不同的是，这个是按照类型查找的，所以就算第一个元素不是 p 标签，也会自动向下寻找第一个 p 标签*/
        p:nth-of-type(2){
            background: #215004;
        }
    </style>
</head>

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

网页界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wJ3iJucc-1641003724691)(E:\Note\image\CSS\9.png)]$

2.5、属性选择器（重要）

属性选择器可以通过元素的属性值进行选取匹配，常用正则表达式进行匹配，非常灵活

常用的匹配原则如下：

精确匹配（=）：选择器用于选取带有指定属性和值的元素
包含（~=）：选择器选取属性值包含指定词的元素
前缀（^=）：选择器用于选取指定属性以指定值开头的元素
后缀（$=）：选择器用于选取指定属性以指定值结尾的元素

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

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        p a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #916ab4;
            text-align: center;
            color: #000000;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /* 属性选择器的功能很强大，通过属性+正则表达式进行匹配 */

        /* 例1、将所有id = first 的元素背景色改成白色 */
        a[id=first]{
            background: #ffffff;
        }

        /* 例2、将所有 class name 包含 item 字符的元素背景色改成白色 */
        a[class~=item]{
            background: #ffffff;
        }

        /* 例3、将所有 href 属性值以 http 开头的元素背景色改成白色 */
        a[href^=http]{
            background: #ffffff;
        }
        
		/* 例4、将所有 href 属性值以 jpg 结尾的元素背景色改成白色 */
        a[href$=jpg]{
            background: #ffffff;
        }

    </style>
</head>

<body>

<p class="Demo">
    <a href="https://www.baidu.com/" class="link item first" id="first">1</a>
    <a href="" class="link item first">2</a>
    <a href="">3</a>
    <a href="https://www.w3school.com.cn">4</a>
    <a href=".jpg"class="link item first">5</a>
    <a href=".png">6</a>
    <a href=".jpg">7</a>
    <a href="" class="link item">8</a>
    <a href="" class="item">9</a>
    <a href="" id="ten">10</a>
</p>

</body>
</html>

结果展示：

初始元素样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OTOPVgYI-1641003724692)(E:\Note\image\CSS\10.png)]$

a[id=first]

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7sOLDuL2-1641003724693)(E:\Note\image\CSS\11.png)]$

a[class~=item]

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocUYHtgI-1641003724693)(E:\Note\image\CSS\12.png)]$

a[href^=http]

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tvR17MTA-1641003724694)(E:\Note\image\CSS\13.png)]$

a[href$=jpg]

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zj0YjVqL-1641003724695)(E:\Note\image\CSS\14.png)]$

补充：使用 ~= 选择器和 *= 选择器的功能一致

3、初级美化网页

3.1、字体样式

字体是非常常见的元素，CSS 中有许多设置字体样式的操作，主要代码展示：

<!--font-family：字体
font-style：斜体
font-size：粗体
font-weigh：大小-->


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

<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        h1 {
            color: #698617;

            /*  下面是字体样式设置  */
            /* 设置字体样式 */
            font-family: 楷体, serif;
            /* 设置斜体字体：normal-正常 italic-斜体 oblique-倾斜（支持较少） */
            font-style: normal;
            /* 字体大小 */
            font-size: 40px;
            /* 设置字体加粗：normal-正常 bold-加粗 light-变细 */
            font-weight: bold;

            /*  下面是文本设置  */
            /* 水平对齐方式：center-居中 left-左对齐 right-右对齐 justify-两端对齐 */
            text-align: center;
            /* 垂直对齐方式：top-向上对齐 middle-居中对齐 bottom-底部对齐 */
            vertical-align: middle;
            /* 删除文本样式，通常用于删除链接的下划线 */
            text-decoration: none;
        }

        #chinese {

            /* 文字缩进 */
            text-indent: 48px;
            /* 可以直接一行搞定
            格式：font：font-style font-weight font-size font-family */
            font: normal normal 24px 宋体;

        }

        #English {
            text-indent: 48px;
            font: italic normal 24px Times New Roman;
        }
    </style>
</head>

<body>

<h1>程序猿</h1>
<p id="chinese">
    程序猿是一种近几十年来出现的新物种，是信息革命的产物，在行为和物种归类上我们
    也可称为码字猴。程序猿是人类在科技研究上的一种新兴进化，拥有无与伦比的
    耐力、超越时代的智商、横穿社会的苦逼相和低于人类平均寿命的显著特点。
    另，可以理解为”程序员“的无奈的自我称呼。
</p>

<p id="English">
    This is a new species that has emerged in recent decades, and is a product of the information revolution. In terms
    of behavior and species classification,
    we. It can also be called a codeword monkey. Ape is a new evolution of human science and technology research, with
    unparalleled.
    Endurance, IQ that transcends the times, the hardship that crosses the society, and the salient characteristics of
    being below the average lifespan of human beings.
    In addition, it can be understood as the helpless self-title of a "programmer".
</p>


</body>
</html>

网页界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bWo4SyS5-1641003724696)(E:\Note\image\CSS\15.png)]$

3.2、文本样式

上面的案例中其实已经提到了一些文本样式，例如下划线、对齐方式等等，具体还是看代码注释吧

<!--颜色：color
背景颜色：background
行高：height
行间距：line-height
首行缩进：text-indent
上中下划线：text-decoration-->


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

<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        h1 {
            /* 最简单的属性，有rgb（red，green，blue）、#ffffff 和颜色英文 三种方式 */
            color: #04a375;
            /* 排版：center-文本居中 right-右对齐 left-左对齐 justify-两端对齐 */
            text-align: center;
        }

        p {
            /* 背景颜色：用了很多次了 */
            background: #cafaf6;
            /* 首行缩进 em 代表字符 px 代表像素 */
            text-indent: 2em;
            /* 高度：一个段落的高度 */
            /*height: 30px;*/
            /* 行高，当行高和段落g一致的话就可以做到上下居中 */
            line-height: 30px;
        }

        .a{
            /* 中划线 */
            text-decoration: line-through;
        }

        .b{
            /* 上划线 */
            text-decoration: overline;
        }

        .c{
            /* 取消下划线 */
            text-decoration: none;
        }
    </style>
</head>

<body>

<h1>CSS</h1>
<p>
    CSS（Cascading Style Sheet）层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）
    或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以
    配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，
    支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
</p>

<a class="a">文字1</a>
<br/><br/><a class="b">文字2</a>
<br/><br/><a class="c">文字3</a>

</body>
</html>

网页界面：

$![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Py1RdmDR-1641003724697)(E:\Note\image\CSS\16.png)]$

3.3、超链接伪类

超链接伪类比较常用，特别是搭配 hover 使用，可以实现文字变色，字体变大等特效（实际上并不是动画，只是看起来很像），主要记住 hover 就行了，action、link、visited不常用

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

<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        a,p{
            color: #000000;
            font-family: 宋体, serif;
            font-size: 24px;
            text-decoration: none;
        }

        /* hover：用户将鼠标悬停在链接上时 */
        .name:hover {
            color: orange;
            font-size: 30px;
        }

        /* a:active ：链接被点击时 */
        .name:active {
            color: green;
        }

        /* a:link ：正常的，未访问的链接 */
        .people:link {
            color: blue;
        }

        /* a:visited ：用户访问过的链接 */
        .people:visited {
            color: yellow;
        }
    </style>
</head>

<body>

<a>
    <img src="../resource/image/电影.png" title="野马分鬃">
</a>

<p>
    <a href="" class="name">野马分鬃</a>
</p>
<p>
    <a href="" class="people">导演: 魏书钧</a>
</p>
<p class="type">
    类型: 剧情
</p>
<p class="time">
    片长: 130分钟
</p>


</body>
</html>

网页界面效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LQ69QjW5-1641003724698)(E:\Note\image\CSS\17.png)]$

注（假设 class name = a）：

a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

3.4、列表样式

列表是我们常见的东西，但是用 HTML 写出来的列表样式非常丑，简直不能看，所以我们需要 CSS 帮助我们美化，下面我们来模仿淘宝的一个选购列表，这次我们采用 HTML 文件和 CSS 文件分离的方式，让代码的结构更加清晰

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

<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css"/>
</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>&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>&nbsp;/&nbsp;<a href="#">企业</a></li>
    </ul>
</div>

</body>
</html>

上边的没什么好说的，忘记的标签去看我的 HTML 文章，下面是本次 CSS 代码

/* 使用 div 标签，之后会重点讲 */
#nav{
    width:220px
}

h2{
    /* 还是基本的样式设置，上边都有讲 */
    text-align: center;
    font-size: 16px;
    color: white;
    background: orange;

}

ul li{

    /* list-style:
    none：去掉圆点
    circle：空心圆
    decimal：数字
    squire：正方形 */

    list-style: none;
    height:30px;
}

li{
    background: #e7dada;
}
a{
    text-decoration: none;
    color: #000000;
    font-family: 宋体, serif;

}

a:hover{
    text-decoration: underline;
    color:orange;
}

页面效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GldVZUqb-1641003724698)(E:\Note\image\CSS\18.png)]$

注：背景色乱调的哈，可以看到选购栏的左边还有一列为空，这是因为我们将列表的小圆点取消后留下来的。实际上淘宝的选购栏左边还有一些小图形，这样会让页面看上去更加美观一点，这个功能以后会慢慢实现（下方为真实的淘宝部分界面）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wHEOqTyY-1641003724699)(E:\Note\image\CSS\19.png)]$

3.5、背景样式

分为背景颜色和背景图片，背景颜色这就不展开说明，background 老朋友了。背景图片我们还没有用过一次，这一次我们将在上一节淘宝的选购项旁边添加小箭头，让这个界面看起来更加完善一点（其他代码还是复用）

HTML 文件代码没有进行修改

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

<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <link rel="stylesheet" href="css/style.css"/>
</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>&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>&nbsp;/&nbsp;<a href="#">企业</a></li>
    </ul>
</div>

</body>
</html>

仔细看 CSS 代码的变化哦

#nav{
    width:220px
}

h2{
    text-align: center;
    font-size: 16px;
    color: orange;
    /* 使用 background 添加图片
     格式：背景颜色 图片 url 左右偏移像素 上下偏移像素 填充方式

     填充方式有这几种：
     1、no-repeat：不进行填充
     2、repeat-x：只进行横向填充
     3、repeat-y：只进行纵向填充
     4、repeat：直接填充满区域 */
    background: white url("../../../resource/image/向下箭头.png") 187px -2px no-repeat;

}

ul li{
    list-style: none;
    height:30px;

    /* 上边是采用一行代码搞定，这里拆开来写，实现的功能是一致的 */
    background-color: white;
    background-image: url("../../../resource/image/向右箭头.png");
    background-position-x: 148px;
    background-position-y: -2px;
    background-repeat: no-repeat;
}

a{
    text-decoration: none;
    color: #000000;
    font-family: 宋体, serif;

}

a:hover{
    text-decoration: underline;
    color:orange;
}

网页界面效果（是不是更加完整了）：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uW27aD5g-1641003724699)(E:\Note\image\CSS\20.png)]$

有时候我们会用到渐变的背景，利用 CSS 也可以实现

/* 渐变色网站：https://www.grabient.com/ */
body{
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

然后就可以使背景变的非常好看

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81qv4Gia-1641003724700)(E:\Note\image\CSS\21.png)]$

接下来的一篇文章我们会介绍 CSS 另一个重要的模型——盒子模型，同时介绍如何让网页中的元素进行浮动和定位
传送门：CSS — 让网页美起来（二）

畅谈、

关注

6
点赞
踩
33

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS — 让网页美起来（一）

CSS，前端三兄弟之二弟，它的出现让我们开始可以制作漂亮的网页（虽然现在有点不太行了）。本文将从介绍 CSS、CSS的选择器、初级美化网页三个部分进行介绍，让我们美化网页不再是难题！
复制链接

扫一扫

专栏目录