肿瘤康复网 > html+css实现必要等商城页面

html+css实现必要等商城页面

时间：2021-02-11 22:50:58

相关推荐

头部导航栏

<body id="pagebody"><div class="header header-index"></div><div class="nav nav-index">

顶部：

<div class="clearfix"><a href="/home/index.html" class="nav-logo"><img src="/pc/common/img/master/logo.png" height="51"></a><div class="nav-search"><p><input type="text" id="searchInput" placeholder="请输入要搜索的商品"><span id="searchBtn"></span></p><ul style><li>洗面奶</li><li>电动牙刷</li><li>香水</li><li>粉底液</li><li>洗发水</li><li>袜子</li><li>面霜</li><li>皮带男</li><li>眼霜</li><li>男士内裤</li> </ul> </div><div class="nav-tab"><ul><li class="na _hover">首页</a></li><li class="na _hover">每日上新</a></li><li class="border-l"></li><li class="nav-tab-last"><div class="hover_text">了解必要<div class="hover_code gzh"><div class="cir"></div><span>关注必要微信公众号<br>了解你想了解的一切<br>小必姐在此发福利哦</span></div></div> </li><li class="nav-tab-last" id="appDownload">下载必要APP</li><li class="border-l"></li><li class="nav-tab-last"><div class="hover_text">我的必要<div class="hover_code app"><div class="cir"></div><span>扫码下载必要app<br>手机用户独享海量权益</span></div></div></li></ul></div></div></div>

内容：

