HTML与CSS重构网易严选页面

花了两天时间利用html与CSS重构的网易严选的页面，在次纪念一下，以下展示部分代码，完整代码可见下方链接
https://download.csdn.net/download/qq_43975332/21167117

头部导航栏

<!-- 头部导航栏 -->
<div class="siteNav"><div class="g-row"><div class="navLeft"><div class="icon"></div><a href="#">因事件（疫情、特大暴雨、台风）影响，部分地区无法配送公告</a></div><div class="navRight"><div class="item"><a href="#">登录/注册</a></div><div class="item"><a href="#">我的订单</a></div><div class="item"><a href="#">会员</a></div><div class="item"><a href="#">甄选家</a></div><div class="item displayItem"><a href="#">企业采购</a><i class="buy_icon"></i><!-- 二级菜单 --><div><ul><li>企业购</li><li>礼品卡</li><li>联系我们</li></ul></div></div><div class="item displayItem"><a href="#">客户服务</a><i class="buy_icon"></i><!-- 二级菜单 --><div><ul><li>在线客服</li><li>帮助中心</li><li>商务合作</li><li>开放平台</li></ul></div></div><div class="item displayItem dowlnItem"><a href="#">APP</a><i class="phone_icon"></i><!-- 二级菜单 --><div><img src="./images/dowlnoadImg.png" alt=""><span>下载领大额新人红包</span></div></div></div></div>
</div>

头部菜单栏

<!-- 头部菜单栏 -->
<div class="funTab"><div class="g-row"><a href="#"><span class="wangYiIcon"></span></a><!-- 购物车 --><div class="shopCar"><i class="carIcon"></i><span>购物车</span><i class="numIcon">0</i></div><!-- 搜索框 --><div class="searchWrap"><a class="seachLink">七夕礼物</a><i class="seachIcon"></i><input class="input" type="text"><div class="searchBtn"><p>搜索</p></div></div></div>
</div>

一级菜单

 <!-- 一级菜单 -->
