簡介

最近溫習一下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代碼

tsc服飾海外專營店

CHAMPION冠軍男女同款美版經典草寫印花LOGO 休閑T恤短袖 GT23H

用券后￥59.00 現價￥89426筆成交 ￥30 使用期限 2020.05.09-2020.05.14 立即領券

CSS代碼

推薦商品列表區

HTML代碼

更多優惠推薦 ￥30

CHAMPION冠軍男女同款美版經典草寫印花LOGO 休閑T恤短袖 GT23H

89.00447筆成交

用券后￥59.00 優惠券30領取 ￥20

CHAMPION冠軍男女同款美版經典草寫印花LOGO 休閑T恤短袖 GT23H

39.90177筆成交

用券后￥19.90 優惠券￥30領取

CSS代碼

浮動框布局

HTML代碼

源碼地址

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。