导航栏
易用的导航对于任何网站都很重要。
通过使用 CSS,您可以将无聊的 HTML 菜单转换为美观的导航栏。
水平导航栏
有两种创建水平导航栏的方法:使用行内或浮动列表项。
行内列表项
构建水平导航栏的一种方法是,除了上一章中的“标准”代码外,还要将 <li> 元素指定为 inline:
display: inline; -默认情况下,<li> 元素是块元素。在这里,我们删除每个列表项之前和之后的换行符,这样它们才能显示在一行。
浮动列表项
创建水平导航栏的另一种方法是浮动 <li> 元素,并为导航链接规定布局:
浮动列表项
创建水平导航栏的另一种方法是浮动 <li> 元素,并为导航链接规定布局:
- float: left; - 使用 float 使块元素滑动为彼此相邻
- display: block; - 将链接显示为块元素可以使整个链接区域都可单击(不仅是文本),而且允许我们指定填充(如果需要,还可以指定高度,宽度,边距等)
- padding: 8px; - 使块元素更美观
- background-color: #dddddd; - 为每个元素添加灰色背景色