html+css 制作小米商城主体内容的商品展示
这个是效果图，源代码放下面了，欢迎一起交流讨论。
·
这个是效果图，源代码放下面了，欢迎一起交流讨论
这里是html
<!-- 主体部分 -->
<div class="home-main">
<div class="container w">
<!-- 过度栏 -->
<div class="home-banner">
<a href="#"><img src="./img/过度栏.webp" alt=""></a>
</div>
<!-- 产品列表 -->
<div class="home-brick-box w">
<!-- 标题 -->
<div class="box-hd">
<h2>手机</h2>
<div class="more">
<a href="#">查看更多<i class="iconfont"></i></a>
</div>
</div>
<!-- 详细介绍 -->
<div class="box-clearfix">
<div class="row">
<div class="span4">
<ul class="brick-promo-list clearfix">
<li>
<a href="#"><img src="./img/12s ultra.webp" alt="">
</a>
</li>
</ul>
</div>
<div class="span16">
<ul class="brick-list clearfix">
<li>
<a href="#" class="brick-item">
<div class="figure">
<img src="./img/12s pro ultra.webp" alt="">
</div>
<h3 class="title">Xiaomi 12S Ultra</h3>
<p class="desc">这真徕卡｜专业徕卡影像</p>
<p class="price"><span>5999元起</span></p>
</a>
</li>
<li>
<a href="#" class="brick-item">
<div class="figure">
<img src="./img/12s pro.webp" alt="">
</div>
<h3 class="title">Xiaomi 12S Pro</h3>
<p class="desc">骁龙8+ 旗舰处理器 | 徕卡影像</p>
<p class="price"><span>4699元起</span></p>
</a>
</li>
<li>
<a href="#" class="brick-item">
<div class="figure">
<img src="./img/12s t.webp" alt="">
</div>
<h3 class="title">Xiaomi 12 Pro 天玑版</h3>
<p class="desc">全球首发天玑9000+｜叶脉冷泵散热系统｜2K AMOLED 超视感屏 ｜5000万疾速影像</p>
<p class="price"><span>3999元起</span></p>
</a>
</li>
<li>
<a href="#" class="brick-item">
<div class="figure">
<img src="./img/12s.webp" alt="">
</div>
<h3 class="title">Xiaomi 12S</h3>
<p class="desc">小尺寸性能旗舰 | 徕卡影像</p>
<p class="price"><span>3999元起</span></p>
</a>
</li>
<li>
<a href="#" class="brick-item">
<div class="figure">
<img src="./img/note11T.webp" alt="">
</div>
<h3 class="title">Redmi note11T Pro+</h3>
<p class="desc">天玑8100｜真旗舰芯</p>
<p class="price"><span>2099元起</span></p>
</a>
</li>
<li>
<a href="#" class="brick-item">
<div class="figure">
<img src="./img/note11Tpro.webp" alt="">
</div>
<h3 class="title">Redmi note11T Pro</h3>
<p class="desc">天玑8100｜真旗舰芯</p>
<p class="price"><span>1799元起</span></p>
</a>
</li>
<li>
<a href="#" class="brick-item">
<div class="figure">
<img src="./img/note11se.webp" alt="">
</div>
<h3 class="title">Redmi Note11se</h3>
<p class="desc">双卡双5G｜疾速登陆</p>
<p class="price">
<span>999</span>元<span>起</span><del><span>1099</span>元</del>
</p>
</a>
</li>
<li>
<a href="#" class="brick-item">
<div class="figure">
<img src="./img/civi.webp" alt="">
</div>
<h3 class="title">Xiaomi Civi 1S</h3>
<p class="desc">原生美肌人像｜奇迹阳光动人新色｜骁龙778G Plus</p>
<p class="price"><span>2299元起</span></p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>这里放了css
/* 主体部分 */
.home-main {
width: 100%;
height: 100%;
background-color: rgb(245, 245, 245);
padding: 4px 0 12px;
}
/* 内部大盒子 */
.home-main .container {
width: 100%;
}
/* 过度栏 */
.home-main .home-banner {
height: 120px;
margin: 20px 0;
text-align: center;
}
.home-main .home-banner img {
height: 100%;
}
/* 产品介绍 */
.home-main .container .home-brick-box {
height: 682px;
}
.home-main .home-brick-box .box-hd {
height: 58px;
font-size: 22px;
margin: 0;
font-weight: 200px;
line-height: 58px;
color: #333;
/* background-color: darkgreen; */
position: relative;
}
.home-main .home-brick-box .box-hd .more {
float: right;
width: 98px;
height: 58px;
line-height: 58px;
position: absolute;
top: 0;
right: 0;
}
.home-main .home-brick-box .box-hd .more a {
font-size: 16px;
color: #424242;
transition: all .4s;
}
.home-main .home-brick-box .box-hd .more a:hover {
color: #ff6700;
}
.home-main .home-brick-box .box-clearfix {}
.home-main .home-brick-box .box-clearfix .row {}
.home-main .home-brick-box .box-clearfix .row .span4 {
float: left;
min-height: 1px;
}
.home-main .home-brick-box .box-clearfix .row .span4 .brick-promo-list {
display: block;
list-style: none;
padding: 0;
height: 614px;
width: 234px;
}
.home-main .home-brick-box .box-clearfix .row .span4 .brick-promo-list>li {
height: 100%;
width: 100%;
position: relative;
z-index: 1;
float: left;
background-color: #fff;
transition: all .2s linear;
}
.home-main .home-brick-box .box-clearfix .row .span4 .brick-promo-list img {
height: 100%;
width: 100%;
}
.home-main .home-brick-box .box-clearfix .row .span4 .brick-promo-list>li:hover{
cursor: pointer;
z-index: 2;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0)
}
.home-main .home-brick-box .box-clearfix .row .span16 {
float: left;
min-height: 1px;
}
.home-main .home-brick-box .box-clearfix .row .span16 .brick-list {
width: 992px;
height: 100%;
}
.home-main .home-brick-box .box-clearfix .row .span16 .brick-list>li {
position: relative;
z-index: 1;
float: left;
width: 234px;
height: 246px;
background-color: #fff;
transition: all .2s linear;
margin-left: 14px;
margin-bottom: 14px;
padding: 34px 0 20px;
}
.home-main .home-brick-box .box-clearfix .row .span16 .brick-list .brick-item {
text-align: center;
padding: 0;
height: 246px;
transition: all .2s linear;
}
.home-main .home-brick-box .box-clearfix .row .span16 .brick-list .brick-item .figure img {
width: 160px;
height: 160px;
}
.home-main .home-brick-box .box-clearfix .row .span16 .brick-list .brick-item .desc {
/* 文字溢出隐藏，显示省略点 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* -------------------- */
margin: 0 10px 10px;
font-size: 12px;
height: 18px;
}
.home-main .home-brick-box .box-clearfix .row .span16 .brick-list .brick-item .price {
color: #ff6700;
}
.home-main .home-brick-box .box-clearfix .row .span16 .brick-list .brick-item .price del {
color: #B0B0B0;
}
.home-main .home-brick-box .box-clearfix .row .span16 .brick-list>li:hover {
cursor: pointer;
z-index: 2;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0)
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
8
0- 0
已为社区贡献3条内容
所有评论(0)