css3-超链接伪类、列表、背景渐变

1uuue

已于 2022-08-29 15:27:10 修改

阅读量322

点赞数

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

于 2022-08-29 15:26:37 首次发布

本文链接：https://blog.csdn.net/qq_61727355/article/details/126583488

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.文本阴影和超链接伪类

2.列表样式学习

3.背景图像应用及渐变

1.文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的颜色*/
        a:hover{
            color: deeppink;
            font-size: 50px;
        }
        /*鼠标按住未释放*/
        a:active{
            color: chartreuse;
        }
        a:visited{
            color: darkblue;
        }
        #price{
            /*三个参数：阴影颜色 水平偏移 垂直偏移 阴影半径*/
            text-shadow: skyblue 10px 0px 2px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="images/a.jpeg" alt="">
</a>
<p>
    <a href="#">css3</a>
</p>
<p>
    <a href="#">biu</a>
</p>
<p id="price">
    ￥9.9
</p>
</body>
</html>

2.列表样式学习

list-style:

none:去圆点同时也可以去掉有序列表中的数字

circle：空心圆（有序列表中decimal：数字）

square：正方形

页面结构：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>
</body>
</html>

样式部分：

#nav{
    width: 300px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background-color: antiquewhite;
}
/*
list-style:
none:去圆点 同时也可以去掉有序列表中的数字
circle：空心圆（有序列表中decimal：数字）
square：正方形
*/
ul{
    background-color: azure;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent:1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: coral;
    text-decoration: underline;
}

3.背景图像应用及渐变

background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/

测试选取一张图片作为背景：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid rebeccapurple;
            /*默认是全部平铺的*/
            background-image: url("images/a.PNG");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

基于第二部分的代码，添加右箭头和下箭头标识：

效果如下：

页面结构未变，只修改了css部分：

#nav{
    width: 300px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    /*颜色 图片 图片设置 平铺方式*/
    background: antiquewhite url("../images/b.PNG") 270px 0px no-repeat;
}
/*
list-style:
none:去圆点 同时也可以去掉有序列表中的数字
circle：空心圆（有序列表中decimal：数字）
square：正方形
*/
ul{
    background-color: azure;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent:1em;
    background-image: url("../images/a.PNG");
    background-repeat: no-repeat;
    background-position:220px 0px ;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: coral;
    text-decoration: underline;
}

测试背景渐变：

获取渐变背景网站：Grabient

径向渐变、圆形渐变

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
        ;
        }
    </style>
</head>
<body>
hihi
</body>
</html>