小米官网的导航栏

最新推荐文章于 2023-07-15 00:20:55 发布

I Believe in

最新推荐文章于 2023-07-15 00:20:55 发布

阅读量3.3k

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/lsy01/article/details/104463545

版权

小米官网的导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米商城</title>
	<link rel="icon" href="https://s01.mifile.cn/favicon.ico">
	<style>
		.head{
			width: 100%;
			height: 40px;
			background-color: #333333;
		}
		.head_main{
			width: 1226px;
			height: 40px;
			margin: 0 auto;
		}
		.head_wenzi{
			color: #b0b0b0;
			font-size: 12px;
			float: left;
			line-height:40px;
		}
		a{
            text-decoration:none;
		    position: relative;
		    margin-left: 10px;
		    margin-right: 10px;
		    color:#b0b0b0; 
		    font-size: 12px;
		    float: left; 
		    line-height:40px;}
		a:link{
            color:#A9A9A9;
        }
		a:visited{
            color:#A9A9A9
        }
		a:hover{
            color:#FFFFFF
        }
		.sep{
			color:#696969;
			font-size: 12px;
			float: left;
			line-height:40px;
		}
		.head_left{
			float: left;
		}
		.head_right{
			float: right;
		}
		.head_car{
			width: 120px;
			height: 40px;
			background-color: #454545;
			float: left;
			margin-left: 25px;
			text-align: center;
		}
		.head_car1{
			font-family: 'iconfont';
			color: #b0b0b0;
			line-height: 40px;
		}
		.head_car2{
			font-size: 12px;
			color: #b0b0b0;
		}
        .head_right .head_car2:hover{
            color: orange;
            background-color:floralwhite;
        }
	</style>
</head>
<body>
	<div class="head">
		<div class="head_main">
			<div class="head_left">
			<a rel="nofollow" href="//www.mi.com/index.html">小米商城</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="https://www.miui.com/" target="_blank">MIUI</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="https://iot.mi.com/index.html">IoT</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="https://i.mi.com/" target="_blank">云服务</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="https://jr.mi.com?from=micom" target="_blank">金融</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="https://youpin.mi.com/" target="_blank">有品</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="https://xiaoai.mi.com/" target="_blank">小爱开放平台</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="https://qiye.mi.com/" target="_blank">企业团购</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="https://www.mi.com/aptitude/list/?id=41" target="_blank">资质证照</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="https://www.mi.com/aptitude/list/" target="_blank">协议规则</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="//www.mi.com/appdownload/" target="_blank" id="J_downloadapp">下载app</a>
			<span class="sep">|</span>
			<a rel="nofollow" href="#J_modal-globalSites" data-toggle="modal"  >Select Region</a>
			</div>
			<div class="head_right">
				<a  rel="nofollow" class="link" href="//order.mi.com/site/login" data-agreement="true"  data-login="true">登录</a>
				<span class="sep">|</span>
				<a  rel="nofollow" class="link" href="https://account.xiaomi.com/pass/register" data-agreement="true" data-register="true">注册</a>  
                <span class="sep">|</span>
                <a href="" class="head_wenzi">消息通知</a>
				<span class="head_car1"><img src="image/gwc.png" style="width: 14px; height: 14px;"></span>
                <a href="#" class="head_car2">购物车(0)</a>
			</div>
		</div>	
    </div>
</body>
</html>

I Believe in

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
小米官网的导航栏

小米官网的导航栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="icon" href="https://s01.mifile.cn/favicon.ico"> &lt...
复制链接

扫一扫