html布局_纯HTML实现某宝优惠券、商品列表和活动悬浮等布局（文末有源码）

最新推荐文章于 2024-07-17 01:14:41 发布

weixin_39930557

最新推荐文章于 2024-07-17 01:14:41 发布

阅读量901

点赞数

文章标签： html布局

简介

最近温习一下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代码

更多优惠推荐