用CSS设计纵向导航菜单(div+h1+h2)
2008-07-12 16:28
288 查看
用CSS设计纵向导航菜单(div+h1+h2):在XHTML的语法意义中,h1,h2,h3,h4,h5,h6本身就具有对文本进行层级划分的意义。因此使用div+h1+h2来进行纵向布局是一种比较好的方式,注意使用margin:0px消除h1~h6的默认外边距。举例如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用CSS设计纵向导航菜单(div+h1+h2) </title> <style type="text/css"> #category{width:100px;border-color:#c5c6c4;border-style:solid;border-width:0px 1px 1px 1px;} #category h1,#category h2{margin:0px;padding:4px;font-size:12px;} #category h1{border-top:1px solid #c5c6c4;background-color:#f4f4f4;} #category h2{font-weight:normal;} /*h1,h2中都使用了margin:0px这是为了消除h1,h2元素默认的外边距。h1,h2在不加任何样式的情况下,拥有自己的默认样式。*/ </style> </head> <body> <div id="category"> <h1>CSS</h1> <h2>CSS入门</h2> <h2>CSS进阶</h2> <h2>CSS高级技巧</h2> <h1>WebUI</h1> <h2>理论知识</h2> <h2>实战应用</h2> <h2>高级技巧</h2> <h1>DOM</h1> <h2>DOM入门</h2> <h2>DOM应用</h2> <h2>DOM与浏览器</h2> <h1>XHTML</h1> <h2>XHTML参考手册</h2> <h2>XHTML实战训练</h2> </div> </body> </html>
相关文章推荐
- CSS设计网站导航菜单的优势
- 用css实现了一个精致的纵向导航菜单
- 十天学会Div+CSS第四天之【纵向导航与二级菜单】
- 用css实现了一个精致的纵向导航菜单
- 灵活XHTML和CSS网页设计2-导航菜单的设计
- CSS网页布局入门教程12:纵向导航菜单
- 用css实现了一个精致的纵向导航菜单
- css纵向商城分类导航菜单
- 用CSS设计横向标签式导航菜单
- CSS网页布局入门教程12:纵向导航菜单
- 用css实现了一个精致的纵向导航菜单
- CSS网站元素设计-纵向导航
- 用css实现了一个精致的纵向导航菜单
- 网页设计-[CSS+DIV设计实例:纯CSS制作下拉导航菜单]
- 十天学会web标准(DIV+CSS)系列(四)纵向导航菜单及二级弹出菜单
- 用css实现了一个精致的纵向导航菜单
- CSS导航菜单在网站设计中的优点分析
- CSS+DIV设计实例:纯CSS制作下拉导航菜单
- CSS网页布局纵向导航菜单
- 纯CSS3单页切换导航菜单界面设计的简单实现