小米商城-(导航栏,登录)页面

最新推荐文章于 2024-07-30 16:49:30 发布

程序员干Java

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量745

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_53354369/article/details/129483601

版权

导航栏

主要包括了小米商城的导航栏部分，可学习参考,

图片链接

小米logo
小米图标
 二维码
登录页面的图片可以到这个网络去寻找壁纸网站

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>小米商城</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/mi.css">
</head>

<body>
<!-- 导航栏 -->
<div class="nav-one">
     
	<div class="nav-two">

		<div class="nav-context">
			<a href="">小米商城<span>|</span></a>
            <a href="">MIUI<span>|</span></a>
            <a href="">云服务<span>|</span></a>
            <a href="">金融<span>|</span></a>
            <a href="">有品<span>|</span></a>
            <a href="">企业团购<span>|</span></a>
            <a href="">协议规则<span>|</span></a>
            <a class="nav-code" href="">下载APP<span>|</span>
				<div class="nav-none">
					<div>
					<img src="img/qrcode.png" width="90" height="90">
					<p>小米商城 APP</p>
					</div>
				</div>
            </a>
            <a href="">小爱开放平台</a>
		</div>

		<div class="nav-cart">
			 <a href="">购物车<span>(0)</span></a>
			 <div class="none-cart">
				<p>(购物车空空如也)</p>
			 </div>
		</div>
		
		<div class="nav-login">
			<a href="login.html" target="_blank">登录<span>|</span></a>
		    <a href="">注册<span>|</span></a>
		    <a href="">消息通知<span>|</span></a>
		</div>
	</div>

<!-- 选项栏 -->
<div class="menu-one">
	<div class="menu-two">
		<div class="menu-logo"></div>
		<div class="menu-none"></div>
		<div class="menu-centext">
			<a href="">Xiaomi手机</a>
			<a href="">Redmi手机</a>
			<a href="">电视</a>
			<a href="">笔记本</a>
			<a href="">平板</a>
			<a href="">家电</a>
			<a href="">路由器</a>
			<a href="">服务中心</a>
			<a href="">社区</a>
		</div>

		<div class="menu-input">
			<input class="menu-text" type="text" placeholder="请输入商品">
			<input class="menu-submit" type="submit" value="🔍">
		</div>
	</div>
</div>			 
</div>

</body>
</html>

导航栏css样式

/*公共样式*/
*{
	padding: 0;
	margin:0;
	text-decoration: none;
	list-style-type: none;
}

.nav-one{
	width: 100%;
	background-color:#333;/*深灰色*/
	height: 40px; 	
}

/*设置居中*/
.nav-two{
	width: 1266px;
	height: 40px;
	line-height: 40px;
	background-color:transparent;
	margin:0 auto;
}

/*防止高度塌陷*/
.nav-two:before .nav-two:after{
	content: '';
	display: table;
}
.nav-two:after{
	clear: both;
}

/*设置主要内容*/
.nav-context{
	height: 40px;
	float: left;
}

/*设置a链接*/
.nav-context>a,.nav-cart>a,.nav-login>a{
color:#b0b0b0;/*灰白色*/
font-size:10px;
}

/*a链接变色*/
.nav-context>a:hover{
	color: #fff;/*白色*/
}
.nav-login>a:hover{
	color: #fff;
}
.nav-cart>a:hover{
	color: #fff;
}

/*登录购物车向右浮动*/
.nav-cart,.nav-login{
	float:right;
}

/*设置span标签属性*/
.nav-context span,.nav-login span,.nav-cart span{
	color:#424242;
	font-size: 12px; /*设置 | 大小*/
	font-family:sans-serif;  /*无衬衫字体*/
	margin:0.5rem; /*根据fontsize来判断自己大小 1rem相当于6px 0.5rem相当于3px*/
}
.nav-cart a{
	text-align: center;
	display: block;
	width: 120px;
	height: 40px;
	background-color:#424242;/*灰色*/ 
}
.nav-cart a:hover{
	background-color: #ffffff;/*白色*/
    color: #ff6700;/*橙色*/
}
.nav-cart a:hover>span{
    color: #ff6700;
}
.nav-code{
	position:relative;
}
.nav-none{
	position:absolute;
	left: -38px;
    width: 125px;
    height: 0;
    overflow: hidden;/*隐藏属性*/
    box-shadow: 0px 0px 10px rgba(0,0,0,4);
    text-align: center;
    z-index: 100;
    background-color:#fff;
}
.nav-code:hover>.nav-none{
	height: 148px;
	transition: 1s;/*延时*/
}
.nav-none div{
	margin-top: 15px;
}
.nav-none p{
	font-size: 14px;
	color: black;
}
.nav-cart{
	position:relative;
}
.none-cart{
	position:absolute;
	left:-195px;
	width:316px;
	height:0px;
	overflow:hidden;
	background-color:#fff; 
	z-index:100;
	box-shadow: 0px 0px 10px rgba(0,0,0);
	text-align: center;
	line-height: 80px;
}
.nav-cart:hover>.none-cart{
	height:80px;
	transition: 1s;
}



.menu-one{
	width: 100%;
	height:100px;
}
.menu-two{
	width: 1267px;
	height: 100px;
	margin:0 auto; 
	line-height:100px;
	position: relative;/*父类使用决定定位 使无法最右的元素到最有*/
}
.menu-logo{
	width:62px;
	height:62px;
	background-color:red;
	margin-top:22px; 
	float: left;
	background: url(../img/logo.png) no-repeat center center;
    background-size: 62px 62px;	
}
.menu-none{
	width:142px;
	height:88px;
	margin-right:15px;
	float: left;
}
.menu-centext{
	height:100px;
	float:left;
}
.menu-input{
	width:296px;
	height:50px;
	margin-top: 22px;
	background-color:green;	
	position: absolute;right: 0;/*子类使用相对定位配合right到最右*/
}
.menu-centext a{
	color: black;
	padding-right:10px; 
}
.menu-centext a:hover{
	color: #ff6700;
}
.menu-input>.menu-text{
	width:242px;
	height: 46px;
	float: left;
	outline: none;
}
.menu-input>.menu-submit{
	width: 50px;
	height: 50px;
	float: left;
}

效果图

在这里插入图片描述

登录页面

<!DOCTYPE html>
<html>
<head>
	<title>登录页面</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>

<div class="login">

	<h1>登录页面</h1>

	<div class="login-from">
		<span>账号:</span>
		<input type="text" placeholder="请输入账号">
		<br>
		<span>密码:</span>
		<input type="password" placeholder="请输入账号">
	</div>

	<div class="login-but">
		<button>登录</button>
	</div>
	
</div>

</body>
</html>

登录页面css样式

body{
	background:url(../img/1.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	background-color: #fff;
	overflow-y:hidden;
}
.login{
	width: 900px;
	height: 500px;
	text-align: center;
	border-radius: 25px;
	background-color:rgba(87,86,86,0.2);
	box-shadow:5px 2px 35px -7px #ff9a9e;
	position: absolute;
	left: 0;top: 0;right: 0;bottom: 0;
	margin:auto; 
}
.login h1{
	margin-top:100px;
	font-weight: 400; 
}
.login-from input{
	width: 200px;
	height: 40px;
	border: none;/*取消边框*/
	margin-bottom: 5px;
	background: transparent;/*使文本框透明*/
	outline: none;/*取消了点击之后的边框*/
	border-bottom: 1px solid black;/*设置下边框*/
}
.login-but button{
	width: 90px;
	height: 40px;
	border-radius: 25px;
	background-color:rgba(87,86,86,0.2);
	margin-top:10px; 
}