web前端--网页练习-优快云博客

本文链接：https://blog.youkuaiyun.com/W111115_/article/details/143203513

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="../reset.css">
     <!-- 引入样式 -->
     <link rel="stylesheet" href="./index.css">

</head>
<body>
    <!-- 顶部导航条 -->
        <!--版心 -->
        <div class="container" clearfix>
            <!-- 左侧的小米logo -->
            <div class="logo leftfix">
               <img src="./image/mi.png" alt="logo">
            </div>
            <!-- 中间的导航条 -->
            <div class="topbar-nav">
                <ul class="list clearfix">
                    <li><a href="#">小米官网</a></li>
                    <li><a href="#">小米商城</a></li>
                    <li><a href="#">小米澎湃OS</a></li>
                    <li><a href="#">小米汽车</a></li>
                    <li><a href="#">小米影像</a></li>
                    <li><a href="#">云服务</a></li>
                    <li><a href="#">IoT</a></li>
                    <li><a href="#">有品</a></li>
                    <li><a href="#">小爱开放平台</a></li>
                    <li><a href="#">Location</a></li>
                </ul>
            </div>
            <!-- 右侧的登录区 -->
            <div class="topbar-login  ">
               <a href="#" class="login">登录</a> 
               <span class="ge">|</span>
               <a href="#" class="reset">注册</a>

        </div>
     
</body>
</html>

css代码：

/* 基础设置 */
.container{
    width: 1440px;
    height: 65px;
    margin: 0 auto;
    background-color:black;
    display: flex;
    position:relative
}
/* 顶部导航条stare */
   
.container.logo{
    width: 32px;
    height: 32px;
    position: absolute; 
}
.container .logo img {
    width: 32px;
    height: 32px;
    margin-left: 12px;
    margin-top:14px;
}
.topbar-nav{
    width: 938px;
    height: 65px;
    margin: 0 auto;
    
}
.topbar-nav .list{
    width: 938px;
    height: 65px;
    line-height: 65px;
}
.topbar-nav .list li a {
    float: left;
    font-family: MiSans, serif;
    font-weight: 600;
    line-height: 65px;
    font-size: 15px;
    color: #fff;
    margin: 0 20px; 

}
.topbar-nav .list li a:hover {
    color:#ff6900;
}
.topbar-nav .list li:first-child a {
    margin-left: 0px;
    color: #ff6900;
}
.topbar-nav .list li:last-child a {
    margin-right: 0px;
}

.topbar-login a:hover{
    color:#ff6900;
}
.topbar-login {
    height: 65 px;
    width: 100px;
    margin-right: 10px;
    
   
}
.topbar-login>a {
    color: #fff;
    position: relative;
    height: 65px;
    font-size: 16px;
    line-height: 65px;
    align-items: center;
    cursor: pointer;
    font-family: MiSans, serif;
    font-weight: 600;
    
}

.ge{
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin: 0px 10px;
}

/* 顶部导航条end */