前言：

本文内容：文本阴影和超链接伪类、列表样式

推荐免费CSS3基础讲解视频：【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

文本阴影和超链接伪类

文本阴影

text-shadow /* 阴影颜色 水平偏移 垂直偏移 阴影半径*/

超链接伪类

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */

a:active {color: #0000FF} /* 被选择的链接 */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮颜色*/
        a:hover{
            color: orange;
        }
        /*鼠标长按颜色*/
        a:active{
            color: #2fc9d0;
            font-size: 20px;
        }
        /*text-shadow 阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #shadow{
            text-shadow: #454141 10px 5px 10px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="image/images.png" alt="">
</a>
<p>
    <a href="https://bilibili.com">Bilibili弹幕网</a>
</p>
<p id="shadow">
    <a href="https://jokerdig.com">作者：233</a>
</p>
</body>
</html>

列表样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#nav{
    width: 300px;
}
h1{
    color: red;
}
/*ul li*/
/*
list-style
    none 无
    circle 空心圆
    decimal 数字
    square 正方形
    armenian 默认 实心圆
*/
ul li{
    height: 30px;
    list-style: none;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover{
    background: #b8b5b5;
    color: #e71111;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="nav">
    <h1>商品分类</h1>
    <ul>
        <li>
            <a href="//jiadian.jd.com">家用电器</a>
        </li>
        <li>
            <a href="//shouji.jd.com/">手机</a>
            <span>/</span>
            <a href="//wt.jd.com">运营商</a>
            <span class="cate_menu_line">/</span>
            <a href="//shuma.jd.com/">数码</a>
        </li>
        <li>
            <a href="//diannao.jd.com/">电脑</a>
            <span class="cate_menu_line">/</span>
            <a href="//bg.jd.com">办公</a>
        </li>
        <li>
            <a href="//channel.jd.com/home.html">家居</a>
            <span class="cate_menu_line">/</span>
            <a href="//channel.jd.com/furniture.html">家具</a>
            <span class="cate_menu_line">/</span>
            <a href="//jzjc.jd.com/">家装</a>
            <span class="cate_menu_line">/</span>
            <a href="//channel.jd.com/kitchenware.html">厨具</a>
        </li>
    </ul>
</div>
</body>
</html>