CSS

style基础

选择器

css文件基本上是通过元素{ 属性: 值;}的方式来定义的，也可以通过#id{ 属性: 值;}的方式来定义或者.class{ 属性: 值;} 的方式来定义

1
h1 {
2
    /*文字居中*/
3
    text-align: center;
4
}
5

6
body {
7
    /*背景色*/
8
    background-color: blue;
9
}
10

11
#menu {
12
    /*id为menu的元素的宽度*/
13
    width: 300px;
14
    /*也可以：width: 80%;*/
15
    /*下面两条等价于居中*/
16
    margin-left: auto;
17
    margin-right: auto;
18
}
19

20
.cls {
21
    /*class为cls的元素的宽度*/
22
    width: 300px;
23
}

多个对象要使用相同的配置时，可以对象1, 对象2{ 属性: 值;}，若要全选，可以*{ 样式 }

对某元素的class，可以使用元素.class{ 样式 }来定义

组合选择器

1
.cls p {
2
    /*class为cls里的所有p元素进行设置值*/
3
    display: inline-block;
4
}

后代选择器（以空格分隔）.class 元素{ 属性: 值;}
子元素选择器（以>号分隔）.class>元素{ 属性: 值;}class为cls里的一级子元素p元素进行设置值
相邻兄弟选择器（以+分隔）.class+元素{ 属性: 值;}与class为cls同父的紧邻&下一个元素p元素进行设置值
普通兄弟选择器（以~分隔）.class~元素{ 属性: 值;}与class为cls同父的所有之后的元素p元素进行设置值

属性选择器

用于根据元素的属性或属性值来选择HTML元素:[type] {属性: 值;}选择所有具有type属性的元素(注意到是属性)。用法如：

1
/*将所有具有title属性的设置为蓝色*/
2
<style>
3
    [title] {
4
        color: blue;
5
    }
6
</style>
7
<h1 title="Hello world">Hello world</h1>

此外还有其他用法：

[attribute="value"]选择具有指定属性和值完全匹配的元素。
[attribute~="value"]选择属性值中包含指定词（用空格分隔的词列表之一）的元素。
[attribute*="value"]选择属性值中包含指定词的元素。
[attribute|="value"]选择属性值以指定值开头并紧跟着连字符-的属性值的元素(常用于语言)。
[attribute^="value"]选择属性值以指定值开头的元素。
[attribute$="value"]选择属性值以指定值结尾的元素。

背景

背景参数分为：background-color``background-image``background-repeat``background-attachment``background-position ，分别控制颜色、图片、是否重复、是否固定、起始位置。依照此顺序也可以简写为background一个参数，例如：

1
body {
2
    background-image: url('https://example.com/images/myImg.jpg');
3
    background-repeat: no-repeat;
4
    /*背景图只出现一次，否则会多张背景图重复直到填满*/
5
    background-position: right top;
6
    /*背景图在浏览器窗口的右上角*/
7
    background-attachment: fixed;
8
    /*背景图固定，不会随页面滚动*/
9
}
10

11
/*上面的等价于*/
12
body {
13
    background: url('https://example.com/images/myImg.jpg') no-repeat fixed right top;
14
}

示例：这是一个可以重复、不随页面滚动（相对静止）、初始处于右上角的背景

渐变

在背景图片设置中可以使用渐变gradient，分为线性渐变linear-gradient和径向渐变radial-gradient（圆形扩散）

示例：线性语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);其中direction表示渐变方向，可选值有 to top、to right、to bottom right等，分别表示从下到上、从左到右、从左上到右下

1
<style>
2
    #gradient1 {
3
        background-image: linear-gradient(#92ff11, #48e8ef);
4
    }
5
</style>
6
<div id="gradient1"></div>

径向语法：background-image: radial-gradient(center, shape size, start-color,..., last-color);

1
<style>
2
    #gradient2 {
3
        background-image: radial-gradient(#92ff11, #48e8ef);
4
    }
