设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 3 1 - 用伪类选择器让列表'嗑粉儿'
1234下一页
返回列表 发新帖
楼主: 不二如是

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

[复制链接]
船到桥头自然沉
发表于 2018-9-10 20:17:32 | 显示全部楼层
精美标题-进阶版.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

kaneko
发表于 2018-10-4 10:57:19 | 显示全部楼层
原来网页上的导航栏是这样做出来的，再加个链接上去就完美了，还看到了些许响应式布局的影子！！！
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

soulwyb
发表于 2018-10-22 23:37:00 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <meta charset="utf-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <title>31</title>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <style>
  10.         ul {
  11.             padding: 0;
  12.             margin: 0;
  13.         }
  14.         
  15.         li {
  16.             list-style: none;
  17.             padding: 15px;
  18.             text-indent: 40px;
  19.             float: left;
  20.             box-sizing: border-box;
  21.             /* width: 233px;
  22.             margin-right: 33px; */
  23.             margin-right: 4%;
  24.             width: 22%;
  25.             min-width: 99px;
  26.         }
  27.         
  28.         li:first-child {
  29.             background: #c0392b url('check.png') no-repeat 10px 50%;
  30.         }
  31.         
  32.         li:nth-child(2) {
  33.             background: #e74c3c url('shenshou.png') no-repeat 10px 50%;
  34.         }
  35.         
  36.         li:nth-child(3) {
  37.             background: #c0392b url('check.png') no-repeat 10px 50%;
  38.         }
  39.         
  40.         li:last-child {
  41.             background: #e74c3c url('shenshou.png') no-repeat 10px 50%;
  42.             margin-right: 0;
  43.         }
  44.         
  45.         li:hover {
  46.             background-color: #9f3;
  47.         }
  48.     </style>
  49. </head>

  51. <body>
  52.     <ul>
  53.         <li>小天才养殖场</li>
  54.         <li>吹水阁</li>
  55.         <li>Web开发</li>
  56.         <li>Qt开发</li>
  57.     </ul>
  58. </body>

  60. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小苏鱿鱼2
发表于 2018-10-23 10:56:55 | 显示全部楼层
为什么直接复制代码，格式会出错，每行代码前面会有。。。。。。，而不是空格
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

