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

鱼C论坛

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

[庖丁解牛] 0 0 3 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 越来也棒了！

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小剑剑
发表于 2017-4-29 09:09:20 | 显示全部楼层
骗回复
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

hwx8777115
发表于 2017-5-11 11:07:17 From FishC Mobile | 显示全部楼层
学习学习
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

hwx8777115
发表于 2017-5-11 11:08:08 From FishC Mobile | 显示全部楼层
学习
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

白牙
发表于 2017-5-12 16:42:48 | 显示全部楼层
伪类选择器
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

apprenticeyy
发表于 2017-6-9 08:45:14 From FishC Mobile | 显示全部楼层
看看
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

ganglianhuo2
发表于 2017-7-6 13:59:24 | 显示全部楼层
非常好
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-7-18 22:40:46 | 显示全部楼层
今天继续学习！！！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-7-19 00:46:17 | 显示全部楼层
交作业！这期内容非常有意思！
031-2.jpg
031-1.jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

逢源try一try
发表于 2017-8-7 14:19:32 From FishC Mobile | 显示全部楼层
加油
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

哨子1122
发表于 2017-9-7 21:33:21 From FishC Mobile | 显示全部楼层
学习
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

Cliff_Ford
发表于 2017-10-22 10:05:52 | 显示全部楼层
那个白点是怎么消失的，有讲解吗？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Cliff_Ford
发表于 2017-10-22 10:15:18 | 显示全部楼层
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

庚午
发表于 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^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

R9bot
发表于 2018-3-15 22:10:14 | 显示全部楼层
厉害了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

rock5442107
发表于 2018-6-11 22:06:23 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>031</title>
  6.         <style type="text/css">
  7.                 ul{
  8.                         margin:0;
  9.                         padding:0;
  10.                 }
  11.                 li{
  12.                         float:left;
  13.                         padding:15px;
  14.                         margin:5px 0;
  15.                         text-indent:40px;
  16.                         color:#FFF;
  17.                         box-sizing:border-box;
  18.                                                 width: 233px;
  19.                                                 margin-right:33px;
  20.                                                 min-width:99px;
  21.                 }
  22.                 li:first-child{
  23.                         background:#C0392B url(tortoise.png) no-repeat 10px 50%;
  24.                 }
  25.                 li:nth-child(2){
  26.                         background:#E74C3C url(check.png) no-repeat 10px 50%;
  27.                 }
  28.                 li:nth-child(3){
  29.                         background:#C0392B url(tortoise.png) no-repeat 10px 50%;
  30.                 }
  31.                 li:last-child{
  32.                         margin-right:0;
  33.                         background:#E74C3C url(check.png) no-repeat 10px 50%;
  34.                 }
  35.                 li:hover{
  36.                         background-color:#99FF33;
  37.                 }
  38.         </style>
  39. </head>
  40. <body>
  41.         <ul>
  42.                 <li>小天才養殖場</li>
  43.                 <li>吹水閣</li>
  44.                 <li>Web開發</li>
  45.                 <li>Qt開發</li>
  46.         </ul>
  47. </body>
  48. </html>
复制代码


031.jpg

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-8-22 16:03

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

haizi1989
发表于 2018-7-7 22:38:20 | 显示全部楼层
学习一下
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

floride
发表于 2018-8-2 15:38:14 | 显示全部楼层
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

a211827754
发表于 2018-8-22 15:53:11 | 显示全部楼层
好好看好好学
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

船到桥头自然沉
发表于 2018-9-10 20:17:32 | 显示全部楼层
精美标题-进阶版.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-4-25 19:57

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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