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

kaneko · 发表于 2018-10-4 10:57:19

原来网页上的导航栏是这样做出来的，再加个链接上去就完美了，还看到了些许响应式布局的影子！！！

soulwyb · 发表于 2018-10-22 23:37:00

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>31</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ul {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
            padding: 15px;
            text-indent: 40px;
            float: left;
            box-sizing: border-box;
            /* width: 233px;
            margin-right: 33px; */
            margin-right: 4%;
            width: 22%;
            min-width: 99px;
        }
        
        li:first-child {
            background: #c0392b url('check.png') no-repeat 10px 50%;
        }
        
        li:nth-child(2) {
            background: #e74c3c url('shenshou.png') no-repeat 10px 50%;
        }
        
        li:nth-child(3) {
            background: #c0392b url('check.png') no-repeat 10px 50%;
        }
        
        li:last-child {
            background: #e74c3c url('shenshou.png') no-repeat 10px 50%;
            margin-right: 0;
        }
        
        li:hover {
            background-color: #9f3;
        }
    </style>
</head>

<body>
    <ul>
        <li>小天才养殖场</li>
        <li>吹水阁</li>
        <li>Web开发</li>
        <li>Qt开发</li>
    </ul>
</body>

</html>

小苏鱿鱼2 · 发表于 2018-10-23 10:56:55

为什么直接复制代码，格式会出错，每行代码前面会有。。。。。。，而不是空格

枫丹白露666 · 发表于 2018-10-25 18:38:09

li:nth-child(3){
background: #C0392B url(check.png) no-repeat 10px 50%;
上面红色线是什么意思，

枫丹白露666 · 发表于 2018-10-27 20:50:14

为什么在我的网页打开是这样的呢？不在一行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
margin:0;
padding:0;
}
li{
padding:15px;
margin:5px;
text-indent: 40px;
float:left;
box-sizing: border-box;
width: 233px;
margin-right: 33px;
margin-right: 4%;
width:22%;
min-width: 99px;
}
li:first-child{
background: #C0392B url(check.png) no-repeat 10px 50%;
}
li:nth-child(2){
background:#C0392B url(henshou.png) no-repeat 10px 50%;
}
li:
nth-child(3){
background: #C0392B url(shenshou.png) no-repeat 10px 50%;
}
li:last-child{
background: #E74C3C url(check.png) no-repeat 10px 50%;
}
li:last-child{
margin-right: 0;
}
li:hover{
background-color:#99FF33;
}

</style>
</head>

<body>
<ul>
<li>三十年河东</li>
<li>三十年河西</li>
<li>莫欺少年穷</li>
<li>是计算机计算机</li>
</ul>
</body>
</html>

小丸子hjm · 发表于 2018-10-31 17:20:00

学习~

莫希 · 发表于 2019-1-6 19:40:26

RE: 0 0 3 1 - 用伪类选择器让列表'嗑粉儿' [修改]

星空·无限 · 发表于 2019-1-9 15:03:20

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            padding: 15px;
            text-indent: 40px;
            background: #c0382b url("030-0.png") no-repeat 5px 50%;
            float: left;
            list-style: none;
            box-sizing: border-box;
            width: 22%;
            margin-right: 4%;
            min-width: 180px;
        }
        li:nth-child(2n){
            background-color: #e74c3b;
            background-image: url(031-0.png);
        }
        li:last-child{
            margin-right: 0;
        }
        li:hover{
            background-color: #9f3;
        }
    </style>
</head>
<body>
<ul>
    <li>小天才养殖场</li>
    <li>吹水阁</li>
    <li>Web开发</li>
    <li>Qt开发</li>
</ul>
</body>
</html>

新思路。在li中为每个列表设置初始的背景图片和颜色等属性，再用伪类选择器选中第二个和第四个列表进行背景图片设置和颜色设置，这样设置会覆盖之前设置的背景和颜色，减少代码量

星空·无限 · 发表于 2019-1-9 15:25:32

枫丹白露666 发表于 2018-10-27 20:50
为什么在我的网页打开是这样的呢？不在一行

你这代码有有两个问题：你为所有li设置了一个外边框5px（包括上下左右都有），那么每个li左，右边都是带有5px的边框；再其次后面你又为右外边框设置了4%的距离，这里margin-right会覆盖掉前面5px那个边框值。如果在加上li自身的宽度就已经超过了100%，所以才会显示在下一行。
还有就是你是为四个边框都添加了margin-right属性的22%*4+4%*4=104%，所以这个数值是不含最后一个li
的margin-right数值。
你需要去掉margin:5px;和在最后一个伪类选择器中添加margin-right: 0;

