「?? 作者：極客小俊」
「?? 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」

咱們廢話不多說直接上代碼案例素材!

準(zhǔn)備工作

首先準(zhǔn)備圖片素材 放入到你的demo案例下的img文件夾

當(dāng)然圖片你也可以用其他類似的圖來代替也是可以的!????

如圖

HTML代碼結(jié)構(gòu)

<div id="big">
? ? ? ? ? ?<div class="box">
? ? ? ? ? ? ? ?<div class="pic"><img src="img/bag.jpg" alt="" title=""/></div>
? ? ? ? ? ? ? ?<div class="mask">
? ? ? ? ? ? ? ? ? ?<h2>三用小巧思波士頓包</h2>
? ? ? ? ? ? ? ? ? ?<p>印花波士頓包 復(fù)古波士頓包，手提單肩斜挎多用，印花PVC</p>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="title">
? ? ? ? ? ? ? ? ? ?<h2 class="sl"><span></span>全場2折起 印花波士頓包 專柜終身保養(yǎng)</h2>
? ? ? ? ? ? ? ? ? ?<h3 class="sl"><i></i><span>搶全場2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
? ? ? ? ? ? ? ? ? ?<div class="price">
? ? ? ? ? ? ? ? ? ? ? ?<div class="zx_pr"><span>￥</span>659</div>
? ? ? ? ? ? ? ? ? ? ? ?<div class="xl_yp">
? ? ? ? ? ? ? ? ? ? ? ? ? ?<p><del>￥1998.00</del><span>退貨賠運費</span></p>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<p><strong>70</strong>件已付款</p>
? ? ? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ? ? ?<div class="buy">搶!</div>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="box">
? ? ? ? ? ? ? ? <div class="pic"><img src="img/bag3.jpg" alt="" title=""/></div>
? ? ? ? ? ? ? ? <div class="mask">
? ? ? ? ? ? ? ? ? ?<h2>豬年紀(jì)念款經(jīng)典牛皮水桶包</h2>
? ? ? ? ? ? ? ? ? ?<p>豬年紀(jì)念款 經(jīng)典牛皮水桶包，自帶強(qiáng)大氣場</p>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="title">
? ? ? ? ? ? ? ? ? ?<h2 class="sl"><span></span>全場2折起 印花波士頓包 專柜終身保養(yǎng)</h2>
? ? ? ? ? ? ? ? ? ?<h3 class="sl"><i></i><span>搶全場2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
? ? ? ? ? ? ? ? ? ?<div class="price">
? ? ? ? ? ? ? ? ? ? ? ?<div class="zx_pr"><span>￥</span>659</div>
? ? ? ? ? ? ? ? ? ? ? ?<div class="xl_yp">
? ? ? ? ? ? ? ? ? ? ? ? ? ?<p><del>￥1998.00</del><span>退貨賠運費</span></p>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<p><strong>70</strong>件已付款</p>
? ? ? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ? ? <div class="buy">搶!</div>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="box">
? ? ? ? ? ? ? ?<div class="pic"><img src="img/bag4.jpg" alt="" title=""/></div>
? ? ? ? ? ? ? ?<div class="mask">
? ? ? ? ? ? ? ? ? ?<h2>一包四用蜜蜂系列迷你小方包</h2>
? ? ? ? ? ? ? ? ? ?<p>四用方盒包 一包四用蜜蜂系列迷你鏈條小方包</p>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="title">
? ? ? ? ? ? ? ? ? ?<h2 class="sl"><span></span>全場2折起 印花波士頓包 專柜終身保養(yǎng)</h2>
? ? ? ? ? ? ? ? ? ?<h3 class="sl"><i></i><span>搶全場2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
? ? ? ? ? ? ? ? ? ?<div class="price">
? ? ? ? ? ? ? ? ? ? ? ?<div class="zx_pr"><span>￥</span>659</div>
? ? ? ? ? ? ? ? ? ? ? ?<div class="xl_yp">
? ? ? ? ? ? ? ? ? ? ? ? ? ?<p><del>￥1998.00</del><span>退貨賠運費</span></p>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<p><strong>70</strong>件已付款</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ? ? ?<div class="buy">搶!</div>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ?</div>

CSS代碼結(jié)構(gòu)

