前言：开发软件采用HBuilderX，图片测量软件采用像素大厨。本项目主要实现“本家”的手机端界面。
实现效果如下：
index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!-- swiper6 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- 先引入插件，后引入自身文件 -->
<!-- 添加图标 -->
<link real="icon" href="">
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="header">
<div class="menu imgbox">
<img src="img/icon-10.png">
</div>
<div class="text">本家
</div>
<div class="menu imgbox">
<img src="img/icon-11.png">
</div>
</div>
<!-- 顶上的banner 轮播图 -->
<div class="topbanner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgbox">
<img src="img/banner-1.jpg">
</div>
</div>
<div class="swiper-slide">
<div class="imgbox">
<img src="img/banner-2.png">
</div>
</div>
<div class="swiper-slide">
<div class="imgbox">
<img src="img/banner-3.png">
</div>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<!-- <div class="imgbox">
<img src="img/banner-1.jpg">
</div> -->
</div>
<div class="breakline"></div>
<!-- 间隔线 -->
<!-- 顶部第二box -->
<div class="topbox1">
<div class="list">
<div class="itemcontext">
<div class="imgbox">
<img src="img/icon-1.png">
</div>
<div class="text">
新品/热销
</div>
</div>
<div class="itemcontext">
<div class="imgbox">
<img src="img/icon-2.png">
</div>
<div class="text">
超值拼团
</div>
</div>
<div class="itemcontext">
<div class="imgbox">
<img src="img/icon-3.png">
</div>
<div class="text">
新人福利
</div>
</div>
<div class="itemcontext">
<div class="imgbox">
<img src="img/icon-4.png">
</div>
<div class="text">
时尚动态
</div>
</div>
</div>
<div class="middlebanner">
<div class="imgbox">
<img src="img/banner-2.png">
</div>
</div>
</div>
<div class="breakline"></div>
<!-- 厂家直销 -->
<div class='cbrl'>
<div class="title">厂家直销 | CBRL
</div>
<div class="list">
<div class="item">
<div class="name breaktext">
痕印双肩包INCOMPLE
</div>
<div class="price">
2190 元起
</div>
<div class="imagebox">
<img src="img/img-7.png" />
</div>
</div>
<div class="item">
<div class="name breaktext">
红心绒棒球帽
</div>
<div class="price">
200 元起
</div>
<div class="imagebox">
<img src="img/img-9.png" />
</div>
</div>
<div class="item">
<div class="name breaktext">
无数字手表
</div>
<div class="price">
369 元起
</div>
<div class="imagebox">
<img src="img/img-8.png" />
</div>
</div>
<div class="item">
<div class="name breaktext">
素雅电绣小白鞋CM286
</div>
<div class="price">
369 元起
</div>
<div class="imagebox">
<img src="img/img-10.png" />
</div>
</div>
</div>
</div>
<div class="breakline"></div>
<!-- 新品首发 -->
<div class='new'>
<div class="title">新品首发 | NEWS
</div>
<div class="list">
<div class="item">
<div class="imagebox">
<img src="img/photo-1.png" />
</div>
<div class="name breaktext">
无声派对复古镜A
</div>
<div class="des breaktext">
选用优质金属 镜框双色点缀
</div>
<div class="price">
￥369
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/photo-2.png" />
</div>
<div class="name breaktext">
镜面不锈钢双耳连盖汤煲
</div>
<div class="des breaktext">
食品级304不锈钢复合底
</div>
<div class="price">
￥359
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/photo-3.png" />
</div>
<div class="name breaktext">
纳米水离子空气净化器
</div>
<div class="des breaktext">
选用优质金属 镜框双色点缀
</div>
<div class="price">
￥249
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/photo-4.png" />
</div>
<div class="name breaktext">
荞麦保健枕
</div>
<div class="des breaktext">
选用优质金属 镜框双色点缀
</div>
<div class="price">
￥39
</div>
</div>
</div>
</div>
<div class="breakline"></div>
<!-- 热卖 -->
<div class='sale'>
<div class="title">热卖 | SALE
</div>
<div class="list">
<div class="item">
<div class="imagebox">
<img src="img/img-2.png" />
</div>
<div class="name">
超轻至暖铜氨丝白鹅绒被
</div>
<div class="price">
￥999
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/img-3.png" />
</div>
<div class="name">
超轻至暖铜氨丝白鹅绒被
</div>
<div class="price">
￥999
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/img-4.png" />
</div>
<div class="name">
超轻至暖铜氨丝白鹅绒被
</div>
<div class="price">
￥999
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/img-5.png" />
</div>
<div class="name">
超轻至暖铜氨丝白鹅绒被
</div>
<div class="price">
￥999
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/img-6.png" />
</div>
<div class="name">
超轻至暖铜氨丝白鹅绒被
</div>
<div class="price">
￥999
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/img-7.png" />
</div>
<div class="name">
超轻至暖铜氨丝白鹅绒被
</div>
<div class="price">
￥999
</div>
</div>
</div>
</div>
<div class="breakline"></div>
<!-- 三张图片 -->
<div class="middlebox">
<div class="list">
<div class="item">
<div class="imgbox">
<img src="img/pic-1.jpg">
</div>
</div>
<div class="item">
<div class="imgbox">
<img src="img/pic-2.jpg">
</div>
<div class="imgbox">
<img src="img/pic-3.jpg">
</div>
</div>
</div>
</div>
<div class="breakline"></div>
<!-- 精选 -->
<div class='selection'>
<div class="title">精选 | SELECTION
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imagebox">
<img src="img/slider-1.jpg" />
</div>
<div class="list">
<div class="name">
本家HOME
</div>
<div class="price">
29.9元起
</div>
</div>
<div class="youhui">
每满100立减20元
</div>
</div>
<div class="swiper-slide">
<div class="imagebox">
<img src="img/slider-2.jpg" />
</div>
<div class="list">
<div class="name">
本家HOME
</div>
<div class="price">
29.9元起
</div>
</div>
<div class="youhui">
每满100立减20元
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="breakline"></div>
<!-- 商品推荐 -->
<div class='recommand'>
<div class="title">推荐 | RECOMMAND
</div>
<div class="list">
<div class="list">
<div class="item">
<div class="imagebox">
<img src="img/t%20(1).png" />
</div>
<div class="name breaktext">
高档灯
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(2).png" />
</div>
<div class="name breaktext">
超级碗
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(3).png" />
</div>
<div class="name breaktext">
高档被子
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(4).png" />
</div>
<div class="name breaktext">
陶瓷套装C
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(5).png" />
</div>
<div class="name breaktext">
高档鞋
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(6).png" />
</div>
<div class="name breaktext">
竹枝抱枕
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(7).png" />
</div>
<div class="name breaktext">
摆件
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(8).png" />
</div>
<div class="name breaktext">
女装
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(9).png" />
</div>
<div class="name breaktext">
高档摆件A
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(15).png" />
</div>
<div class="name breaktext">
电动牙刷
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(14).png" />
</div>
<div class="name breaktext">
婴儿套装
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
<div class="item">
<div class="imagebox">
<img src="img/t%20(12).png" />
</div>
<div class="name breaktext">
精品上衣
</div>
<div class="des breaktext">
上百竹枝首位相依 静生生物
</div>
<div class="price">
￥ 169
</div>
</div>
</div>
</div>
</div>
<div class="breakline"></div>
<!-- 底部菜单 -->
<div class="bottombox" >
<div class="list">
<div class="item">
<div class="imgbox">
<img src="img/首页.jpg" />
</div>
<div class="text">
首页
</div>
</div>
<div class="item">
<div class="imgbox">
<img src="img/优选.jpg" />
</div>
<div class="text">
优选
</div>
</div>
<div class="item">
<div class="imgbox">
<img src="img/分类.jpg" />
</div>
<div class="text">
分类
</div>
</div>
<div class="item">
<div class="imgbox">
<img src="img/购物车.jpg" />
</div>
<div class="text">
购物车
</div>
</div>
<div class="item">
<div class="imgbox">
<img src="img/我的.jpg" />
</div>
<div class="textred">
我的
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
<script>
var mySwiper = new Swiper('.topbanner .swiper-container', {
loop: true, // 循环模式选项
})
</script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.selection .swiper-container', {
slidesPerView: 'auto',
spaceBetween: 30,
pagination: {
// el: '.swiper-pagination',
// clickable: true,
},
});
</script>
<!-- js在此引入 -->
</body>
</html>
index.css代码如下：
/* 浮动和弹性布局,定位*/
* {
padding: 0;
margin: 0;
/* 去掉默认的影响效果的边框，设置外边距 */
list-style: none;
/* 列表 */
text-decoration: none;
/* 下划线 */
/* color:#33333333 */
/* 字体颜色 */
font-family: "Microsoft YaHei";
}
.container {
width: 100vw;
}
.list {
display: flex;
/* 弹性布局 变成同一行*/
justify-content: space-between;
/* 两端布局：当最后一行不满三个，最后一排会分在两端 */
flex-wrap: wrap;
/* 浮动满了换行 */
}
/* 每个栏目尽量用后代选择器 */
.header {
background-color: #fbfbfbfb;
/* 作为整体容器，三个弹性布局 */
display: flex;
justify-content: space-between;
/* 控制弹性布局 between靠两边，around靠中间*/
padding: 3.6vw 2.8vw;
/* 上下 左右 */
}
.header .text{
padding-top: 2vw;
}
.header >imgbox {
height: 4.27vw;
width: 4.27vw;
}
.topbanner{
box-shadow: 0 2vw 2vw #f1f0f1;
}
.imgbox {
line-height: 0vw;
}
.imagebox>img {
height: 100%;
width: 100%;
}
.imgbox>img {
height: 100%;
width: 100%;
}
.breakline {
background-color: #f4f4f4f4;
height: 2.67vw;
}
.title {
padding: 2.53vw 0vw;
text-align: center;
/* 本家 文本居中*/
word-spacing: 2.53vw;
}
/* 轮播图 */
.swiper-container{
height: 55.87vw;
}
.swiper-slide .imgbox{
height: 100%;
width: 100%;
}
.cbrl .item {
box-sizing: border-box;
/* padding从box扣 border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的*/
width: 49.8vw;
margin-top: 0.4vw;
/* 上外边距 */
background-color: white;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 4vw 3.2vw 1.87vw 3.65vw;
}
.cbrl .list {
display: flex;
/* 弹性布局 */
justify-content: space-between;
/* 紧靠两边 */
flex-wrap: wrap;
/* 满了换行 */
background-color: #f5f5f5f5;
}
/* 价格跟图片在一行:浮动或者弹性布局 */
.cbrl .name {
width: 100%;
padding-bottom: 2.67vw;
}
/* 单行文本截断 */
.breaktext {
white-space: nowrap;
/* 不能换行 */
overflow: hidden;
/* 超出后隐藏 */
text-overflow: ellipsis;
/* 隐藏后显示三个点 */
}
.cbrl .imagebox {
height: 23.2vw;
width: 22.53vw;
}
.cbrl .price{
color: #C55A5C;
}
.topbox1{
height: 64.67vw;
padding-top: 5.47vw;
}
.topbox1 .list .itemcontext {
width: 25vw;
}
.topbox1 .list .itemcontext .imgbox {
width: 11.07vw;
padding-left: 8.1vw;
padding-bottom: 2.93vw;
height: 8.27vw;
}
.topbox1 .list .itemcontext .text {
text-align: center;
font-size: 3.73vw;
}
.middlebanner{
margin-top: 4.4vw;
border-radius:25px;
padding: 0 2.4vw;
}
.selection{
padding-bottom: 4.67vw;
}
.selection .swiper-container .swiper-wrapper{
width: 75.47vw;
height: 56.67vw;
font-size:2.8vw;
padding-left: 2.67vw;
}
.selection .swiper-container .swiper-wrapper .imagebox{
padding-top: 2vw;
width: 75.47vw;
height: 45.73vw;
border-radius:25px;
/* padding-bottom: 3.2vw; */
}
.selection .swiper-container .swiper-wrapper .imagebox >img{
border-radius:10px;
/* padding-bottom: 3.2vw; */
}
.selection .swiper-container .swiper-wrapper .list{
padding: 0 2.67vw;
/* padding-right: 23.67vw; */
/* padding-bottom: 3.2vw; */
}
.youhui{
font-size: 2.4vw;
padding-left: 2.67vw;
color: #99999999;
}
.selection .swiper-container .swiper-wrapper .list .price{
color:#c55a5c;
}
.selection .title{
padding-left: 16vw;
}
/* sale */
.sale .item {
box-sizing: border-box;
/* padding从box扣 */
width: 33.1vw;
margin-top: 0.4vw;
/* 上外边距（上边那条线） */
background-color: white;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 0 1.87vw 3.65vw;
}
.sale .list {
display: flex;
/* 弹性布局 */
justify-content: space-between;
/* 紧靠两边 */
flex-wrap: wrap;
/* 满了换行 */
background-color: #f5f5f5f5;
}
/* 价格跟图片在一行:浮动或者弹性布局 */
.sale .name {
width: 100%;
font-size: 3.33vw;
padding-bottom: 3.33vw;
}
/* 单行文本截断 */
.sale .imagebox {
height: 30vw;
width: 100%;
}
.sale .price{
color: #C55A5C;
padding-bottom: 4.93vw;
}
.middlebox{
height: 67.6vw;
}
.middlebox .list .item{
width: 50vw;
height: 67.6vw;
}
/* 新品首发 */
.new .item {
hight:62vw;
box-sizing: border-box;
/* padding从box扣 */
width: 49.8vw;
margin-top: 0.4vw;
/* 上外边距（上边那条线） */
background-color: white;
display: flex;
/* 弹性布局 */
flex-wrap: wrap;
justify-content: space-between;
padding:1.87vw 3.65vw;
}
.new .list {
display: flex;
/* 弹性布局 */
justify-content: space-between;
/* 紧靠两边 */
flex-wrap: wrap;
/* 满了换行 */
background-color: #f5f5f5f5;
}
.item .des{
font-size: 2vw;
color: #d0d0d0d0;
padding-bottom: 3.73vw;
}
/* 价格跟图片在一行:浮动或者弹性布局 */
.new .name {
width: 100%;
padding-bottom: 2.27vw;
}
/* 单行文本截断 */
.new .imagebox {
height: 40.27vw;
width: 40vw;
}
.new .price{
color: #C55A5C;
padding-bottom: 4.4vw;
}
/* 推荐*/
.recommand .item {
hight:62vw;
box-sizing: border-box;
/* padding从box扣 */
width: 49.8vw;
margin-top: 0.4vw;
/* 上外边距（上边那条线） */
background-color: white;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding:1.87vw 3.65vw;
}
.recommand .list {
display: flex;
/* 弹性布局 */
justify-content: space-between;
/* 紧靠两边 */
flex-wrap: wrap;
/* 满了换行 */
background-color: #f5f5f5f5;
}
.recommand .des{
font-size: 2vw;
color: #d0d0d0d0;
padding-bottom: 3.73vw;
}
/* 价格跟图片在一行:浮动或者弹性布局 */
.recommand .name {
width: 100%;
padding-bottom: 2.27vw;
}
/* 单行文本截断 */
.recommand .imagebox {
height: 40vw;
/* width: 40vw; */
}
.recommand .title {
padding-left: 16vw;
/* width: 40vw; */
}
.recommand .price{
color: #C55A5C;
padding-bottom: 4.4vw;
}
.bottombox {
height: 12.93vw;
background-color: #fbfbfb;
}
.bottombox .list .item {
width: 20vw;
}
.bottombox .list .item .imgbox {
height: 6vw;
width: 6vw;
padding-left: 7vw;
padding-top: 2.53vw;
}
.bottombox .list .item .text {
text-align: center;
}
.bottombox .list .item .textred {
text-align: center;
color: #7f2a2b;
}
/* 行高line-height:22px */
扫一扫
1950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
