HTML+CSS仿小米官网首页项目总结

一、项目介绍
二、实现方法
- 1、项目准备
- 2、顶部黑色导航条结构
- 3、购物车悬停效果
- 4、绘制三角形
- 5、白色导航清除浮动
- 6、logo的悬停动画
- 7、白色导航栏的下拉列表和搜索框
- 8、轮播图动画
- 9、伪元素选择器添加线条
- 10、使用nth-child() 选择器设置样式
- 11、鼠标悬停元素上移
三、实现成果
四、总结及项目地址

一、项目介绍

本项目采用html+css实现小米官网首页的静态页面，意在巩固所学到的css知识，对网页布局、元素定位、浏览器检查等技能进行实践。本博客记录了项目实现过程中的部分关键点。

二、实现方法

1、项目准备

在开始编写代码前，需要下载所需的图片及矢量图标。图片元素通过火狐浏览器进行下载；矢量图标元素在阿里巴巴矢量图标库找相似的进行下载。
准备好素材后，在项目文件夹中构建出基本的项目结构，便于素材和代码的管理。

2、顶部黑色导航条结构

顶部导航条的html结构大致如下：

//顶部导航条
<div class="black-nav"><div class="wrap">//左边列表<ul class="nav-left"><li><a href="#">小米商城</a><span>|</span></li>...</ul>//右边列表<ul class="nav-right"><li><a href="#">登录</a><span>|</span></li>...</ul></div>
</div>

black-nav里的内容垂直居中，通过控制高度和行高相等进行控制：

.black-nav{width: 100%;/* 单行内容垂直居中 */height: 40px;line-height: 40px;background-color: #333;
}

导航条的核心部分是水平居中的wrap：

.wrap{width: 1226px;/* 水平居中 */margin: 0 auto;
}

wrap的内部的nav-left和nav-right分别左浮动和右浮动。

3、购物车悬停效果

购物车的li标签结构：

<li class="cart"><a href="#"><i class="iconfont">&#xe607</i>购物车(0)</a>//鼠标悬停时出现的内容框<div class="cart-list">购物车中还没有商品，赶紧选购吧！</div>
</li>

鼠标放置在购物车上，购物车的背景色和文字颜色发生改变，鼠标变成小手的形状：

.cart{width: 120px;height: 40px;background-color: #424242;margin-left: 25px;/* 设置光标 */cursor: pointer;/* 开启相对定位，便于悬停框进行定位 */position: relative;
}
.cart:hover{/* 背景颜色改变 */background-color: #fff;
}
.cart:hover>a{/* 文字颜色改变 */color: #ff6700;
}

悬停框的样式包含背景颜色、盒阴影等；其通过绝对定位放置于其父元素的右下方；开始时高度设置为0且溢出隐藏以实现隐藏的效果；使用transition控制其过渡式地出现（不可与display搭配使用）：

.cart-list{width: 316px;/* 高度设置为0 */height: 0px;background-color: #fff;box-shadow: 0 2px 10px rgba(0, 0, 0, .15);/* 绝对定位 */position: absolute;top: 40px;right: 0;/* 缓慢出现 */transition: all .3s;font-size: 12px;/* 隐藏购物车内的一行字 */overflow: hidden;
}

当鼠标悬停在其上面时，其高度改变，文字垂直居中显示出来：

.cart:hover>.cart-list{height: 100px;line-height: 100px;
}

4、绘制三角形

左边的“下载app”部分的悬停效果与购物车的悬停类似，都是通过绝对定位和高度改变来实现，唯一不同的是涉及到了三角形的绘制。
css绘制三角形是通过border来实现的，关键是将区域的高度和宽度设置为0，设置左右的border为透明；其水平居中通过left和margin控制实现；其出现和隐藏是通过display来实现的，因为它不需要用到transition效果：