枫丹白露666
发表于 2018-10-25 18:38:09 | 显示全部楼层
li:nth-child(3){
                background: #C0392B url(check.png) no-repeat 10px 50%;
上面红色线是什么意思，
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

枫丹白露666
发表于 2018-10-27 20:50:14 | 显示全部楼层
猎豹截图20181027204955.jpg 为什么在我的网页打开是这样的呢？不在一行

<!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>
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小丸子hjm
发表于 2018-10-31 17:20:00 | 显示全部楼层
学习~
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

莫希
发表于 2019-1-6 19:40:26 | 显示全部楼层
RE: 0 0 3 1 - 用伪类选择器让列表'嗑粉儿' [修改]
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

星空·无限
发表于 2019-1-9 15:03:20 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         ul{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         li{
  12.             padding: 15px;
  13.             text-indent: 40px;
  14.             background: #c0382b url("030-0.png") no-repeat 5px 50%;
  15.             float: left;
  16.             list-style: none;
  17.             box-sizing: border-box;
  18.             width: 22%;
  19.             margin-right: 4%;
  20.             min-width: 180px;
  21.         }
  22.         li:nth-child(2n){
  23.             background-color: #e74c3b;
  24.             background-image: url(031-0.png);
  25.         }
  26.         li:last-child{
  27.             margin-right: 0;
  28.         }
  29.         li:hover{
  30.             background-color: #9f3;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35. <ul>
  36.     <li>小天才养殖场</li>
  37.     <li>吹水阁</li>
  38.     <li>Web开发</li>
  39.     <li>Qt开发</li>
  40. </ul>
  41. </body>
  42. </html>
复制代码


新思路。在li中为每个列表设置初始的背景图片和颜色等属性，再用伪类选择器选中第二个和第四个列表进行背景图片设置和颜色设置，这样设置会覆盖之前设置的背景和颜色，减少代码量
批注.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

星空·无限
发表于 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;
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

guohuo888meng@1
发表于 2019-2-13 16:01:57 | 显示全部楼层
棒棒的
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

克里斯保罗
发表于 2019-8-17 22:49:21 | 显示全部楼层
交作业！
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Document</title>
  6.         <style type="text/css">
  7.                 ul{
  8.                         margin: 0;
  9.                         padding: 0;
  10.                 }
  11.                 li{
  12.                         padding: 15px;
  13.                         margin: 5px 0;
  14.                         text-indent: 40px;
  15.                 }
  16.                 li:first-child{
  17.                         background:#C0392B
  18.                         url(check.png)
  19.                         no-repeat
  20.                         10px
  21.                         50%;
  22.                 }
  23.                 li:nth-child(2){
  24.                         background: #E74C3C url(shoushou.png) no-repeat 10px 50%;
  25.                 }
  26.                 li:nth-child(3){
  27.                         background:#C0392B
  28.                         url(check.png)
  29.                         no-repeat
  30.                         10px
  31.                         50%;
  32.                 }
  33.                 li:last-child{
  34.                         background: #E74C3C url(shoushou.png) no-repeat 10px 50%;
  35.                         margin-right: 0;
  36.                 }
  37.                 li:hover{
  38.                         background-color: #99FF33;
  39.                 }
  40.                 li{
  41.                         float:left;
  42.                         box-sizing: border-box;
  43.                         width: 233px;
  44.                         margin-right: 33px;
  45.                         margin-right: 4%;
  46.                         width: 22%;
  47.                 }
  48.         </style>

  50. </head>
  51. <body>
  52.         <ul>
  53.                 <li>小天才养殖场</li>
  54.                 <li>吹水阁</li>
  55.                 <li>Web开发</li>
  56.                 <li>Qt开发</li>
  57.         </ul>
  58.        
  59. </body>
  60. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 2019-10-31 11:22:12 | 显示全部楼层
作业作业~
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style type="text/css">
  7.     ul{
  8.             margin: 0;
  9.             padding: 0;
  10.             
  11.     }
  12.     li{
  13.             padding: 15px;
  14.             margin: 5px 0;
  15.             text-indent: 40px;
  16.             color: #FFF;
  17.     }
  18.     li {
  19.         box-sizing: border-box;
  20.         width:22%;
  21.         margin-right: 4%;
  22.         list-style: none;
  23.         float: left;
  24.         /* min-width: 90px; */
  25.     }
  26.     li:first-child{
  27.               background:#3498db url(check.png) no-repeat 10px 50%;
  28.       }
  29.       li:nth-child(2n+0){
  30.               background: #27ae60 url(shenshou.png) no-repeat 10px 50%;
  31.       } /* 偶数 */
  32.       li:nth-child(3n+0){
  33.               background: #3498db url(check.png) no-repeat 10px 50%;
  34.       } /* 3的倍数 */
  35.       li:nth-child(5n+0){
  36.               background:#3498db url(check.png) no-repeat 10px 50%;
  37.       } /* 5的倍数 */
  38.       li:last-child{
  39.               background: #27ae60 url(shenshou.png) no-repeat 10px 50%;
  40.               margin-right: 0;
  41.       }
  42.       li:hover {
  43.               font-size: 20px;
  44.               background-color: #bdc3c7 ;
  45.       }
  46. </style>
  47. </head>
  48. <body>
  49. <ul>
  50.     <li>小天才养殖场</li>
  51.     <li>吹水阁</li>
  52.     <li>Web开发</li>
  53.     <li>Qt开发</li>
  54.     <li>不二如是</li>
  55.     <li>小甲鱼</li>
  56. </ul>
  57. </body>
  58. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-12 15:57:27 | 显示全部楼层

                               
登录/注册后可看大图

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

287187056
头像被屏蔽
发表于 2020-4-1 04:14:34 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

1041556532
发表于 2020-5-28 13:26:12 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         ul {
  9.             margin: 0px;
  10.             padding: 0px;
  11.         }
  12.         li{
  13.             padding: 15px;
  14.             margin: 5px 0;
  15.             text-indent: 40px;
  16.             /*color: #FFF;*/
  17.         }
  18.         li:first-child{
  19.             background:#C0392B url(checkbox.png) no-repeat 10px 50%;
  20.         }
  21.         li:nth-child(2){
  22.             background: #E74C3C url(xjy.png) no-repeat 10px 50%;
  23.         }
  24.         li:nth-child(3){
  25.             background: #C0392B url(checkbox.png) no-repeat 10px 50%;
  26.         }
  27.         li:last-child{
  28.             background: #E74C3C url(xjy.png) no-repeat 10px 50%;
  29.         }
  30.         li:hover {
  31.             background-color: dodgerblue;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <ul>
  37.         <li>小天才养殖场</li>
  38.         <li>吹水阁</li>
  39.         <li>Web开发</li>
  40.         <li>Qt开发</li>
  41.     </ul>
  42. </body>
  43. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

tianyuan
发表于 2020-5-30 15:22:03 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

liuzhengyuan
发表于 2020-5-31 07:41:45 | 显示全部楼层
看看
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

1428375758
发表于 2020-6-6 11:03:31 | 显示全部楼层
我爱小甲鱼
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

kmq116
发表于 2020-7-19 14:36:22 | 显示全部楼层
11111111111111111
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

下一页 »
1234下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-12 20:45

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表