<ul class="rightBar" style="margin-left: 550px; display: block;"><li class="toggle"></li><li class="rightBar-xcx-code toggle novice"><div class="coupon_red"><div class="tis">迎新福利<br> 微信扫码即得</div><div class="rightBar-title">15元</div><div class="count-down" data-time="7200000" id="count-down"></div></div><div class="rightBar-ercode"></div></li><a href=""><li class="rightBar-top"></li></a></ul><div class="shareCon"><div><p>分享<b></b></p><div class="share-main"><dl><dt><img class="share-code" src="/pc/common/img/master/ewm.jpg"/></dt><dd>扫一扫，分享给好友！</dd></dl></div></div></div><div class="banner"><div class="banner-slider"><img src="/pc/www/img/new_master/banner2.png?v=biyao_ded5987" /></div><ul class="nav-list"><li class="nav-main"><p><a href="#">咖啡</a><span>/</span><a href="#">饮食</a><span>/</span><a href="#">正餐</a></p></li><li class="nav-main"><p><a href="#">男装</a><span>/</span><a href="#">女装</a><span>/</span><a href="#">鞋靴</a></p></li><li class="nav-main"><p><a href="#">眼镜</a><span>/</span><a href="#">内衣配饰</a><span>/</span><a href="#">运动</a></p></li><li class="nav-main"><p><a href="#">美妆</a><span>/</span><a href="#">个护</a><span>/</span><a href="#">母婴</a></p></li><li class="nav-main"><p><a href="#">生鲜直供</a><span>/</span><a href="#">餐厨</a><span>/</span><a href="#">电器</a></p></li><li class="nav-main"><p><a href="#">箱包</a><span>/</span><a href="#">数码办公</a><span>/</span><a href="#">汽配</a></p></li><li class="nav-main"><p><a href="#">家纺</a><span>/</span><a href="#">家具</a><span>/</span><a href="#">家装</a></p></li><li class="nav-main"><p><a href="#">健康保健</a><span>/</span><a href="#">宠物</a><span>/</span><a href="#">礼品</a></p></li></ul></div><div class="platfor"><dl><dt></dt><dd>大牌品质</dd></dl><dl><dt></dt><dd>工厂价格</dd></dl><dl><dt></dt><dd>分期支付</dd></dl><dl><dt></dt><dd>顺丰包邮</dd></dl><dl><dt></dt><dd>无忧退款</dd></dl></div><div class="hotsale"><div class="title"><h3>热销排行</h3></div><div class="rankings"><div class="commodity"><a target="_blank" href="./index.html"><dl><dt><img src="/group1/M00/5B/7C/rBACW14_iQGAPDHzAAFphbs4KdM017.jpg" /></dt><dd><div class="priceBox"><div class="price" price="79.00"><span style="color: #F7A701; font-size: 10px; padding-left: 2px;">￥<span style="font-size:16px;">79</span></span></div><div class="mack"><span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span><span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span></div></div><div class="supplier">黛珂同原料制造商</div><div class="content">玻尿酸高保湿面膜10片26ml<span class="evaluate">20.6w+条好评</span></div></dd></dl></a></div><div class="commodity"><a target="_blank" href="#"><dl><dt><img src="/group1/M00/6C/18/rBACYV1mJZOAYMEjAAI33pKo7RQ134.jpg" /></dt><dd><div class="priceBox"><div class="price" price="59.00"><span style="color: #F7A701; font-size: 10px; padding-left: 2px;">￥<span style="font-size:16px;">59</span></span></div><div class="mack"><span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span><span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span></div></div><div class="supplier">SK2同原料制造商</div><div class="content">【温和】米酵素洁面乳<span class="evaluate">16.9w+条好评</span></div></dd></dl></a></div><div class="commodity"><a target="_blank" href="#"><dl><dt><img src="/group1/M00/58/35/rBACYV45v3CAOkVKAABinPV4D_E761.jpg" /></dt><dd><div class="priceBox"><div class="price" price="89.00"><span style="color: #F7A701; font-size: 10px; padding-left: 2px;">￥<span style="font-size:16px;">89</span></span></div><div class="mack"><span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span><span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span></div></div><div class="supplier">DIOR同原料制造商</div><div class="content">玻尿酸淡纹变色（润唇膏）<span class="evaluate">18.1w+条好评</span></div></dd></dl></a></div><div class="commodity"><a target="_blank" href="#"><dl><dt><img src="/group1/M01/5B/B6/rBACVF8jcQWAOwUtAAJLkosdGJ8018.jpg" /></dt><dd><div class="priceBox"><div class="price" price="36.00"><span style="color: #F7A701; font-size: 10px; padding-left: 2px;">￥<span style="font-size:16px;">36</span></span></div><div class="mack"><span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span><span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span></div></div><div class="supplier">希尔顿酒店床品制造商</div><div class="content">S.S.铂金缎毛巾2条装<span class="evaluate">12.5w+条好评</span></div></dd></dl></a></div><div class="commodity"><a target="_blank" href="#"><dl><dt><img src="/group1/M01/F7/00/rBACVF7Qg7aAf2NJAACymzJqRIg448.jpg" /></dt><dd><div class="priceBox"><div class="price" price="59.00"><span style="color: #F7A701; font-size: 10px; padding-left: 2px;">￥<span style="font-size:16px;">59</span></span></div><div class="mack"><span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span></div></div><div class="supplier">星巴克咖啡中国产地</div><div class="content">手冲定制咖啡6杯9.9元/杯<span class="evaluate">14.0w+条好评</span></div></dd></dl></a></div><div class="commodity"><a target="_blank" href="#"><dl><dt><img src="/group1/M01/2C/ED/rBACW1-_P7eAd7VIAABsvRc_xo4262.jpg" /></dt><dd><div class="priceBox"><div class="price" price="58.00"><span style="color: #F7A701; font-size: 10px; padding-left: 2px;">￥<span style="font-size:16px;">58</span></span></div><div class="mack"><span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span><span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span></div></div><div class="supplier">CHANEL同原料制造商</div><div class="content">炫色魅力唇膏口红<span class="evaluate">12.8w+条好评</span></div></dd></dl></a></div><div class="commodity"><a target="_blank" href="#"><dl><dt><img src="/group1/M01/E7/56/rBACVGCKgDSADycJAADrJkEfNyc604.jpg" /></dt><dd><div class="priceBox"><div class="price" price="108.00"><span style="color: #F7A701; font-size: 10px; padding-left: 2px;">￥<span style="font-size:16px;">108</span></span></div><div class="mack"><span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span><span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span></div></div><div class="supplier">AHC同原料制造商</div><div class="content">24K黄金璀璨精华（100ml）<span class="evaluate">14.1w+条好评</span></div></dd></dl></a></div><div class="commodity"><a target="_blank" href="#"><dl><dt><img src="/group1/M00/5D/8B/rBACVF5E5yyAV7YVAAGOLNdfqoA107.jpg" /></dt><dd><div class="priceBox"><div class="price" price="58.00"><span style="color: #F7A701; font-size: 10px; padding-left: 2px;">￥<span style="font-size:16px;">58</span></span></div><div class="mack"><span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span><span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span></div></div><div class="supplier">LABSERIES同原料制造商</div><div class="content">火山泥控油清洁洁面膏洗面<span class="evaluate">10.4w+条好评</span></div></dd></dl></a></div><div class="commodity"><a target="_blank" href="#"><dl><dt><img src="/group1/M00/6A/76/rBACVF1l-KqAEcGzAAFuWmii1mY835.jpg" /></dt><dd><div class="priceBox"><div class="price" price="78.00"><span style="color: #F7A701; font-size: 10px; padding-left: 2px;">￥<span style="font-size:16px;">78</span></span></div><div class="mack"><span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span><span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span></div></div><div class="supplier">雅诗兰黛同原料制造商</div><div class="content">赋妍明眸眼霜淡纹紧致<span class="evaluate">16.9w+条好评</span></div></dd></dl></a></div><div class="commodity"><a target="_blank" href="#"><dl><dt><img src="/group1/M00/2A/EC/rBACW14GpziAYJfCAAIHdIMcfiQ262.jpg" /></dt><dd><div class="priceBox"><div class="price" price="109.00"><span style="color: #F7A701; font-size: 10px; padding-left: 2px;">￥<span style="font-size:16px;">109</span></span></div><div class="mack"><span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span><span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span></div></div><div class="supplier">LANCOME同原料制造商</div><div class="content">清滢柔肤水大粉水<span class="evaluate">6.9w+条好评</span></div></dd></dl></a></div><span id="moreModule"></span></div></div><div class="footer"><div class="footer-main clearfix"><ul class="footer-detail clearfix"><li><div class="gzh"></div><ul class="clearfix"><li>扫码关注必要微信公众号</li><li>关注必要微信公众号</li><li>实时了解必要平台政策</li><li>人才招聘信息</li></ul></li><li><div class="app"></div><ul class="clearfix"><li>扫码下载必要APP</li><li>随时随地掌握上新信息</li><li>浏览、购买更便捷</li><li>体验更多黑科技</li><li>与必要面对面沟通</li></ul></li></ul></div>

