小米官网首页效果
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=375,user-scalable=no, initial-scale=1.0">
<title>xiaomi</title>
<link rel="stylesheet" href="css/baes.css">
<link rel="stylesheet" href="css/xhk.css">
</head>
<body>
<!-- hender -->
<div class="header">
<div class="headerTop">
<div class="logo"></div>
<div class="search">
<div class="icon"></div>
<input type="text" placeholder="搜索商品">
</div>
<div class="user"></div>
</div>
<div class="headerNav">
<a href="">推荐</a>
<a href="">手机</a>
<a href="">电视</a>
<a href="">笔记本</a>
<a href="">智能</a>
<a href="">家电</a>
<input type="checkbox" name="choose" id="choose" hidden="hidden">
<label for="choose" name="choose" class="xhicon"></label>
<div class="xhk">
<div class="xhkMain">
<div class="xhkTop">
<span class="title">全部</span>
<!-- <input type="checkbox" name="choose" id="choose" hidden="hidden">
<label for="choose" name="choose" class="xhicon"></label> -->
</div>
<div class="xhkList">
<a href="">推荐</a>
<a href="">手机</a>
<a href="">电视</a>
<a href="">笔记本</a>
<a href="">智能</a>
<a href="">家电</a>
<a href="">生活周边</a>
</div>
</div>
</div>
</div>
</div>
<!-- 轮播图 -->
<div class="swiper"> </div>
<div class="iconList">
<a href="" class="iconItem"><img src="img/icon1.png" alt="" /></a>
<a href="" class="iconItem"><img src="img/icon2.webp" alt="" /></a>
<a href="" class="iconItem"><img src="img/icon3.gif" alt="" /></a>
<a href="" class="iconItem"><img src="img/icon4.webp" alt="" /></a>
<a href="" class="iconItem"><img src="img/icon5.webp" alt="" /></a>
<a href="" class="iconItem"><img src="img/icon6.png" alt="" /></a>
<a href="" class="iconItem"><img src="img/icon7.jpg" alt="" /></a>
<a href="" class="iconItem"><img src="img/icon8.png" alt="" /></a>
<a href="" class="iconItem"><img src="img/icon9.png" alt="" /></a>
<a href="" class="iconItem"><img src="img/icon10.png" alt="" /></a>
</div>
<!-- banner -->
<div class="banner">
<div class="lbanner"></div>
<div class="rbanner">
<div class="rtbanner"></div>
<div class="rbbanner"></div>
</div>
</div>
<!-- -->
<div class="swiper2"> </div>
<!-- 每日精选 -->
<!-- 第一个div jx为父级 jxad pdList 为子级 垂直结构 -->
<div class="jx">
<div class="jxad"></div>
<div class="pdList">
<!-- -->
<div class="pdItem">
<img src="img/jx1.jpg" alt="" />
<div class="title">Redmi Note 8 Pro</div>
<div class="brief">6400万全场景四摄</div>
<div class="price">1399</div>
<div class="buyBtn"> 立即购买</div>
</div>
<div class="pdItem">
<img src="img/jx2.jpg" alt="" />
<div class="title">Redmi Note 8 Pro</div>
<div class="brief">6400万全场景四摄</div>
<div class="price">1399</div>
<div class="buyBtn"> 立即购买</div>
</div>
<div class="pdItem">
<img src="img/jx3.jpg" alt="" />
<div class="title">Redmi Note 8 Pro</div>
<div class="brief">6400万全场景四摄</div>
<div class="price">1399</div>
<div class="buyBtn"> 立即购买</div>
</div>
<div class="pdItem">
<img src="img/jx4.webp" alt="" />
<div class="title">Redmi Note 8 Pro</div>
<div class="brief">6400万全场景四摄</div>
<div class="price">1399</div>
<div class="buyBtn"> 立即购买</div>
</div>
</div>
<!--底部
.footer>(.fIcon>(.img+span))*4
-->
<div class="footer">
<div class="fIcon">
<div class="img"></div><span>首页</span></div>
<div class="fIcon">
<div class="img"></div><span>分类</span></div>
<div class="fIcon">
<div class="img"></div><span>购物车</span></div>
<div class="fIcon">
<div class="img"></div><span>我的</span></div>
</div>
</body>
</html>
技术总结
flex 弹性布局的使用
flex-direction: column垂直布局 ;
flex-direction: row;水平布局
justify-content: //用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
flex-start | 默认值。项目位于容器的开头。 | |
flex-end | 项目位于容器的结尾。 | |
center | 项目位于容器的中心。 | |
space-between | 项目位于各行之间留有空白的容器内。 | |
space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | |
定位
position 的四个值:static、relative、absolute、fixed,sticky .
static: HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
relative: 相对定位元素的定位是相对其正常位置。
absolute: 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
sticky:
基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix
参考:https://www.runoob.com/css/css-positioning.html#position-sticky