.triangle{width: 0;height: 0;/* 绘制尖角朝上的三角形 */border-bottom: 8px solid #fff;border-left: 8px solid transparent;border-right: 8px solid transparent;position: absolute;bottom: 0;/* 水平居中 */left: 50%;margin-left: -8px;display: none;
}
.nav-left li:hover>.triangle{display: block;
}

5、白色导航清除浮动

白色导航栏由三部分组成，每部分都向左进行浮动。此时上面的元素的浮动破坏了文档流的结构，对白色导航栏里的浮动元素造成影响，于是要对白色导航栏清除浮动：

.white-nav{width: 100%;height: 100px;background-color: #fff;/* 清除浮动 */clear: both;position: relative;
}

设置了clear:both的当前元素会把前边元素中设有浮动属性的元素，当做没设浮动一样来看待，以此来消除其对自己的影响。

6、logo的悬停动画

当鼠标悬停在logo上时，logo向右滑出，首页的图标由左向右滑入。此部分的html结构如下：

<div class="logo"><div class="logo-box"><a href="#"><img src="data:images/logo-footer.png" alt="" class="logo-img"><img src="data:images/logo.png" alt="" class="home"></a></div>
</div>

home相对logo-box进行绝对定位，放置在其左边，当鼠标悬停时，其绝对定位的位置发生改变，并配合transition实现滑入的效果：

.home{position: absolute;top: 0;left: -55px;transition: all .2s;
}
.logo-box:hover .home{left: 0;
}

同理，logo-img向右滑出的效果也是通过绝对定位和transition搭配使用实现的：

.logo-img{position: absolute;top: 0;left: 0;transition: all .2s;
}
.logo-box:hover .logo-img{left: 55px;
}

7、白色导航栏的下拉列表和搜索框

白色导航栏中间部分的实现与上述黑色导航栏的实现采用相同的方法，都是无序列表的结构，这里不加赘述。
当鼠标悬停在白色导航栏中间的列表上时会弹出下拉列表，其同样采用绝对定位的方式显示在导航栏下方，它由6个装有图片和文字的盒子组成，同样可以抽象为无序列表的结构：

<li><a href="#"><div class="img-box">/* 图片*/<img src="data:images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""></div>/* 文字 */<p class="nav-name">小米10 Pro</p><p class="nav-price">4999元起</p></a>
</li>

然后采用子代选择器对其的出现和消失进行控制：

.nav-list{width:100%;height:229px;background-color: #fff;border-top:1px solid #e0e0e0;box-shadow: 0 3px 4px rgba(0,0,0,.18);position: absolute;left: 0;top: 100px;display: none;z-index: 300;
}
.nav-bar li:hover>.nav-list{display: block;
}

搜索框由form表单和button构成

<form action=""><input type="text"><button class="iconfont"></button><div class="hot-words"><a href="#">小米9 Pro 5G</a><a href="#">Redmi Note 8</a></div><div class="hot-list"></div>
</form>

在输入框的样式中使用box-sizing来限制它的大小，如果不设置该属性值为border-box，则有可能获得比设想中更大的盒子，从而破坏了页面的布局。

.search input{width: 244px;height: 50px;border: 1px solid #e0e0e0;padding: 0 10px;box-sizing: border-box;border-right: none;float: left;/* 去掉input和button的外边框 */outline: none;transition: all .2s;
}

8、轮播图动画

设置放置轮播图的盒子的大小、背景

.banner-box{width: 100%;height: 460px;background-image:      url('../images/a4aa0cbfad7de34618c4bebdbdeee4e1.jpg');background-size: 100%;animation:banner 25s linear infinite;
}

定义轮播图的动画

@keyframes banner{0%{background-image: url('../images/a4aa0cbfad7de34618c4bebdbdeee4e1.jpg');}25%{background-image: url('../images/d988b1a70b90330c6732c1943b3205fb.webp');}50%{background-image: url('../images/dcb09c80c58dc9d71623c925739a3733.webp');}75%{background-image: url('../images/6bd4174b8c5aad67a64864a5716ad152.webp');}100%{background-image: url('../images/755aca9487082e7698e16f17cfb70839.webp');}
}