*{
? ? ? ? ? ?padding:0px;
? ? ? ? ? ?margin:0px;
? ? ? ?}
? ? ? ?body{
? ? ? ? ? ?font-family: '微軟雅黑';
? ? ? ?}
? ? ? ?.sl{
? ? ? ? ? ?white-space: nowrap;
? ? ? ? ? ?word-break: keep-all;
? ? ? ? ? ?text-overflow: ellipsis;
? ? ? ?}
? ? ? ?#big{
? ? ? ? ? ?width:950px;
? ? ? ? ? ?height:416px;
? ? ? ? ? ?margin:10px auto;
? ? ? ? ? ?overflow: hidden;
? ? ? ?}
? ? ? ?#big>.box{
? ? ? ? ? ?width:298px;
? ? ? ? ? ?height:410px;
? ? ? ? ? ?float: left;
? ? ? ? ? ?position: relative;
? ? ? ? ? ?overflow: hidden;
? ? ? ? ? ?border:1px solid #ccc;
? ? ? ? ? ?margin-left:19px;
? ? ? ?}
? ? ? ?#big>.box:first-child{
? ? ? ? ? ?margin-left:0px;
? ? ? ?}
? ? ? ?#big>.box>.pic{
? ? ? ? ? ?width:298px;
? ? ? ? ? ?height:300px;
? ? ? ? ? ?overflow: hidden;
? ? ? ?}
? ? ? ?#big>.box>.pic>img{
? ? ? ? ? ?transition: all 500ms;
? ? ? ?}
? ? ? ?#big>.box:hover>.pic>img{
? ? ? ? ? ?transform: scale(1.5);
? ? ? ?}
? ? ? ?#big>.box>.mask{
? ? ? ? ? ?height:300px;
? ? ? ? ? ?width:298px;
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?left:-298px;
? ? ? ? ? ?top:0px;
? ? ? ? ? ?background:rgba(0,0,0,0.3);
? ? ? ? ? ?transition: all 600ms;
? ? ? ? ? ?color:#fff;
? ? ? ?}
? ? ? ?#big>.box>.mask>h2{
? ? ? ? ? ?font-size: 18px;
? ? ? ? ? ?margin:80px 0px 10px 10px;
? ? ? ?}
? ? ? ?#big>.box>.mask>p{
? ? ? ? ? ?font-size: 12px;
? ? ? ? ? ?margin:0px 0px 10px 10px;
? ? ? ?}
? ? ? ?#big>.box:hover>.mask{
? ? ? ? ? ?left:0px;
? ? ? ?}
? ? ? ?#big>.box>.title>h2{
? ? ? ? ? ?margin:10px auto;
? ? ? ? ? ?width:288px;
? ? ? ? ? ?height:20px;
? ? ? ? ? ?line-height: 20px;
? ? ? ? ? ?font-size: 14px;
? ? ? ? ? ?color:#333;
? ? ? ? ? ?overflow: hidden;
? ? ? ? ? ?font-weight: normal;
? ? ? ?}
? ? ? ?#big>.box>.title>h2>span{
? ? ? ? ? ?display: inline-block;
? ? ? ? ? ?width:31px;
? ? ? ? ? ?height:16px;
? ? ? ? ? ?vertical-align: middle;
? ? ? ? ? ?background: url('img/tu.png') no-repeat;
? ? ? ? ? ?background-size:cover;
? ? ? ? ? ?margin-right:5px;
? ? ? ?}
? ? ? ?#big>.box>.title>h3{
? ? ? ? ? ?width:288px;
? ? ? ? ? ?height:20px;
? ? ? ? ? ?margin:0px auto;
? ? ? ? ? ?font-size: 12px;
? ? ? ? ? ?color:#666;
? ? ? ? ? ?font-weight: 400;
? ? ? ?}
? ? ? ?#big>.box>.title>h3>i{
? ? ? ? ? ?width:12px;
? ? ? ? ? ?height:16px;
? ? ? ? ? ?display: inline-block;
? ? ? ? ? ?background:url('img/tu1.jpg') no-repeat;
? ? ? ? ? ?vertical-align: middle;
? ? ? ?}
? ? ? ?#big>.box>.title>h3>span{
? ? ? ? ? ?color:#f00;
? ? ? ? ? ?margin:0 5px 0 5px;
? ? ? ?}
? ? ? ?#big>.box>.title>.price{
? ? ? ? ? ?width:298px;
? ? ? ? ? ?height:50px;
? ? ? ? ? ?background:#e61414;
? ? ? ?}
? ? ? ?#big>.box>.title>.price>.zx_pr>span{
? ? ? ? ? ?font-size: 20px;
? ? ? ?}
? ? ? ?#big>.box>.title>.price>.zx_pr{
? ? ? ? ? ?width:83px;
? ? ? ? ? ?height:50px;
? ? ? ? ? ?line-height: 50px;
? ? ? ? ? ?float: left;
? ? ? ? ? ?margin-left:2px;
? ? ? ? ? ?vertical-align: bottom;
? ? ? ? ? ?font-size:38px;
? ? ? ? ? ?color:#fff;
? ? ? ?}
? ? ? ?#big>.box>.title>.price>.buy{
? ? ? ? ? ?width:56px;
? ? ? ? ? ?height:50px;
? ? ? ? ? ?line-height: 50px;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?background:url('img/tu3.png') no-repeat;
? ? ? ? ? ?float:right;
? ? ? ? ? ?color:#f00;
? ? ? ?}
? ? ? ?#big>.box>.title>.price>.xl_yp{
? ? ? ? ? ?width:145px;
? ? ? ? ? ?height:41px;
? ? ? ? ? ?float: left;
? ? ? ? ? ?margin:4px 0 0 8px;
? ? ? ? ? ?font-size: 12px;
? ? ? ? ? ?color:#fff;
? ? ? ?}
? ? ? ?#big>.box>.title>.price>.xl_yp>p>span{
? ? ? ? ? ?margin-left:4px;
? ? ? ? ? ?width:72px;
? ? ? ? ? ?height:17px;
? ? ? ? ? ?display: inline-block;
? ? ? ? ? ?line-height: 17px;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?border-radius: 10px;
? ? ? ? ? ?background:#ffb369;
? ? ? ?}
? ? ? ?#big>.box>.title>.price>.xl_yp>p:nth-child(2){
? ? ? ? ? ?width:80px;
? ? ? ? ? ?height:20px;
? ? ? ? ? ?line-height: 20px;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?border-radius: 1px;
? ? ? ? ? ?margin-top:5px;
? ? ? ? ? ?background:rgba(0,0,0,0.2);
? ? ? ?}
? ? ? ?#big>.box>.title>.price>.xl_yp>p:nth-child(2)>strong{
? ? ? ? ? ?margin-right: 5px;
? ? ? ? ? ?font-size: 14px;
? ? ? ?}

最終效果

如圖

大家的支持就是我堅持的動力!

如果文章對你有幫助的話就請

??點贊 ??評論 ??收藏

一鍵三連哦！

如果以上內(nèi)容有任何錯誤或者不準(zhǔn)確的地方，????歡迎在下面 ?? 留個言指出!

或者你有更好的想法，歡迎一起交流學(xué)習(xí)??????????