admin管理员组文章数量:1566353
适合新手的小米商城的纯html网页项目
小米官网:https://www.mi/?masid=2701.0103
官网效果图如下:
本文针对于上手前端的新手小白,仅供参考。在看到小米官网之后,如何模拟出官网的效果是我们第一步要思考的问题,那么学过了网页布局之后,我们将整个网页分为以下的几个部分:最上面的标题栏、导航栏、内容区、四个分栏的展示区以及最下面的新品展示区。本文完成第一部分内容——标题栏。
可以很清晰的看出,最上面的标题栏分为左右两部分。
剖析:标题栏中存在的难点是下载app和购物车两个标题的hover效果。
下面的代码展示的是基础的分区以及第一部分的效果(可能某些元素的大小与官网不完全相同,只适合新手练手)。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title小米商城官网</title>
<link rel="stylesheet" href="./css/all.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/title.css">
<style>
.nav-bar {
height: 100px;
background-color: yellow;
}
.content {
position: relative;
}
.content-left {
float: left;
background-color: yellowgreen;
width: 234px;
height: 460px;
}
.content-right {
float: right;
width: 992px;
height: 460px;
background-color: #999;
}
.info {
height: 170px;
width: 1226px;
background-color: purple;
margin-top: 20px;
position: absolute;
top: 600px;
}
.bottom {
margin-top: 700px;
height:120px;
}
i {
margin-right: 3px;
font-size: 16px;
}
/* 将页面分成五个部分来完成,,先按照不同的分区将页面分开,完成页面布局,然后分层次完成其中的内容 */
</style>
</head>
<body>
<!-- 设置外部容器 -->
<div class="wrapper">
<!-- 1. 设置最上面的titile -->
<div class="title clearfix">
<ul class="title-left">
<li>
<a href="javascript:;">小米商城</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">MIUI</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">loT</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">云服务</a>
<line>|</line>
</li>
<li>
<a href="javascript:;"> 天星数科</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">有品</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">小爱开放平台</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">企业团购</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">资质证照</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">协议规则</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">下载app
<i class="fas fa-caret-up"></i>
</a>
<line>|</line>
<div class="QRcode">
<div class="QRcode-img">
<img src="./img/QR.jpg" alt="" width="85px" height="85px">
<span>小米商城APP</span>
</div>
</div>
</li>
<li>
<a href="javascript:;">智能生活</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">Select Location</a>
<line>|</line>
</li>
</ul>
<ul class="title-right">
<li>
<i class="fas fa-shopping-cart"></i>
购物车(0)
<div class="shop">
<div style="height: 30px; background-color: #fff;"></div>
购物车中还没有商品,赶紧选购吧!
</div>
</li>
<li>
<a href="javascript:;">消息通知</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">注册</a>
<line>|</line>
</li>
<li>
<a href="javascript:;">登录</a>
<line>|</line>
</li>
</ul>
</div>
<!-- 2. 设置导航条 -->
<div class="nav-bar">
</div>
<!-- 3. 设置内容区 ,其中内容区分为左右两个部分-->
<div class="content">
<div class="content-left">
</div>
<div class="content-right">
</div>
</div>
<!-- 4. 设置信息部分 -->
<div class="info">
</div>
<!-- 5.设置最下面的图片区域 -->
<div class="bottom">
<img src="./img/4.webp" alt="">
</div>
</div>
</body>
</html>
base.css
body {
width: 100%;
height:100%;
margin:0;
padding:0;
font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 1226px;
margin:0 auto;
background-color: red;
}
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear:both;
}
.title {
height: 40px;
background-color: #333;
font-size: 12px;
z-index: 2;
position: relative;
}
.title li {
list-style: none;
display: block;
top:13px
}
.title-left li:nth-child(1) {
margin-left: -35px;
}
line {
margin: 0 3.6px;
color: #424242;
margin-top: 2px;
}
.title-left li{
float: left;
/* margin-right: 10px; */
}
.title-right li{
float: right;
/* margin-right: 10px; */
}
.title-right li:nth-child(1) {
width: 120px;
position: relative;
line-height: 40px;
top:-12px;
height: 40px;
background-color:#404040;
text-align: center;
}
.title-right li:nth-child(1):hover {
background-color: #fff;
color: #ff6700;
}
.QRcode{
width: 124px;
height: 120px;
visibility: hidden;
display: block;
background-color: #fff;
box-shadow:0 0 1px rgb(173, 171, 171);
font-size: 14px;
color:#333;
position: absolute;
left: 517px;
top:30px;
text-align: center;
}
.title-left li:nth-child(11) i {
display: block;
position: absolute;
top: 30px;
left: 574px;
color: #fff;
visibility: hidden;
}
.title-left li:nth-child(11):hover i {
visibility: visible;
}
.title-left li:nth-child(11):hover .QRcode{
width: 124px;
height: 155px;
background-color: #fff;
visibility: visible;
text-align: center;
border: none;
position: absolute;
top: 40px;
}
.QRcode-img img{
position: relative;
top: 15px;
left: 20px;
display: block;
}
.QRcode-img span {
position: relative;
top: 25px;
color: #333;
}
.title-right li:nth-child(1) .shop{
visibility: hidden;
width: 320px;
background-color: #fff;
display: block;
height: 100px;
top: 40px;
right: 0px;
box-shadow:0 0 1px rgb(173, 171, 171);
font-size: 14px;
color:#fff;
}
.title-right li:nth-child(1):hover .shop{
visibility: visible;
width: 320px;
display: block;
background-color: #fff;
position: absolute;
height: 100px;
top: 40px;
right: 0px;
box-shadow:0 0 1px rgb(173, 171, 171);
font-size: 14px;
color: #b0b0b0;
font-size: 14px;
}
.title li {
color: #b0b0b0;
}
.title li a{
color: #b0b0b0;
}
.title li a:hover{
color: #fff;
}
实现的效果图:
版权声明:本文标题:Html——小米商城网页实战(一) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726414289a1069620.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论