5
</style>
6
<div id="gradient2"></div>

文本样式

color：文本颜色
font-family：字体
text-align：文本对齐方式，可选值有left、right、center、justify，分别表示左对齐、右对齐、居中对齐、两端对齐。
font-size：字体大小
font-weight：字体粗细，可选值有normal、bold、bolder、lighter，分别表示正常、加粗、更粗、更细。
font-style：字体样式，可选值有normal、italic、oblique，分别表示正常、斜体、倾斜。
text-decoration：文本修饰，可选值有none、underline、overline、line-through，分别表示无修饰、下划线、上划线、中划线。
text-indent：文本缩进

透明度

参数opacity：透明度，取值范围0-1，0为完全透明，1为完全不透明

tips:通过调用:hover可以设置鼠标悬停的透明度改变功能

链接

对于<a>的类型/伪类（见下）：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

其中可选择的参数有color text-decoration background-color，分别代表文字颜色、是否有下划线、背景颜色。例：

1
/*所有超参数的文字颜色*/
2
a {
3
    color: black;
4
}
5

6
/*点击后的文字颜色*/
7
a:visited {
8
    color: grey;
9
}
10

11
/*鼠标放置时的颜色*/
12
a:hover {
13
    color: brown;
14
}

示例：

css

盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容content，下面示例：

1
.box {
2
    /*实际内容宽高为300像素*/
3
    width: 300px;
4
    height: 300px;
5
    /*边距为50像素*/
6
    margin: 50px;
7
    /*边框为10像素绿色部分*/
8
    border: 10px solid green;
9
    /*填充为10像素与背景颜色相同*/
10
    padding: 10px;
11
    background-color: yellow;
12
}

示例：一个实际内容（蓝色）宽高为300像素、边距（透明，与页面距离）为50像素、边框（绿色）为10像素、填充（黄色）为10像素的盒子：

也就是说整个元素占用了300+50*2（左右边）+10*2+10*2=500像素

水平/垂直对齐

使用margin:auto来水平居中；注意：需要设置宽度才能生效，否则是占满整个页面宽

对于文本，使用text-align:center设置居中

示例：

一个居中的框&字

同样可以设置float浮动、position:absolute相对位置来水平居中

对于垂直居中，直接使用padding: 上下左右设置一个值代表上下间距即可：

1
.center2 {
2
    width: 300px;
3
    padding: 20px 0;
4
}

示例：

垂直居中

同样的适用position:absolute

边框

border-style属性用于指定要显示的边框类型，其中值可选：

none：无边框
dotted：点状边框
dashed：虚线边框
solid：实线边框
double：双线边框
groove：三维沟槽边框。效果取决于 border-color 的值。
ridge：三维脊状边框。效果取决于 border-color 的值。
inset：三维嵌入边框。效果取决于 border-color 的值。
outset：三维突出边框。效果取决于 border-color 的值。
hidden：隐藏边框
混合边框：混合边框，可以指定多个边框类型，如border-style: dotted dashed solid double;即上点右虚下实左双线等价于 border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;

同时可通过border-width来设置边框的宽度、border-color来设置边框颜色、border-radius来设置边框的圆角弧度

也可以通过类似混合边框中的border-top-style:dotted;来设置border-top-width border-top-color

示例：

无边框。

虚线边框。

实线边框。

双边框。

凹槽边框。

垄状边框。

嵌入边框。

外凸边框。

混合边框

显示

display和visibility属性用于指定元素如何显示。

display属性：
display:none：隐藏元素，元素将不会显示，但是元素本身还在，并且会占用空间。
display:block：元素会以块级元素显示，会独占一行，并且会填充父元素。
display:inline：元素会以行内元素显示，不会独占一行，并且会填充父元素。
visibility属性：
visibility:hidden：隐藏元素，元素将不会显示，但是元素本身还在，并且会占用空间。
visibility:visible：显示元素，元素将显示，并且会占用空间。
visibility:collapse：隐藏元素，元素将不会显示，但是元素本身还在，并且不会占用空间。

