寂寞部屋
- 关注互联网,关注生活
关注互联网,关注生活
2019年五月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • 日志总数:553 篇
  • 浏览总量:2,433,062 次
  • 运行天数:612 天
  • 建站时间:2017-9-14
  • 最后更新:2019-4-2

十一、css网站元素设计——纵向导航制作

纵向导航多常见于电子商务网站的一侧,便于用户查找各个分类的商品
先来看一段XHTML代码:

XML/HTML代码
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
  5. <title>纵向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
  6. <style type = “text/css”>
  7. <!–
  8. #category{
  9. width:100px;
  10. border-color:#ff0000 #ff9900;/*此处边框的设定采用了简写的形式,此处单独设定边框颜色,两个颜色同样是表示上下,与右左。*/
  11. border-style:solid;  /*此处单独设定边框样式*/
  12. border-width:0px 1px 1px;  /*此处单独设定边框宽度,三个值分别表示:上为0px,右左分别是1px ,下为1px.*/
  13. }
  14. #category h1,#category h2{   /*此处把两级标题相同属性写在一起,节约代码*/
  15. margin:0px;
  16. padding:4px;
  17. font-size:12px;
  18. font-weight:bold;
  19. }
  20. #category h1{
  21. border-top:1px solid #c5c6c4; /*把不同的属性单独设定。*/
  22. }
  23. #category h2{
  24. font-weight:normal;  /*前面设定了粗体,此度用正常值覆盖。缺少这一句则按默认值加粗。*/
  25. padding-left:10px;  /*用此值覆盖上面设定的值。*/
  26. }
  27. >
  28. </style>
  29. </head>
  30. <body>
  31. <div id =“category”>
  32. <h1>设计</h1>
  33. <h2><a href=“#”>平面设计</a></h2>
  34. <h2><a href=“#”>网页设计</a></h2>
  35. <h2><a href=“#”>动画设计</a></h2>
  36. <h1>程序</h1>
  37. <h2><a href=“#”>asp程序</a></h2>
  38. <h2><a href=“#”>php程序</a></h2>
  39. <h2><a href=“#”>jsp程序</a></h2>
  40. <h1>维护</h1>
  41. <h2><a href=“#”>网站编辑</a></h2>
  42. <h2><a href=“#”>网站推广</a></h2>
  43. <h2><a href=“#”>网站优化</a></h2>
  44. </div>
  45. </body>
  46. </html>

效果图:

image

这里我们没有使用ul和li来实现,而使用了一级标题h1与二级标题h2,其实这些h1,h2,h3标签本身就具有用于对文本进行层级划分的作用,而使用div和class来对其标记,显得更为直观。
需要重点提示的就是边框属性的简写形式,有兴趣的朋友可以参考下。

下面我们只需要通过修改CSS就能使其变得更加美观,这就显示出了内容与样式分离的极大优势了。
先看效果图:

image

以下代码分别用div+h1+h2和div+ul+li的方法实现相同的样式。经测试在FireFox中完全一样,但在IE6.0中稍有不同。

XML/HTML代码
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
  5. <title>纵向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
  6. <style type = “text/css”>
  7. <!–
  8. #category{background-color:#C1433E;    width:120px;border:1px #C8504D solid ;float:left;margin-right:2px;}
  9. #category h1,#category h2{margin:0px;padding:1px 4px;font-size:12px;font-weight:bold;}
  10. #category h1{color:#FFA251;font-size:13px;font-weight:normal; }
  11. #category h2{padding-left:10px;}
  12. #category a{display:block;width:100px;height:22px;background-color:#C8504D;text-align:center;line-height:22px;color:#FFE9A3;text-decoration:none;}
  13. #category a:hover{background-color:#C1433E;color:#FFE9A3;text-decoration:underline;}
  14. #category2{list-style:none;margin:0px;padding:0px;background-color:#c1433e;width:116px;border:1px #C8504D solid ;float:left;}
  15. #category2 li{font-size:13px;color:#ffa251;padding-left:3px;}
  16. #category2 li ul{list-style:none;margin:0px;padding-left:7px;font-weight:bold;padding:0px;}
  17. #category2 li ul li a{display:block;width:100px;height:22px;background-color:#c8504d;text-align:center;line-height:22px;color:#ffe9a3;text-decoration:none;margin:2px 3px;font-size:12px;}
  18. #category2 li ul li a:hover{background-color:#C1433E;color:#FFE9A3;text-decoration:underline;}
  19. >
  20. </style>
  21. </head>
  22. <body>
  23. <div id =“category”>
  24. <h1>设计</h1>
  25. <h2><a href=“#”>平面设计</a></h2>
  26. <h2><a href=“#”>网页设计</a></h2>
  27. <h2><a href=“#”>动画设计</a></h2>
  28. <h1>程序</h1>
  29. <h2><a href=“#”>asp程序</a></h2>
  30. <h2><a href=“#”>php程序</a></h2>
  31. <h2><a href=“#”>jsp程序</a></h2>
  32. <h1>维护</h1>
  33. <h2><a href=“#”>网站编辑</a></h2>
  34. <h2><a href=“#”>网站推广</a></h2>
  35. <h2><a href=“#”>网站优化</a></h2>
  36. </div>
  37. <ul id =“category2”>
  38. <li>设计
  39. <ul>
  40. <li><a href=“#”>平面设计</a></li>
  41. <li><a href=“#”>网页设计</a></li>
  42. <li><a href=“#”>动画设计</a></li>
  43. </ul>
  44. </li>
  45. <li>程序
  46. <ul>
  47. <li><a href=“#”>asp程序</a></li>
  48. <li><a href=“#”>php程序</a></li>
  49. <li><a href=“#”>jsp程序</a></li>
  50. </ul>
  51. </li>
  52. <li>维护
  53. <ul>
  54. <li><a href=“#”>网站编辑</a></li>
  55. <li><a href=“#”>网站推广</a></li>
  56. <li><a href=“#”>网站优化</a></li>
  57. </ul>
  58. </li>
  59. </ul>
  60. </body>
  61. </html>

提示:第二种方法使用了ul的嵌套,默认的样式左边会留很大的间距,这时我们使用margin:0px;padding:0px;来清除边距,然后再细调。

原文地址:http://www.chaojibaby.com/blog/article.asp?id=116

本站原创文章,请勿复制转载
版权声明:除特别注明外,本站所有文章均为原创,未经许可请勿复制、转载
2007-11-14
2,969 views
标签: , ,
暂无评论

发表评论

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。