6.4 浮动案例/* 取消标签默认样式 */ *{ margin: 0; padding: 0; list-style:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./4-header.css">
    <!-- 引入iconfont.css -->
    <link rel="stylesheet" href="./图标/font_55m5r8dzqns/iconfont.css">
    <style>
        /* 取消标签默认样式 */
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 居中元素  -->
        <div class="box">
            <!-- 头部导航 -->
            <div class="nav">
                <ul>
                    <li><a href="#">登录/注册</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">甄选家</a></li>
                    <li><a href="#">企业采购&nbsp;&nbsp;<i class="iconfont icon-xiala"></i></a></li>
                    <li><a href="#">客户服务</a></li>
                    <li><a href="#">APP</a></li>
                </ul>
            </div>
            <!-- logo搜索框 -->
            <div class="logo"></div>
            <!-- 超链接 -->
            <div class="link"></div>
        </div>
    </div>
</body>
</html>

header.css

/* 头部样式表 */
.header{
    height: 36px;
    background-color: #333;

}
/* 设置居中容器 */
.box{
    width: 1090px;
    height: 36px;
    /* 设置容器水平居中 */
    margin:0 auto;
}
/* 设置ul右浮动 */
.header>.box>.nav>ul{
    float: right;
}
/* 给ul父元素清除浮动 */
.header>.box>.nav::after{
    display: block;
    content: "";
    clear: both;
}
/* 让li标签在一行显示 */
.header>.box>.nav>ul>li{
    float: left;
    margin-right: 10px;
    /* 设置文字垂直居中 */
    line-height: 36px;
}
/* 给父元素ul清除浮动 */
.header>.box>.nav>ul::after{
    display: block;
    content: "";
    clear: both;
}
/* 设置a标签样式 */
.header>.box>.nav>ul>li>a{
    text-decoration: none;
    color: #ccc;
    border-right: 1px solid #ccc;
    padding-right: 10px;
}
.header>.box>.nav>ul>li>a:hover{
    color: #fff;
}