表单

众所周知html表单是由input作为基石的，css中使用input[type=类型]（属性选择器）来匹配指定类型的输入元素

其中推荐设置边框border，填充padding，聚焦:focus，鼠标悬停:hover，必填:required（其余表单元素相同）

对于文本框，推荐设置resize: none取消右下角的拖动改变大小功能

按钮

直接上例子：

1
<style>
2
    .my-button {
3
        background-color: antiquewhite;
4
        position: relative;
5
        font-size: 14px;
6
        padding: 10px;
7
        width: 100px;
8
        text-align: center;
9
        /*删除多出来的伪元素*/
10
        overflow: hidden;
11
    }
12

13
    /*伪元素（一块略大于按钮的白布）*/
14
    .my-button:after {
15
        content: "";
16
        background: #dadada;
17
        display: block;
18
        position: absolute;
19
        /*略大确保完全覆盖整个按钮*/
20
        padding-top: 120%;
21
        padding-left: 120%;
22
        margin-left: -10px;
23
        margin-top: -100%;
24
        /*初始透明度为0*/
25
        opacity: 0;
26
        transition: all 0.4s
27
    }
28

29
    /*按钮被按下后*/
30
    .my-button:active:after {
31
        /*使伪元素变为按钮大小（让他有个过度动画）*/
32
        padding: 0;
33
        margin: 0;
34
        /*透明度变成1，并让伪元素瞬间可见*/
35
        opacity: 1;
36
        transition: 0s
37
    }
38

39
    /*按钮内文字*/
40
    .my-button span {
41
        display: inline-block;
42
        position: relative;
43
        transition: 0.4s;
44
    }
45

46
    /*内文字的伪元素*/
47
    .my-button span:after {
48
        content: '»';
49
        position: absolute;
50
        opacity: 0;
51
        top: 0;
52
        right: -20px;
53
        transition: 0.2s;
54
    }
55

56
    /*鼠标移动到上面的时候，内文字移动一下*/
57
    .my-button:hover span {
58
        padding-right: 10px;
59
    }
60

61
    /*鼠标移动到上面时，内文字的伪元素就会显示*/
62
    .my-button:hover span:after {
63
        opacity: 1;
64
        right: 0;
65
    }
66
</style>
67
<button class="my-button"><span>按钮</span></button>

运行结果：

溢出元素框overflow

取值：

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

1
.overflow {
2
    /*定义一个可以滚动的元素*/
3
    overflow: scroll;
4
    height: 100px;
5
}

示例： - auto

布局

定位position

position属性用于指定元素的定位类型，可选值有：

static默认，文档流形式
absolute绝对定位，相对于最近的已定位祖先元素（非 static）进行定位，没有的话找浏览器窗口定位。元素完全脱离文档流，不占据原来的空间，其他元素会忽略它的存在
relative相对定位，相对于其正常位置（static）进行定位。元素仍在文档流中，占据原来的空间，只是视觉上发生了偏移
fixed固定定位，相对于浏览器窗口进行定位（滚动位置不变）
inherit继承父元素

1
<style>
2
    .container {
3
        /*祖先元素非静态*/
4
        position: relative;
5
        width: 300px;
6
        height: 300px;
7
        border: 1px solid black;
8
    }
9

10
    .box {
11
        width: 100px;
12
        height: 100px;
13
        background-color: #f5f5f5;
14
        border: 1px solid #ccc;
15
    }
16
</style>
17
<div class="container">
18
    <div class="box" style="position: relative; top: 20px; left: 20px;">Relative</div>
19
    <div class="box" style="position: absolute; top: 60px; left: 60px;">Absolute</div>
20
</div>

Relative

Absolute

多列

column-count属性用于指定元素应该被分成多少列，默认为 1 列；column-gap属性用于指定列之间的间隔；column-rule 属性用于指定列的分隔线。

