QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 1365|回复: 36

[系列教程] 0 0 3 1 - 用伪类选择器让列表'嗑粉儿'

[复制链接]
最佳答案
102 
累计签到:537 天
连续签到:65 天
不二如是 发表于 2017-1-25 11:01:21 136536 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2017-10-22 10:10 编辑

30我们搞定了一个喜庆版列表。

挺好的,像邻家姑娘的纯洁~

但是!

作为一个成年人!

我有义务让她狂躁起来,释放她内心的野兽之力

估计你扛不住!


哈哈,不要意淫啦骚年。

在30中我们是批量设置列表项的图片,你要想单独设置怎么办呢?

还记得在23中,我挖坑只介绍了几种最简单的选择器。

那写看着复杂点的留到后面用到,再说。

好吧,解开谜题,就在今天!

这次我们使用C3中的伪类选择器

伪类选择器,就是让你可以单独设计列表项,不要被他的名字唬住~

就是下面这三个小东西:

:first-child,代表第一个元素;

:nth-child,代表中间元素;

:last-child,代表最后一个元素;

我们为,列表1,3项添加神兽,小小甲鱼 shenshou.png ,原始代码如下:
  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.                         margin: 5px 0;
  14.                         text-indent: 40px;
  15.                         /*color: #FFF;*/
  16.                 }
  17.                         </style>
  18. </head>
  19. <body>
  20.         <ul>
  21.                 <li>小天才养殖场</li>
  22.                 <li>吹水阁</li>
  23.                 <li>Web开发</li>
  24.                 <li>Qt开发</li>
  25.         </ul>
  26. </body>
  27. </html>
复制代码

效果图:
Snip20170125_330.png


凑4个列表项,好演示,添加伪类选择器:
  1. li:first-child{
  2.                         background:#C0392B url(check.png) no-repeat 10px 50%;
  3.                 }
  4.                 li:nth-child(2){
  5.                         background: #E74C3C url(shenshou.png) no-repeat 10px 50%;
  6.                 }
  7.                 li:nth-child(3){
  8.                         background: #C0392B url(check.png) no-repeat 10px 50%;
  9.                 }
  10.                 li:last-child{
  11.                         background: #E74C3C url(shenshou.png) no-repeat 10px 50%;
  12.                 }
复制代码

效果图:
Snip20170125_332.png


看到了不,不同项的child有不同的用法!

除了首,first-child;尾,last-child。

中间项一律,nth-child(n)。


当然了还可以有更好玩的用法,中间项既然是n,那么就可以输入函数

nth-child(n+3),获取除前三个之外的所有元素。

nth-child(-n+3),获取前三个元素。

nth-child(2n),获取所有偶数项。

留给你自己玩儿吧~

还可以添加点互动,当鼠标滑过某项时,可以添加背景色,既然过年,就用绿色#99FF33(颜色大全
  1.         li:hover{
  2.                         background-color: #99FF33;
  3.                 }
复制代码

效果图:
1.gif


游客,如果您要查看本帖隐藏内容请回复





这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑传送门)(不喜欢更要订阅

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:132 天
连续签到:1 天
shishunfu 发表于 2017-4-26 09:50:23 | 显示全部楼层
越来越有意思了!交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  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.                         list-style: none;
  13.                         padding: 15px;
  14.                         text-indent: 35px;
  15.                         float: left;
  16.                         margin-right: 3%;
  17.                         width: 20%;
  18.                         min-width: 99px;        /*min-width 属性设置元素的最小宽度。*/
  19.                 }
  20.                 a{
  21.                         text-decoration: none;
  22.                         color: red;
  23.                 }
  24.                 li:first-child{
  25.                         background:beige url("http://xxx.fishc.com/forum/201701/23/114912gfpp4bc9by93tw4f.png")  no-repeat 10px 50%;
  26.                 }
  27.                 li:nth-child(2){
  28.                         background:beige url("http://xxx.fishc.com/forum/201701/25/095359s33kjk8ihr0r5dk5.png")  no-repeat 10px 50%;
  29.                 }
  30.                 li:nth-child(3){
  31.                         background:beige url("http://xxx.fishc.com/forum/201701/23/114912gfpp4bc9by93tw4f.png")  no-repeat 10px 50%;
  32.                 }
  33.                 li:last-child{
  34.                         background:beige url("http://xxx.fishc.com/forum/201701/25/095359s33kjk8ihr0r5dk5.png")  no-repeat 10px 50%;
  35.                         margin-right: 0;
  36.                 }
  37.                 li:hover{
  38.                         background-color: #99FF33;
  39.                 }
  40.         </style>
  41. </head>
  42. <body>
  43. <ul>
  44.         <li><a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场</a></li>
  45.         <li><a href="http://bbs.fishc.com/forum-33-1.html">吹水阁</a></li>
  46.         <li><a href="http://bbs.fishc.com/forum.php?mod=forumdisplay&fid=171&filter=typeid&typeid=637">Web开发</a></li>
  47.         <li><a href="http://bbs.fishc.com/forum-310-1.html">Qt开发</a></li>
  48. </ul>
  49. </body>
  50. </html>
复制代码
0026伪类.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-4-26 10:55

评分

参与人数 1荣誉 +6 鱼币 +6 贡献 +3 收起 理由
不二如是 + 6 + 6 + 3 越来也棒了!

查看全部评分

