[HTML/CSS应用]博客文档排版之创建水平导航栏
浏览数：13 /
时间：2015年06月09日
上一篇文章我们介绍了在源码编辑模式下，怎样给你的文章创建索引；这篇文章，我们再来说说怎样在源码编辑模式下，创建一个水平导航栏。
我们这里来为笔者之前所写的几篇《博客文档排版》相关的文章创建一个水平导航栏。首先，我们还是先看一下实际显示效果。
本文示例实际显示效果如下：
上述示例的完整代码如下：
[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 --
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