1
<style>
2
    .multi-col-container {
3
        column-count: 3; /* 定义三列 */
4
        column-gap: 20px; /* 列间距 */
5
        column-rule: 1px solid #ccc; /* 列分隔线 */
6
    }
7
</style>
8
<div class="multi-col-container">
9
    <p>
10
        这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。
11
    </p>
12
</div>

这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。这是暮晓晚枫的猴窝，现在在演示的是多列布局。

浮动float/clear

浮于元素上方

clear指定不允许元素周围有浮动元素。float指定一个盒子（元素）是否可以浮动。

可选的值有： left左边 right右边 none不浮动 inherit继承

示例：第一个“这”字将浮动于页面的左侧，不论页面大小

这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。

弹性盒子

通过display: flex应用于父容器，使子元素能够根据容器的大小自动调整宽度或高度。

通常应用于需要控制单行/单列时

1
<style>
2
    /* 示例：等高卡片布局（交叉轴拉伸 + 动态换行） */
3
    .card-container {
4
        display: flex;
5
        flex-wrap: wrap; /* 允许换行 */
6
        gap: 1rem;
7
        padding: 2rem;
8
    }
9

10
    .card {
11
        flex: 1; /* 动态填充剩余空间 */
12
        min-width: 150px; /* 最小宽度约束 保证可读*/
13
        background: #f5f5f5;
14
        padding: 1.5rem;
15
        border-radius: 8px;
16
    }
17

18
    /* 示例：垂直居中 */
19
    .centered-section {
20
        display: flex;
21
        min-height: 300px; /* 需要高度才能垂直居中 */
22
        background: #e0e0e0;
23
    }
24

25
    .centered-content {
26
        margin: auto; /* 水平和垂直居中 */
27
        text-align: center;
28
    }
29
</style>
30
<!-- 示例：卡片布局 -->
31
<div class="card-container">
32
    <div class="card">
33
        <h3>卡片1</h3>
34
        <p>动态宽度卡片，内容高度不同但容器等高</p>
35
    </div>
36
    <div class="card">
37
        <h3>卡片2</h3>
38
        <p>通过 flex:1 实现等宽效果，自动换行响应屏幕尺寸</p>
39
        <p>额外的段落用于展示高度差异</p>
40
    </div>
41
    <div class="card">
42
        <h3>卡片3</h3>
43
        <p>最小宽度约束保证可读性</p>
44
    </div>
45
</div>
46
<!-- 示例：垂直居中 -->
47
<section class="centered-section">
48
    <div class="centered-content">
49
        <h2>居中</h2>
50
        <p>无需计算 margin 居中</p>
51
    </div>
52
</section>

卡片1

动态宽度卡片，内容高度不同但容器等高

卡片2

通过 flex:1 实现等宽效果，自动换行响应屏幕尺寸

额外的段落用于展示高度差异

卡片3

最小宽度约束保证可读性

居中

无需计算 margin 居中

更多应用可看最后应用示例里的导航栏

网格布局

定义一个容器，并设置display: grid，并通过grid-template-columns和grid-template-rows显式定义行与列

应用时，grid-column: start / end和grid-row: start / end用于指定元素在网格中的位置。其中start起始行列end结束行列（不包含）

通常用于需要同时控制行/列时

1
<style>
2
    .dashboard {
3
        display: grid;
4
        grid-template-columns: repeat(3, 1fr); /* 定义三列，每列宽度相等 */
5
        grid-template-rows: repeat(2, 100px) 200px; /* 定义三行，前两行高度为100px，最后一行高度为200px */
6
        gap: 10px; /* 网格间隔 */
7
        width: 100%;
8
        max-width: 900px;
9
        background-color: #fff;
10
        padding: 10px;
11
        border-radius: 8px;
12
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
13
    }
14

