前言
在制作导航栏之前我们先了解一下float
1.float用法
float是使元素向哪个方向浮动他的取值有left(向左浮动)、right(向右浮动)、none(不浮动)、inherit(继承父元素float属性的值)
既然知道了float的属性,我们不妨来试一下
<style>
.fa{
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid red;
}
.div{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
/*.div1{
width: 100px;
height: 100px;
background-color:green;
float: left;
}*/
</style>
<body>
<div class="fa">
<div class="div">
</div>
/*<div class="div1">
</div>*/
</div>
</body>
如图:
当我们使用float属性时我们的元素就会浮起来从而脱离文档流,进入浮动层,这时下面如果还有一个div就会上去补位,就会被红色方块覆盖。但是如果我们给下面那个div也设置float属性。
就会如上面图片所显示的一样们就会上一个div并齐,这如果在设置一个div给它float属性,不改变父元素宽度的话,这时这个新的div会被强制换行。
如果有三个div,只给第一个和第三个div设置float属性那就会形成红色在上一行,绿色在下一行,还有一个被红色覆盖,会有这种原因是因为float只会在本行浮动,没有设这float的div虽然会被覆盖,但是它也会独占一行,这时绿色的地只能在下面一行浮动
2.用float制作导航栏
如下:
<style>
.div{
width: 600px;
}
.div ul li{
float: left;
list-style: none;//设置li前面的项目符号,让它消失
margin-left: 20px;
//border:1px solid red;这里可以给每个li一个边框
}
li:hover{
//hover伪类,当鼠标移入时产生的样式
background-color: red;
cursor: pointer;//鼠标移入时变成小手
}
</style>
<body>
<div class="div">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</div>
</body>
这样一个简单的导航栏就做好了