Html——小米商城网页实战（一）

适合新手的小米商城的纯html网页项目

小米官网：https://www.mi.com/?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——小米商城网页实战（一）相关推荐

HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)
HTML期末大作业~基于HTML+CSS+JavaScript仿小米商城(功能齐全) 关于HTML期末网页制作,大作业A+水平 ~仿小米商城网页作业HTML+CSS+JavaScript实现,共有登录 ...
HTML期末大作业仿小米商城网页设计与制作(HTML+CSS+JavaScript) JavaScript期末大作业 web前端期末大作业 dw静态网页
HTML期末大作业~基于HTML+CSS+JavaScript仿小米商城(功能齐全) 关于HTML期末网页制作,大作业A+水平 ~仿小米商城网页作业HTML+CSS+JavaScript实现,共有登录 ...
前端实现小米商城网页2（竖排导航、搜索框的实现）
实现小米商城网页头部导航栏和搜索框小知识点 1.给盒子设置层级,避免覆盖,但是盒子内有设置过overflow:hidden的时候,层级会不起效果 2.注意设置relative的父元素,找到合适且不会 ...
8.8 Web前端-小米商城项目实战
hello大家好,人总是会在写项目的时候发现自己的许多不足之处,然后加以改进,并且记住这些东西,所以今天我给大家带来的是我的第二个项目,小米商城首页的书写.我觉得这个项目相比于我第一个淘宝的项目的难度 ...
仿小米商城网页设计（10页）
最近学习了一下前端,有一说一还是前端有意思,写了一个商城网页只用到了css和js,之前写网页课程设计时候咋没这技术,不然我绝对是最亮的仔演示图首页代码直接粘贴就可以使用了,html,css,js ...
8.12 Web前端-小米商城项目实战
hello,各位朋友们大家好,今天我来继续把小米商城的部分说完,最后剩余的部分就是主体和尾部了,这两部分内容相对于前面来说难度较小,只有几个点需要注意一下即可. 1.主体部分: 首先我来说说主体部分, ...
小米商城网页版（js+css）
js: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...
css、HTML制作小米商城网页（二）
一.快速导航搜索区 input:(输入) button(按钮) :focus(选取获得焦点) float:(浮动)display: block;(显示块元素)display: none;(隐藏块元素) ...
小米商城网页制作大全之搜索引擎(input,Font Awesome)
导读: 原来的自己大多时候是通过视频和书本资料自学,很少有动手实践,也就会有眼高手低的毛病,每次做一个小功能来练手的时候都会遇到各式各样的问题,也正是在想方设法解决这些问题的过程中收获是最大的,不仅是 ...
Web课程设计——小米商城页面实战（html，css，js实现）
主要完成了三个页面,效果如下: 主页面html部分源码: <!DOCTYPE html> <html lang="zh-cn"><head> ...

Html——小米商城网页实战（一）

适合新手的小米商城的纯html网页项目

小米官网：https://www.mi.com/?masid=2701.0103

Html——小米商城网页实战（一）相关推荐

最新文章

热门文章