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>            

运行结果:

相关推荐
幼儿园老大*31 分钟前
走进 Go 语言基础语法
开发语言·后端·学习·golang·go
1 小时前
开源竞争-数据驱动成长-11/05-大专生的思考
人工智能·笔记·学习·算法·机器学习
ctrey_1 小时前
2024-11-4 学习人工智能的Day21 openCV(3)
人工智能·opencv·学习
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
霍格沃兹测试开发学社测试人社区1 小时前
软件测试学习笔记丨Flask操作数据库-数据库和表的管理
软件测试·笔记·测试开发·学习·flask
今天我又学废了2 小时前
Scala学习记录,List
学习
阳光开朗大男孩 = ̄ω ̄=2 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
王俊山IT2 小时前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习
Mephisto.java3 小时前
【大数据学习 | kafka高级部分】kafka中的选举机制
大数据·学习·kafka