底部：

<div class="footer-info"><p><a href="#" target="_blank">《用户服务协议》</a><span>|</span><a href="#" target="_blank">《隐私政策》</a><span>|</span><a href="#" target="_blank">知识产权</a><span>|</span><a href="#" target="_blank">平台公示</a><span>|</span><a href="#" target="_blank" id="biyaoRules">必要规则</a></p><p><span id="year">Copyright © , </span><span>珠海必要科技有限公司</span><span><a href="/pc/www/img/footer/ww.png" target="_blank"><img width="14" height="14" src="/pc/www/img/footer/whjy.png?v=biyao_f5f3976"></a>粤网文〔〕0969-419号</span><span><img width="14" height="14" src="/pc/www/img/footer/ghs.png?v=biyao_d0289dc"><a href="http://www./portal/registerSystemInfo?recordcode=44049102496139" target="_blank">粤公网安备44049102496139号</a></span><span><a href="https://beian./" target="_blank">粤ICP备13088531号 </a></span></p><p><span><a href="/pc/www/img/footer/by_licence.png" target="_blank">营业执照</a></span><span><a href="/home/businesslicense" target="_blank">增值电信业务经营许可证粤B2-0518</a></span><span><a href="/pc/www/img/footer/by_drugs.png" target="_blank">互联网药品信息服务资格证书</a></span><span><a href="/pc/www/img/footer/ylqx.png" target="_blank">医疗器械网络交易服务第三方平台备案凭证</a></span><span><a href="/pc/www/img/footer/by_food.png" target="_blank">食品经营许可证</a></span></p><p><span><a href="#">（粤）网械平台备字（）第00007号</a></span><span><a href="/pc/www/img/footer/publish.png" target="_blank">出版物发行业务提供服务的网络交易平台备案</a></span><span><a href="/pc/www/img/footer/wlfood.png" target="_blank">网络食品交易第三方备案凭证备案号GDWS10009</a></span></p><p><span>公司地址：珠海市唐家湾镇哈工大路1号1栋E301-15</span><span>公司电话：0756-3635580</span></p><p>必要商城提示您，产品“由某制造商出品”仅为陈述制造商既往生产经历，并不意味着相应产品与特定品牌产品相同或近似。</p></div></div>

以上仅仅为必1要商城的主页面展示（不包含js交互），如有问题欢迎指正~

如果觉得《html+css实现必要等商城页面》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。