guohuo888meng@1 · 发表于 2019-2-13 16:01:57

棒棒的

克里斯保罗 · 发表于 2019-8-17 22:49:21

交作业！

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
                ul{
                        margin: 0;
                        padding: 0;
                }
                li{
                        padding: 15px;
                        margin: 5px 0;
                        text-indent: 40px;
                }
                li:first-child{
                        background:#C0392B
                        url(check.png)
                        no-repeat
                        10px 
                        50%;
                }
                li:nth-child(2){
                        background: #E74C3C url(shoushou.png) no-repeat 10px 50%;
                }
                li:nth-child(3){
                        background:#C0392B
                        url(check.png)
                        no-repeat
                        10px 
                        50%;
                }
                li:last-child{
                        background: #E74C3C url(shoushou.png) no-repeat 10px 50%;
                        margin-right: 0;
                }
                li:hover{
                        background-color: #99FF33;
                }
                li{
                        float:left;
                        box-sizing: border-box;
                        width: 233px;
                        margin-right: 33px;
                        margin-right: 4%;
                        width: 22%;
                }
        </style>

</head>
<body>
        <ul>
                <li>小天才养殖场</li>
                <li>吹水阁</li>
                <li>Web开发</li>
                <li>Qt开发</li>
        </ul>
        
</body>
</html>

你在意在便在 · 发表于 2019-10-31 11:22:12

作业作业~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    ul{
            margin: 0;
            padding: 0;
            
    }
    li{
            padding: 15px;
            margin: 5px 0;
            text-indent: 40px;
            color: #FFF;
    }
    li {
        box-sizing: border-box;
        width:22%;
        margin-right: 4%;
        list-style: none;
        float: left;
        /* min-width: 90px; */
    }
    li:first-child{
              background:#3498db url(check.png) no-repeat 10px 50%;
      }
      li:nth-child(2n+0){
              background: #27ae60 url(shenshou.png) no-repeat 10px 50%;
      } /* 偶数 */
      li:nth-child(3n+0){
              background: #3498db url(check.png) no-repeat 10px 50%;
      } /* 3的倍数 */
      li:nth-child(5n+0){
              background:#3498db url(check.png) no-repeat 10px 50%;
      } /* 5的倍数 */
      li:last-child{
              background: #27ae60 url(shenshou.png) no-repeat 10px 50%;
              margin-right: 0;
      }
      li:hover {
              font-size: 20px;
              background-color: #bdc3c7 ;
      }
</style>
</head>
<body>
<ul>
    <li>小天才养殖场</li>
    <li>吹水阁</li>
    <li>Web开发</li>
    <li>Qt开发</li>
    <li>不二如是</li>
    <li>小甲鱼</li>
</ul>
</body>
</html>

小脑斧 · 发表于 2020-3-12 15:57:27

登录/注册后可看大图

287187056 · 发表于 2020-4-1 04:14:34

提示: 作者被禁止或删除内容自动屏蔽

1041556532 · 发表于 2020-5-28 13:26:12

交作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            margin: 0px;
            padding: 0px;
        } 
        li{
            padding: 15px;
            margin: 5px 0;
            text-indent: 40px;
            /*color: #FFF;*/
        }
        li:first-child{
            background:#C0392B url(checkbox.png) no-repeat 10px 50%;
        }
        li:nth-child(2){
            background: #E74C3C url(xjy.png) no-repeat 10px 50%;
        }
        li:nth-child(3){
            background: #C0392B url(checkbox.png) no-repeat 10px 50%;
        }
        li:last-child{
            background: #E74C3C url(xjy.png) no-repeat 10px 50%;
        }
        li:hover {
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>小天才养殖场</li>
        <li>吹水阁</li>
        <li>Web开发</li>
        <li>Qt开发</li>
    </ul>
</body>
</html>

tianyuan · 发表于 2020-5-30 15:22:03

liuzhengyuan · 发表于 2020-5-31 07:41:45

看看

1428375758 · 发表于 2020-6-6 11:03:31

我爱小甲鱼

kmq116 · 发表于 2020-7-19 14:36:22

11111111111111111

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

287187056 287187056 当前离线 UID 104738 日志相册贡献荣誉积分 128 狗仔卡头像被屏蔽	发表于 2020-4-1 04:14:34 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报显身卡

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