5、css学习5(链接、列表)

1、css可以设置链接的四种状态样式。

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

2、 a:hover 必须在 a:link 和 a:visited 之后, a:active 必须在 a:hover 之后,需要严格按顺序才能看到效果。

3、text-decoration 属性主要用于删除链接中的下划线。

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习之链接</title>
        <style>
            a:link {color: #000000;text-decoration: none;background-color: #B2FF99;}
            a:visited {color: #00FF00;text-decoration: none;background-color: #FFFF85;}
            a:hover{color: #FF00FF;text-decoration: underline;background-color: #FF704D;}
            a:active{color: #0000FF;text-decoration: underline;background-color: #FF704D;}
        </style>
    </head>
    <body>
        <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
        <p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
        <p><b>注意:</b>a:active 必须在 a:hover 之后。</p>
    </body>
</html>

运行结果:

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8">
        <title>有序、无序列表</title>
        <style>/*根据类名定义样式*/
            ul.a {list-style-type: circle;}
            ul.b{list-style-type: square;}
            ol.c{list-style-type: upper-roman;}
            ol.d{list-style-type: lower-alpha;}
            ul.cut{
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>
        <p>无序列表实例:</p>

        <ul class="a">
            <li>PHP</li>
            <li>JAVA</li>
            <li>PYTHON</li>
        </ul>
        <ul class="b">
            <li>PHP</li>
            <li>JAVA</li>
            <li>python</li>
        </ul>

        <p>有序列表实例:</p>
        <ol class="c">
            <li>PHP</li>
            <li>JAVA</li>
            <li>python</li>
        </ol>
        <ol class="d">
            <li>PHP</li>
            <li>JAVA</li>
            <li>python</li>
        </ol>
        <p>移除列表默认前标:</p>
        <ul class="cut">
            <li>PHP</li>
            <li>JAVA</li>
            <li>python</li>
        </ul>
    </body>
</html>            

运行结果:

相关推荐
-一杯为品-29 分钟前
【51单片机】程序实验5&6.独立按键-矩阵按键
c语言·笔记·学习·51单片机·硬件工程
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
EterNity_TiMe_3 小时前
【论文复现】(CLIP)文本也能和图像配对
python·学习·算法·性能优化·数据分析·clip
sanguine__3 小时前
java学习-集合
学习
lxlyhwl3 小时前
【STK学习】part2-星座-目标可见性与覆盖性分析
学习
nbsaas-boot3 小时前
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例
学习·chatgpt·编辑器
CV学术叫叫兽4 小时前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年4 小时前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
酷酷的威朗普4 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮4 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画