0
点赞
收藏
分享

微信扫一扫

HTML+CSS 导航栏float实现

晗韩不普通 2022-04-30 阅读 91
htmlcsslinq

效果图

html代码

<html>
<head>
<meta charset="utf-8">
    <link rel="stylesheet" href="index.css" >
    <link rel="stylesheet" href="base.css">
<title> 小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD,小米电视官方网站</title>
</head>

<body>
    <div class="topbig">
    
    <div class="topcenter">
        
        <ul class="topleft" >
        <li><a href="">小米商城</a><span>|</span></li>
                        <li><a href="">MIUI</a><span>|</span></li>
                        <li><a href="">IoT</a><span>|</span></li>
                        <li><a href="">云服务</a><span>|</span></li>
                        <li><a href="">天星数科</a><span>|</span></li>
                        <li><a href="">有品</a><span>|</span></li>
                        <li><a href="">小爱开放平台</a><span>|</span></li>
                        <li><a href="">企业团购</a><span>|</span></li>
                        <li><a href="">资质证照</a><span>|</span></li>
                        <li><a href="">协议规则</a><span>|</span></li>
                        <li>
                            <a href="" class="app">下载app
                            <div class="qrcode">
                            
                            <img src="img/OIP-C.jpg">
                                <span>小米商城app</span>
                            </div>
                            
                            </a><span>|</span></li>
                        
                        <li><a href="">Select Location</a></li>
        </ul>
         
        <ul class="topright">
             <li class="gwc"><i class="iconfont">&#xf0179;</i><a href="">购物车(0)</a></li>
                        <li><a href="">消息通知</a></li>
                        <li><a href="">注册</a><span>|</span></li>
                        <li><a href="">登录</a><span>|</span></li>
             </ul>
        </div>
        </div>
</body>
</html>

CSS代码

@charset "utf-8";
/* CSS Document */
.topbig{
    width:  100%;
    background-color:#333333;
    height: 40px;
    
}
.topcenter{
    height: 40px;
    width: 1226px;
    margin: 0 auto;
}
ul li{
    list-style: none;
}
.topleft li{
    float: left;
    line-height: 40px;
}
.topleft a,.topright a{
    font-size: 12px;
    color: #b0b0b0;
    text-decoration: none;    
}
.topleft a:hover{
    color: #ffffff;
}
.topleft span,.topright span{
    font-size: 10px;
    color: #424242;
    margin-left: 7px;
    margin-right: 7px;
}
.topright li{
    float: right;
    line-height: 40px;
}
.gwc{
    width: 120px;
    height: 40px;
    background-color: #424242;
    text-align: center;
    margin-left: 30px;

}
.gwc a:hover{
    color: #ff6700;
}
.gwc i{
    color:#b0b0b0;
    font-size: 18px;
    margin-right: 5px;
}

效果图

 

举报

相关推荐

0 条评论