簡介
最近溫習一下HTML5+CSS3的一些特性，準備找個高仿的目標，最後選擇了淘寶粉絲福利頁面，因爲這個頁面包含的元素比較多。例如：頭部品牌信息懸浮、商品屬性、優惠券、商品類別等。
實現效果：
設計
如上圖所示，頁面共分爲4個區域，分別爲：
1、商品圖片區
2、商品屬性、優惠券區（包括：商品名稱、價格、優惠情況等）
3、推薦商品列表區
4、浮動框
備註：最後優化代碼將商品圖片區和商品屬性、優惠券區合併爲一個。
代碼實現
第一步：整體css樣式編寫
index.css
* {
padding: 0;
margin: 0
}
body {
font-size: 14px;
line-height: 1.8;
width: 7.5rem;
margin: 0 auto;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(4%, #f2f2f2), to(#d8d8d8));
background-image: linear-gradient(0deg, #f2f2f2 4%, #d8d8d8 100%)
}
img {
border: 0;
width: auto \9;
height: auto;
max-width: 100%;
vertical-align: top;
-ms-interpolation-mode: bicubic
}
a {
text-decoration: none
}
第二步：商品區佈局
HTML代碼
<div class="item-con ">
<div class="item-info-con">
<a>
<div class="shop-info"><img class="shop-logo"
src="images/logo.jpg_.webp"><span
class="shop-name">tsc服飾海外專營店</span></div>
<img class="item-img"
src="images/good_img.jpg_.webp">
<div class="item-info"><p class="title"><span class="postfee-icon"></span>CHAMPION冠軍男女同款美版經典草寫印花LOGO
休閒T恤短袖 GT23H</p>
<div class="price-info"><span class="after-price-title">用券後</span><span
class="after-price-icon">¥</span><span class="after-price-num">59.00</span>
<span class="price">現價¥89</span><span class="sell-num">426筆成交</span></div>
</div>
</a>
<div class="coupon-btn get-coupon-btn"
style="background-image: url(images/coupon_bg.jpg_.webp);">
<div class="coupon-info"><span class="coupon-icon">¥</span><span
class="coupon-amount">30</span></div>
<div class="coupon-date">使用期限 2020.05.09-2020.05.14</div>
<div class="btn-name">立即領券</div>
</div>
</div>
</div>
CSS代碼
<style type="text/css">
.item-con {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
z-index: 9;
}
.item-con .postfee-icon {
display: inline-block;
width: 0.44rem;
height: 0.24rem;
background: url(images/baoyou-icon-66-36.png) no-repeat;
background-size: cover;
margin-right: 0.05rem;
}
.item-con .item-info-con {
width: 6.8rem;
margin: 0.2rem auto;
border-radius: 0.32rem;
background: #fff;
position: relative;
overflow: hidden;
}
.item-con .item-img {
width: 6.8rem;
height: 6.8rem;
}
.item-con .shop-info {
position: absolute;
left: 0;
top: 0;
height: 0.8rem;
width: 100%;
background: rgba(255, 255, 255, 0.8);
}
.item-con .shop-info .shop-logo {
height: 0.6rem;
margin: 0.1rem 0.2rem;
}
.item-con .shop-info .shop-name {
line-height: 0.8rem;
font-size: 0.3rem;
color: #4a4a4a;
}
.item-con .item-info {
padding: 0.15rem;
}
.item-con .item-info .title {
color: #4a4a4a;
font-size: 0.28rem;
line-height: 0.4rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.item-con .item-info .price-info {
overflow: hidden;
}
.item-con .item-info .after-price-title {
font-size: 0.28rem;
height: 0.38rem;
line-height: 0.36rem;
-webkit-transform: scale(0.72);
transform: scale(0.72);
-webkit-transform-origin: left 80%;
transform-origin: left 80%;
color: #fff;
background: #f44;
padding: 0 0.1rem;
display: inline-block;
border-radius: 0.05rem;
}
.item-con .item-info .after-price-icon {
font-size: 0.28rem;
-webkit-transform: scale(0.72);
transform: scale(0.72);
color: #f44;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
display: inline-block;
margin-left: -0.2rem;
line-height: 1;
}
.item-con .item-info .after-price-num {
font-size: 0.36rem;
color: #f44;
vertical-align: middle;
font-weight: 600;
line-height: 1;
margin-right: 0.15rem;
}
.item-con .item-info .price {
font-size: 0.24rem;
color: #9b9b9b;
vertical-align: middle;
line-height: 1.2;
margin-top: 0.02rem;
display: inline-block;
}
.item-con .item-info .sell-num {
float: right;
color: #9b9b9b;
font-size: 0.24rem;
line-height: 1.2;
position: relative;
top: 0.15rem;
}
.item-con .coupon-btn {
width: 6.65rem;
height: 1.15rem;
margin: 0 auto;
background-repeat: no-repeat;
background-size: 6.65rem 1.15rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.item-con .get-coupon-btn {
cursor: pointer;
position: relative;
padding-left: 0.35rem;
padding-top: 0.05rem;
left: 0.075rem;
}
.item-con .get-coupon-btn .btn-name {
position: absolute;
right: 0;
top: 0;
color: #fff;
font-size: 0.32rem;
line-height: 1.15rem;
text-align: center;
height: 1.15rem;
width: 2.2rem;
}
.item-con .get-coupon-btn .coupon-icon {
font-size: 0.3rem;
color: #fff;
line-height: 1;
margin-right: 0.1rem;
}
.item-con .get-coupon-btn .coupon-amount {
font-size: 0.72rem;
color: #fff;
line-height: 1;
font-weight: 500;
}
.item-con .get-coupon-btn .coupon-date {
line-height: 1;
font-size: 0.24rem;
color: rgba(255, 255, 255, 0.67);
}
.J_hasMJMZ.item-con .item-info-con {
height: 10.62rem;
}
.J_hasMJMZ.item-con .get-coupon-btn {
bottom: 1.38rem;
}
@media screen and (max-width: 330px) {
.item-con .get-coupon-btn .coupon-date {
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: left top;
transform-origin: left top;
}
.item-con .item-info {
padding: 0.1rem;
}
}
.android .item-con .item-info .after-price-title {
height: 0.4rem;
line-height: 0.4rem;
-webkit-transform: scale(0.72);
transform: scale(0.72);
-webkit-transform-origin: left 40%;
transform-origin: left 40%;
}
</style>
<style type="text/css">body {
background: #f6f6f6;
}
.coupon-item .shop-info {
text-align: center;
height: 4.4rem;
padding-top: 0.4rem;
}
.coupon-item .shop-info .shop-logo {
background-size: 1.08rem auto;
background-repeat: no-repeat;
width: 1.08rem;
height: 1.08rem;
line-height: 1.62rem;
display: block;
margin: 0 auto 0.1rem;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.coupon-item .shop-info .coupons-wrap .coupons-price strong {
font-size: 0.5rem;
display: inline-block;
height: 0.45rem;
line-height: 0.45rem;
margin-right: 0;
font-weight: 400;
}
.coupon-item .item-wrap .item-detail .pic img {
border: 1px solid #c6c6c6;
width: 2.425rem;
height: 2.425rem;
overflow: hidden;
}
.coupon-item .item-wrap .item-detail .item-content .title span {
font-size: 0.25rem;
line-height: 0.35rem;
overflow: hidden;
height: 0.72rem;
color: #333;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.coupon-item .item-wrap .item-detail .item-content .discount .sale em {
font-size: 0.25rem;
font-style: normal;
display: inline-block;
width: 0.35rem;
text-align: center;
}
</style>
推薦商品列表區
HTML代碼
<div class="item-list-con">
<div class="recommend-title J-recommend-title">更多優惠推薦
<div class="recommend-title-line"></div>
</div>
<div class="recommend-item">
<div class="recommend-coupon-icon"><span class="recommend-coupon-num-icon">¥</span><span
class="recommend-coupon-num">30</span></div>
<img data-observer-type="img" cell-computewithroot="true"
class="recommend-item-img J-recommend-item-img"
src="images/good_img.jpg_.webp">
<div class="info-con"><p class="title">CHAMPION冠軍男女同款美版經典草寫印花LOGO
休閒T恤短袖 GT23H</p>
<p class="price-sell"><span class="price">89.00</span><span class="sell-num">447筆成交</span></p>
<div><span class="coupon-price-title">用券後</span><span class="coupon-price-icon">¥</span><span
class="coupon-price-num">59.00</span></div>
<div class="coupon-btn"
style="background-image: url(images/youhuiquan_bg_small_300x300.jpg_.webp);">
<span class="coupon-btn-title">優惠券</span><span class="coupon-btn-num">30</span><span
class="coupon-btn-name">領取</span></div>
</div>
</div>
<div class="recommend-item">
<div class="recommend-coupon-icon"><span class="recommend-coupon-num-icon">¥</span><span
class="recommend-coupon-num">20</span></div>
<img data-observer-type="img" cell-computewithroot="true"
class="recommend-item-img J-recommend-item-img"
src="images/good_img.jpg_.webp">
<div class="info-con"><p class="title">CHAMPION冠軍男女同款美版經典草寫印花LOGO
休閒T恤短袖 GT23H</p>
<p class="price-sell"><span class="price">39.90</span><span class="sell-num">177筆成交</span></p>
<div><span class="coupon-price-title">用券後</span><span class="coupon-price-icon">¥</span><span
class="coupon-price-num">19.90</span></div>
<div class="coupon-btn"
style="background-image: url(images/youhuiquan_bg_small_300x300.jpg_.webp);">
<span class="coupon-btn-title">優惠券</span><span class="coupon-btn-num">¥30</span><span
class="coupon-btn-name">領取</span></div>
</div>
</div>
</div>
CSS代碼
<style type="text/css">.item-list-con .recommend-title {
text-align: center;
font-size: 0.28rem;
color: #333;
}
.item-list-con .recommend-title-line {
height: 0.06rem;
width: 1.3rem;
background: #f44;
margin: 0 auto;
border-radius: 0.03rem;
}
.item-list-con .recommend-item {
width: 3.42rem;
height: 6.03rem;
background: #fff;
display: inline-block;
margin-left: 0.22rem;
margin-top: 0.22rem;
border-radius: 0.2rem;
overflow: hidden;
cursor: pointer;
position: relative;
}
.item-list-con .recommend-item .recommend-coupon-icon {
width: 0.76rem;
height: 0.77rem;
background: url(images/youhuiquan_icon.png) no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0.2rem;
text-align: center;
padding-top: 0.16rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.item-list-con .recommend-item .recommend-coupon-num-icon {
font-size: 0.24rem;
color: #fff;
}
.item-list-con .recommend-item .recommend-coupon-num {
font-size: 0.32rem;
color: #fff;
}
.item-list-con .recommend-item .recommend-item-img {
width: 3.42rem;
height: 3.42rem;
}
.item-list-con .recommend-item .info-con {
padding: 0.16rem;
}
.item-list-con .recommend-item .title {
font-size: 0.26rem;
line-height: 0.36rem;
height: 0.72rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item-list-con .recommend-item .price-sell {
color: #bdbdbd;
font-size: 0.24rem;
}
.item-list-con .recommend-item .price-sell .price {
text-decoration: line-through;
}
.item-list-con .recommend-item .price-sell .sell-num {
float: right;
}
.item-list-con .recommend-item .coupon-price-title {
font-size: 0.24rem;
color: #4a4a4a;
}
.item-list-con .recommend-item .coupon-price-icon {
font-size: 0.26rem;
color: #ff4f00;
margin: 0 0.05rem;
}
.item-list-con .recommend-item .coupon-price-num {
color: #ff4f00;
font-size: 0.32rem;
font-weight: 500;
}
.item-list-con .recommend-item .coupon-btn {
width: 3rem;
height: 0.48rem;
background-size: 3rem 0.48rem;
background-repeat: no-repeat;
position: relative;
color: #ff4f00;
line-height: 0.46rem;
font-size: 0.24rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-left: 0.05rem;
padding-right: 0.8rem;
text-align: center;
}
.item-list-con .recommend-item .coupon-btn .coupon-btn-num {
font-size: 0.3rem;
margin-left: 0.1rem;
font-weight: 500;
}
.item-list-con .recommend-item .coupon-btn .coupon-btn-name {
position: absolute;
width: 0.85rem;
text-align: center;
right: 0;
top: 0;
line-height: 0.47rem;
}
</style>
浮動框佈局
HTML代碼
<div style="position: fixed; right: 0px; bottom: 100px; width: 60px; height: 60px;z-index: 99"><img
data-action="showDialog"
class="J_sdasdnbhkbdas"
style="width:100%;height:100%;cursor:pointer;"
src="images/new-people-bg-120-120.png">
####關注我們
如果需要源碼可以關注“IT實戰聯盟”公衆號並留言（101，會收到源碼下載地址），也可以加入交流羣和作者互撩哦~~~