html和css还有放图片的文件夹要在一个目录底下
改成自己的电脑路径┗|｀O′|┛ 嗷~~
字体图标可以从icomoon或者iconfont上白嫖，我没找完嘿嘿
P.S没整的完全一样，随便看看
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝网 - 淘！我喜欢</title>
<link rel="stylesheet" href="taobao.css">
<link rel="icon" href="tb图标.ico">
</head>
<body>
<!-- 头部最顶上 -->
<div class="dingdakuang" class="clearfix">
<div class="header w">
<ul class="fl">
<li class="head1 p6">
<span class="mr7">中国大陆</span>
<span class="ys xing jiantou">?</span>
</li>
<li class="head2 p6">
<a href="#" class="denglu mr7">亲,请登录</a>
<a href="#" class="mr7 zt">免费注册</a>
</li>
<li>
<a href="#" class="p6 zt">手机逛淘宝</a>
</li>
</ul>
<ul class="fr">
<li>
<a href="#" class="p6 zt">我的淘宝</a>
<span class="ys xing jiantou">?</span>
</li>
<li class="mr7 p6">
<span class="ys mr5">?</span>
<a href="#" class="zt">购物车</a>
</li>
<li class="mr7">
<a href="#" class="zt">
<span class="ys xing mr5">?</span>
收藏夹</a>
<span class="ys xing jiantou">?</span>
</li>
<li>
<a href="#" class="p6 zt">商品分类</a>
</li>
<li class="line">
|
</li>
<li class="p6">
<a href="#" class="zt">千牛卖家中心</a>
<span class="ys xing jiantou">?</span>
</li>
<li class="p6">
<a href="#" class="zt">联系客服</a>
<span class="ys xing jiantou">?</span>
</li>
</ul>
</div>
</div>
<!-- 头部搜索 -->
<div id="headSearch">
<div class="clearfix w">
<h1 class="fl"><a href="#">淘宝网</a></h1>
<div class="code fr">
<span class="c5 xz">下载淘宝</span>
<img src="image/code.png" alt="">
</div>
<div class="search">
<ul class="searchTab clearfix">
<li class="active">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
<div class="searchContent clearfix">
<form action="#">
<div class="searchBox fl">
<input type="text">
<div class="placeholder">
<i class="ys">?</i>
<span>双肩包</span>
</div>
<span class="ys camera">?</span>
</div>
<div class="btn fl">
<button>搜索</button>
</div>
</form>
</div>
<div class="hotkey">
<a href="#">新款连衣裙</a>
<a href="#">四件套</a>
<a href="#" class="c5">潮流T恤</a>
<a href="#">时尚女鞋</a>
<a href="#">短裤</a>
<a href="#">半身裙</a>
<a href="#">男士外套</a>
<a href="#">墙纸</a>
<a href="#">行车记录仪</a>
<a href="#">新款男鞋</a>
<a href="#">耳机</a>
<a href="#">时尚女包</a>
<a href="#">沙发</a>
</div>
</div>
</div>
</div>
<!-- 导航 -->
<div id="nav" class="w clearfix">
<h2 class="fl">主题市场</h2>
<ul class="fl">
<li><a href="#" class="ysr pb">天猫</a></li>
<li><a href="#" class="ysr pb">聚划算</a></li>
<li><a href="#" class="ysg pb">天猫超市</a></li>
<li class="line1">|</li>
<li><a href="#" class="bh pb">司法拍卖</a></li>
<li><a href="#" class="bh pb">飞猪旅行</a></li>
<li><a href="#" class="bh pb">天天特卖</a></li>
<li class="line1">|</li>
<li><a href="#" class="bh pb">造点新货</a></li>
<li><a href="#" class="bh pb">苏宁易购</a></li>
<li><a href="#" class="bh pb">淘宝心选</a></li>
<li><a href="#" class="bh pb">智能生活</a></li>
</ul>
</div>
<!-- 首屏内容 -->
<div id="firstScreen" class="w clearfix">
<!-- 左边的内容 -->
<div class="firstLeft fl">
<!-- 侧边导航 -->
<div class="sideNav fl">
<ul>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">女装</a> <span class="jl"> / </span><a href="#" class="zs">内衣</a> <span
class="jl"> / </span><a href="#" class="zs">家居</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">女鞋</a> <span class="jl"> / </span><a href="#" class="zs">男鞋</a> <span
class="jl"> / </span><a href="#" class="zs">箱包</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">母婴</a> <span class="jl"> / </span><a href="#" class="zs">童装</a> <span
class="jl"> / </span><a href="#" class="zs">玩具</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">男装</a><span class="jl"> / </span><a href="#" class="zs">运动户外</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">美妆</a><span class="jl"> / </span><a href="#" class="zs">彩妆</a><span
class="jl"> / </span><a href="#" class="zs">个护</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#">手机</a><span class="jl"> / </span><a href="#">数码</a><span class="jl"> / </span><a
href="#">企业</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">大家电</a><span class="jl"> / </span><a href="#" class="zs">生活电器</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">零食</a><span class="jl"> / </span><a href="#" class="zs">生鲜</a><span
class="jl"> / </span><a href="#" class="zs">茶酒</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">厨具</a><span class="jl"> / </span><a href="#" class="zs">收纳</a><span
class="jl"> / </span><a href="#" class="zs">清洁</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">家纺</a><span class="jl"> / </span><a href="#" class="zs">家饰</a><span
class="jl"> / </span><a href="#" class="zs">鲜花</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">图书音像</a><span class="jl"> / </span><a href="#" class="zs">文具</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">医药保健</a><span class="jl"> / </span><a href="#" class="zs">进口</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">汽车</a><span class="jl"> / </span><a href="#" class="zs">二手车</a><span class="jl"> / </span><a href="#" class="zs">用品</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="zs">房产</a><span class="jl"> / </span><a href="#" class="zs">装修家具</a><span
class="jl"> / </span><a href="#" class="zs">建材</a>
</li>
<li>
<span class="ys jm tp">?</span>
<a href="#" class="wp zs">手表</a><span class="jl"> / </span><a href="#" class="zs">眼镜</a><span
class="jl"> / </span><a href="#" class="zs">珠宝饰品</a>
</li>
</ul>
</div>
<!-- 图片1 -->
<div class="img1Box fr">
<div class="pic fl">
<div class="img">
<a href="#"><img src="image/tb首屏.jpg"></a>
</div>
<button class="ys lb">?</button>
<button class="ys rb">?</button>
<div class="circle">
<span class="red"></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<!-- 图片2 -->
<div class="img2Box fr">
<div class="pic fl">
<div class="text clearfix">
<img src="image/天猫.png" class="fl tm">
<span class="fl bg">理想生活上天猫</span>
<span class="fr ym"><span class="nu1">1</span class="nu5">/5</span>
</div>
<div class="img">
<a href="#"><img src="image/tb首屏1.webp" class="img1"></a>
<a href="#"><img src="image/tb首屏2.webp" class="img2"></a>
</div>
<button class="ys lb">?</button>
<button class="ys rb">?</button>
</div>
</div>
</div>
<!-- 右边的内容 -->
<div class="firstRight fr">
<!-- 用户 -->
<div class="wuwu">
<div class="user">
<a href="#" class="avatar"><img src="image/tb首屏4.jpg"></a>
<p class="username">Hi!你好</p>
</div>
<div class="btn">
<button class="login">登录</button>
<button class="register">注册</button>
<button class="shop">开店</button>
</div>
</div>
<div class="tupian"><img src="image/tb首屏3.webp"></div>
<!-- 公告区 -->
<div class="notice">
<div class="gg"><span class="gg1">公告</span><span class="gg2">新鲜事儿都在这里~</span></div>
<div class="gz"><a href="#" class="gz1">规则</a><a href="#" class="gz2">淘宝网市场管理与违规处理规范</a></div>
<div class="rd1"><a href="#" class="gz1">热点</a><a href="#" class="gz2">关于推进“清明”账号乱象专项整治的通知</a></div>
<div class="rd2"><a href="#" class="gz1">热点</a><a href="#" class="gz2">《淘宝平台违禁信息管理规则》</a></div>
</div>
<!-- 图标区 -->
<div class="bth">
<div class="ys xx"><a href="#">?</a></div>
<div class="ys xx"><a href="#">?</a></div>
<div class="ys xx"><a href="#">?</a></div>
<div class="ys xx1"><a href="#">?</a></div>
<p>收藏的宝贝</p>
<p>买过的店铺</p>
<p>收藏的店铺</p>
<p>我的足迹</p>
</div>
</div>
<!-- 有好货和猜你喜欢 -->
<div id="sp" class="w cleafix">
<!-- 有好货 -->
<div class="goods1 fl">
<div class="head clearfix">
<span>有好货</span>
<img src="image/quanmkb.png">
</div>
<ul class="list">
<li>
<a href="#"><img src="image/yhh1.webp"></a>
<div class="p1">
<h4><a href="#">同车同伴车载头枕腰靠</a></h4>
<p class="text"><a
href="#">一路行车，如果是不适相伴，那可能会酿成一些不可挽回的后果，所以您需要带上舒适陪伴您行车，这款能四季呵护您脊椎腰椎的腰靠无疑能给您带来行车途中的舒适体验，它的面料都是选用优质的运动针织面料，更亲近您的皮肤不会产生静电，它还能缓解您驾驶途中的疲劳感，让您一路舒适相伴。</a>
</p>
</div>
</li>
<li>
<div class="p1">
<a href="#"><img src="image/yhh2.webp"></a>
<h4><a href="#">SINOMAX海绵床垫 </a></h4>
<p class="text"><a
href="#">来自香港的品牌——赛诺，床垫采用优质海绵制造，比棉絮更舒服，贴合身体，触感舒适，同时具有吸音的效果，带来安静的睡眠，充分释放身体压力，给予恰到好处的支撑。</a>
</p>
</div>
</li>
<li>
<div class="p1">
<a href="#"><img src="image/yhh3.webp"></a>
<h4><a href="#">好孩子 儿童安全座椅</a></h4>
<p class="text"><a href="#">侧撞防护系统，搭配宽大的座舱面积设计，保障乘坐安全又舒适。</a></p>
</div>
</li>
<li>
<div class="p1">
<a href="#"><img src="image/yhh4.webp"></a>
<h4><a href="#">只需翻转一下，就能安排你</a></h4>
<p class="text"><a href="#">用这个计时器，做饭学习，任何事都能提高效率噢</a></p>
</div>
</li>
<li>
<div class="p1">
<a href="#"><img src="image/yhh5.webp"></a>
<h4><a href="#">鬼塚虎 麂皮材质运动鞋</a></h4>
<p class="text"><a href="#">此款跑鞋采用了麂皮材质打造鞋面，提供出色的缓震性能，缔造出色缓降性能。</a></p>
</div>
</li>
</ul>
</div>
</div>
<!-- 猜你喜欢 -->
<div id="xh" class="w cleafix">
<div class="goods2 fl">
<div class="head2 clearfix">
<span>猜你喜欢</span>
<img src="image/gxtj.png">
</div>
<ul class="list1">
<li>
<div class="p2">
<a href="#"><img src="image/gt1.webp"></a>
<h4><a href="#">红色实木长方托盘 茶盘 日式茶盘 茶具 果盘 托盘 婚礼盘订做</a></h4>
<p class="info">
<span class="price"><em>￥</em>19.55</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt2.webp"></a>
<h4><a href="#">春秋全棉美式保暖针织盖毯加厚纯棉沙发毯子毛毯北欧航空毯午睡毯</a></h4>
<p class="info">
<span c5lass="price"><em>￥</em>199</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt3.webp"></a>
<h4><a href="#">长方陶瓷饭盒卡通三格多格陶瓷碗带盖便当盒三件套微波炉加热餐盒</a></h4>
<p class="info">
<span class="price"><em>￥</em>20</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt4.webp"></a>
<h4><a href="#">日式抽屉收纳盒内置分格整理盒神器桌面文具厨房里面的小分隔盒子</a></h4>
<p class="info">
<span class="price"><em>￥</em>5.3</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt5.webp"></a>
<h4><a href="#">包邮家用陶瓷盘子圆形菜盘 创意碗盘骨瓷西餐具牛扒盘 清新水果盘</a></h4>
<p class="info">
<span class="price"><em>￥</em>59</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt6.webp"></a>
<h4><a href="#">铸铁锅日式炖锅煲汤锅寿喜锅煲仔饭干锅无涂层老式加厚生铁锅通用</a></h4>
<p class="info">
<span class="price"><em>￥</em>38</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt7.webp"></a>
<h4><a href="#">Lototo日式陶瓷水果沙拉碗创意盘子面碗深盘大菜碗家用餐具早餐盘</a></h4>
<p class="info">
<span class="price"><em>￥</em>26.9</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt8.webp"></a>
<h4><a href="#">智慧夫人日式硅胶冰格带盖子创意大冰块模具制冰盒辅食盒冷冻盒子</a></h4>
<p class="info">
<span class="price"><em>￥</em>12.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt9.webp"></a>
<h4><a href="#">纯白长方陶瓷平盘欧式面包盘蛋糕托盘甜品盘寿司刺身盘酒店展示盘</a></h4>
<p class="info">
<span class="price"><em>￥</em>19.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt10.webp"></a>
<h4><a href="#">衣服收纳箱透明塑料储物箱特大号收纳盒箱子整理箱玩具被子储物盒</a></h4>
<p class="info">
<span class="price"><em>￥</em>33</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt11.webp"></a>
<h4><a href="#">不锈钢胡椒研磨器家用手动陶瓷芯磨白黑胡椒粒粉花椒研磨瓶调料罐</a></h4>
<p class="info">
<span class="price"><em>￥</em>9.5</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt12.webp"></a>
<h4><a href="#">厨房防油溅锅盖带手柄防油溅网罩不锈钢防油网防油爆网盖油隔油盖</a></h4>
<p class="info">
<span class="price"><em>￥</em>11.9</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt13.webp"></a>
<h4><a href="#">纯白陶瓷鱼盘蒸鱼盘子 厚边椭圆形家用碟子大号 餐厅饭店酒店餐具</a></h4>
<p class="info">
<span class="price"><em>￥</em>21</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt14.webp"></a>
<h4><a href="#">厨房食品收纳盒饺子盘塑料盘子水饺盘托盘速冻冷冻长方形冰柜专用</a></h4>
<p class="info">
<span class="price"><em>￥</em>7.6</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt15.webp"></a>
<h4><a href="#">陶瓷日式调料罐套装调味瓶组合北欧高颜值盐罐创意厨房带盖糖罐子</a></h4>
<p class="info">
<span class="price"><em>￥</em>69.9</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt16.webp"></a>
<h4><a href="#">餐桌隔热垫欧式耐热锅垫美式碗菜垫子长方形餐盘垫软木西餐垫家用</a></h4>
<p class="info">
<span class="price"><em>￥</em>14.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt17.webp"></a>
<h4><a href="#">现货 日本制美浓烧复古小兵手工粗陶梨花餐盘菜碗咖啡茶杯深钵</a></h4>
<p class="info">
<span class="price"><em>￥</em>68</span>
</p>
</div>
<li>
<div class="p2">
<a href="#"><img src="image/gt18.webp"></a>
<h4><a href="#">朵颐长柄木质锅铲勺炒菜木铲子不粘锅专用家用木勺子大汤勺调味勺</a></h4>
<p class="info">
<span class="price"><em>￥</em>26</span>
</p>
</div>
</li>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt19.webp"></a>
<h4><a href="#">大号PP塑料家用方形双层火锅淘菜篮水果沥水盘洗菜盆水杯茶杯托盘</a></h4>
<p class="info">
<span class="price"><em>￥</em>11.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt20.webp"></a>
<h4><a href="#">大不锈钢盆圆形洗菜盆家用特大号加厚洗澡不锈钢大盆超大洗衣服盆</a></h4>
<p class="info">
<span class="price"><em>￥</em>12.9</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt21.webp"></a>
<h4><a href="#">摩登主妇日式小菜碟子调味碟碗碟蘸酱料调料酱油醋碟盘子家用餐具</a></h4>
<p class="info">
<span class="price"><em>￥</em>9.9</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt22.webp"></a>
<h4><a href="#">朵颐欧式陶瓷收纳罐筷子勺收纳筒创意筷子架餐具收纳盒厨房储物罐</a></h4>
<p class="info">
<span class="price"><em>￥</em>78</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt23.webp"></a>
<h4><a href="#">创意家用可爱彩色小叉水果叉水果签 陶瓷不锈钢点心叉甜品叉套装</a></h4>
<p class="info">
<span class="price"><em>￥</em>12</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt24.webp"></a>
<h4><a href="#">304不锈钢碗架沥水架单层碗碟架厨房收纳置物架沥水篮漏水篮筷架</a></h4>
<p class="info">
<span class="price"><em>￥</em>88</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt25.webp"></a>
<h4><a href="#">器昔|日式手工刷花餐盘 创意餐盘日式盘子果盘 家用陶瓷餐具碗碟</a></h4>
<p class="info">
<span class="price"><em>￥</em>69</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt26.webp"></a>
<h4><a href="#">陶瓷调味罐日式创意厨房调味盒套装组合装盐糖味精调料盒调料罐子</a></h4>
<p class="info">
<span class="price"><em>￥</em>19.9</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt27.webp"></a>
<h4><a href="#">创意日式陶瓷碗拉面碗家用大碗泡面碗沙拉碗复古米饭碗汤碗斗笠碗</a></h4>
<p class="info">
<span class="price"><em>￥</em>43</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt28.webp"></a>
<h4><a href="#">14CM厨房夹缝置物架卫生间窄缝收纳置物架冰箱窄柜厕所角落整理架</a></h4>
<p class="info">
<span class="price"><em>￥</em>38</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt29.webp"></a>
<h4><a href="#">加厚不锈钢饺子盘 双层沥水水饺盘 不锈钢盘子 托盘圆盘 多用盘</a></h4>
<p class="info">
<span class="price"><em>￥</em>12.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt30.webp"></a>
<h4><a href="#">2件套北欧茶色玻璃碗米饭碗双耳沙拉碗麦片碗甜品碗家用耐热防烫</a></h4>
<p class="info">
<span class="price"><em>￥</em>6.9</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt31.webp"></a>
<h4><a href="#">餐铃吧台桌铃传菜钟铃 上菜出菜叫单铃铛抢答器</a></h4>
<p class="info">
<span class="price"><em>￥</em>11.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt32.webp"></a>
<h4><a href="#">雅刻丽浴室置物架防水卫生间客厅收纳架卧室储物架洗手间拖鞋架子</a></h4>
<p class="info">
<span class="price"><em>￥</em>55</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt33.webp"></a>
<h4><a href="#">创意欧式陶瓷盘西餐意面盘圆形菜盘子点心盘水果沙拉盘平盘家用</a></h4>
<p class="info">
<span class="price"><em>￥</em>28</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt34.webp"></a>
<h4><a href="#">日本进口多功能果蔬削皮器土豆山药去皮削皮刀蔬菜胡萝卜刮皮神器</a></h4>
<p class="info">
<span class="price"><em>￥</em>12.5</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt35.webp"></a>
<h4><a href="#">贵州烙锅小吃平底生铁铸铁炸土豆加厚罗锅家用商用电磁炉能用</a></h4>
<p class="info">
<span class="price"><em>￥</em>26.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt36.webp"></a>
<h4><a href="#">手动家用蒜泥捣蒜压蒜器大蒜蒜蓉蒜头姜蒜搅碎机打蒜搅蒜切蒜神器</a></h4>
<p class="info">
<span class="price"><em>￥</em>10.68</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt37.webp"></a>
<h4><a href="#">盘子菜碟家用日式复古创意个性彩色方盘点心盘沙拉盘高淳陶瓷餐具</a></h4>
<span class="price"><em>￥</em>19.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt38.webp"></a>
<h4><a href="#">可伸缩洗菜盆淘菜盆厨房水槽沥水篮菜篮子洗水果盆滤水家用洗菜器</a></h4>
<p class="info">
<span class="price"><em>￥</em>12.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt39.webp"></a>
<h4><a href="#">传统陶土单柄煨汤瓦罐养生立汤煲砂锅明火老式炖肉煮粥小瓦罐商用</a></h4>
<p class="info">
<span class="price"><em>￥</em>20</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt40.webp"></a>
<h4><a href="#">韩国爆款不沾烤肉锅一人食多功能迷你烧烤炉家用酒精烤盘户外便携</a></h4>
<span class="price"><em>￥</em>158</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt41.webp"></a>
<h4><a href="#">出口美国窑变经典美式格子碗盘草帽造型面碗面碗汤碗沙拉碗釉下</a></h4>
<p class="info">
<span class="price"><em>￥</em>35</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt42.webp"></a>
<h4><a href="#">日本天妇罗油炸锅家用土豆小炸锅煤气燃气电磁炉通用迷你铁锅不粘</a></h4>
<p class="info">
<span class="price"><em>￥</em>69</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt43.webp"></a>
<h4><a href="#">304不锈钢筷子家用防滑耐高温防霉高档一人一筷儿童公筷商用快子</a></h4>
<p class="info">
<span class="price"><em>￥</em>11.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt44.webp"></a>
<h4><a href="#">北欧ins茶水分离陶瓷马克杯带盖勺情侣对杯礼盒简约办公过滤茶杯</a></h4>
<p class="info">
<span class="price"><em>￥</em>20.16</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt45.webp"></a>
<h4><a href="#">鞋托架鞋柜收纳神器简易省空间塑料分层一体式鞋架整理鞋子收纳架</a></h4>
<p class="info">
<span class="price"><em>￥</em>23.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt46.webp"></a>
<h4><a href="#">食品级小学生餐垫硅胶餐垫可折叠餐布防水防油渍隔热儿童午餐桌布</a></h4>
<p class="info">
<span class="price"><em>￥</em>26.8</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt47.webp"></a>
<h4><a href="#">调味罐单个家用大玻璃盐罐子北欧组合装厨房调料盒日式套装佐料瓶</a></h4>
<p class="info">
<span class="price"><em>￥</em>7.9</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt48.webp"></a>
<h4><a href="#">马克杯带盖复古水杯办公室创意茶缸定制怀旧经典仿搪瓷杯杯子陶瓷</a></h4>
<p class="info">
<span class="price"><em>￥</em>9.9</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt49.webp"></a>
<h4><a href="#">厨房收纳盒整理盒收纳筐厨具锅具收纳置物架下水槽神器橱柜收纳架</a></h4>
<p class="info">
<span class="price"><em>￥</em>14</span>
</p>
</div>
</li>
<li>
<div class="p2">
<a href="#"><img src="image/gt50.webp"></a>
<h4><a href="#">耐高温茶具套装家用耐热陶瓷水具日式水杯套装客厅待客复古泡茶壶</a></h4>
<p class="info">
<span class="price"><em>￥</em>88</span>
</p>
</div>
</li>
</ul>
<!-- end -->
<div id="end" class="w clearfix">
<span><img src="image/QQ图片20211203165448.png"></span>
</div>
</div>
</div>
<!-- 右侧固定定位导航 -->
<div id="tool">
<span class="ys">?</span>
<div class="btnn">
<a href="#" class="c4">品质 好货</a>
<a href="#" class="c6 active pa">猜你 喜欢</a>
<a href="#" class="c7 item6">反馈</a>
<a href="#" class="c7 pa zh">暴恐 举报</a>
</div>
</div>
<!-- 最下main -->
<div id="xm" class="w clearfix">
<div class="xf fl">
<div class="tt">
<span class="ys">?</span>
<h2>消费者保障</h2>
</div>
<ul class="list2 fl">
<li><a href="#">保障范围</a></li>
<li><a href="#">退货退款流程</a></li>
<li><a href="#">服务中心</a></li>
<li><a href="#">更多特色服务</a></li>
</ul>
</div>
<div class="xf fl">
<div class="tt">
<span class="ys">?</span>
<h2>新手上路</h2>
</div>
<ul class="list2 fl">
<li><a href="#">新手专区</a></li>
<li><a href="#">消费警示</a></li>
<li><a href="#">交易安全</a></li>
<li><a href="#">24小时在线帮助</a></li>
<li><a href="#">免费开店</a></li>
</ul>
</div>
<div class="xf fl">
<div class="tt">
<span class="ys">?</span>
<h2>付款方式</h2>
</div>
<ul class="list2">
<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>
</ul>
</div>
<div class="xf fl">
<div class="tt">
<span class="ys">?</span>
<h2>淘宝特色</h2>
</div>
<ul class="list2">
<li><a href="#">手机淘宝</a></li>
<li><a href="#">旺旺/旺信</a></li>
<li><a href="#">大众评审</a></li>
</ul>
</div>
</div>
</body>
</html>CSS代码
* {
margin: 0;
padding: 0;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?aaqjzo');
src: url('fonts/icomoon.eot?aaqjzo#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?aaqjzo') format('truetype'),
url('fonts/icomoon.woff?aaqjzo') format('woff'),
url('fonts/icomoon.svg?aaqjzo#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.ys {
font-family: 'icomoon';
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body {
background-color: #eae8eb;
font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
color: #3c3c3c;
height: 2190px;
}
.w {
/* 版心 */
width: 1190px;
margin: auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.dingdakuang {
height: 35px;
background-color: #f5f5f5;
margin-top: 0px;
}
a {
text-decoration: none;
}
.header {
height: 35px;
line-height: 35px;
}
li {
display: inline-block;
list-style: none;
}
.header .denglu {
color: #f22e00;
}
.ys {
color: #f40;
}
.mr7 {
margin: 0px 7px 0px 0px;
}
.p6 {
padding: 0px 6px;
}
.zt {
color: #6c6c6c;
}
.line {
color: #DDDDDD;
padding: 0px 5px;
}
.xing {
color: #9c9c9c;
}
.jiantou {
width: 12px;
height: 6px;
margin: 16px 0px 0px;
}
.header li a:hover {
color: #f40;
}
.mr5 {
margin: 0px 5px 0px 0px;
}
.c5 {
color: #ff5000;
}
/* 头部搜索 */
#headSearch {
padding: 24px 0 10px 0;
}
#headSearch h1 a {
display: block;
width: 190px;
height: 58px;
background: url(image/logo.png) center no-repeat;
text-indent: -9999px;
/* 首行缩进 */
overflow: hidden;
margin: 0 0 0 22px;
padding: 58px 0 0;
}
#headSearch .code {
position: relative;
width: 90px;
height: 113px;
border: 1px solid #eae8eb;
margin-right: 110px;
background-color: #fff;
}
#headSearch .code img {
width: 79px;
height: 82px;
margin: 5px 6px 0 6px;
}
#headSearch .search {
width: 630px;
margin: auto;
}
#headSearch .searchTab {
height: 22px;
padding-left: 17px;
}
#headSearch .searchTab li {
float: left;
width: 36px;
line-height: 22px;
margin-right: 4px;
text-align: center;
color: #f40;
cursor: pointer;
}
.xz {
margin: 4px 19px 0px 19px;
text-align: center;
}
#headSearch .searchTab li:hover {
background-color: #ffeee5;
}
#headSearch .searchTab li.active {
color: #fff;
font-weight: blod;
background-image: linear-gradient(to right, #ff9000, #ff5000);
/* 线性渐变 */
border-radius: 6px 6px 0 0;
}
#headSearch .searchContent {
height: 40px;
}
#headSearch .searchBox {
width: 554px;
height: 40px;
box-sizing: border-box;
border: 2px solid #ff5000;
border-right: none;
border-radius: 20px 0 0 20px;
overflow: hidden;
position: relative;
}
#headSearch .searchBox input {
width: 490px;
height: 36px;
line-height: 36px;
outline: none;
border: none;
text-indent: 10px;
position: absolute;
z-index: 1;
background-color: transparent;
}
#headSearch .placeholder {
position: absolute;
top: 10px;
left: 14px;
}
#headSearch .placeholder i {
color: #9c9c9c;
vertical-align: 1px;
}
#headSearch .camera {
font-size: 28px;
color: #9c9c9c;
position: absolute;
right: 20px;
top: -2px;
cursor: pointer;
}
#headSearch .searchContent button {
width: 74px;
height: 40px;
text-align: center;
font-size: 18px;
line-height: 40px;
color: #fff;
border: none;
background-image: linear-gradient(to right, #ff9000, #ff5000);
border-radius: 0 20px 20px 0;
}
#headSearch .hotkey {
height: 25px;
line-height: 25px;
}
#headSearch .hotkey a:hover {
color: #ff5000;
}
/* 导航 */
#nav h2 {
width: 190px;
height: 30.56px;
line-height: 30px;
font-size: 16px;
color: #ff6200;
text-align: center;
background-color: #ffffff;
border-top-left-radius: 15px;
border: none;
}
#nav ul {
width: 1000px;
background-color: #ffffff;
border-top-right-radius: 15px;
}
#nav ul li {
float: left;
line-height: 30px;
margin: 0 7px;
font-size: 14px;
color: #333333;
}
#nav ul li .ysr {
color: #ff0036;
font-weight: 700;
font-size: 16px;
}
#nav ul li .ysg {
color: #33c900;
font-weight: 700;
font-size: 16px;
}
.line1 {
margin: 0 0 0 7px;
}
.bh:hover {
color: #ff5000;
}
.pb {
padding: 0 5px;
}
/* <!-- 首屏内容 --> */
#firstScreen {
width: 1190px;
height: 4500px;
background-color: #ffffff;
border-radius: 0 0 15px 15px;
}
.firstLeft {
width: 773px;
height: 526px;
}
.firstLeft .sideNav {
width: 212px;
height: 526px;
}
.firstLeft .img1Box {
width: 520px;
height: 280px;
margin-top: 10px;
}
.firstLeft .img1Box img {
border-radius: 12px;
}
.firstLeft .pic {
width: 520px;
position: relative;
}
.firstLeft .pic button {
width: 20px;
height: 30px;
line-height: 30px;
color: #fff;
cursor: pointer;
border: none;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
margin-top: -15px;
display: none;
}
.firstLeft button.rb {
right: 0;
border-radius: 15px 0 0 15px;
}
.firstLeft button.lb {
left: 0px;
border-radius: 0 15px 15px 0;
}
.firstLeft .pic:hover button {
display: block;
}
.firstLeft .pic .circle {
width: 70px;
height: 30px;
border-radius: 10px;
position: absolute;
bottom: 15px;
height: 13px;
text-align: center;
font-size: 0;
left: 50%;
margin-left: -39px;
font-size: 0px;
background-color: rgba(255, 255, 255, .3);
text-align: center;
}
.firstLeft .pic .circle span {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 0 3px;
margin-top: 2px;
cursor: pointer;
}
.firstLeft .pic .circle .red {
background-color: #ff5000;
}
.firstLeft .img2Box {
width: 520px;
height: 218px;
margin-top: 10px;
}
.firstLeft .img2Box .text {
height: 24px;
}
.firstLeft .img2Box .tm {
height: 24px;
line-height: 24px;
}
.firstLeft .img2Box .text .bg {
color: #999;
margin-left: 10px;
width: 84px;
height: 14.5px;
line-height: 22px;
}
.firstLeft .img2Box.text .ym {
width: 19.2px;
height: 24px;
position: absolute;
top: 1px;
right: 2px;
}
.firstLeft .img2Box .nu1 {
width: 7.04px;
height: 15.5px;
color: #ff1648;
font-family: sans-serif;
font-size: 12px;
font-weight: 400;
}
.firstLeft .img2Box .nu5 {
color: #3c3c3c;
font-family: sans-serif;
font-size: 12px;
font-weight: 400;
}
.firstLeft .img2Box .text .tm {
width: 74px;
height: 22px;
}
.firstLeft .img2Box .img {
background-color: #f3f3f3;
border-radius: 20px;
padding: 4px 0 0 0;
}
.firstLeft .img2Box .img1 {
width: 251px;
height: 190px;
border-radius: 12px;
margin-left: 6px;
margin-top: 2px;
margin-right: 3px;
}
.firstLeft .img2Box .img2 {
width: 251px;
height: 190px;
border-radius: 12px;
margin-top: 2px;
}
.sideNav ul li {
height: 20px;
font-size: 14px;
margin: 0 0 14px;
transition: background-color 0.3s;
}
.sideNav ul {
padding: 6px 0 3px 18px;
}
.jm {
font-size: 16px;
color: #666;
}
.nav .sideNav ul li .wp {
margin: 0px;
}
.nav .sideNav ul li .tp {
height: 16px;
margin: 0 12px 0 0;
font-size: 16px;
color: #666;
}
.sideNav ul li .zs {
color: #666;
height: 17px;
}
.sideNav ul li .jl {
padding: 0 8px;
}
.sideNav ul li:hover {
color: #f40;
}
.sideNav ul a:hover {
color: #f40;
text-decoration: underline;
}
.sideNav ul span:hover {
color: #f40;
}
/* youbian */
.firstRight {
width: 384px;
height: 516px;
margin: 10px 18px 0 0;
background-color: #f3f3f3;
border-radius: 12px;
}
.firstRight .wuwu {
width: 384px;
height: 124px;
margin-top: 17.5px;
}
.firstRight .user {
position: relative;
display: block;
width: 384px;
height: 71px;
}
.firstRight .user img {
width: 50px;
height: 50px;
border-radius: 25px;
background-clip: padding-box;
line-height: 50px;
cursor: pointer;
margin-left: 167px;
}
.firstRight .user .username {
width: 384px;
font-size: 12px;
margin: 4px 0 0;
display: block;
height: 17px;
line-height: 17px;
text-align: center;
}
.firstRight .wuwu .btn {
width: 384px;
height: 42px;
margin: 11px 0 0;
padding: 0 0 0 14px;
}
.firstRight .wuwu .btn .login {
float: left;
color: #ffffff;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
background-repeat: repeat-x;
border: none;
text-align: center;
width: 128px;
height: 32px;
line-height: 32px;
margin: 0 6px 0 0;
background-clip: padding-box;
}
.firstRight .wuwu .btn .register {
float: left;
line-height: 32px;
width: 108px;
margin-right: 6px;
text-align: center;
color: #FFF;
background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
background-repeat: repeat-x;
border-radius: 4px;
background-clip: padding-box;
font-size: 16px;
border: none;
}
.firstRight .wuwu .btn .shop {
float: left;
line-height: 32px;
width: 108px;
margin-right: 6px;
text-align: center;
color: #FFF;
background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
background-repeat: repeat-x;
border-radius: 4px;
background-clip: padding-box;
font-size: 16px;
border: none;
}
.firstRight .tupian {
float: left;
width: 356px;
height: 141px;
border: 0px;
margin-left: 14px;
border-radius: 4px;
}
.firstRight .notice {
float: left;
width: 370px;
height: 100px;
margin-left: 14px;
}
.firstRight .notice div {
display: inline-block;
}
.firstRight .notice .gg {
float: left;
width: 370px;
height: 16px;
line-height: 16px;
margin: 17px 0 14px 0;
}
.firstRight .notice .gg .gg1 {
float: left;
width: 24px;
height: 16px;
font-size: 12px;
line-height: 16px;
font-weight: 700;
color: #3c3c3c;
}
.firstRight .notice .gg .gg2 {
float: left;
width: 108px;
margin-left: 6px;
height: 16px;
font-size: 12px;
line-height: 16px;
color: #3c3c3c;
}
.firstRight .notice .gz1 {
height: 18px;
width: 32px;
line-height: 18px;
border-radius: 2px;
background-color: rgba(255, 174, 174, .2);
opacity: .8;
text-align: center;
font-size: 12px;
color: #FF5000;
font-weight: 700;
float: left;
}
.firstRight .notice .gz2 {
font-size: 12px;
color: #666;
margin: 0 0 0 8px;
float: left;
width: 295px;
height: 18px;
line-height: 18px;
}
.firstRight .bth {
position: relative;
float: left;
width: 372px;
height: 53px;
margin: 20px 0 0 20px;
color: #3c3c3c;
margin-bottom: 5px;
}
.firstRight .bth div {
display: inline-block;
}
.firstRight .bth .xx {
width: 60px;
height: 36px;
color: #3c3c3c;
text-align: center;
font-size: 40px;
font-style: normal;
display: inline-block;
text-decoration: none;
margin-right: 30px;
}
.firstRight .bth .xx1 {
width: 60px;
height: 36px;
text-align: center;
font-size: 40px;
font-style: normal;
display: inline-block;
text-decoration: none;
margin-right: 4px;
}
.firstRight .bth p {
display: inline-block;
width: 60px;
height: 17px;
color: #333333;
font-size: 12px;
text-align: center;
cursor: pointer;
margin-right: 30px;
}
#sp .goods1 {
float: left;
width: 1190px;
height: 340px;
padding: 10px 0 0;
}
#sp .goods1 .head {
width: 1170px;
height: 24px;
padding-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
#sp .goods1 .head span {
width: 72px;
height: 24px;
font-size: 24px;
color: #111;
font-weight: bold;
line-height: 24px;
}
#sp .goods1 .head img {
margin: 4px 0 0 6px;
height: 20px;
}
/* .tupian */
#sp .goods1 ul {
width: 1190px;
height: 267px;
}
#sp .goods1 ul li {
float: left;
width: 215px;
height: 264px;
margin-left: 20px;
}
#sp .goods1 ul li img {
width: 215px;
height: 215px;
background-color: #000;
border-radius: 20px;
border: none;
}
#sp .goods1 ul li .p1 {
width: 205px;
height: 49px;
padding: 0 4px 0 6px;
}
#sp .goods1 ul li h4 a {
font-size: 16px;
color: #333333;
line-height: 16px;
margin-top: 10px;
font-weight: normal;
width: 198px;
overflow: hidden;
height: 16px;
}
#sp .goods1 ul li .text {
width: 182px;
height: 15px;
margin-top: 8px;
font-size: 14px;
letter-spacing: 0;
line-height: 15px;
color: #999999;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#sp .goods1 ul li a:hover{
background-color: white;box-shadow: rgba(0, 0, 0, .1) 5px 5px 5px 1px;
}
/* cainixihuan */
#xh .goods2 .head2 {
float: left;
width: 1190px;
height: 24px;
padding: 0 0 0 20px;
margin: 19px 0;
}
#xh .goods2 .head2 span {
width: 96px;
height: 24px;
font-size: 24px;
color: #111;
font-weight: bold;
line-height: 24px;
}
#xh .goods2 .head2 img {
width: 65px;
margin: 4px 0 0 6px;
height: 20px;
}
/* shebiaoge */
#xh .goods2 .list1 {
width: 1190px;
height: 3280px;
}
#xh .goods2 ul li {
width: 215px;
height: 326px;
float: left;
padding: 7px 7px 0 7px;
margin: 0 0 2px 7px;
color: #6c6c6c;
}
#xh .goods2 ul li:hover {
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
#xh .goods2 ul li img {
width: 215px;
height: 215px;
border-radius: 12px;
border: none;
}
#xh .goods2 ul li h4 {
width: 215px;
margin-top: 9px;
line-height: 22px;
height: 44px;
font-size: 16px;
color: #111111;
font-weight: normal;
transition: color 0.3s;
overflow: hidden;
}
#xh .goods2 ul li h4 a:hover {
color: #FF5000;
}
#xh .goods2 ul li .info {
width: 215px;
height: 22px;
margin: 11px 0 0;
line-height: 22px;
float: left;
color: #F40;
font-size: 20px;
}
/* .endd */
#end {
float: left;
width: 1190px;
height: 50px;
text-align: center;
}
/* 右侧定位导航 */
#tool {
width: 50px;
height: 350px;
position: fixed;
top: 100px;
right: 40px;
}
#tool span {
position: absolute;
top: -28px;
font-size: 32px;
color: #ff7f13;
width: 50px;
height: 36px;
line-height: 36px;
text-align: center;
}
#tool div {
height: 350px;
border-radius: 8px;
overflow: hidden;
}
#tool a {
display: block;
width: 50px;
height: 50px;
text-align: center;
background-color: #fff;
word-break: keep-all;
padding-top: 6px;
box-sizing: border-box;
position: relative;
}
#tool a:after {
content: '';
border-bottom: 1px solid #efefef;
width: 34px;
position: absolute;
left: 8px;
bottom: 0;
}
.c4 {
color: #f40;
}
.c7 {
color: #3c3c3c;
}
.pa {
padding: 6px 8px 0;
}
#tool .btnn .active {
font-weight: 700;
color: #fff;
background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
}
#tool .item6{
padding-top: 18px;
}
#tool .btnn .zh{
border-radius: 0 0 10px 10px;
}
#tool a:hover,#tool a.active{
background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000',endColorstr='#ffff5000',GradientType=1);
color: #fff;
font-weight: bold;
}
#tool a:hover:after,#tool a.active:after{
border: none;
}
/* zuixiamian */
#xm{
width: 1190px;
}
#xm .xf{
width: 247.500px;
height: 95px;
padding: 0 25px;
}
#xm .xf .tt{
width: 247.500px;
height: 48px;
margin-bottom: 5px;
}
#xm .xf .tt span{
float: left;
font-size: 32px;
color: #999;
font-weight: bold;
}
#xm .xf .tt h2{
width: 80px;
height: 24px;
padding-top: 12px;
margin-left: 12px;
float: left;
margin-left: 12px;
padding-top: 12px;
font-size: 16px;
font-weight: bold;
color: #3c3c3c;
}
#xm .xf ul{
width: 247.500px;
height: 42px;
display: inline-block;
}
#xm .xf ul li{
height: 21px;
display: inline-block;
zoom: 1;
font-size: 12px;
color: #999;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
margin-right: 10px;
float: none;
width: auto;
}
#xm .xf ul li a:hover{
color: #f22e00;
}网页（只能截个图发在博客上看看效果了）
?
?
?
?
?
?