小米商城导航栏

最新推荐文章于 2024-08-12 16:19:20 发布

asnone0

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量962

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_53912756/article/details/124983559

版权

小米商城导航栏

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- 引入重制样式表 -->
<link rel="stylesheet" type="text/css" href="css/html重制样式表.css">
<!-- 引入图标字体库 -->
<!-- 引入公共样式 -->
<link rel="stylesheet" type="text/css" href="css/公共样式.css">
<!-- 引入当前页面的样式 -->
<link rel="stylesheet" href="css/idex.css">
</head>
<body>
	<!-- 创建顶部导航条 -->
    <!-- 顶部导航条外部容器 -->
    <div class="topbar-wrapper">
    	<!-- 创建内部容器 -->
    	<div class="topbar w clearfix">

    		<ul class="service">
    			<li><a href="javascript">小米商城</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">MIUI</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">loT</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">云服务</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">金融</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">有品</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">小爱开放平台</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">企业团购</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">资质证照</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">协议规则</a></li>
    			<li class="line">|</li>
    			<li >
    				<a class="app" href="javascript">
    				下载app
    				<!-- 添加弹出层 -->
    				<div class="qrcode">
    					<img src="img/QQ图片20220509175410.jpg" alt="">
    					<span>小米商城app</span>
    				</div>
    			</a>
    		</li>
    			<li class="line">|</li>
    			<li><a href="javascript">SelectLoacation</a></li>
    		</ul>
    		<!-- 购物车 -->
    		<ul class="shop-cart">
    			<li><a href="javascript">
				<i class="fas fa-shopping-cart"></i>
    			购物车（0）
    		</a></li>
    		</ul>
    		<!-- 登录注册 -->
    		<ul class="user-info">
    			<li><a href="javascript">登录</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">注册</a></li>
    			<li class="line">|</li>
    			<li><a href="javascript">消息通过</a></li>
    			
    		</ul>
    	</div>
    </div>
</body>
</html>

css重制样式表

@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2022-05-08 12:14:32
 * @version $Id$
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

css公共样式表

@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2022-05-09 10:38:59
 * @version $Id$
 */
/* 公共样式 */
.clearfix::before,
.clearfix::after{
	content: '';
	display: table;
	clear: both;
}
/* 去除a的下划线 */
a{
	text-decoration: none;
	color: #333;
}
body{
	font: ;
	color: #333;
	min-width: 1226px;
}
/* 设置一个类，用来展示中间容器 */
.w{
	/* 设置容器宽度 */
	width: 1226px;
	/* 设置容器居中 */
	margin: 0 auto;
}

idex的css

@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2022-05-09 10:44:46
 * @version $Id$
 */
/* 主页的样式表 */
.topbar-wrapper{
	/* 设置全屏的宽度 */
	width: 100%;
	height: 40px;
/* 设置行高 */
	line-height: 40px;
	/* 设置背景颜色 */
	background-color: #333;
}
/* 设置超链接的颜色 */
.topbar a{
	font-size: 12px;
	color: #b0b0b0;
	display: block;
}
/* 设置超链接移入的效果 */
.topbar a:hover{
	color: #fff;
}
/* 设置分割线的样式 */
.topbar .line{
	font-size: 12px;
	color: #424242;
	margin: 0 8px;
	margin-top: -1px;
}
/* 设置左侧导航栏 */
.service,.topbar li{
	float: left;
}
/* 设置app下拉的三角 */
.app::after{
	display:none;
	content: '';
	/* 设置绝对定位 */
	position: absolute;
	width: 0;
	height: 0;
	display: block;
	/* 设置四个方向的边框 */
	border: 8px solid transparent;
	/* 去除上边框 */
	border-top: none;
	/* 单独设置下边框的颜色 */
	border-bottom-color:#fff ;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
} app{
	position: relative;
}
li >.app .qrcode{
	display: block;
}
.app:hover .qrcode,
.app:hover .app::after{
	display: block;
}
/* 设置下载app的下拉 */
li>.app .qrcode{
	display: none;
	position: absolute;
	left: 22px;
	width: 124px;
	height: 148px;
	margin-left: -62px;
	line-height: 1;
	text-align: center;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 3.0);

}
/* 设置二维码图片 */
.app .qrcode img{
	width: 90px;
	margin: 17px 17px;
	margin-bottom: 10px;
}
/* 设置二维码的字体 */
.app .qrcode span{
	font-size: 14px;
	color: #000;
}
/* 设置右侧导航栏 */
.shop-cart,.user-info{
	float: right;
}
.shop-cart{
	margin-left:26px; 
}
/* 设置购物车的样式 */
.shop-cart a{
	width: 120px;
	background-color: #424242;
	text-align: center;
}
.shop-cart i{
	margin-right: 2px;
}
.shop-cart:hover a{
	background-color:#fff ;
	color: #ff6700;
}

asnone0

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
小米商城导航栏

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" conte.
复制链接

扫一扫