如何使用css,布局横向导航栏

html-css09

如何使用css,布局横向导航栏,第1张

如果是导航菜单可以使用ul无需列表来制作

同时使用CSS中的float:left来控制li靠左浮动即可实现横向菜单

注意UL或UL的父级容器宽度必须大于所有li宽度的和

例如<style>ul {padding:0margin:0list-style:nonewidth:600pxheight:50pxline-height:50pxtext-align:center}ul li {width:100pxheight:50pxfloat:left}<style><ul><li>菜单项目1</li><li>菜单项目2</li><li>菜单项目3</li><li>菜单项目4</li><li>菜单项目5</li><li>菜单项目6</li><ul>

1、在html编辑器软件内,新建html页面,(一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver,这里我使用的软件是HBuilder)。

2、在<body></body>添加<div  class="nav"></div>,于<div  class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签,<li>内同时添加<a>标签,方便连接导航跳转。

3、在新建的<a></a>内,添加横向导航要显示的内容。

4、在<title></title>下方添加一个<style type="text/css"></style>。

5、源文件html保存后,使用浏览器打开预览效果。

首先要建立一个DIV,为其命名为“nav”,在DIV中建立一个<ul>无序列表,导航共有几个栏目,就为列表添加几个<li>的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面。

然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:

ul {width:宽度值;height:高度值; list-style:none;}

如果是横向导航,还需为里面的列表项<li>标签设置左浮动的样式,代码为:li {float:left}

每个栏目之间分隔的距离可通过margin(外边距)属性来设置。