html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
导航条制作
- </title>
- <style>
- body,div,p,ul,ol,dl,dt,dd,li,form,table,th,td,img,h1,h2,h3,h4,h5,h6{margin:
- 0; padding: 0;} body{background: #f5f5f5; color: #000; font-size: 12px;
- font-style: normal; font-family: 'Microsoft Yahei','微软雅黑' ,'Simsun' ,'宋体','Arial','sans-serif';
- } em,b,i{font-style: normal;} li{list-style: none;} img{border: none;}
- a{ text-decoration: none; color: #f50;} a:hover{ text-decoration: underline;
- color: #f50; } table{border-spacing:0; border-collapse: collapse; } .clearfix:before,
- .clearfix:after{ display: table; content: ''; } .clearfix:after{ clear:
- both; } .flt{float: left;} .frt{float:right;} /* 重置样式 */ .navbox{ width:
- 960px; height: 40px; margin: 20px auto; background: #08c; } .navbox>ul>li{
- float: left; width: 160px; height: 40px; line-height: 40px; text-align:
- center; font-size: 16px; } .navbox ul li a{ display: block; color: #fff;
- background: #08c; } .navbox ul li a:hover{ text-decoration: none; background:
- #00bfff; } .pic{ margin:0 auto; width: 600px; height: 400px; } /* 鼠标没有移入
"web 前端" 选项栏时二级菜单隐藏 */ .navbox ul li:hover .subnav{ display: block; }{$94
- } .subnav>li{ position: relative; } .threenav{
- position: absolute; top: 0; left: 160px; width: 160px; } .subnav, .threenav{
- display: none; } .subnav li:hover .threenav{ display: block; } .pic{ margin:0
- auto; }
- </style>
- </head>
- <body>
- <div class="navbox">
- <ul class="clearfix">
- <li>
- <a href="#">
首页
- </a>
- </li>
- <li>
- <a href="#">
资讯
- </a>
- </li>
- <li>
- <a href="#">
web 前端
- </a>
- <ul class="subnav">
- <li>
- <a href="#">
- HTML
- </a>
- </li>
- <li>
- <a href="#">
- CSS
- </a>
- <ul class="threenav">
- <li>
- <a href="#">
- css1
- </a>
- </li>
- <li>
- <a href="#">
- css2
- </a>
- </li>
- <li>
- <a href="#">
- css3
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
- JavaScript
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
前端新闻
- </a>
- </li>
- <li>
- <a href="#">
联系我们
- </a>
- </li>
- <li>
- <a href="#">
关于我们
- </a>
- </li>
- </ul>
- </div>
- <div class="pic">
- <img src="http://mmbiz.qpic.cn/mmbiz/x4cgx8p88eS5gGWJz1ibDDbE9PM2vHHdwgMZRqmiba3FbAhnqQT2jnxPIiaucpW9wGEOZa44Mt8TeSgiaYice4D9SaA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1">
- </div>
- </body>
- </html>
头部导航条布局
html 代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title> 头部导航条制作 </title>
- <link rel="stylesheet" type="text/css" href="css/master8.css">
- </head>
- <body>
- <div class="navbox">
- <ul class="clearfix">
- <li><a href="#"> 首页 </a></li>
- <li><a href="#"> 资讯 </a></li>
- <li><a href="#">web 前端 </a></li>
- <li><a href="#"> 前端新闻 </a></li>
- <li><a href="#"> 联系我们 </a></li>
- <li><a href="#"> 关于我们 </a></li>
- </ul>
- </div>
- </body>
- </html>
用无序列表制作头部导航条:
无序列表是上下布局排列的, 那我们需要思考的是让他左右布局的方式排列
左右排列的方式我们所用的是 float:left; 浮动的方法让 li 左右布局
CSS 样式:
- .navbox{
- width: 960px;
- height: 40px;
- margin: 20px auto;
- background: #08c;
- }
- .navbox>ul>li{
- float: left;
- width: 160px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- font-size: 16px;
- }
鼠标移入时实现颜色的变换
HTML 代码:
- <div class="navbox">
- <ul class="clearfix">
- <li><a href="#"> 首页 </a></li>
- <li><a href="#"> 资讯 </a></li>
- <li><a href="#">web 前端 </a></li>
- <li><a href="#"> 前端新闻 </a></li>
- <li><a href="#"> 联系我们 </a></li>
- <li><a href="#"> 关于我们 </a></li>
- </ul>
- </div>
思路:
鼠标移入时每个 <li> 显示为另一种颜色 background: #00bfff;
css 代码:
- .navbox ul li a{
- display: block;
- color: #fff;
- background: #08c;
- }
- .navbox ul li a:hover{
- text-decoration: none;
- background: #00bfff;
- }
下拉菜单实现
- html:
- <div class="navbox">
- <ul class="clearfix">
- <li><a href="#"> 首页 </a></li>
- <li><a href="#"> 资讯 </a></li>
- <li><a href="#">web 前端 </a>
- <ul class="subnav">
- <li><a href="#">HTML</a></li>
- <li><a href="#">CSS</a></li>
- <li><a href="#">JavaScript</a></li>
- </ul>
- </li>
- <li><a href="#"> 前端新闻 </a></li>
- <li><a href="#"> 联系我们 </a></li>
- <li><a href="#"> 关于我们 </a></li>
- </ul>
- </div>
思路:
在一级菜单 web 前端下实现二级菜单 <ul class="subnav">
- html
- css
- JavaScript
当鼠标移入菜单时 web 前端时显示二级菜单, 移出时隐藏;
CSS 代码实现:
- .subnav{
- display: none;
- }
/ 鼠标没有移入 "web 前端" 选项栏时二级菜单隐藏 /
- .navbox ul li:hover .subnav{
- display: block;
- }
/ 当鼠标移入 "web 前端" 选项栏时显示二级菜单 /
三级菜单实现
- <div class="navbox">
- <ul class="clearfix">
- <li><a href="#"> 首页 </a></li>
- <li><a href="#"> 资讯 </a></li>
- <li><a href="#">web 前端 </a>
- <ul class="subnav">
- <li><a href="#">HTML</a></li>
- <li><a href="#">CSS</a>
- <ul class="threenav">
- <li><a href="#">css1</a></li>
- <li><a href="#">css2</a></li>
- <li><a href="#">css3</a></li>
- </ul>
- </li>
- <li><a href="#">JavaScript</a></li>
- </ul>
- </li>
- <li><a href="#"> 前端新闻 </a></li>
- <li><a href="#"> 联系我们 </a></li>
- <li><a href="#"> 关于我们 </a></li>
- </ul>
- </div>
思路:
前面与二级菜单思路相似唯一不同的是三级菜单显示的位置.
我们看看 css 的绝对定位与相对定位这篇文章
CSS 代码:
- .subnav>li{
- position: relative;
- }
- .threenav{
- position: absolute;
- top: 0;
- left: 160px;
- width: 160px;
- }
- .subnav, .threenav{
- display: none;
- }
- .subnav li:hover .threenav{
- display: block;
- }
最后实现的效果如下图:
来源: http://www.qdfuns.com/article/29385/c26f3992a09418c4b0e65dd70223c488.html