花瓣官网设计网站,杭州大江东建设局网站,wordpress内容页显示tag,wordpress图片链接更换域名一、作品介绍
HTMLCSSJS制作一个高仿小米官网网站#xff0c;包含首页、商品详情页、确认订单页、订单支付页、收货地址管理页、新增收获地址页等6个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。 二、页面结构
1. 顶部导航栏
包含Logo、主导航菜…一、作品介绍
HTMLCSSJS制作一个高仿小米官网网站包含首页、商品详情页、确认订单页、订单支付页、收货地址管理页、新增收获地址页等6个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。 二、页面结构
1. 顶部导航栏
包含Logo、主导航菜单手机、电视、笔记本等分类、搜索框、用户中心、购物车
2. 轮播横幅
大型轮播图展示区展示最新产品促销信息和活动广告
3. 快速分类导航
横向排列的产品快速入口包含手机电视笔记本平板穿戴家电等主要品类
4. 闪购区域
展示限时特惠商品包含倒计时显示和商品价格信息
5. 商品推荐区
网格式布局展示热门商品每个商品卡片包含产品图片、名称、简介、价格等信息
6. 内容专区
分类展示不同品类产品左侧大图右侧多个小图的组合展示方式
7. 侧边工具栏
固定在页面右侧包含在线客服返回顶部等功能按钮
8. 页脚
包含售后服务、联系方式、商城介绍、关注我们等信息板块 三、作品演示 四、代码目录 五、首页代码
!DOCTYPE html
html langzhheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title仿小米官网 - 首页/titlelink typetext/css hrefcss/family.css relstylesheet /link typetext/css hrefcss/all.min.css relstylesheet //headbodydiv classwater-mark water-mark-left公众号【span classgzh-tips木番薯科技/span】span classym-tips获取源码/span/divdiv classwater-mark water-mark-right公众号【span classgzh-tips木番薯科技/span】span classym-tips获取源码/span/divdiv classmin-h-screen bg-gray-100header classfixed top-0 left-0 right-0 z-50 bg-white shadow-mdnav classcontainer mx-auto px-4div classflex items-center justify-between h-16div classflex items-centera href# classtext-2xl font-[Pacifico] text-customlogo/adiv classml-10 flex space-x-8a href# classtext-gray-700 hover:text-custom手机/aa href# classtext-gray-700 hover:text-custom电视/aa href# classtext-gray-700 hover:text-custom笔记本/aa href# classtext-gray-700 hover:text-custom平板/aa href# classtext-gray-700 hover:text-custom智能穿戴/aa href# classtext-gray-700 hover:text-custom家电/a/div/divdiv classflex items-center space-x-6div classrelativeinput typetext placeholder搜索商品 classw-64 px-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-custom text-sm/button classabsolute right-3 top-2.5 text-gray-400i classfas fa-search/i/button/diva href# classtext-gray-700 hover:text-customi classfar fa-user/i/aa href# classtext-gray-700 hover:text-customi classfas fa-shopping-cart/i/a/div/div/nav/headermain classpt-16div classglidediv classglide__track data-glide-eltrackul classglide__slidesli classglide__slideimg src./images/b1.jpg alt手机促销 classw-full h-[600px] object-cover//lili classglide__slideimg src./images/b2.jpg alt笔记本促销 classw-full h-[600px] object-cover//lili classglide__slideimg src./images/b3.jpg alt电视促销 classw-full h-[600px] object-cover//li/ul/divdiv classglide__bullets data-glide-elcontrols[nav]button classglide__bullet data-glide-dir0/buttonbutton classglide__bullet data-glide-dir1/buttonbutton classglide__bullet data-glide-dir2/button/div/divdiv classcontainer mx-auto px-4 py-8div classgrid grid-cols-6 gap-6a href# classflex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadowimg src./images/c1.jpg alt手机 classw-20 h-20 object-cover mb-2/span classtext-gray-700手机/span/aa href# classflex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadowimg src./images/c2.jpg alt电视 classw-20 h-20 object-cover mb-2/span classtext-gray-700电视/span/aa href# classflex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadowimg src./images/c3.jpg alt笔记本 classw-20 h-20 object-cover mb-2/span classtext-gray-700笔记本/span/aa href# classflex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadowimg src./images/c4.jpg alt平板 classw-20 h-20 object-cover mb-2/span classtext-gray-700平板/span/aa href# classflex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadowimg src./images/c5.jpg alt穿戴 classw-20 h-20 object-cover mb-2/span classtext-gray-700穿戴/span/aa href# classflex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadowimg src./images/c6.jpg alt家电 classw-20 h-20 object-cover mb-2/span classtext-gray-700家电/span/a/divdiv classmt-12div classflex items-center justify-between mb-6h2 classtext-2xl font-bold限时闪购/h2div classflex items-center space-x-2 text-lgspan classtext-custom距结束还剩/spanspan idcountdown classfont-mono/span/div/divdiv classgrid grid-cols-4 gap-6a href./product-details.htmldiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/g1.jpg alt手机特惠 classw-full h-64 object-cover mb-4/h3 classtext-lg font-semibold mb-2全新旗舰手机/h3p classtext-gray-600 mb-2骁龙8 Gen 3 | 徕卡光学/pp classtext-custom text-xl font-bold¥4999/p/div/adiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/g2.jpg alt耳机特惠 classw-full h-64 object-cover mb-4/h3 classtext-lg font-semibold mb-2无线降噪耳机/h3p classtext-gray-600 mb-2主动降噪 | 40小时续航/pp classtext-custom text-xl font-bold¥699/p/divdiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/g3.jpg alt手表特惠 classw-full h-64 object-cover mb-4/h3 classtext-lg font-semibold mb-2智能手表Pro/h3p classtext-gray-600 mb-2血氧监测 | 14天续航/pp classtext-custom text-xl font-bold¥999/p/divdiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/g4.jpg alt平板特惠 classw-full h-64 object-cover mb-4/h3 classtext-lg font-semibold mb-2平板电脑2024款/h3p classtext-gray-600 mb-2120Hz高刷 | 磁吸充电/pp classtext-custom text-xl font-bold¥2999/p/div/div/divdiv classmt-12h2 classtext-2xl font-bold mb-6精选推荐/h2div classgrid grid-cols-5 gap-6div classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/j1.jpg alt笔记本推荐 classw-full h-48 object-cover mb-4/h3 classtext-lg font-semibold mb-2轻薄本Pro/h3p classtext-gray-600 text-sm mb-213代酷睿 | 2.8K高清屏/pp classtext-custom text-xl font-bold¥5999/p/divdiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/j2.jpg alt电视推荐 classw-full h-48 object-cover mb-4/h3 classtext-lg font-semibold mb-2全面屏电视/h3p classtext-gray-600 text-sm mb-2量子点 | 4K HDR/pp classtext-custom text-xl font-bold¥3999/p/divdiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/j3.jpg alt扫地机器人推荐 classw-full h-48 object-cover mb-4/h3 classtext-lg font-semibold mb-2扫拖一体机器人/h3p classtext-gray-600 text-sm mb-2激光导航 | 自动集尘/pp classtext-custom text-xl font-bold¥2499/p/divdiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/j4.jpg alt空净推荐 classw-full h-48 object-cover mb-4/h3 classtext-lg font-semibold mb-2智能空气净化器/h3p classtext-gray-600 text-sm mb-2除醛除菌 | 静音设计/pp classtext-custom text-xl font-bold¥1499/p/divdiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/j5.jpg alt音箱推荐 classw-full h-48 object-cover mb-4/h3 classtext-lg font-semibold mb-2智能音箱/h3p classtext-gray-600 text-sm mb-2AI语音 | 环绕音效/pp classtext-custom text-xl font-bold¥399/p/div/div/divdiv classmt-12h2 classtext-2xl font-bold mb-6智能生活/h2div classgrid grid-cols-2 gap-6div classrelative overflow-hidden rounded-lgimg src./images/z1.jpg alt智能家居 classw-full h-[400px] object-cover/div classabsolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/60 to-transparent text-whiteh3 classtext-2xl font-bold mb-2智能家居/h3p classmb-4打造智能互联生活/pa href# class!rounded-button inline-block px-6 py-2 bg-white text-custom了解更多/a/div/divdiv classgrid grid-cols-2 gap-6div classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/z2.jpg alt智能门铃 classw-full h-48 object-cover mb-4/h3 classtext-lg font-semibold智能门铃/h3p classtext-custom mt-2¥299/p/divdiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/z3.jpg alt智能灯泡 classw-full h-48 object-cover mb-4/h3 classtext-lg font-semibold智能灯泡/h3p classtext-custom mt-2¥59/p/divdiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/z4.jpg alt智能摄像头 classw-full h-48 object-cover mb-4/h3 classtext-lg font-semibold智能摄像头/h3p classtext-custom mt-2¥199/p/divdiv classbg-white rounded-lg p-4 hover:shadow-lg transition-shadowimg src./images/z5.jpg alt智能门锁 classw-full h-48 object-cover mb-4/h3 classtext-lg font-semibold智能门锁/h3p classtext-custom mt-2¥999/p/div/div/div/div/div/maindiv classfixed right-6 bottom-6 flex flex-col space-y-4button class!rounded-button w-12 h-12 bg-white shadow-lg flex items-center justify-center text-gray-600 hover:text-customi classfas fa-headset/i/buttonbutton idbackToTop class!rounded-button w-12 h-12 bg-white shadow-lg flex items-center justify-center text-gray-600 hover:text-customi classfas fa-arrow-up/i/button/divfooter classbg-white mt-12 py-12div classcontainer mx-auto px-4div classgrid grid-cols-5 gap-8 mb-8divh3 classfont-bold mb-4帮助中心/h3ul classspace-y-2lia href# classtext-gray-600 hover:text-custom账户管理/a/lilia href# classtext-gray-600 hover:text-custom购物指南/a/lilia href# classtext-gray-600 hover:text-custom订单操作/a/li/ul/divdivh3 classfont-bold mb-4服务支持/h3ul classspace-y-2lia href# classtext-gray-600 hover:text-custom售后政策/a/lilia href# classtext-gray-600 hover:text-custom自助服务/a/lilia href# classtext-gray-600 hover:text-custom相关下载/a/li/ul/divdivh3 classfont-bold mb-4线下门店/h3ul classspace-y-2lia href# classtext-gray-600 hover:text-custom授权体验店/a/lilia href# classtext-gray-600 hover:text-custom服务网点/a/lilia href# classtext-gray-600 hover:text-custom零售门店/a/li/ul/divdivh3 classfont-bold mb-4关于我们/h3ul classspace-y-2lia href# classtext-gray-600 hover:text-custom了解我们/a/lilia href# classtext-gray-600 hover:text-custom加入我们/a/lilia href# classtext-gray-600 hover:text-custom联系我们/a/li/ul/divdivh3 classfont-bold mb-4关注我们/h3div classflex space-x-4a href# classtext-gray-600 hover:text-custom text-xli classfab fa-weixin/i/aa href# classtext-gray-600 hover:text-custom text-xli classfab fa-weibo/i/aa href# classtext-gray-600 hover:text-custom text-xli classfab fa-qq/i/a/div/div/divdiv classborder-t pt-8 text-center text-gray-500pCopyright © 2024 logo商城. All rights reserved./p/div/div/footer/div/body
/html六、获取代码
内附源码含6个页面。欢迎留言欢迎关注。
