DIVCSS 第十章 CSS 构造列表与导航

[复制链接]
ARCHY明星会员实名认证 发表于 2012-10-17 23:49:27 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

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

x
一、列表的内边距与外边距
  1. Ul {
  2. Margin: 0;
  3. Padding: 0;
  4. }
复制代码
边距padding和margin教程

二、使用图片作为列表图标
  1. Ul {
  2. Margin: 0;
  3. Padding:0;
  4. Width: 200px;
  5. List-style-image:url(images/list.gif);
  6. Line-height: 150%;
  7. }
复制代码
推荐先阅读:第三章 CSS背景与列表

三、以背景图片作为项目列表图标
  1. Ul {
  2. List-style-type:none;
  3. }
  4. Li {
  5. Background: url(images/list.gif) no-repeat left center;
  6. Padding: 0 0 0 25px;
  7. }
复制代码
四、内联列表
  1. Ul {
  2. List-style-type:disc;
  3. }
  4. Li {
  5. Display: inline;
  6. }
复制代码
这里的display 属性是块级值的设置,定义是否要成为块.
Inline 是是内联,block 是区块.

五、背景图片和内联列表
  1. Ul {
  2. List-style-type: none;
  3. }
  4. Li {
  5. Display:inline;
  6. Background url(images/list.gif) no-repeat left center;
  7. Margin: 0 0 0 10px;
  8. Padding: 0 0 0 15px;
  9. }
复制代码
六、垂直导航栏
  1. <div>
  2. <ul>
  3. <li><a href="#">Drubjs Menu</a></li>
  4. <li><a href="#">Beer</a></li>
  5. <li><a href="#">Spirits</a></li>
  6. <li><a href="#">Cola</a></li>
  7. <li><a href="#">Lemonade</a></li>
  8. <li><a href="#">Tea</a></li>
  9. <li><a href="#">Coffee</a></li>
  10. </ul>
  11. </div>
  12. Ul {
  13. List-style-type:none;
  14. Margin:5px;
  15. Padding:2px
  16. Width: 160px;
  17. Font-size: 12px;
  18. }
  19. Li {
  20. Background: #ddd;
  21. Margin: 0;
  22. Padding: 2px 10px;
  23. Border-left: 1px solid #fff;
  24. Border-top: 1px solid #fff;
  25. Border-right: 1px solid #666;
  26. Border-bottom: 1px solid #aaa;
  27. }
复制代码
七、创建垂直翻转的列表
  1. ul {
  2. margin: 0;
  3. padding: 0;
  4. list-style-type: none;
  5. }
  6. Ul a{
  7. Display: block;
  8. Width: 200px;
  9. Height: 40px; /*39px*/
  10. Line-height: 40px; /*39px*/
  11. Color:# 000;
  12. Text-decoration: none;
  13. Background: #94b8E9 url(images/pixy-rollover.gif) no-repeat left center; /*left bottom*/
  14. Text-indent: 50px;
  15. }
  16. a:hover {
  17. background-position: right bottom;
  18. }
复制代码
八、创建水平导航条
  1. ul {
  2. Margin: 0;
  3. Padding: 0 2em;
  4. List-style: none;
  5. line-height: 2.1em;
  6. Width: 720px;
  7. Background: #faa819 url(images/mainNavBg.gif) repeat-x;
  8. }
  9. ul li {
  10. float: left;
  11. }
  12. ul a {
  13. color:#fff;
  14. padding: 0 10px;
  15. background: url(images/divider.gif) repeat-y left top;
  16. text-decoration: none;
  17. }
复制代码
把代码拿到网页中去实践,修改体验不同的效果吧。




上一篇:第九章 CSS 构造模型
下一篇:Discuz!电子商务插件CSHOP网上商城系统 X2/x2.5

大神点评17

 发表于 2012-10-18 11:22:15
转播微博
slxfw 发表于 2012-11-10 19:59:56 [DIVCSS] 显示全部楼层
不错,看看。  
爱实翡咚 发表于 2012-11-11 21:59:45 [DIVCSS] 显示全部楼层
这个贴不错!!!!!  
神州8号 发表于 2012-11-11 21:59:45 [DIVCSS] 显示全部楼层
顶也~……  
jyuap 发表于 2012-11-11 21:59:45 [DIVCSS] 显示全部楼层
楼主福如东海,万寿无疆!  
jingjinxin 发表于 2012-12-15 10:42:48 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享。
蔚蓝色的翅膀 发表于 2013-2-21 18:44:00 [DIVCSS] 显示全部楼层
这个贴太好了!!!
hackshow 发表于 2013-10-8 10:33:50 [DIVCSS] 显示全部楼层
可以、  不错`      
chuyue 发表于 2013-10-10 16:05:50 [DIVCSS] 显示全部楼层
谢谢楼主!收下了!!
cheng289190 发表于 2013-11-8 10:55:39 [DIVCSS] 显示全部楼层
在这里真能学到好多东西,感谢站长帮肯德基门www点czjxfc点com
wusiwei12345 发表于 2013-12-20 14:06:25 [DIVCSS] 显示全部楼层
路过,肉眼观察,还是很基础的
wings: http://www.wusiwei.com
坚持与执着 发表于 2014-1-11 13:12:04 [DIVCSS] 显示全部楼层
这个可以有哦
上海pos机 www.yaofu88.com
362938688 发表于 2014-11-28 15:11:46 [DIVCSS] 显示全部楼层
背景图片和内联列表
www.bjhxjp.org|做网站|清洗烟道|
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

ARCHY

Administrator

  • 12816 积分
  • 20532 帖数
  • 0 日志
广告招商 QQ: 5620010
快速回复 返回顶部 返回列表