[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 --

[HTML/CSS应用]博客文档排版之创建水平导航栏,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。