css如何制作横向导航
制作html页面,导航菜单是必不可少的,那如何制作横向导航菜单呢?
思路:创建<ul>标签,然后在<ul>标签里面创建<li>标签,最后设置<li>标签为浮动。
操作方法
- 01
新建html页面 打开html编辑软件,新建一个html页面。如图:
- 02
添加导航标签 在<body>标签里新建一个<ul></ul>标签,然后在<ul>标签里添加几个<li></li>标签。如图:
- 03
在<li>标签内添加文字。 在新建的<li>添加要显示的内容。如图:
- 04
创建样式标签 在<title>标签后新建一个<style type="text/css"></style>标签。
- 05
创建横向导航的样式 在<style>标签里添加一个样式类为:.nav li{},然后再.nav li类中设置样式背景颜色为红色,浮动为左浮动,内边框上下为8px左右为15px,列表属性为none,字体颜色为白色。 样式代码为: .nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; }
- 06
引用样式类。 在<ul>标签内添加 class="nav",就可以让nav下的<li>标签引用到设置好的样式类。如图:
- 07
查看效果。 把html文件保存后,使用浏览器打开即可看到横向导航菜单效果。如图:
- 08
所有代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横向导航菜单</title> <style type="text/css"> .nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; } </style> </head> <body> <ul class="nav"> <li>首页</li> <li>新闻</li> <li>公司产品</li> <li>关于我们</li> <li>公司介绍</li> </ul> </body> </html>