最佳答案
0 
累计签到:533 天
连续签到:3 天
庚午 发表于 2018-1-9 21:51:26 | 显示全部楼层
  1. <doctype html>
  2. <html>
  3. <meta charset='utf-8'>
  4.         <head>
  5.                 <title>li-hover</title>
  6.                 <style type='text/css'>
  7.                         ul{padding:0;margin:0;}
  8.                         li{height:30;
  9.                                 width:200px;
  10.                                 text-indent:60px;
  11.                                 margin:7px 0;
  12.                                 color:#FFFFFF;
  13.                                 list-style:none;}
  14.                         li:first-child{background:#C0392B url(check.png) no-repeat 10px 60%;}
  15.                         li:nth-child(2){background:#E74C3C url(shenshou.png) no-repeat 10px 80%;}
  16.                         li:nth-child(3){background:#C0392B url(check.png) no-repeat 10px 80%;}
  17.                         li:last-child{background:#E74C3C url(shenshou.png) no-repeat 10px 40%;}
  18.                         li:hover{background-color:#99FF33}
  19.                 </style>
  20.         </head>
  21.        
  22.         <body>
  23.                 <ul>
  24.                         <li>QT开发</li>
  25.                         <li>WEB网页开发</li>
  26.                         <li>吹水阁</li>
  27.                         <li>小天才养殖场</li>
  28.                 </ul>
  29.         </body>
  30. </html>
复制代码

点评

我很赞同!: 5.0 不,我坚决不同意楼主的看法!: 0.0
我很赞同!: 5 不,我坚决不同意楼主的看法!: 0
  发表于 2018-1-9 22:04

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

最佳答案
0 
累计签到:26 天
连续签到:1 天
type_J 发表于 2017-1-27 01:25:21 | 显示全部楼层
做到这么晚的

评分

参与人数 1荣誉 +20 鱼币 +10 贡献 +5 收起 理由
不二如是 + 20 + 10 + 5 好好学习,天天想上

查看全部评分

最佳答案
102 
累计签到:537 天
连续签到:65 天
不二如是  楼主| 发表于 2017-1-27 06:55:52 | 显示全部楼层

哈哈,好厉害!!!

请收下这点鱼币~
最佳答案
0 
累计签到:15 天
连续签到:1 天
Sahil 发表于 2017-1-27 16:00:34 | 显示全部楼层
看看是哪三个
最佳答案
102 
累计签到:537 天
连续签到:65 天
不二如是  楼主| 发表于 2017-1-28 10:17:23 | 显示全部楼层

欢迎~
最佳答案
0 
累计签到:16 天
连续签到:1 天
wuxiandashu 发表于 2017-2-10 11:46:35 | 显示全部楼层
都是斯蒂芬森
最佳答案
102 
累计签到:537 天
连续签到:65 天
不二如是  楼主| 发表于 2017-2-10 12:41:47 | 显示全部楼层
最佳答案
0 
累计签到:18 天
连续签到:2 天
qywang 发表于 2017-2-28 09:37:55 | 显示全部楼层
学习一波
最佳答案
0 
累计签到:38 天
连续签到:1 天
772317495 发表于 2017-2-28 17:13:33 | 显示全部楼层
看帖要养成回复的好习惯
最佳答案
0 
累计签到:1 天
连续签到:1 天
a540656809 发表于 2017-3-1 08:04:04 | 显示全部楼层
看看
最佳答案
102 
累计签到:537 天
连续签到:65 天
不二如是  楼主| 发表于 2017-3-1 08:39:07 | 显示全部楼层
最佳答案
0 
累计签到:1 天
连续签到:1 天
a540656809 发表于 2017-3-1 08:40:43 | 显示全部楼层

小哥起的真早啊
最佳答案
102 
累计签到:537 天
连续签到:65 天
不二如是  楼主| 发表于 2017-3-1 08:44:59 | 显示全部楼层

最佳答案
0 
累计签到:2 天
连续签到:2 天
163areocraft 发表于 2017-3-7 16:46:06 | 显示全部楼层
谢谢。
最佳答案
0 
累计签到:7 天
连续签到:1 天
SonOmiga 发表于 2017-3-7 19:52:08 | 显示全部楼层
最佳答案
0 
累计签到:89 天
连续签到:1 天
dreamdnj 发表于 2017-3-10 08:34:53 | 显示全部楼层
看看
最佳答案
0 
累计签到:7 天
连续签到:1 天
疯样的篮子 发表于 2017-3-17 21:30:44 | 显示全部楼层
从来都是被第二页进度赶着走.....~~~~~
最佳答案
3 
累计签到:411 天
连续签到:1 天
joker11111 发表于 2017-3-26 23:52:37 | 显示全部楼层
交作业 落了两周 内心自责无比,蓝瘦,香菇
1111.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-3-27 10:35
最佳答案
102 
累计签到:537 天
连续签到:65 天
不二如是  楼主| 发表于 2017-3-27 10:35:24 | 显示全部楼层
joker11111 发表于 2017-3-26 23:52
交作业 落了两周 内心自责无比,蓝瘦,香菇

joker,棒棒哒~
最佳答案
43 
累计签到:531 天
连续签到:1 天
wei_Y 发表于 2017-3-29 19:08:48 | 显示全部楼层
发现个有趣的地方,当li里的内容是汉字时,浏览器缩小时 当前的字如果不能继续待在这一行里那么就会换行。

当是英文时,如果这个英文是一个整体时,比如HTML5678,则不会换行。

英文会以空格为单位进行换行。汉字以单个字为单位换行。

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /2 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-1-23 02:08

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