[HTML/CSS应用]博客文档排字之创建水平导航栏
日期：2014-05-16 浏览次数：20613 次
[HTML/CSS应用]博客文档排版之创建水平导航栏
上一篇文章我们介绍了在源码编辑模式下，怎样给你的文章创建索引；这篇文章，我们再来说说怎样在源码编辑模式下，创建一个水平导航栏。
我们这里来为笔者之前所写的几篇《博客文档排版》相关的文章创建一个水平导航栏。首先，我们还是先看一下实际显示效果。
本文示例实际显示效果如下：
上述示例的完整代码如下：
[code]-[html]
<div> <ul style="list-style-type:none; overflow:hidden;"> <li style="float:left; border: 1px solid black;"> <a style="display:block; width:150px; background-color:#3399FF; color:white; text-align:center; padding:4px; text-decoration:none;" href="url" target="_bank"> 设置行距与段距</a> </li> <li style="float:left; border: 1px solid black;"> <a style="display:block; width:150px; background-color:#3399FF; color:white; text-align:center; padding:4px; text-decoration:none;" href="url" target="_bank"> 插入代码</a> </li> <li style="float:left; border: 1px solid black;"> <a style="display:block; width:150px; background-color:#3399FF; color:white; text-align:center; padding:4px; text-decoration:none;" href="url" target="_bank"> 插入个性化表格</a> </li> <li style="float:left; border: 1px solid black;"> <a style="display:block; width:150px; background-color:#3399FF; color:white; text-align:center; padding:4px; text-decoration:none;" href="url" target="_bank"> 创建索引</a> </li> </ul> </div>
注解：看过笔者上一篇文章的朋友可能会发现，创建水平导航栏与创建索引有些相似。的确，它们都使用了无序列表。这里的关键是，创建水平导航栏使用了 float:left ，它使得各列表项都向左浮动显示，表现出来的结果就呈现出水平样式。示例代码中的“url”需换成你的实际链接地址。
list-style-type: none; 删除列表项前面的圆点 float: left; 将块元素滑向彼此 display: block; 使整个链接区域可点击 text-decoration: none; 去掉链接下划线 border: 1px solid black; 设置边框 width: 150px; 设置宽度 background-color:#3399FF; 设置背景色 color:white; 设置文本颜色 text-align:center; 文本居中
-- End --
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
