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

html-css012

如何使用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页面。

2、在html页面上新建三个div标签,分别为这三个div添加class为:header、main、footer。

3、创建style标签用于设置css样式。在title标签下创建一个style标签,然后为header类设置div的高、背景颜色样式。

4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。

5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。

6、保存好html文件后使用浏览器查看效果。

7、在浏览器上看到div标签和浏览器存在一些空白的像素,为了去掉这些空白的像素我们需要把body标签设置外边框。