15
    .item {
16
        background-color: #e0e0e0;
17
        display: flex;
18
        justify-content: center;
19
        align-items: center;
20
        font-size: 1.2em;
21
        color: #333;
22
        border-radius: 4px;
23
    }
24

25
    /* 调整特定模块的大小和位置 */
26
    .item-1 {
27
        grid-column: 1 / 3; /* 跨越第1列到第2列（不包含第3列） */
28
        grid-row: 1 / 2; /* 占据第1行 */
29
        background-color: #ffcccb;
30
    }
31

32
    .item-2 {
33
        grid-column: 3 / 4;
34
        grid-row: 1 / 3; /* 跨越第1行到第2行 */
35
        background-color: #d4edda;
36
    }
37

38
    .item-3 {
39
        grid-column: 1 / 2;
40
        grid-row: 2 / 3;
41
        background-color: #d1ecf1;
42
    }
43

44
    .item-4 {
45
        grid-column: 2 / 3;
46
        grid-row: 2 / 3;
47
        background-color: #fff3cd;
48
    }
49

50
    .item-5 {
51
        grid-column: 3 / 4;
52
        grid-row: 3 / 4;
53
        background-color: #d4edda;
54
    }
55

56
    .item-6 {
57
        grid-column: 1 / 4; /* 跨越所有列 */
58
        grid-row: 3 / 4;
59
        background-color: #f8d7da;
60
    }
61
</style>
62
<div class="dashboard">
63
    <div class="item item-1">Item 1</div>
64
    <div class="item item-2">Item 2</div>
65
    <div class="item item-3">Item 3</div>
66
    <div class="item item-4">Item 4</div>
67
    <div class="item item-5">Item 5</div>
68
    <div class="item item-6">Item 6</div>
69
</div>

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

动画

使用@keyframes定义动画，并在元素中应用动画

1
<style>
2
    .flash-div {
3
        width: 100px;
4
        height: 100px;
5
        background: red;
6
        /*使用动画，infinite循环播放*/
7
        animation: flash 5s infinite;
8
    }
9

10
    /*定义动画*/
11
    @keyframes flash {
12
        0% {
13
            background: red;
14
        }
15
        50% {
16
            background: yellow;
17
        }
18
        100% {
19
            background: red;
20
        }
21
    }
22
</style>
23
<div class="flash-div"></div>

示例： - 循环动画

过渡

transition属性用于指定元素过渡效果，其中包括了：

transition-property规定应用过渡的CSS属性的名称
transition-duration定义过渡效果花费的时间。默认是 0。
transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。
transition-delay规定过渡效果何时开始。默认是 0。

1
<style>
2
    .transition {
3
        width: 100px;
4
        height: 100px;
5
        background: red;
6
        /*定义一个延迟1s后使用1s线性变换改变宽度的过渡动画*/
7
        transition: width 1s linear 1s;
8
    }
9

10
    .transition:hover {
11
        width: 200px;
12
    }
13
</style>
14
<div class="transition"></div>

示例：一个延迟1s后使用1s线性变换改变宽度的过渡动画

多媒体查询

多媒体查询包括：

viewport(视窗) 的宽度与高度
设备的宽度与高度、朝向 (横屏，竖屏) 。
分辨率

语法为：

1
@media not|only 媒体类型 and (限制条件) {
2
    CSS 代码
3
}

例如：

1
<style>
2
    .my-media {
3
        width: 100px;
4
        height: 100px;
5
        background-color: antiquewhite;
6
    }
7

8
    /* 当屏幕宽度小于或等于1000px时应用 */
9
    @media screen and (max-width: 1000px) {
10
        .my-media {
11
            width: 100px;
12
            height: 100px;
13
            background-color: black;
14
        }
15
    }
16
</style>
17
<div class="my-media"></div>

运行结果：（可改变浏览器宽度查看效果）

伪类

在前面的超链接的示例已经看到了部分伪类，:hover :active :focus :visited :link，这里还有其他的部分：

