|
前端小白的崛起：2、导航条实战 |
|
阿易的猫
L1
• 2021-07-31 • 回复 2 • 只看楼主
• 举报
|
今天我们来实现一下导航条的效果，话不多说上代码
<style>
/* 内外边距 */
* {
margin: 0px;
padding: 0px;
}
/* 去除列表项 */
ul {
list-style: none;
}
/* 定义相位父级 */
header {
position: relative;
}
/* 图片剩余区域补充背景 */
/* 设置宽高 */
div.banner {
width: 100%;
height: 150px;
background: url(./img/banner_bg.jpg);
background-attachment: fixed;
}
/* 相对定位子级 */
/* 将导航栏定位到banner下面 */
/* 设置宽高 */
nav {
width: 100%;
height: 32px;
background: url(./img/button1_bg.jpg);
position: absolute;
top: 150px;
}
/* 设置左浮动，宽高，文字样式 */
nav ul li {
float: left;
width: 80px;
text-align: center;
color: rgb(141, 199, 7);
line-height: 32px;
font-size: 12px;
font-weight: 600;
background: url(./img/button1.jpg);
}
/* 鼠标移动上色，变成手的模样 */
nav ul li:hover {
background: url(./img/button2.jpg);
color: #fff;
cursor: pointer;
}
</style>HTML代码如下
<body>
<header>
<div class="banner">
<img src="./img/banner1.jpg">
</div>
<div class="daohang">
<nav>
<ul>
<li>首页导航</li>
<li>首页导航</li>
<li>首页导航</li>
<li>首页导航</li>
<li>首页导航</li>
<li>首页导航</li>
</ul>
</nav>
</div>
</header>
</body>
这里利用父相子绝的定位模式实现简单的导航条效果，其中可以看到加了一个属性叫cursor的，这个属性的作用是鼠标移上去显示鼠标箭头为小手的模样，大家可以简单实现一下，后期会多发一些关于知识点的专题，多谢大家支持，一起学习一起进步
