簡(jiǎn)介

最近溫習(xí)一下HTML5+CSS3的一些特性，準(zhǔn)備找個(gè)高仿的目標(biāo)，最后選擇了某寶粉絲福利頁(yè)面，因?yàn)檫@個(gè)頁(yè)面包含的元素比較多。例如：頭部品牌信息懸浮、商品屬性、優(yōu)惠券、商品類(lèi)別等。

實(shí)現(xiàn)效果

實(shí)現(xiàn)效果

設(shè)計(jì)思路

如上圖所示，頁(yè)面共分為4個(gè)區(qū)域，分別為：
1、商品圖片區(qū)
2、商品屬性、優(yōu)惠券區(qū)(包括：商品名稱(chēng)、價(jià)格、優(yōu)惠情況等)
3、推薦商品列表區(qū)
4、浮動(dòng)框備注：最后優(yōu)化代碼將商品圖片區(qū)和商品屬性、優(yōu)惠券區(qū)合并為一個(gè)。

代碼實(shí)現(xiàn)

第一步：整體css樣式編寫(xiě)

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}

第二步：商品區(qū)布局

HTML代碼

tsc服飾海外專(zhuān)營(yíng)店

CHAMPION冠軍男女同款美版經(jīng)典草寫(xiě)印花LOGO 休閑T恤短袖 GT23H

用券后￥59.00 現(xiàn)價(jià)￥89426筆成交 ￥30 使用期限 2020.05.09-2020.05.14 立即領(lǐng)券

CSS代碼

推薦商品列表區(qū)

HTML代碼

更多優(yōu)惠推薦 ￥30

CHAMPION冠軍男女同款美版經(jīng)典草寫(xiě)印花LOGO 休閑T恤短袖 GT23H

89.00447筆成交

用券后￥59.00 優(yōu)惠券30領(lǐng)取 ￥20

CHAMPION冠軍男女同款美版經(jīng)典草寫(xiě)印花LOGO 休閑T恤短袖 GT23H

39.90177筆成交

用券后￥19.90 優(yōu)惠券￥30領(lǐng)取

CSS代碼

浮動(dòng)框布局

HTML代碼

源碼地址

https://100boot.cn/public/coupon-web-demo-20200513.zip

總結(jié)

以上是生活随笔為你收集整理的悬浮框_纯HTML实现某宝优惠券、商品列表和活动悬浮等布局（文末有源码）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。