:first-child

1
p:first-child i {
2
    /*匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素*/
3
    color: blue;
4
}

同样的还有:last-child最后一个子元素、 :nth-child第二个子元素、 :nth-last-child 倒数第二个子元素

更多的伪类请自行查看w3school的伪类↗

伪元素

after

::after元素在元素之后添加内容，例如：

1
p::after {
2
    content: " - 尾部";
3
    color: red;
4
}

示例：

这是实际的内容

其他的伪元素也感觉没什么用，自行查看w3school的伪元素↗

实战使用

导航/侧栏

一个导航框很容易想起无序列表+链接的形式，但这需要css辅助完成

1
<style>
2
    ul {
3
        /*移除列表前小标志*/
4
        list-style-type: none;
5
        /*取消列表内外边距*/
6
        margin: 0;
7
        padding: 0;
8
        /*设置宽度为页面的25%*/
9
        width: 25%;
10
        background-color: #f1f1f1;
11
        /*设置列表为固定定位*/
12
        position: fixed;
13
        /*溢出元素框，如果溢出就显示滚动条*/
14
        overflow: auto;
15
    }
16

17
    li a {
18
        /*块级，每个元素单独一行*/
19
        display: block;
20
        color: #000;
21
        padding: 8px 16px;
22
        /*移除文本的修饰（下划线）*/
23
        text-decoration: none;
24
    }
25

26
    li a:active {
27
        background-color: #4CAF50;
28
        color: white;
29
        /*移除文本的修饰（下划线）*/
30
        text-decoration: none;
31
    }
32

33
    li a:hover:not(:active) {
34
        /*在没有选中并鼠标停留阶段*/
35
        background-color: #555;
36
        color: white;
37
        /*移除文本的修饰（下划线）*/
38
        text-decoration: none;
39
    }
40
</style>
41
<ul>
42
    <li><a>菜单主页</a></li>
43
    <li><a>项目</a></li>
44
</ul>

菜单主页
项目

对于横向的导航，可以这样写

1
<style>
2
    ul {
3
        width: 100%;
4
        list-style-type: none;
5
        margin: 0;
6
        padding: 0;
7
        background-color: #f1f1f1;
8
        /*隐藏滚动条*/
9
        overflow: hidden;
10
        /* 弹性布局 */
11
        display: flex;
12
    }
13

14
    /*多设置一个li的布局*/
15
    li {
16
        /*让元素浮于左侧*/
17
        float: left;
18
        /*弹性布局平分*/
19
        flex: 1;
20
    }
21

22
    li a {
23
        color: #000;
24
        padding: 15px 0;
25
        display: block;
26
        text-decoration: none;
27
        /* 文本水平居中 */
28
        text-align: center;
29
    }
30

31
    /*下面相同*/
32
    li a:active {
33
        background-color: #4CAF50;
34
        color: white;
35
        text-decoration: none;
36
    }
37

38
    li a:hover:not(:active) {
39
        background-color: #555;
40
        color: white;
41
        text-decoration: none;
42
    }
43
</style>
44

45
<ul>
46
    <li><a>菜单主页</a></li>
47
    <li><a>项目</a></li>
48
</ul>

菜单主页
项目

下拉菜单

实现一个下拉菜单：

定义一个按钮，这个按钮需要在鼠标移上去后显示下拉菜单，最好能更改颜色
定义一个下拉菜单（直接就能显示的内容）

1
<style>
2
    /* 下拉按钮样式 */
3
    .dropbtn {
4
        background-color: #4CAF50;
5
        color: white;
6
        padding: 16px;
7
        font-size: 16px;
8
        /*移除边框*/
9
        border: none;
10
        /*使用光标指针（把鼠标变成手形）*/
11
        cursor: pointer;
12
    }
13

14
    /* 容器 <div> - 定位下拉内容 */
15
    .dropdown {
16
        /*相对位置*/
17
        position: relative;
18
    }
