深圳优秀网站设计,seo哪个软件好,青羊区建设和交通网站,艺考培训学校前言
这是一个简单的商城网站#xff0c;代码部分为HTML CSS 和少量JS代码
项目总览
一、头部区域 头部的 购物车 和 手机 用的是 文字图标#xff0c;所以效果可以和文字一样 购物车右上角用的是绝对定位 logo用的是 h1 标签#xff0c;用来提高网站搜索排名 二、banne…前言
这是一个简单的商城网站代码部分为HTML CSS 和少量JS代码
项目总览
一、头部区域 头部的 购物车 和 手机 用的是 文字图标所以效果可以和文字一样 购物车右上角用的是绝对定位 logo用的是 h1 标签用来提高网站搜索排名 二、banner区域 banner区域左侧导航 :hover 和 轮播图 轮播图用了部分JS代码 三、主体区域 新鲜好物 人气推荐 热门品牌 居家 居家 :hover 为过渡 美食 服饰 母婴 最新专题 四、尾部区域-版权区域 图标没找到相应的 精灵图 所以也是用的 文字图标 源码 HTMLindex.html代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0!-- meta:desc --meta namedescription content小兔鲜儿官网致力于打造全球最大的食品、生鲜电商购物平台!-- meta:kw --meta namekeywords content小兔鲜儿食品生鲜服装家电电商购物title小兔鲜儿 - 新鲜 惠民 快捷/titlelink relshortcut icon hreffavicon.ico typeimage/x-icon!-- 引入字体图标样式 --link relstylesheet href./iconfont/iconfont.css!-- 引入相关样式 --link relstylesheet href./CSS/base.csslink relstylesheet href./CSS/common.csslink relstylesheet href./CSS/index.css
/head
body!-- 快捷导航开始 --div classshortcutdiv classwrapperullia href#请先登录/a/lilia href#免费注册/a/lilia href#我的订单/a/lilia href#会员中心/a/lilia href#帮助中心/a/lilia href#关于我们/a/lilia href#span classiconfont icon-shouji1手机版/span/a/li/ul/div/div!-- 快捷导航结束 --!-- 头部-布局开始 --div classheader wrapper!-- logo --div classlogoh1a href#小兔鲜儿/a/h1/div!-- 导航 --div classnavullia href#首页/a/lilia href#居家/a/lilia href#美食/a/lilia href#服饰/a/lilia href#母婴/a/lilia href#个护/a/lilia href#严选/a/lilia href#数码/a/lilia href#运动/a/li/ul/div!-- 搜索 --div classsearchspan classiconfont icon-search/spaninput typetext placeholder搜一搜/div!-- 购物车 --div classcarta href#span classiconfont icon-gouwuche/span/ai6/i/div/div!-- 头部-布局结束 --!-- banner开始 --div classbannerdiv classwrapper!-- 图片 --ul classpiclia href#img src./uploads/banner/banner1.jpg alt/a/lilia href#img src./uploads/banner/banner2.jpg alt/a/lilia href#img src./uploads/banner/banner3.jpg alt/a/lilia href#img src./uploads/banner/banner4.jpg alt/a/lilia href#img src./uploads/banner/banner5.jpg alt/a/li/ul!-- 箭头 --!-- 上一张 prev --a href# classprevi classiconfont icon-danjiantou-zuoyouqiehuan/i/a!-- 下一张 next --a href# classnexti classiconfont icon-danjiantou-zuoyouqiehuan1/i/a!-- 侧导航 --div classsubnavullia href#居家/aa href#茶咖酒具/aa href#水具杯壶/a/lilia href#美食/aa href#网易黑猪/aa href#水产海鲜/a/lilia href#服饰/aa href#室外拖鞋/aa href#春夏潮鞋/a/lilia href#母婴/aa href#T恤/polo/衬衫/aa href#卫衣/毛衫/a/lilia href#个护/aa href#家庭清洁/aa href#浴室用品/a/lilia href#严选/aa href#卫浴用品/aa href#高级珠宝/a/lilia href#数码/aa href#影音娱乐/aa href#乐器/a/lilia href#运动/aa href#登机箱/aa href#托运箱/a/lilia href#杂项/aa href#乐器杂项/a/lilia href#品牌/aa href#品牌推荐/a/li/ul/div!-- 圆点指示器 --div classcircle/div/div/div!-- banner结束 --!-- 新鲜好物开始 --div classgoods wrapper!-- 标题 --div classtitlediv classlefth3新鲜好物/h3p新鲜出炉 品质靠谱/p/divdiv classrighta href# classmore查看更多span classiconfont icon-arrow-right/span/a/div/div!-- 内容 --div classbdullia href#div classpicimg src./uploads/goods/goods1.jpg alt/divdiv classtexth4魔术盒快客杯旅行盖碗茶具套装/h4p¥148.00/p/div/a/lilia href#div classpicimg src./uploads/goods/goods2.jpg alt/divdiv classtexth4情侣款时尚户外轻型徒步鞋环保大底/h4p¥364.00/p/div/a/lilia href#div classpicimg src./uploads/goods/goods3.jpg alt/divdiv classtexth4Kenroll女士防滑夏季人字沙滩拖鞋/h4p¥99.00/p/div/a/lilia href#div classpicimg src./uploads/goods/goods4.jpg alt/divdiv classtexth42021春季新品宝宝四季连体哈衣59-90cm/h4p¥55.00/p/div/a/li/ul/div/div!-- 新鲜好物结束 --!-- 人气推荐开始 --div classrecommend wrapper!-- 标题 --div classtitlediv classlefth3人气推荐/h3p人气爆款 不容错过/p/div/div!-- 内容 --div classbdullia href#div classpicimg src./uploads/recommend/recommend1.jpg alt/divdiv classtexth4特惠推荐/h4p它们最实惠/p/div/a/lilia href#div classpicimg src./uploads/recommend/recommend2.jpg alt/divdiv classtexth4爆款推荐/h4p它们最受欢迎/p/div/a/lilia href#div classpicimg src./uploads/recommend/recommend3.jpg alt/divdiv classtexth4一站买全/h4p使用场景下精心优选/p/div/a/lilia href#div classpicimg src./uploads/recommend/recommend4.jpg alt/divdiv classtexth4领券中心/h4p更多超值优惠券/p/div/a/li/ul/div/div!-- 人气推荐结束 --!-- 热门品牌开始 --div classbranddiv classwrapper!-- 标题 --div classtitlediv classlefth3热门品牌/h3p国际经典 品质保证/p/divdiv classbuttona href# classprevspan classiconfont icon-danjiantou-zuoyouqiehuan/span/aa href# classnextspan classiconfont icon-danjiantou-zuoyouqiehuan1/span/a/div/div!-- 内容 --div classbdullia href#div classpicimg src./uploads/热门品牌/热门品牌1.jpg alt/div/a/lilia href#div classpicimg src./uploads/热门品牌/热门品牌2.jpg alt/div/a/lilia href#div classpicimg src./uploads/热门品牌/热门品牌3.jpg alt/div/a/lilia href#div classpicimg src./uploads/热门品牌/热门品牌4.jpg alt/div/a/lilia href#div classpicimg src./uploads/热门品牌/热门品牌5.jpg alt/div/a/li/ul/div/div/div!-- 热门品牌结束 --!-- 居家开始 --div classhome wrapper!-- 标题 --div classtitlediv classlefth3居家/h3/divdiv classrightullia href#茶咖酒具/a/lilia href#水具杯壶/a/lilia href#宠物食品/a/lilia href#宠物用品/a/li/ula href# classmore查看更多span classiconfont icon-arrow-right/span/a/div/div!-- 内容 --div classcontentdiv classlefta href#img src./uploads/home/home_left.jpg alt/a/divdiv classrightullia href#div classpicimg src./uploads/home/home_01.jpg alt/divdiv classtxtp classhead日式黑陶功夫茶组双侧把茶具礼盒装/pp classdesc日式风格单把设计防烫隔热美观大气/pp classprice¥288.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/home/home_02.jpg alt/divdiv classtxtp classhead五谷丰登好兆头白酒杯壶套装一壶五杯骰子/pp classdesc纯手工精制每一个细节都精益求精源自20多年经验的老师傅精心手作/pp classprice¥188.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/home/home_03.jpg alt/divdiv classtxtp classhead魔术盒快客杯旅行盖碗茶具套装/pp classdesc轻松收纳携带方便随时随地品茶/pp classprice¥148.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/home/home_04.png alt/divdiv classtxtp classhead大师监制龙泉青瓷茶叶罐/pp classdesc世界非遗|青瓷世家出品|釉润如玉/pp classprice¥139.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/home/home_05.jpg alt/divdiv classtxtp classhead电动红酒醒酒器分酒器取酒器/pp classdesc贴心醒酒阀设计随心开启自由切换、轻松开启和关闭醒酒器功能/pp classprice¥169.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/home/home_06.png alt/divdiv classtxtp classhead非遗大师手作标本级六色建盏套组/pp classdesc用低价一次集齐六色建盏大师手作盏盏精美/pp classprice¥439.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/home/home_07.png alt/divdiv classtxtp classhead竹制干泡茶盘正方形沥水茶台品茶盘/pp classdesc干泡蓄水拆洗方便轻便实用/pp classprice¥109.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/home/home_08.jpg alt/divdiv classtxtp classhead与众不同的口感汝瓷白酒杯套组1壶4杯/pp classdesc白酒的最佳搭档席间一道风景——汝瓷白酒套组/pp classprice¥108.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/li/ul/div/div/div!-- 居家结束 --!-- 美食开始 --div classfood wrapper!-- 标题 --div classtitlediv classlefth3美食/h3/divdiv classrightullia href#网易黑猪/a/lilia href#水产海鲜/a/lilia href#全球美食/a/lilia href#冷冻冷藏/a/li/ula href# classmore查看更多span classiconfont icon-arrow-right/span/a/div/div!-- 内容 --div classcontentdiv classlefta href#img src./uploads/food/food_left.png alt/a/divdiv classrightullia href#div classpicimg src./uploads/food/food_01.jpg alt/divdiv classtxtp classhead网易味央黑猪去骨蹄膀500g*1袋/pp classdesc安心黑猪甄选好礼/pp classprice¥65.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/food/food_02.jpg alt/divdiv classtxtp classhead鲜活捕捞爽口鱿鱼须250g*1包约15g/根/pp classdesc鲜甜海味低脂低热量/pp classprice¥19.90/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/food/food_03.jpg alt/divdiv classtxtp classhead网易味央黑猪猪蹄330g*1袋/pp classdesc安心黑猪甄选好礼/pp classprice¥38.90/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/food/food_04.jpg alt/divdiv classtxtp classhead网易味央黑猪大排330g*1袋/pp classdesc安心黑猪甄选好礼/pp classprice¥37.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/food/food_05.png alt/divdiv classtxtp classhead营养高蛋白鲜嫩黑鱼片300克/pp classdesc活鱼切片免洗免浆/pp classprice¥33.80/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/food/food_06.png alt/divdiv classtxtp classhead中段精华银鳕鱼切片200g/pp classdesc“餐桌上的营养师”蛋白质丰富/pp classprice¥109.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/food/food_07.jpg alt/divdiv classtxtp classhead个大体肥冷冻对虾400g/pp classdesc新鲜优质虾品星级享受/pp classprice¥39.90/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/food/food_08.png alt/divdiv classtxtp classhead鲜甜海味深海大虾200g/pp classdesc人工筛选优质大虾可做宝贝辅食/pp classprice¥26.80/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/li/ul/div/div/div!-- 美食结束 --!-- 服饰开始 --div classclothes wrapper!-- 标题 --div classtitlediv classlefth3服饰/h3/divdiv classrightullia href#室外拖鞋/a/lilia href#春夏潮鞋/a/lilia href#飞织系列/a/lilia href#一脚蹬懒人系列/a/li/ula href# classmore查看更多span classiconfont icon-arrow-right/span/a/div/div!-- 内容 --div classcontentdiv classlefta href#img src./uploads/clothes/clothes_left.png alt/a/divdiv classrightullia href#div classpicimg src./uploads/clothes/clothes_01.jpg alt/divdiv classtxtp classheadKenroll女士防滑夏季人字沙滩拖鞋/pp classdesc清爽人字拖鞋轻松夏日出行/pp classprice¥39.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/clothes/clothes_02.jpg alt/divdiv classtxtp classheadKENROLL室外防滑男女运动拖鞋/pp classdesc潮流外穿运动鞋型/pp classprice¥19.90/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/clothes/clothes_03.jpg alt/divdiv classtxtp classhead男女经典两带式软木拖鞋/pp classdesc经典两带式舒适不过时/pp classprice¥28.80/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/clothes/clothes_04.jpg alt/divdiv classtxtp classheadKENROLL吾皇潮趣男女室外拖鞋/pp classdesc潮流吾皇万睡/pp classprice¥20.90/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/clothes/clothes_05.png alt/divdiv classtxtp classhead可机洗系列-女式尖头平底鞋/pp classdesc解放双手随盒赠送洗鞋袋/pp classprice¥109.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/clothes/clothes_06.png alt/divdiv classtxtp classhead情侣款经典小白鞋/pp classdesc一双胜十双的穿搭利器/pp classprice¥239.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/clothes/clothes_07.png alt/divdiv classtxtp classhead深船型两带式可外穿软弹拖鞋/pp classdesc软弹如云朵般开天窗版透气/pp classprice¥15.90/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/clothes/clothes_08.jpg alt/divdiv classtxtp classheadKENROLL男女简洁多彩一片式室外拖/pp classdesc多彩多色夏日出行防护/pp classprice¥18.80/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/li/ul/div/div/div!-- 服饰结束 --!-- 母婴开始 --div classmotherbaby wrapper!-- 标题 --div classtitlediv classlefth3母婴/h3/divdiv classrightullia href#T恤/polo/衬衫/a/lilia href#卫衣/毛衫/a/lilia href#外套/套装/a/lilia href#连体衣/礼盒/a/li/ula href# classmore查看更多span classiconfont icon-arrow-right/span/a/div/div!-- 内容 --div classcontentdiv classlefta href#img src./uploads/clothes/clothes_left.png alt/a/divdiv classrightullia href#div classpicimg src./uploads/motherbaby/matherbaby_01.jpg alt/divdiv classtxtp classhead2021春季新品宝宝四季连体哈衣59-90cm/pp classdesc不同开襟方式穿出更多花样/pp classprice¥55.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/motherbaby/matherbaby_02.jpg alt/divdiv classtxtp classhead儿童字母纯棉POLO衫73-130cm/pp classdesc甄选100%纯棉面料手感细腻柔软穿着舒适透气。/pp classprice¥99.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/motherbaby/matherbaby_03.jpg alt/divdiv classtxtp classhead复古文艺宝宝格纹短袖衬衫73-110cm/pp classdesc经典格纹柔软舒适清凉透气小熊贴布萌趣可爱/pp classprice¥89.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/motherbaby/matherbaby_04.png alt/divdiv classtxtp classhead毛茸茸小熊出没儿童羊羔绒背心73-90cm/pp classdesc杜邦科技棉填充保暖舒适/pp classprice¥79.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/motherbaby/matherbaby_05.png alt/divdiv classtxtp classhead温暖拥抱新生婴童杜邦棉爬服0-3岁/pp classdesc杜邦科技棉填充保暖舒适/pp classprice¥129.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/motherbaby/matherbaby_06.jpg alt/divdiv classtxtp classhead基础百搭儿童套头针织毛衣1-9岁/pp classdesc宽松版型搭出休闲风格/pp classprice¥119.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/motherbaby/matherbaby_07.jpg alt/divdiv classtxtp classhead2021年春季新品儿童纯棉长袖T恤73-130cm/pp classdesc多色可选童趣别致/pp classprice¥59.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/lilia href#div classpicimg src./uploads/motherbaby/matherbaby_08.jpg alt/divdiv classtxtp classhead95%白鸭绒儿童厚款面包羽绒服110-140cm/pp classdesc三层结构防跑绒鸭绒轻便保暖/pp classprice¥439.00/p/div/a!-- 产品底部 -- 过渡 --a href#div classcoverp找相似/pp/pp发现更多宝贝span classiconfont icon-arrow-right/span/p/div/a/li/ul/div/div/div!-- 母婴结束 --!-- 最新专题开始 --div classtopic wrapper!-- 标题 --div classtitlediv classlefth3最新专题/h3/divdiv classrighta href# classmore查看更多span classiconfont icon-arrow-right/span/a/div/div!-- 内容 --div classtopic-bdullia href#div classpicimg src./uploads/topic/topic-1.png alt!-- 定位区域 --div classcoverdiv classlefth4儿童3D/平面口罩 30枚/h4p说是儿童口罩但很大不适合低龄儿童使用/p/divdiv classrightspan¥49起/span/div/div/divdiv classtxtdiv classleftpi classiconfont icon-aixin stylecolor: rgb(255, 0, 0);/ispan5438/span/ppi classiconfont icon-icon-test/ispan8423/span/p/divdiv classrightpi classiconfont icon-pinglun1/ispan4096/span/p/div/div/a/lilia href#div classpicimg src./uploads/topic/topic-2.png alt!-- 定位区域 --div classcoverdiv classlefth4地表强温 男式鹅绒毛领经典派克宽松羽绒服/h4p很好很暖和(ω)/p/divdiv classrightspan¥1299起/span/div/div/divdiv classtxtdiv classleftpi classiconfont icon-aixin/ispan5904/span/ppi classiconfont icon-icon-test/ispan6517/span/p/divdiv classrightpi classiconfont icon-pinglun1/ispan2543/span/p/div/div/a/lilia href#div classpicimg src./uploads/topic/topic-3.png alt!-- 定位区域 --div classcoverdiv classlefth4煎炸蒸煮 日式双耳多用锅 小煎锅寿喜烧/h4p寿喜锅、煲仔砂陶碗以及石锅多项功能于一身的多用型选手~简即繁外形设计较日式更加偏向于制作寿喜烧那种菜肴的铸铁锅多一点再加上六层压铸技术所以还没收到的时候以为会很重结果超轻包装精简女生也能美美使用~拿到锅的第一件事情必然是开锅~开锅不繁琐效益享万年底部也用心地印上了胖选独有的logo~熠熠生辉~严选控一本满足锅体受热很快较普通锑锅相比受热更加均匀几乎同等的水能优先烧开媲美小巧的雪平锅但容量规格又秒杀雪平锅~锅盖两个出气的设计很好地避免了凑上去观看内部蒸煮情况时被蒸汽误伤的情形对了贴心地设计了两个隔热小把手套我宣布~这多功能锅现在就是我宝贝里面第一心头好/p/divdiv classrightspan¥169起/span/div/div/divdiv classtxtdiv classleftpi classiconfont icon-aixin/ispan1134/span/ppi classiconfont icon-icon-test/ispan6275/span/p/divdiv classrightpi classiconfont icon-pinglun1/ispan2546/span/p/div/div/a/li/ul/div/div!-- 最新专题结束 --!-- 尾部-布局开始 --div classfooterdiv classwrapper!-- 服务 --div classserviceullispan classiconfont icon-kehujiage/spanp价格亲民/p/lilispan classiconfont icon-wuliu1/spanp物流快捷/p/lilispan classiconfont icon-pinzhi/spanp品质新鲜/p/lilispan classiconfont icon-shouhou2/spanp售后无忧/p/li/ul/div!-- 帮助中心 --div classhelp!-- 文字 --div classleftdldt购物指南/dtdda href#购物流程/a/dddda href#支付方式/a/dddda href#售后规则/a/dd/dldldt配送方式/dtdda href#配送运费/a/dddda href#配送范围/a/dddda href#配送时间/a/dd/dldldt关于我们/dtdda href#平台规则/a/dddda href#联系我们/a/dddda href#问题反馈/a/dd/dldldt售后服务/dtdda href#售后政策/a/dddda href#退款说明/a/dddda href#取消订单/a/dd/dldldt服务热线/dtdda href#在线客服span classiconfont icon-kefu/span/a/dddda href#客服电话 400-0000-000/a/dddda href#工作时间 周一至周日 8:00-18:00/a/dd/dl/div!-- 二维码 --div classrightullidiv classpicspan classiconfont icon-weixin/span/divp微信公众号/p/lilidiv classpicimg src./images/load.jpg alt/divpAPP下载二维码/p/li/ul/div/div!-- 版权 --div classcopyrightpa href#关于我们/aa href#帮助中心/aa href#售后服务/aa href#配送与验收/aa href#商务合作/aa href#推荐搜索/aa href#友情链接/a/ppCopyRight © 小兔鲜儿/p/div/div/div!-- 尾部-布局结束 --
/body!-- 轮播图 --
scriptwindow.onload function () {var pic document.querySelector(.pic);var circle document.querySelector(.circle);var thisIndex 0;var picLi pic.children;var circleA circle.children;var flag true;pic.style.width pic.children.length * 1260 px;for (var i 0; i pic.children.length; i) {var aNode document.createElement(a);aNode.setAttribute(index, i); //设置自定义属性if (i 0) {aNode.className hover;}circle.appendChild(aNode);}// 设置监视器circle.addEventListener(click, function (e) {if (flag) {flag false;if (e.target.nodeName ! A) {return false;}thisIndex e.target.getAttribute(index);slow(pic, -thisIndex * 1260, function () {flag true;});circleChange();}})// 自动播放function antoChange() {setInterval(function () {if (flag) {flag false;if (thisIndex circleA.length) {thisIndex 0;}slow(pic, -thisIndex * 1260, function () {flag true;});circleChange();thisIndex;}}, 2500);}// 圆点样式function circleChange() {for (var i 0; i circleA.length; i) {circleA[i].className ;}circleA[thisIndex].className hover;}function slow(obj, target, callback) {obj.myInter setInterval(function () {var offsetLeft obj.offsetLeft;var num (target - offsetLeft) / 10;num 0 ? num Math.ceil(num) : num Math.floor(num);if (offsetLeft target) {clearInterval(obj.myInter);callback callback();} else {obj.style.left offsetLeft num px;}}, 10)}antoChange();
}
/script
/html CSS样式base.css代码 /* 去除常见标签默认的 margin 和 padding */
* {margin: 0;padding: 0;box-sizing: border-box;
}/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {font: 16px/1.5 Microsoft YaHei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;color: #333;
}/* 去除列表默认样式 */
h1,h2,h3,h4,h5,h6,ul,
ol {list-style: none;
}/* 去除默认的倾斜效果 */
em,
i {font-style: normal;
}/* 去除a标签默认下划线并设置默认字体颜色 */
a {color: #333;text-decoration: none;
}/* 设置img的垂直对齐方式为居中对齐去除img默认下间隙 */
img {vertical-align: middle;
} CSS样式index.css代码 /* 头尾各个页面相同的样式 */
/* 版心 */
.wrapper {margin: 0 auto;width: 1240px;
}/* 快捷导航开始 */
.shortcut {height: 52px;background-color: #333;
}.shortcut .wrapper {display: flex;justify-content: flex-end;height: 52px;
}.shortcut ul {display: flex;line-height: 52px;
}.shortcut li a {padding: 0 15px;border-left: 1px solid #666;font-size: 14px;color: #cdcdcd;
}.shortcut li:first-child a {border-left: 0;
}.shortcut li a:hover{color: #27ba9b;
}
/* 快捷导航结束 *//* 头部-布局开始 */
.header {display: flex;margin-top: 22px;margin-bottom: 22px;height: 88px;
}/* logo开始 */
.logo {margin-right: 40px;width: 200px;height: 88px;
}.logo a {display: block;width: 200px;height: 88px;background-image: url(../images/logo.png);background-size: 200px 88px;font-size: 0;
}
/* logo结束 *//* 导航开始 */
.nav {margin-top: 33px;margin-right: 28px;
}.nav ul {display: flex;
}.nav li {margin-right: 47px;
}.nav li a {padding-bottom: 10px;
}.nav li a:hover {color: #27ba9b;border-bottom: 2px solid #27ba9b;
}
/* 导航结束 *//* 搜索开始 */
.search {display: flex;margin-top: 33px;margin-right: 45px;width: 170px;height: 34px;border-bottom: 2px solid #f4f4f4;
}.search .iconfont {margin-right: 8px;font-size: 18px;color: #333;
}.search input {/* 浏览器优先生效 input 标签的默认宽度所有 flex1 不生效 *//* 解决办法重置 input 默认宽度 → width0 */flex: 1;width: 0;border: none;outline: none;
}.search input::placeholder {font-size: 16px;color: #ccc;border: none;
}
/* 搜索结束 *//* 购物车开始 */
.cart {position: relative;margin-top: 32px;
}.cart .iconfont {font-size: 24px;
}.cart i {position: absolute;top: 0;/* ringht 定位右对齐如果文字多了向左撑开可能盖住其他内容 *//* right: 0; *//* left 定位左对齐如果文字多了向右撑开 */left: 18px;padding: 1px 6px;line-height: 1;background: #e26237;color: #fff;font-size: 12px;border-radius: 10px;
}
/* 购物车结束 */
/* 头部-布局结束 *//* 尾部-布局开始 */
.footer {height: 580px;background-color: #f5f5f5;
}/* 服务开始 */
.service {padding: 60px 0;height: 178px;border-bottom: 1px solid #e8e8e8;
}.service ul {display: flex;justify-content: space-evenly;
}.service li {display: flex;width: 190px;height: 58px;
}.service li .iconfont {margin-right: 20px;width: 58px;height: 58px;border: 2px solid #27ba9b;color: #27ba9b;border-radius: 50%;font-size: 30px;text-align: center;line-height: 58px;
}.service li:first-child .iconfont {padding-left: 2px;
}.service li p {line-height: 58px;font-size: 28px;
}
/* 服务结束 *//* 帮助中心开始 */
.help {display: flex;justify-content: space-between;padding-top: 60px;height: 300px;
}/* 文字开始 */
.help .left {display: flex;
}.help .left dl {margin-right: 84px;
}.help .left dl:last-child {margin-right: 0;
}.help .left dt {margin-bottom: 30px;font-size: 18px;
}.help .left dd {margin-bottom: 10px;
}.help .left a {font-size: 16px;color: #969696;
}.help .left a:hover {color: #27ba9b;
}.help .left a .iconfont {margin-left: 5px;color: #72d0ff;
}
/* 文字结束 *//* 二维码开始 */
.help .right ul {display: flex;
}.help .right li:first-child {margin-left: 84px;margin-right: 55px;
}.help .right .pic {padding-top: 10px;margin-bottom: 10px;width: 120px;height: 120px;border: 1px solid #eae0e0;
}.help .right .iconfont {margin-left: 16px;font-size: 72px;color: #666;
}.help .right .iconfont:hover {color: #27ba9b;cursor: pointer;
}.help .right img {margin-left: 10px;width: 100px;height: 100x;
}.help .right p {color: #999;text-align: center;
}
/* 二维码结束 */
/* 帮助中心结束 *//* 版权开始 */
.copyright p {margin-bottom: 20px;color: #999;line-height: 1;text-align: center;
}.copyright a {padding: 0 10px;color: #999;border-right: 1px solid #999;
}.copyright a:hover {color: #27ba9b;
}.copyright a:last-child {border-right: 0;
}
/* 版权结束 */
/* 尾部-布局结束 */ CSS样式index.css代码 /* 首页内容样式 */
/* banner开始 */
.banner {height: 500px;background-color: #f5f5f5;
}.banner .wrapper {position: relative;height: 500px;overflow: hidden;
}/* 图片开始 */
.banner .pic {position: absolute;
}.banner .pic li {float: left;margin-right: 20px;
}
/* 图片结束 *//* 箭头开始 */
.banner .prev,
.banner .next {/* 隐藏 */display: none;position: absolute;top: 50%;transform: translateY(-50%);width: 44px;height: 44px;text-align: center;line-height: 44px;border-radius: 50%;color: #fff;background-color: rgba(0, 0, 0, 0.2);
}/* 鼠标滑到banner区域箭头要显示 display:block */
.banner .wrapper:hover .prev,
.banner .wrapper:hover .next {display: block;
}
.banner .prev {left: 270px;
}
.banner .next {right: 20px;
}.banner .iconfont {font-size: 20px;
}
/* 箭头结束 *//* 侧导航开始 */
.subnav {position: absolute;top: 0;left: 0;width: 250px;height: 500px;background-color: rgba(0, 0, 0, 0.8);
}.subnav li {padding-left: 40px;height: 50px;line-height: 50px;
}.subnav li:hover {background-color: #27ba9b;
}.subnav li a:first-child {font-size: 16px;
}.subnav li a {color: #fff;font-size: 14px;
}
/* 侧导航结束 *//* 圆点指示器开始 */
.circle {padding-left: 250px;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);cursor: pointer;
}.circle a {margin-right: 12px;width: 12px;height: 12px;background-color: rgba(0, 0, 0, 0.3);display: block;border-radius: 50%;float: left;
}.circle a.hover {background-color: #fff;
}
/* 圆点指示器结束 */
/* banner结束 *//* 新鲜好物开始 */
/* 标题开始 -- 公共样式 */
.title {display: flex;justify-content: space-between;margin: 40px 0;height: 42px;
}.title .left {display: flex;
}.title .left h3 {font-size: 30px;margin-left: 6px;font-weight: normal;
}.title .left p {margin-left: 20px;align-self: flex-end;color: #999;
}.title .right .more {line-height: 42px;color: #999;
}.title .right .more:hover {color: #27ba9b;
}.title .right .more .iconfont {margin-left: 6px;
}
/* 标题结束 *//* 内容开始 -- 公共样式 */
.bd ul {display: flex;justify-content: space-between;
}.bd li {width: 306px;height: 406px;background-color: #f0f9f4;transition: all 0.5s;
}.goods .bd li:hover,
.recommend .bd li:hover,
.topic .topic-bd li:hover {box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.2);
}.bd li img {width: 306px;height: 306px;max-width: 100%;max-height: 100%;transition: all 0.5s;
}.bd li .text {text-align: center;font-size: 22px;white-space: nowrap;
}.bd li .text h4 {width: 306px;height: 42.8px;padding: 12px 30px 0;font-weight: normal;overflow: hidden;text-overflow: ellipsis;
}.bd li .text p {padding: 12px 30px 0;color: #cf4444;
}
/* 内容结束 */
/* 新鲜好物结束 *//* 人气推荐开始 */
.recommend {margin-bottom: 20px;
}.recommend .bd li {transition: all 0.5s;background-color: #fff;
}.recommend li .text p {color: #999;font-size: 18px;
}
/* 人气推荐结束 *//* 热门品牌开始 */
.brand {background-color: #f5f5f5;height: 468px;}.brand .wrapper {overflow: hidden;
}/* 标题开始 */
.brand .title {position: relative;
}.brand .title .left {height: 42px;
}.brand .button {position: absolute;right: 0;bottom: 0;/* 让 a 在一行显示宽高生效 */display: flex;
}.brand .button a {margin-left: 5px;width: 20px;height: 20px;color: #fff;text-align: center;line-height: 20px;
}.brand .button .prev {background-color: #ccc;
}.brand .button .next {background-color: #27ba9b;
}/* 标题结束 *//* 内容开始 */
.brand .bd li {width: 240px;height: 305px;margin-bottom: 40px;
}.brand .bd img {width: 240px;height: 305px;
}
/* 内容结束 */
/* 热门品牌结束 *//* 居家开始 */
/* 标题开始 */
.title .right {display: flex;
}/* 右侧导航 -- 公共样式 */
.title .right ul {display: flex;
}.title .right li {line-height: 42px;text-align: center;
}.title .right li:last-child {margin-right: 80px;
}.title .right li a {padding: 2px 12px;border-radius: 4px;
}.title .right li a:hover {color: #fff;background-color: #27ba9b;
}
/* 标题结束 *//* 内容开始 -- 公共样式 */
.content {display: flex;justify-content: space-between;
}.content .left img {width: 240px;height: 610px;
}.content .right {width: 990px;height: 610px;
}.content .right ul {display: flex;justify-content: space-between;flex-wrap: wrap;
}.content .right li {position: relative;padding: 10px 30px;width: 242px;height: 303px;border: 1px solid transparent;overflow: hidden;
}.content .right li:hover {border: 1px solid #27ba9b;
}.content .right li:nth-child(-n4) {margin-bottom: 4px;border-bottom: 1px solid #27ba9a74;
}.content .pic img {margin: 0 10px;width: 160px;height: 160px;
}.content .txt p {margin-top: 6px;
}.content .txt .head {height: 44px;
}.content .txt .desc {text-wrap: nowrap;text-overflow: ellipsis;overflow: hidden;color: #666;
}.content .txt .price {margin-top: 10px;color: #cf4444;font-size: 20px;
}/* 产品底部 -- 过渡开始 */
.content li .cover {position: absolute;left: 0;bottom: -84px;padding-top: 15px;width: 241.6px;height: 84px;background-color: #27ba9b;text-align: center;color: #fff;/* 过渡 */transition: all 0.55s;
}.content .cover p:first-child {font-size: 18px;
}.content .cover p:nth-child(2) {margin: 5px auto 3px;width: 120px;height: 1px;background-color: #fff;
}.content .cover p:nth-child(3) {font-size: 13px;
}.content .cover p:nth-child(3) .iconfont {margin-left: 2px;font-size: 12px;
}/* 鼠标悬停到li显示cover改变位置 */
.content .right li:hover .cover {bottom: 0;
}
/* 产品底部 -- 过渡结束 */
/* 内容结束 */
/* 居家结束 *//* 最新专题开始 */
.topic-bd {margin-bottom: 40px;
}.topic-bd ul {display: flex;justify-content: space-between;
}.topic-bd li {width: 405px;height: 360px;transition: all 0.5s;
}.topic-bd .pic {position: relative;
}.topic-bd .pic img {width: 405px;height: 288px;
}.topic-bd .txt {display: flex;justify-content: space-between;align-items: center;padding: 0 20px;width: 405px;height: 72px;background-color: #f5f5f5;color: #999;
}.topic-bd .txt .iconfont {font-size: 18px;
}.topic-bd .txt .left {display: flex;
}.topic-bd .txt .left p {margin-right: 25px;
}/* 定位区域 -- 文字开始 */
.topic-bd .cover {position: relative;position: absolute;left: 0;bottom: 0;display: flex;justify-content: space-between;align-items: center;padding: 0 16px;width: 405px;height: 100px;background-image: linear-gradient(180deg, rgba(137, 137, 137, 0.00) 0%,rgba(0, 0, 0, 0.90) 100%);
}.topic-bd .cover .left {position: absolute;bottom: 0;padding-bottom: 16px;width: 70%;
}.topic-bd .cover .left h4 {font-weight: normal;font-size: 22px;color: #fff;text-wrap: nowrap;overflow: hidden;text-overflow: ellipsis;
}.topic-bd .cover .left p {font-size: 19px;color: #999;text-wrap: nowrap;overflow: hidden;text-overflow: ellipsis;
}.topic-bd .cover .right {position: absolute;bottom: 25px;right: 16px;padding: 4px 8px 4px 7px;line-height: 1;font-size: 17px;color: #cf4444;background-color: #fff;border-radius: 2px;
}
/* 定位区域 -- 文字结束 */
/* 最新专题结束 */
