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

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


html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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="#">css3a>
p>
<p>
    <a href="#">biua>
p>
<p id="price">
    ￥9.9
p>
body>
html>

2.列表样式学习

list-style:

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

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

square：正方形

页面结构：


html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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/*不平铺*/

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


html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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

径向渐变、圆形渐变


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

相关阅读:
表单识别（六）——票据识别-论文研读：基于深度学习的票据识别系统设计与实现，卞飞飞（中）
Python语言：逻辑运算符知识点讲解
 【云原生|K8s系列第5篇】：实战使用Service暴露应用
 keras-gpu安装
 C#中委托和事件的使用总结
 搜维尔科技：利用虚拟现实优化汽车仪表盘或飞机驾驶舱的人机工程学设计
 南大通用数据库-Gbase-8a-学习-08-集群节点添加数据副本
 Python---异常
 关于SRE在金融行业落地的探讨
 证书格式说明
原文地址：https://blog.csdn.net/qq_61727355/article/details/126583488