CSS实例篇-链接和列表

最新推荐文章于 2022-07-21 11:15:02 发布

对不起该昵称已存在

最新推荐文章于 2022-07-21 11:15:02 发布

阅读量66

点赞数

分类专栏：自学

自学专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、链接

1、为访问、未访问链接添加不同的颜色（love hate）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="main1.css" rel="stylesheet">
    </head>
    <body>
       <a href="https://baidu.com">这是一个链接</a>
    </body>

a:link{
    color:green;
}
a:visited{
    color:pink;
}
a:hover{
    color:purple;
}
a:active{
    color:gold;
}

2、在链接上使用文本装饰：使用text-decoration属性，其取值有underline,line-through,overline（对于链接而言，其默认值是underline）。

3、指定链接的背景颜色：使用background-color属性.

4、超链接添加其他样式：总之可以使用CSS的伪类：link，visited，hover，active对链接的不同的阶段进行样式的不同的设计。

二、列表

1、列表中所有不同的列表项标记：使用list-style-type属性。
2、设置作为列表项标记的图像：使用list-style-image属性，如果图片的大小不适合，那么使用background-image属性加上padding属性来设置li，进行图片的设置，这个时候要结合background-image的相关的操作。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="main1.css" rel="stylesheet">
    </head>
    <body>
       <ol>
           <li>coffee</li>
           <li>egg</li>
           <li>milk</li>
       </ol>
    </body>

li{
    background-image:url("demo1.jpg");
    background-size:5px 90%;
    background-repeat:no-repeat;
    background-position: middle;
    padding-left:5px;
}

3、在一个声明中的所有列表属性：
使用list-style可以直接声明，例如

ul{
list-style:square url("demo1.jpg");
}

4、CSS移除列表li默认样式：
对ul或者ol的样式进行设置，就是将list-style-type:none,之后在设置相应的margin或者padding进行位置的确定。

对不起该昵称已存在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例篇-链接和列表

1、为访问、未访问链接添加不同的颜色（love hate）：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link href="main1.css" rel="style...
复制链接

扫一扫