0 0 3 1 - 用伪类选择器让列表'嗑粉儿'

shishunfu · 发表于 2017-4-26 09:50:23

越来越有意思了！交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>列表</title>
        <style type="text/css">
                ul{
                        margin: 0;
                        padding: 0;
                }
                li{
                        list-style: none;
                        padding: 15px;
                        text-indent: 35px;
                        float: left;
                        margin-right: 3%;
                        width: 20%;
                        min-width: 99px;        /*min-width 属性设置元素的最小宽度。*/
                }
                a{
                        text-decoration: none;
                        color: red;
                }
                li:first-child{
                        background:beige url("http://xxx.fishc.com/forum/201701/23/114912gfpp4bc9by93tw4f.png")  no-repeat 10px 50%;
                }
                li:nth-child(2){
                        background:beige url("http://xxx.fishc.com/forum/201701/25/095359s33kjk8ihr0r5dk5.png")  no-repeat 10px 50%;
                }
                li:nth-child(3){
                        background:beige url("http://xxx.fishc.com/forum/201701/23/114912gfpp4bc9by93tw4f.png")  no-repeat 10px 50%;
                }
                li:last-child{
                        background:beige url("http://xxx.fishc.com/forum/201701/25/095359s33kjk8ihr0r5dk5.png")  no-repeat 10px 50%;
                        margin-right: 0;
                }
                li:hover{
                        background-color: #99FF33;
                }
        </style>
</head>
<body>
<ul>
        <li><a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场</a></li>
        <li><a href="http://bbs.fishc.com/forum-33-1.html">吹水阁</a></li>
        <li><a href="http://bbs.fishc.com/forum.php?mod=forumdisplay&fid=171&filter=typeid&typeid=637">Web开发</a></li>
        <li><a href="http://bbs.fishc.com/forum-310-1.html">Qt开发</a></li>
</ul>
</body>
</html>

小剑剑 · 发表于 2017-4-29 09:09:20

骗回复

hwx8777115 · 发表于 2017-5-11 11:07:17

学习学习

hwx8777115 · 发表于 2017-5-11 11:08:08

学习

白牙 · 发表于 2017-5-12 16:42:48

伪类选择器

apprenticeyy · 发表于 2017-6-9 08:45:14

看看

ganglianhuo2 · 发表于 2017-7-6 13:59:24

非常好

aswyamato1989 · 发表于 2017-7-18 22:40:46

今天继续学习！！！

aswyamato1989 · 发表于 2017-7-19 00:46:17

交作业！这期内容非常有意思！

逢源try一try · 发表于 2017-8-7 14:19:32

加油

哨子1122 · 发表于 2017-9-7 21:33:21

学习

Cliff_Ford · 发表于 2017-10-22 10:05:52

那个白点是怎么消失的，有讲解吗？

Cliff_Ford · 发表于 2017-10-22 10:15:18

庚午 · 发表于 2018-1-9 21:51:26

<doctype html>
<html>
<meta charset='utf-8'>
        <head>
                <title>li-hover</title>
                <style type='text/css'>
                        ul{padding:0;margin:0;}
                        li{height:30;
                                width:200px;
                                text-indent:60px;
                                margin:7px 0;
                                color:#FFFFFF;
                                list-style:none;}
                        li:first-child{background:#C0392B url(check.png) no-repeat 10px 60%;}
                        li:nth-child(2){background:#E74C3C url(shenshou.png) no-repeat 10px 80%;}
                        li:nth-child(3){background:#C0392B url(check.png) no-repeat 10px 80%;}
                        li:last-child{background:#E74C3C url(shenshou.png) no-repeat 10px 40%;}
                        li:hover{background-color:#99FF33}
                </style>
        </head>
        
        <body>
                <ul>
                        <li>QT开发</li>
                        <li>WEB网页开发</li>
                        <li>吹水阁</li>
                        <li>小天才养殖场</li>
                </ul>
        </body>
</html>

R9bot · 发表于 2018-3-15 22:10:14

厉害了

rock5442107 · 发表于 2018-6-11 22:06:23

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>031</title>
        <style type="text/css">
                ul{
                        margin:0;
                        padding:0;
                }
                li{
                        float:left;
                        padding:15px;
                        margin:5px 0;
                        text-indent:40px;
                        color:#FFF;
                        box-sizing:border-box;
                                                width: 233px;
                                                margin-right:33px;
                                                min-width:99px;
                }
                li:first-child{
                        background:#C0392B url(tortoise.png) no-repeat 10px 50%;
                }
                li:nth-child(2){
                        background:#E74C3C url(check.png) no-repeat 10px 50%;
                }
                li:nth-child(3){
                        background:#C0392B url(tortoise.png) no-repeat 10px 50%;
                }
                li:last-child{
                        margin-right:0;
                        background:#E74C3C url(check.png) no-repeat 10px 50%;
                }
                li:hover{
                        background-color:#99FF33;
                }
        </style>
</head>
<body>
        <ul>
                <li>小天才養殖場</li>
                <li>吹水閣</li>
                <li>Web開發</li>
                <li>Qt開發</li>
        </ul>
</body>
</html>

haizi1989 · 发表于 2018-7-7 22:38:20

学习一下

floride · 发表于 2018-8-2 15:38:14

a211827754 · 发表于 2018-8-22 15:53:11

好好看好好学

船到桥头自然沉 · 发表于 2018-9-10 20:17:32

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 3 1 - 用伪类选择器让列表'嗑粉儿'

评分

评分

点评

评分