文章目录
- 一、导航栏
- 1.导航栏效果
- 2.导航分布
- 3.导航部分代码展示
- 1.html部分
- 2.css部分
- 3.二级菜单
- 总结
一、导航栏
1.导航栏效果
2.导航分布
这一部分分成了3个部分。
1.logo部分
2.文本框和搜索按钮部分
3.网页链接部分。
3.导航部分代码展示
1.html部分
<div class="header w"><div class="logo"><img src="image/img/logo.png" alt=""></div><div class="search"><input type="text" value="请输入搜索内容"><button>搜索</button></div><div class="nav"><ul><li><a href="1.html">首页</a></li><li><a href="2.html">风景篇</a><ul><li><a href="">藏区</a> </li><li><a href="">大海</a> </li><li><a href="">高山</a> </li><li><a href="">雪地</a> </li></ul></li><li><a href="3.html">美食篇</a><ul><li><a href="">川菜</a> </li><li><a href="">粤菜</a> </li><li><a href="">徽菜</a> </li><li><a href="">浙菜</a> </li></ul></li><li> <a href="4.html">人物篇</a><ul><li><a href="">球星</a> </li><li><a href="">歌星</a> </li><li><a href="">演员</a> </li><li><a href="">名人</a> </li></ul></li><li><a href="5.html">联系我们</a></li></ul></div></div>
2.css部分
* {padding: 0;margin: 0;
}body {height: 100%;background-color: #fff;/* height: 4300px; */
}li {list-style: none;
}a {text-decoration: none;
}.w {width: 1160px;margin: auto;/* background-color: pink; */
}.header {/* overflow: hidden; */height: 99px;position: sticky;top: 0;background-color: rgba(255, 255, 255, 0.3);/* margin: 15px auto; */
}.logo {float: left;height: 58px;margin-top: 13px;/* margin: 15px auto; */
}.header img {height: 58px;width: 115px;
}.search {float: left;height: 58px;width: 475px;margin-top: 28px;margin-left: 101px;
}.search input {height: 36px;width: 322px;
}.search button {height: 34px;width: 45px;border: 1px solid;
}.nav ul li {float: left;
}.nav ul li ul {position: absolute;display: none;
}.nav>ul li ul li {float: none;
}ul li:hover ul {display: block;
}.nav {float: left;font-size: 20px;position: relative;
}.nav>ul>li {margin: 30px 15px;
}.nav a {color: #000;
}.nav>ul>li>a:hover {color: #ff6347;
}.nav ul li ul li {margin-bottom: 10px;text-align: center;
}.nav ul li ul {background-color: #ff6347;width: 60px;
}.nav>ul>li>ul>li>a:hover {color: #eee;
}
3.二级菜单
导航栏的下拉菜单使用隐藏和鼠标放上去显示的方法来做的。
先用ul和li来写一级菜单,在到一级菜单中li里面写他的二级菜单ul和li。
display:none来隐藏二级菜单,用hover:block来实现鼠标放上显示二级菜单。
代码展示:
<style>.one {display: none;}ul li:hover .one {display: block;}</style>
</head><body><ul><li>一级菜单<ul class="one"><li>二级</li><li>二级</li><li>二级</li></ul></li></ul>
</body>
总结
以上部分就是项目导航的知识点,谢谢大家