失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 用HTML+CSS+less做一个rem布局苏宁手机端商城页面含源码分享

用HTML+CSS+less做一个rem布局苏宁手机端商城页面含源码分享

时间:2024-01-31 02:44:57

相关推荐

用HTML+CSS+less做一个rem布局苏宁手机端商城页面含源码分享

效果如下所示:

less需要事先下载node,具体下载过程百度搜索安装即可

整体文件夹如下:

源码分享:/s/1IqhFh7V3SoTW8KShGP7kgA 提取码:d0el

images和upload文件夹是图片区域

主要编写css部分(链接下载)

html源码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/nor.css"><link rel="stylesheet" href="css/index.css"><title>Document</title></head><body><div class="search-content"><a href="#" class="classify"></a><div class="search"><form action=""><input type="search" value="生活家电 爆品半价抢"></form></div><a href="#" class="login">登陆</a></div><div class="banner"><img src="upload/banner.gif" alt=""></div><div class="ad"><a href="#"><img src="upload/ad1.gif" alt=""></a><a href="#"><img src="upload/ad2.gif" alt=""></a><a href="#"><img src="upload/ad3.gif" alt=""></a></div><nav><a href="#"><img src="upload/ttdj.png" alt=""><span>天天低价</span></a><a href="#"><img src="upload/cs.png" alt=""><span>苏宁超市</span></a><a href="#"><img src="upload/pg.png" alt=""><span>苏宁拼购</span></a><a href="#"><img src="upload/sj.png" alt=""><span>5G手机</span></a><a href="#"><img src="upload/jd.png" alt=""><span>苏宁家电</span></a><a href="#"><img src="upload/mfsg.png" alt=""><span>免费水果</span></a><a href="#"><img src="upload/xxl.png" alt=""><span>赚钱消消乐</span></a><a href="#"><img src="upload/qdyl.png" alt=""><span>签到有礼</span></a><a href="#"><img src="upload/ljzx.png" alt=""><span>领卷中心</span></a><a href="#"><img src="upload/pd.png" alt=""><span>更多频道</span></a></nav></body></html>

如果觉得《用HTML+CSS+less做一个rem布局苏宁手机端商城页面含源码分享》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。