html+css实现必要等商城页面
2024-04-15 01:38:18
头部导航栏
<body id="pagebody">
<div class="header header-index"></div>
<div class="nav nav-index">顶部：
<div class="clearfix"><a href="http://www.biyao.com/home/index.html" class="nav-logo"><img src="http://static2.biyao.com/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="http://static3.biyao.com/pc/common/img/master/ewm.jpg"/></dt><dd>扫一扫，分享给好友！</dd></dl></div></div>
</div>
<div class="banner"><div class="banner-slider"><img src="http://static1.biyao.com/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="http://bfs.biyao.com/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="http://bfs.biyao.com/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="http://bfs.biyao.com/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="http://bfs.biyao.com/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="http://bfs.biyao.com/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="http://bfs.biyao.com/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="http://bfs.biyao.com/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="http://bfs.biyao.com/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="http://bfs.biyao.com/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="http://bfs.biyao.com/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 © 2022, BIYAO.COM</span><span>珠海必要科技有限公司</span><span><a href="http://static3.biyao.com/pc/www/img/footer/ww.png" target="_blank"><img width="14" height="14" src="http://static4.biyao.com/pc/www/img/footer/whjy.png?v=biyao_f5f3976"></a>粤网文〔2018〕0969-419号</span><span><img width="14" height="14" src="http://static.biyao.com/pc/www/img/footer/ghs.png?v=biyao_d0289dc"><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44049102496139" target="_blank">粤公网安备44049102496139号</a></span><span><a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备13088531号 </a></span></p><p><span><a href="http://static1.biyao.com/pc/www/img/footer/by_licence.png" target="_blank">营业执照</a></span><span><a href="/home/businesslicense" target="_blank">增值电信业务经营许可证 粤B2-20170518</a></span><span><a href="http://static2.biyao.com/pc/www/img/footer/by_drugs.png" target="_blank">互联网药品信息服务资格证书</a></span><span><a href="http://static3.biyao.com/pc/www/img/footer/ylqx.png" target="_blank">医疗器械网络交易服务第三方平台备案凭证</a></span><span><a href="http://static4.biyao.com/pc/www/img/footer/by_food.png" target="_blank">食品经营许可证</a></span> </p><p><span><a href="#">（粤）网械平台备字（2018）第00007号</a></span><span><a href="http://static.biyao.com/pc/www/img/footer/publish.png" target="_blank">出版物发行业务提供服务的网络交易平台备案</a></span><span><a href="http://static1.biyao.com/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实现必要等商城页面相关推荐
- 大学web基础期末大作业~仿品优购商城页面制作(HTML+CSS+JavaScript)
HTML网页设计期末课程大作业~~仿品优购页面制作(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~仿品优购网页作业HTML+CSS+JavaScript实现,共 ...
- HTML5期末大作业：商城页面——仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成...
HTML5期末大作业:商城页面--仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末, 你 ...
- 魔坊APP项目-17-种植园，商城页面、服务端提供商品api，解决App打包编译以后的跨域限制、客户端获取商品列表并进行展示，集成Alipayplus模块完成支付
种植园 一.商城页面 orchard.html,代码: <!DOCTYPE html> <html> <head><title>用户中心</tit ...
- HTML+CSS大作业：商城网站设计——仿天猫购物商城(7页) HTML+CSS+JavaScript
HTML+CSS大作业:商城网站设计--仿天猫购物商城(7页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材 ...
- login.php静态页面的设计,ps+div+css打造蓝色后台--login页面设计
ps+p+css打造蓝色后台 做到兼容主流浏览器 如何设计一个页面? 如何切片才能更好的配合实现? 如何考虑兼容性? 如何用p+css做后台的百分比布局? Login页面设计 先在photoshop中 ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
- CSS入门二、美化页面元素
零.文章目录 CSS入门二.美化页面元素 1.字体属性 CSS Fonts (字体)属性用于定义字体系列.大小.粗细.和文字样式(如斜体) (1)字体系列font-family font-family ...
- CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
最新文章
- Swoole入门介绍
- 有源晶振和无源晶振的区别
- 一口一个，超灵活的Python迷你项目
- 18种方法让你集中精力工作
- Java单例模式代码实现方式
- JavaEE基本了解
- python学习之自习语法(20180626_update)
- 互联网公司面试经历（转载）
- Controller上使用@CrossOrigin注解
- Linux上Libevent的安装
- LeetCode 1088. 易混淆数 II（回溯/BFS）
- DOM之innerHTML属性
- ElementUI-自定义模板包含编辑与删除的功能
- 此刻心情--我为什么不找女朋友
- 微软更新补丁目录查询
- 人口增长模型 源代码
- python爬虫解决极验验证码问题
- 惯性导航技术, IMU, AHRS
- 基于YOLOv5的银行卡卡号识别（一）
- 【数据库内核】基于代价的优化器引擎-代价估算
热门文章
- 我的Lenovo ThinkPad R60e 键盘按键失灵!
- JAVA入门万字总结
- 极客日报：华为拿百亿资金给员工分红，每股1.58元；苹果将推出M2芯片入门级MacBook Pro；Flutter 2.10发布
- 梦龙雪糕新代言人近日亮相，带来不止视觉与味蕾的欢愉享受！
- tyvector在matlab中代表,MATLAB曲线绘制
- C++偶遇-菱形继承
- 7月App Store下架逾万款游戏，再度加大版号审核力度
- 阿里云云边一体容器架构创新论文被云计算顶会 ACM SoCC 录用
- 如果不能从做事转入治人，那么经年的螺丝钉岁月，会让你既无暇提高自己，也无法积累资源，在锈迹斑斑以后被新的螺丝钉换掉。
- MATLAB的学习——基本操作和矩阵操作