前言

在制作导航栏之前我们先了解一下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>

在这里插入图片描述

这样一个简单的导航栏就做好了

float(实现导航栏)

前言

1.float用法

2.用float制作导航栏

猜你喜欢