19

20
    /* 下拉内容 (默认隐藏) */
21
    .dropdown-content {
22
        /*隐藏*/
23
        display: none;
24
        /*绝对位置*/
25
        position: absolute;
26
        background-color: #f9f9f9;
27
        min-width: 160px;
28
        /*给下拉内容加个背景阴影*/
29
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
30
        /*如果是右对齐（现在是左对齐）*/
31
        /*right:0;*/
32
    }
33

34
    /* 下拉菜单的链接（内容） */
35
    .dropdown-content a {
36
        color: black;
37
        padding: 12px 16px;
38
        text-decoration: none;
39
        display: block;
40
    }
41

42
    /* 鼠标移上去后修改下拉菜单链接颜色 */
43
    .dropdown-content a:hover {
44
        background-color: #f1f1f1
45
    }
46

47
    /* 在鼠标移上去后显示下拉菜单 */
48
    .dropdown:hover .dropdown-content {
49
        display: block;
50
    }
51

52
    /* 当下拉内容显示后修改下拉按钮的背景颜色 */
53
    .dropdown:hover .dropbtn {
54
        background-color: #3e8e41;
55
    }
56
</style>
57

58
<div class="dropdown">
59
    <button class="dropbtn">下拉菜单</button>
60
    <div class="dropdown-content">
61
        <a>选项 1</a>
62
    </div>
63
</div>

tips:下拉菜单里也可以放置图片等

提示框

1
<style>
2
/*提示框元素*/
3
.tooltip {
4
    position: relative;
5
    display: inline-block;
6
    border-bottom: 1px dotted black;
7
}
8

9
/*提示框文字*/
10
.tooltip .tooltiptext {
11
    visibility: hidden;
12
    width: 120px;
13
    background-color: black;
14
    color: #fff;
15
    text-align: center;
16
    /*框圆角*/
17
    border-radius: 6px;
18
    padding: 5px 0;
19
    position: absolute;
20
    /*堆叠层级，表示在大多数其他元素之上*/
21
    z-index: 1;
22
    /*相对正常位置的偏移量（向上五个像素）因为padding是5px*/
23
    top: -5px;
24
    /*表示位于包含元素宽度110%的位置（即稍微超出右侧边界）使提示框显示在触发元素的右侧*/
25
    left: 110%;
26

27
    如果是左侧就right: 110%
28
    如果是上面就buttom: 100%  但同时要设置居中:left: 50%; margin-left: -60px;(偏移宽度的一半)
29
    如果是下面就top: 100%  但同时要设置居中:left: 50%; margin-left: -60px;(偏移宽度的一半)
30

31
    /*淡入：从透明度0开始*/
32
    opacity: 0;
33
    transition: opacity 1s;
34
}
35
/*三角形的样式,可记*/
36
.tooltip .tooltiptext::after {
37
    /*使用after伪元素在元素之后添加内容，这里是三角形*/
38
    content: "";/*不需要字*/
39
    position: absolute;
40
    /*垂直居中*/
41
    top: 50%;
42
    /*元素的右侧距离其包含块右侧的距离为包含块宽度的100%,在提示框的左侧*/
43
    right: 100%;
44
    margin-top: -5px;
45
    border-width: 5px;
46
    border-style: solid;
47
    /*上右下左的顺序，利用CSS边框的特性，当相邻边框颜色不同时会产生斜角效果*/
48
    border-color: transparent black transparent transparent;
49
}
50
.tooltip:hover .tooltiptext {
51
    visibility: visible;
52
    /*淡入：透明度变为1*/
53
    opacity: 1;
54
}
55
</style>
56

57
<div class="tooltip">鼠标移动到这
58
  <span class="tooltiptext">提示文本</span>
59
</div>

感谢您的阅读！如果可以，给俺点些关注吧~

CSS

周二 6月 28 2005

6208 字 · 46 分钟

记录 CSS 学习