当鼠标悬停时动画暂停

.banner-box:hover{animation-play-state: paused;
}

9、伪元素选择器添加线条

使用伪元素选择器为列表元素添加线条：

/* 横线 */
.row::before{width: 64px;height: 1px;bottom: 0;left: 6px;
}
/* 竖线 */
.col::after{width: 1px;height: 70px;right: 0;top: 6px;
}

对伪对象进行绝对定位，使用合并选择器设置其共同的样式：

.row::before,.col::after{content: "";background-color: #665e57;display: block;position: absolute;
}

10、使用nth-child() 选择器设置样式

此部分中各个分区顶部的颜色条要通过nth-child() 选择器来进行设置，这个选择器可以匹配父元素中指定序号的子元素：

.flash-box>div{border-top: 1px solid #e53935;
}
.flash-box>div:nth-child(1){background-color: #f1eded;
}
.flash-box>div:nth-child(2){border-top-color: #00c0a5;
}
.flash-box>div:nth-child(3){border-top-color: #ffac13;
}
.flash-box>div:nth-child(4){border-top-color: #83c44e;
}
.flash-box>div:nth-child(5){border-top-color: #2196f3;
}

11、鼠标悬停元素上移

通过transform操控元素的位移：

.items1:hover,.phone-box-left:hover,.items-last>div:hover,.video-box>div:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);transform: translateY(-2px);
}

三、实现成果

页面多个部分的实现效果如下：

四、总结及项目地址

总结：本项目综合了页面布局、多种html标签、css基本属性、css动画等关键点，方便前端初学者锻炼自己网页布局的能力。
项目地址：小米官网静态页面仿写

HTML+CSS仿小米官网首页项目总结相关推荐

仿Apple官网首页 HTML+CSS+JS
WEB前端开发实践仿Apple官网首页 HTML+CSS+JS 一.前言静态页面,没有后端数据,只是单一的HTML 自写的APPLE.小米源码,严禁盗用二.图片资源这里用了一些iconfont ...
前端学习之仿小米官网HTML+CSS
一个简单的仿小米官网 index.css /* 主页index.html样式表 */ .topbar-wrapper{width: 100%;background-color:#333;height: ...
【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局需要素材点击图片联系我或私信.评论效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
仿小米官网源码，2021年9月最新版
部分源码: <div class="header"><div class="page-top"><div class=" ...
电商项目：仿小米官网纯HTML+css布局
前言时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...

HTML+CSS仿小米官网首页项目总结

HTML+CSS仿小米官网首页项目总结

一、项目介绍

二、实现方法

1、项目准备

2、顶部黑色导航条结构

3、购物车悬停效果

4、绘制三角形

5、白色导航清除浮动

6、logo的悬停动画

7、白色导航栏的下拉列表和搜索框

8、轮播图动画

9、伪元素选择器添加线条

10、使用nth-child() 选择器设置样式

11、鼠标悬停元素上移

三、实现成果

四、总结及项目地址

HTML+CSS仿小米官网首页项目总结相关推荐

最新文章

热门文章

HTML+CSS仿小米官网首页 项目总结

HTML+CSS仿小米官网首页 项目总结

一、项目介绍

二、实现方法

1、项目准备

2、顶部黑色导航条结构

3、购物车悬停效果

4、绘制三角形

5、白色导航清除浮动

6、logo的悬停动画

7、白色导航栏的下拉列表和搜索框

8、轮播图动画

9、伪元素选择器添加线条

10、使用nth-child() 选择器设置样式

11、鼠标悬停元素上移

三、实现成果

四、总结及项目地址

HTML+CSS仿小米官网首页 项目总结相关推荐

最新文章

热门文章

HTML+CSS仿小米官网首页项目总结

HTML+CSS仿小米官网首页项目总结

HTML+CSS仿小米官网首页项目总结相关推荐