<div class="firstNav"><ul><li><a href="#">首页</a></li><li><a href="#">居家生活</a><!-- 二级菜单 --><div class="secondNav houseLife"><ul><div><!-- 标题 --><div class="title">床品件套</div><!-- 商品 --><div class="goods twoColumn"><div class="goodsLeft"><div class="goodsItem"><img src="./images/houselife/column1-1.png" alt=""><span>床品件套</span></div><div class="goodsItem"><img src="./images/houselife/column1-2.png" alt=""><span>收纳家饰</span></div><div class="goodsItem"><img src="./images/houselife/column1-3.png" alt=""><span>疫情防控</span></div><div class="goodsItem"><img src="./images/houselife/column1-4.png" alt=""><span>居家布艺</span></div><div class="goodsItem"><img src="./images/houselife/column1-5.png" alt=""><span>北欧原木</span></div><div class="goodsItem"><img src="./images/houselife/column1-6.png" alt=""><span>毛巾浴巾</span></div><div class="goodsItem"><img src="./images/houselife/column1-7.png" alt=""><span>家庭医疗</span></div><div class="goodsItem"><img src="./images/houselife/column1-8.png" alt=""><span>晾晒除味</span></div></div><div class="goodsRight"><div class="goodsItem"><img src="./images/houselife/column2-1.png" alt=""><span>抱枕靠垫</span></div><div class="goodsItem"><img src="./images/houselife/column2-2.png" alt=""><span>地毯窗帘</span></div><div class="goodsItem"><img src="./images/houselife/column2-3.png" alt=""><span>浴室用品</span></div><div class="goodsItem"><img src="./images/houselife/column2-4.png" alt=""><span>奥运特惠</span></div></div></div></div><div><div class="title">被枕褥毯</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column3-1.png" alt=""><span>被枕靠毯</span></div><div class="goodsItem"><img src="./images/houselife/column3-2.png" alt=""><span>床垫床褥</span></div></div></div><div><div class="title">办公家具</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column4-1.png" alt=""><span>办公家具</span></div></div></div><div><div class="title">卧室家具</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column5-1.png" alt=""><span>卧室家具</span></div><div class="goodsItem"><img src="./images/houselife/column5-2.png" alt=""><span>灯具</span></div><div class="goodsItem"><img src="./images/houselife/column5-3.png" alt=""><span>小件家具</span></div></div></div><div><div class="title">厨房电器</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column6-1.png" alt=""><span>厨房电器</span></div><div class="goodsItem"><img src="./images/houselife/column6-2.png" alt=""><span>厨房爆款</span></div></div></div><div><div class="title">卧室清洁</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column7-1.png" alt=""><span>品质锅具</span></div><div class="goodsItem"><img src="./images/houselife/column7-2.png" alt=""><span>餐厨配件</span></div><div class="goodsItem"><img src="./images/houselife/column7-3.png" alt=""><span>刀减砧板</span></div><div class="goodsItem"><img src="./images/houselife/column7-4.png" alt=""><span>餐具</span></div><div class="goodsItem"><img src="./images/houselife/column7-5.png" alt=""><span>水具杯壶</span></div><div class="goodsItem"><img src="./images/houselife/column7-6.png" alt=""><span>茶咖酒具</span></div><div class="goodsItem"><img src="./images/houselife/column7-7.png" alt=""><span>品茗茶具</span></div></div></div><div><div class="title">客厅家具</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column8-1.png" alt=""><span>客厅家具</span></div><div class="goodsItem"><img src="./images/houselife/column8-2.png" alt=""><span>家饰</span></div><div class="goodsItem"><img src="./images/houselife/column8-3.png" alt=""><span>收纳</span></div><div class="goodsItem"><img src="./images/houselife/column8-4.png" alt=""><span>艺术藏品</span></div></div></div><div><div class="title">宠物生活</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column9-1.png" alt=""><span>宠物用品</span></div><div class="goodsItem"><img src="./images/houselife/column9-2.png" alt=""><span>宠物食品</span></div></div></div></ul></div></li><li><a href="#">美食酒水</a><!-- 二级菜单 --><div class="secondNav foodNav"><ul><div><div class="title">休闲零食</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column3-1.png" alt=""><span>被枕靠毯</span></div><div class="goodsItem"><img src="./images/houselife/column3-2.png" alt=""><span>床垫床褥</span></div></div></div><div><div class="title">坚果蜜饯</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column4-1.png" alt=""><span>办公家具</span></div></div></div><div><div class="title">冲饮茗茶</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column5-1.png" alt=""><span>卧室家具</span></div><div class="goodsItem"><img src="./images/houselife/column5-2.png" alt=""><span>灯具</span></div><div class="goodsItem"><img src="./images/houselife/column5-3.png" alt=""><span>小件家具</span></div></div></div><div><div class="title">滋补保健</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column6-1.png" alt=""><span>厨房电器</span></div><div class="goodsItem"><img src="./images/houselife/column6-2.png" alt=""><span>厨房爆款</span></div></div></div><div><div class="title">酒水乳品</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column7-1.png" alt=""><span>品质锅具</span></div><div class="goodsItem"><img src="./images/houselife/column7-2.png" alt=""><span>餐厨配件</span></div><div class="goodsItem"><img src="./images/houselife/column7-3.png" alt=""><span>刀减砧板</span></div><div class="goodsItem"><img src="./images/houselife/column7-4.png" alt=""><span>餐具</span></div><div class="goodsItem"><img src="./images/houselife/column7-5.png" alt=""><span>水具杯壶</span></div><div class="goodsItem"><img src="./images/houselife/column7-6.png" alt=""><span>茶咖酒具</span></div><div class="goodsItem"><img src="./images/houselife/column7-7.png" alt=""><span>品茗茶具</span></div></div></div><div><div class="title">粮食调味</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column8-1.png" alt=""><span>客厅家具</span></div><div class="goodsItem"><img src="./images/houselife/column8-2.png" alt=""><span>家饰</span></div><div class="goodsItem"><img src="./images/houselife/column8-3.png" alt=""><span>收纳</span></div><div class="goodsItem"><img src="./images/houselife/column8-4.png" alt=""><span>艺术藏品</span></div></div></div><div><div class="title">休闲零食</div><div class="goods"><div class="goodsItem"><img src="./images/houselife/column3-1.png" alt=""><span>被枕靠毯</span></div><div class="goodsItem"><img src="./images/houselife/column3-2.png" alt=""><span>床垫床褥</span></div></div></div></ul></div></li><li><a href="#">个护清洁</a></li><li><a href="#">服饰鞋包</a></li><li><a href="#">母婴亲子</a></li><li><a href="#">运动旅行</a></li><li><a href="#">数码家电</a></li><li><a href="#">严选全球</a></li><li class="line">|</li><li><a href="#">为你严选</a></li><li><a href="#">众筹</a></li></ul>
</div>

