QQ登录

只需一步,快速开始

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

主题

帖子

荣誉

管理团队

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

技术值
查看: 885|回复: 9

[系列教程] 0 0 3 0 - 从CSS角度领略#列表的风骚

[复制链接]
最佳答案
120 
累计签到:628 天
连续签到:156 天
不二如是 发表于 2017-1-23 11:56:19 8859 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 不二如是 于 2017-2-24 13:14 编辑

2728我们梳理了块状元素和内联元素在定位、使用方式的差别。

29搞定了,C3中著名的盒子模型。

现在基于他们体验下如何配置列表的外观呈现

所谓列表,就是:

一种能够清晰表述内容并列关系或顺序关系的元素


常用来制作各种菜单和内容项。

看一下最纯粹的代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.                
  8.         </style>
  9. </head>
  10. <body>
  11.         <ul>
  12.                 <li>小天才养殖场</li>
  13.                 <li>吹水阁</li>
  14.                 <li>Web开发</li>
  15.         </ul>
  16. </body>
  17. </html>
复制代码

效果图:
Snip20170123_287.png


怎么样结构是不是很清晰,但是有些太原始的粗犷美了。。。

其实在16我们用过。

但是并没有深入体验下

这是不对滴!

So,好好看下怎样优化<ul><li>

因为过年吗,所以像“ 1 - 年庆版 #鱼C跑马灯 |【欢脱春节】 ”一样的喜庆是必须滴~

自定义列表样式,最重要的一点就是清除浏览器默认的内外边距,margin&padding

任由使用默认数值会严重干扰,自定义的使用!

添加Css代码:
  1. ul{
  2.                         margin: 0;
  3.                         padding: 0;
  4.                 }
复制代码

效果图:
Snip20170123_289.png


通过设置padding、margin属性值为0,就会让前面的小黑点不见哦~

但是,还是需要设置list-style来真正取消样式。

添加背景色#FF3333、字体白色#FFF

代码如下:
  1.         li{
  2.                         background: #F33;
  3.                         color: #FFF;
  4.                         list-style: none;
  5.                 }
复制代码

效果图:
Snip20170123_290.png


另外所有li元素就会紧贴在一起。

所以设置padding,15px来增加li元素中文字与背景边缘的距离
  1. li{
  2. padding:15px;
  3. }
复制代码

效果图:
Snip20170123_291.png


margin属性,用来增加li元素之间的距离,顺便设置下6px的外边距
  1. li{
  2. margin: 6px 0;
  3. }
复制代码

效果图:
Snip20170123_292.png


日常的列表,往往在最前面还有个选项确认框,check。

所以我们从本地先加载check.png的logo: check.png

代码如下:
  1. li{
  2. background: #F33 url(check.png) no-repeat 3px 50%;
  3. }
复制代码

效果图:
Snip20170123_293.png


no-repeat咱们用过很多次了,就是防止图片在网页上平铺,哪儿哪儿都是的很恶心。

3px,代表check水平方向距离左侧,3px

50%垂直方向居中。

但有一个最尬的地方,列表文字和logo重复在一起了。。。

这个很好解决,添加text-indent属性来让列表文字,像右边缩进就可以:
  1. text-indent: 35px;
复制代码


最终效果图:
Snip20170123_294.png


怎么样,是不是一下就性感很多?!



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

评分

参与人数 1荣誉 +5 鱼币 +5 收起 理由
alltolove + 5 + 5 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
3 
累计签到:411 天
连续签到:1 天
joker11111 发表于 2017-3-26 22:55:25 | 显示全部楼层
本帖最后由 joker11111 于 2017-3-26 23:10 编辑

一步步做下来,果然是好看许多了,棒极
111.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-3-27 10:35

评分

参与人数 1荣誉 +5 鱼币 +5 收起 理由
不二如是 + 5 + 5 加油!

查看全部评分

最佳答案
0 
累计签到:137 天
连续签到:1 天
shishunfu 发表于 2017-4-26 09:22:10 | 显示全部楼层
越来越赞
  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.                         width: 30%;
  11.                 }
  12.                 li{
  13.                         list-style: none;
  14.                         padding: 15px;
  15.                         margin: 6px 0;
  16.                         background:beige url("http://xxx.fishc.com/forum/201701/23/114912gfpp4bc9by93tw4f.png")  no-repeat 3px 50%;
  17.                         /*3px,代表check水平方向距离左侧,3px  50%垂直方向居中。*/
  18.                         text-indent: 35px;
  19.                 }
  20.                 a{
  21.                         text-decoration: none;
  22.                         color: red;
  23.                 }
  24.         </style>
  25. </head>
  26. <body>
  27. <ul>
  28.         <li><a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场</a></li>
  29.         <li><a href="http://bbs.fishc.com/forum-33-1.html">吹水阁</a></li>
  30.         <li><a href="http://bbs.fishc.com/forum.php?mod=forumdisplay&fid=171&filter=typeid&typeid=637">Web开发</a></li>
  31. </ul>
  32. </body>
  33. </html>
复制代码
0025列表.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-4-26 09:25
最佳答案
120 
累计签到:628 天
连续签到:156 天
不二如是  楼主| 发表于 2017-3-27 10:35:54 | 显示全部楼层
joker11111 发表于 2017-3-26 22:55
一步步做下来,果然是好看许多了,棒极

那是必须滴~
最佳答案
0 
累计签到:703 天
连续签到:1 天
aswyamato1989 发表于 2017-7-18 13:16:54 | 显示全部楼层
交作业!
030.jpg
最佳答案
0 
累计签到:91 天
连续签到:1 天
likesunshine 发表于 2018-3-22 17:22:41 | 显示全部楼层
点赞
最佳答案
24 
累计签到:132 天
连续签到:3 天
像番茄加两个蛋 发表于 2018-4-15 12:03:51 | 显示全部楼层
1.gif

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-4-15 15:37

评分

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

查看全部评分

发表回复

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

本版积分规则

关闭

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

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

小黑屋|手机版|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-4-24 05:11

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