admin管理员组文章数量:1567522
导航栏
主要包括了小米商城的导航栏部分,可学习参考,
图片链接
小米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;
}
效果图
版权声明:本文标题:小米商城-(导航栏,登录)页面 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726414099a1069596.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论