轮播图

<div class="imgBanner"><ul><li><img src="./images/banner-2.png" alt=""></li><li><img src="./images/banner-1.png" alt=""></li></ul><!-- 左右按钮 --><div class="nextBtn lbtn"></div><div class="nextBtn rbtn"></div>
</div>

HTML与CSS重构网易严选页面相关推荐

小程序 node.js mysql_基于Node.js+MySQL开发的开源微信小程序B2C商城（页面高仿网易严选）...
高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城功能和数据库参考ecshop 服务端api基于Node.js+Think ...
node 小程序 php,基于Node.js+MySQL开发的开源微信小程序B2C商城（页面高仿网易严选）...
高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城功能和数据库参考ecshop 服务端api基于Node.js+Think ...
基于Node.js+MySQL开发的开源微信小程序B2C商城（页面高仿网易严选）
高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城功能和数据库参考ecshop 服务端api基于Node.js+Think ...
基于Node.js+MySQL开发的开源微信小程序B2C商城（页面高仿网易严选） 1
高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城功能和数据库参考ecshop 服务端api基于Node.js+Think ...
一步一步 copy163：网易严选 ---- vue-cli
面试点组件间通信生命周期函数路由 - 参数 - 重定向 vuex 参考网易严选商城小程序全栈开发,域名备案中近期上线(mpvue+koa2+mysql) 小程序服务端源码地址小程序源码地址 ...
网易严选企业级微前端解决方案与落地实践
本文作者:张浩 (网易严选技术团队) 张浩,网易资深前端开发工程师,严选数据产品前端负责人.先后负责过网易企业邮箱.网易有钱.网易严选等大型项目的前端架构设计及开发.当前致力于大前端与通用能力建设.工 ...
网易严选APP工程架构演进
一.前言互联网技术发展到今天,移动互联网仍然是一个重要的战略核心,APP也仍然是绝大多数互联网企业用户获客留存的核心渠道. 根据2021年移动应用趋势报告[1],移动应用程序的受欢迎程度仍在持续增长 ...
【网易严选】iOS持续集成打包（Jenkins+fastlane+nginx）
本文来自网易云社区作者:孙娇严选iOS客户端的现有打包方式是通过远程连接打包机执行脚本去打包,打完包会输出相应的ipa的二维码,扫一扫二维码可以安装,但是随着测试队伍的壮大,外包同学越来越多,在打 ...
android 网易item广告,Android仿网易严选商品详情页
仿照网易严选商品详情页面,整个页面分为两个部分,上面一部分是Native的ScrollView,下面一部分则是WebView,其目的是为了可以进行分步加载.滑动到ScrollView底部时,继续向上拖 ...
用 Python 分析网易严选 Bra 销售信息，告诉你她们真实的 Size
今天通过爬虫数据进行分析,一起来看看网易严选商品评论的获取和分析. 声明:这是一篇超级严肃的技术文章,请本着学习交流的态度阅读,谢谢! ! 网易商品评论爬取分析网页评论分析进入到网易严选官网,搜 ...

HTML与CSS重构网易严选页面

头部导航栏

头部菜单栏

一级菜单

轮播图

HTML与CSS重构网易严选页面相关推荐

最新文章

热门文章