HTML+CSS仿小米官网首页 项目总结
一、项目介绍二、实现方法1、项目准备2、顶部黑色导航条结构3、购物车悬停效果4、绘制三角形5、白色导航清除浮动6、logo的悬停动画7、白色导航栏的下拉列表和搜索框8、轮播图动画9、伪元素选择器添加线条10、使用nth-child() 选择器设置样式11、鼠标悬停元素上移
三、实现成果四、总结及项目地址
一、项目介绍
本项目采用html+css实现小米官网首页的静态页面，意在巩固所学到的css知识，对网页布局、元素定位、浏览器检查等技能进行实践。本博客记录了项目实现过程中的部分关键点。
二、实现方法
1、项目准备
在开始编写代码前，需要下载所需的图片及矢量图标。图片元素通过火狐浏览器进行下载；矢量图标元素在阿里巴巴矢量图标库找相似的进行下载。 准备好素材后，在项目文件夹中构建出基本的项目结构，便于素材和代码的管理。
2、顶部黑色导航条结构
顶部导航条的html结构大致如下：
//顶部导航条
//左边列表
//右边列表
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标签结构：
//鼠标悬停时出现的内容框
鼠标放置在购物车上，购物车的背景色和文字颜色发生改变，鼠标变成小手的形状：
.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结构如下：
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个装有图片和文字的盒子组成，同样可以抽象为无序列表的结构：
/* 图片*/
/* 文字 */
然后采用子代选择器对其的出现和消失进行控制：
.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构成
在输入框的样式中使用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动画等关键点，方便前端初学者锻炼自己网页布局的能力。 项目地址：小米官网静态页面仿写
推荐链接
您阅读本篇文章共花了：
发表评论