HTML界面设计
新建一个web项目，在<body></body>标签中创建一个<div></div>，指定class属性=“header”。在<div></div>中创建一个无序列表<ul></ul>，指定class属性=“header_ul”。在其中添加几个<li></li>作为导航栏的菜单并分别指定class属性
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>导航栏</title></head><body><div class="header"><ul class="header_ul"><li class="header_ul_home">HOME</li><li class="header_ul_pages">PAGES</li><li class="header_ul_portfollo">PORTFOLIO</li><li class="header_ul_blog">BLOG</li></ul></div></body></html>
然后为各个菜单添加子菜单
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>导航栏</title><link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><div class="header"><ul class="header_ul"><li class="header_ul_home">HOME<ul class="header_ul_ul"><li>HOME1</li><li>HOME2</li><li>HOME3</li></ul></li><li class="header_ul_pages">PAGES<ul class="header_ul_ul"><li>PAGES1</li><li>PAGES2</li><li>PAGES3</li></ul></li><li class="header_ul_portfollo">PORTFOLIO<ul class="header_ul_ul"><li>PORTFOLIO1</li><li>PORTFOLIO2</li><li>PORTFOLIO3</li></ul></li><li class="header_ul_blog">BLOG<ul class="header_ul_ul"><li>BLOG1</li><li>BLOG2</li><li>BLOG3</li></ul></li></ul></div></body></html>
将其在浏览器运行
可以看到，这和我们需要的导航栏的效果可不同，这就需要我们在css文件中改变它的样式
CSS样式设计
创建一个style.css文件
首先将body的边缘留白设置为0
body {margin: 0px;}
然后为div设计宽高
.header {width: 100%;height: 100px;}
接着为一级菜单设置浮动位置，并将列表标点取消
.header_ul {float: left;list-style: none;}
为<li></li>列表设置浮动及顶部左部留白
设置鼠标滑入变色
.header_ul li {margin-top: 26px;margin-left: 15px;float: left;}.header_ul li:hover {color: red;}
为子菜单设置各个属性，主要有宽度，内部位置，固定位置
.header_ul_ul {width: 100px;text-align: center;position: absolute;list-style: none;background: white;color: black;}.header_ul_ul li {margin: 10px 15px 10px -25px;float: none;}
将各个子菜单设置为隐藏
.header_ul_home .header_ul_ul {display: none;}.header_ul_pages .header_ul_ul {display: none;}.header_ul_portfollo .header_ul_ul {display: none;}.header_ul_blog .header_ul_ul {display: none;}
再将其设置为鼠标滑入显示
.header_ul_home:hover .header_ul_ul {display: block;}.header_ul_pages:hover .header_ul_ul {display: block;}.header_ul_portfollo:hover .header_ul_ul {display: block;}.header_ul_blog:hover .header_ul_ul {display: block;}
然后将css文件引入html文件中
<link rel="stylesheet" type="text/css" href="css/style.css" />
可以看到效果
这样就基本实现了导航栏的效果
完整的css代码如下
body {margin: 0px;}/*导航栏*/.header {width: 100%;height: 100px;background: #11333333;}/*一级菜单*/.header_ul {float: left;list-style: none;}.header_ul li {margin-top: 26px;margin-left: 15px;float: left;}.header_ul li:hover {color: red;}/*二级菜单*/.header_ul_ul {width: 100px;text-align: center;position: absolute;list-style: none;background: white;color: black;}.header_ul_ul li {margin: 10px 15px 10px -25px;float: none;}.header_ul_home .header_ul_ul {display: none;}.header_ul_pages .header_ul_ul {display: none;}.header_ul_portfollo .header_ul_ul {display: none;}.header_ul_blog .header_ul_ul {display: none;}.header_ul_home:hover .header_ul_ul {display: block;}.header_ul_pages:hover .header_ul_ul {display: block;}.header_ul_portfollo:hover .header_ul_ul {display: block;}.header_ul_blog:hover .header_ul_ul {display: block;}
