淘宝网页练习
Posted sunshine-鸿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了淘宝网页练习相关的知识，希望对你有一定的参考价值。
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝网-！我喜欢</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<link rel="stylesheet" type="text/css" href="../css/taobao.css">
</head>
<body>
<!-- 导航栏 -->
<div class="dhl">
<header>
<!-- 登录 注册 -->
<ul>
<li>
<a href="#">亲,请登录</a>
</li>
<li>
<a href="#">免费注册</a>
</li>
<li>
<a href="#">手机逛淘宝</a>
</li>
</ul>
<!-- 我的淘宝 -->
<ul>
<li>
<img src="../img/images/nav-ham.png">
<a href="#">网站导航</a>
<img src="../img/images/nav-icon.png">
</li>
<li>
<a href="#">联系客服</a>
<img src="../img/images/nav-icon.png">
</li>
<li>
<a href="#">卖家中心</a>
<img src="../img/images/nav-icon.png">
</li>
<li class="spfl">|</li>
<li>
<a href="#">商品分类</a>
</li>
<li>
<img src="../img/images/nav-start.png">
<a href="#">收藏夹</a>
<img src="../img/images/nav-icon.png">
</li>
<li>
<img src="../img/images/nav-cart.png">
<a href="#">购物车 <span class="gwc"> 0 </span></a>
<img src="../img/images/nav-icon.png">
</li>
<li>
<a href="#">我的淘宝</a>
<img src="../img/images/nav-icon.png">
</li>
</ul>
</header>
</div>
<!-- 白底背景 -->
<div class="beijing">
<!-- 白底区域设置一个1200的宽 -->
<div class="taobaowang">
<!-- 上面 -->
<div class="logo">
<!-- logo图片-->
<a href="#">
<img src="../img/images/images/01-(233)_03.png" >
</a>
<!-- 搜索框那部分-->
<div class="sousuokuang">
<!-- 搜索框上面的宝贝、天猫、店铺-->
<div class="sousuokuang-top">
<ul>
<li>
<a href="#">宝贝</a>
</li>
<li>
<a href="#">天猫</a>
</li>
<li>
<a href="#">店铺</a>
</li>
</ul>
</div>
<!-- 搜索栏-->
<div class="sousuo">
<form action="#" method="post">
<input type="text"/>
<img class="fdj" src="../img/images/search-input.png">
<img class="zxj" src="../img/images/search-camera.png">
<button>
搜索
</button>
<div>
<a href="#">高级搜索</a>
</div>
<ul>
<li>
<a href="#">新款连衣裙</a>
</li>
<li>
<a href="#">四件套</a>
</li>
<li>
<a href="#">潮流T恤</a>
</li>
<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>
<li>
<a href="#">行车记录仪</a>
</li>
<li>
<a href="#">新款男鞋</a>
</li>
<li>
<a href="#">耳机</a>
</li>
<li>
<a href="#">更多
<img src="../img/images/nav-icon.png">
</a>
</li>
</ul>
</form>
</div>
</div>
</div>
<!-- 主题市场那部分 -->
<div class="ztsc-all">
<!-- 主题市场分类 -->
<div class="ztsc-l">
<h1>主题市场</h1>
<a href="#">
<img src="../img/images/menu-item-ham.png">
</a>
</div>
<!-- 天猫、聚划算 -->
<ul class="ztsc-r">
<li>
<a href="#">天猫</a>
</li>
<li>
<a href="#">聚划算</a>
</li>
<li>
<a href="#">天猫超市</a>
</li>
<li>|</li>
<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>
<li>
<a href="#">飞猪旅行</a>
</li>
<li>|</li>
<li>
<a href="#">智能生活</a>
</li>
<li>
<a href="#">苏宁易购</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 整体的左边部分 -->
<div class="demo">
<!-- 淘宝网下面 -->
<!-- 整体左边 -->
<div class="demo-l">
<div class="box">
<!-- 左 -->
<div class="box-l">
<ul>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
女装</a>
<span>/</span>
<a href="#">男装</a>
<span>/</span>
<a href="#">内衣</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
鞋靴</a>
<span>/</span>
<a href="#">箱包</a>
<span>/</span>
<a href="#">配件</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
童装玩具</a>
<span>/</span>
<a href="#">孕产</a>
<span>/</span>
<a href="#">用品</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
家电</a>
<span>/</span>
<a href="#">手机</a>
<span>/</span>
<a href="#">数码</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
美妆</a>
<span>/</span>
<a href="#">洗护</a>
<span>/</span>
<a href="#">保健品</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
珠宝</a>
<span>/</span>
<a href="#">眼镜</a>
<span>/</span>
<a href="#">手表</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
运动</a>
<span>/</span>
<a href="#">户外</a>
<span>/</span>
<a href="#">乐器</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
游戏</a>
<span>/</span>
<a href="#">动漫</a>
<span>/</span>
<a href="#">影视</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
美食</a>
<span>/</span>
<a href="#">生鲜</a>
<span>/</span>
<a href="#">零食</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
鲜花</a>
<span>/</span>
<a href="#">宠物</a>
<span>/</span>
<a href="#">农资</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
房产</a>
<span>/</span>
<a href="#">装修</a>
<span>/</span>
<a href="#">建材</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
家具</a>
<span>/</span>
<a href="#">家饰</a>
<span>/</span>
<a href="#">家纺</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
汽车</a>
<span>/</span>
<a href="#">二手车</a>
<span>/</span>
<a href="#">用品</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
办公</a>
<span>/</span>
<a href="#">DIY</a>
<span>/</span>
<a href="#">五金电子</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
百货</a>
<span>/</span>
<a href="#">餐厨</a>
<span>/</span>
<a href="#">家庭保健</a>
<span class="gt">></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
学习</a>
<span>/</span>
<a href="#">卡券</a>
<span>/</span>
<a href="#">本地服务</a>
<span class="gt">></span >
</li>
<li>
<img src="../img/images/index_01_03_03.png">
</li>
</ul>
</div>
<!-- 中 -->
<div class="box-m">
<!-- 上 -->
<div class="box-m-t">
<!-- 左边 -->
<div class="box-m-t-l">
<img src="../img/images/images/index_01_03.png">
</div>
<!-- 右边 -->
<div class="box-m-t-r">
<img src="../img/images/images/index_01_03_04.png">
<p>今日热卖</p>
</div>
</div>
<!-- 下面 -->
<div class="box-m-b">
<!-- 左边 -->
<div class="box-m-b-l">
<img src="../img/images/little-tmall.png">
<span class="tmbg">
天猫必逛
<span>热门品牌，天天上天猫！</span>
</span>
<span class="tmbg2">3<span>/6</span>
</span>
<ul>
<li>
<img src="../img/images/images/index_01_032.png">
</li>
<li>
<img src="../img/images/images/index_01_04_03.png">
</li>
<li>
<img src="../img/images/images/index_01_04_031.png">
</li>
<li>
<img src="../img/images/images/index_01-2_03.png">
</li>
</ul>
</div>
<!-- 右边 -->
<div class="box-m-b-r">
<img src="../img/images/images/index_01-3_03.png">
</div>
</div>
</div>
<!-- 下 -->
<ul class="box-b">
<li>
<div class="box-m-bt">
<img src="../img/images/images/index_01-45_03.png">
<div>
<a href="#">
<h1>书呆子</h1>
</a>
<p>书卷气更迷人</p>
<img src="../img/images/images/index_012_06.png">
</div>
</div>
</li>
<li>
<div class="box-m-bt">
<img src="../img/images/images/index_01-45_03.png">
<div>
<a href="#">
<h1>书呆子</h1>
</a>
<p>书卷气更迷人</p>
<img src="../img/images/images/index_012_06.png">
</div>
</div>
</li>
<li>
<div class="box-m-bt">
<img src="../img/images/images/index_01-45_03.png">
<div>
<a href="#">
<h1>书呆子</h1>
</a>
<p>书卷气更迷人</p>
<img src="../img/images/images/index_012_06.png">
</div>
</div>
</li>
<li>
<div class="box-m-bt">
<img src="../img/images/images/index_01-45_03.png">
<div>
<a href="#">
<h1>书呆子</h1>
</a>
<p>书卷气更迷人</p>
<img src="../img/images/images/index_012_06.png">
</div>
</div>
</li>
<li>
<div class="box-m-bt">
<img src="../img/images/images/index_01-45_03.png">
<div>
<a href="#">
<h1>书呆子</h1>
</a>
<p>书卷气更迷人</p>
<img src="../img/images/images/index_012_06.png">
</div>
</div>
</li>
</ul>
</div>
<!-- 我常逛的 -->
<div class="wcgd">
<!-- 上 -->
<div class="wcgd2">
<span class="wcgd3">
<span class="hx">———</span>
<img src="../img/images/i-shopping-icon.png">
我常逛的</span>
<span class="hx">———</span>
<span>
<a href="#">更多></a>
</span>
</div>
<!-- 下 -->
<div class="wcgd-b">
<!-- 亲宝贝 -->
<div class="wcgd-b-l">
<!-- 左边 -->
<div class="wcgd-b-l-b">
<img src="../img/images/images/common-l-t-m-l-l-t.png"><!-- 下 -->
<ul>
<li>
<h1>热门TOP</h1>
</li>
<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>
<li>
<a href="#">打底裤</a>
</li>
<li>
<a href="#">遮阳帽</a>
</li>
<li>
<a href="#">亲子装</a>
</li>
<li>
<a href="#">儿童T恤</a>
</li>
<li>
<a href="#">演出服</a>
</li>
</ul>
</div>
<!-- 右边 -->
<div class="qbb-r">
<!-- 上面 -->
<div class="qbb-r-t">
<div class="qbb-img1">
<img src="../img/images/1_03.png">
<img src="../img/images/images/2_03.png">
</div>
<div class="qbb-img2">
<img src="../img/images/images/common-l-t-m-l-r-t-m.png">
</div>
<div class="qbb-img3">
<img src="../img/images/images/common-l-t-m-l-r-t-r.png">
</div>
</div>
<!-- 下面 -->
<div class="qbb-r-b">
<div class="qbb-r-b-img">
<img src="../img/images/images/common-l-t-m-l-r-b-l.png">
<img src="../img/images/images/common-l-t-m-l-r-b-r-t.png">
<img src="../img/images/images/common-l-t-m-l-r-b-r-b.png">
</div>
</div>
</div>
</div>
<!-- 右 -->
<div class="wcgd-b-r">
<!-- 左边 -->
<div class="wcgd-b-l-b">
<img src="../img/images/images/common-l-t-m-r.png"><!-- 下 -->
<ul class="qqg">
<li>
<h1>热门TOP</h1>
</li>
<li>
<a href="#">面膜
<sup><img src="../img/images/h.png"></sup>
</a>
</li>
<li>
<a href="#">香水</a>
</li>
<li>
<a href="#">化妆品</a>
</li>
<li>
<a href="#">修复面膜</a>
</li>
<li>
<a href="#">洗发水</a>
</li>
<li>
<a class="kh" href="#">口红</a>
<a class="kh" href="#">bb霜</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="qbb-r">
<!-- 上面 -->
<div class="qbb-r-t">
<div class="qbb-img1">
<img src="../img/images/1_03.png">
<img src="../img/images/images/2_03.png">
</div>
<div class="qbb-img2">
<img src="../img/images/images/common-l-t-m-l-r-t-m.png">
</div>
<div class="qbb-img3">
<img src="../img/images/images/common-l-t-m-l-r-t-r.png">
</div>
</div>
<!-- 下面 -->
<div class="qbb-r-b">
<div class="qbb-r-b-img">
<img src="../img/images/images/common-l-t-m-l-r-b-l.png">
<img src="../img/images/images/common-l-t-m-l-r-b-r-t.png">
<img src="../img/images/images/common-l-t-m-l-r-b-r-b.png">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 天丝新款裤子-->
<div class="tskz">
<img src="../img/images/common-l-t-b.png">
</div>
<!-- 时尚爆料王 -->
<div class="ssblw">
<div class="ssblw-logo">
<span class="wcgd3">
<span class="hx">———</span>
<img src="../img/images/i-shopping-icon.png">
时尚爆料王</span>
<span class="hx">———</span>
<span class="gd">
<a href="#">更多></a>
</span>
</div>
<!-- 时尚爆料王下面 -->
<div class="ssblw-nr">
<!-- ifashion -->
<div class="ifashion">
<div class="ifashion-t">
<img src="../img/images/fashion-logo.png">
</div>
<div class="ifashion-b">
<img src="../img/images/common-l-b-m-l-l-b-l.png">
<div class="ifashion-b-r">
<img src="../img/images/bkviblb.png">
<img src="../img/images/nyufvjxt.png">
</div>
</div>
</div>
<!-- 全球够 -->
<div class="quanqiugou">
<div class="ifashion-t">
<img src="../img/images/fashion-logo.png">
</div>
<div class="ifashion-b">
<img src="../img/images/common-l-b-m-l-l-b-l.png">
<div class="ifashion-b-r">
<img src="../img/images/bkviblb.png">
<img src="../img/images/nyufvjxt.png">
</div>
</div>
</div>
<!-- 美妆秀 -->
<div class="meizhuangxiu">
<div class="ifashion-t">
<img src="../img/images/fashion-logo.png">
</div>
<div class="ifashion-b">
<img src="../img/images/common-l-b-m-l-l-b-l.png">
<div class="ifashion-b-r">
<img src="../img/images/bkviblb.png">
<img src="../img/images/nyufvjxt.png">
</div>
</div>
</div>
<!-- 爱逛街 -->
<div class="aiguangjie">
<div class="ifashion-t">
<img src="../img/images/fashion-logo.png">
</div>
<div class="ifashion-b">
<img src="../img/images/common-l-b-m-l-l-b-l.png">
<div class="ifashion-b-r">
<img src="../img/images/bkviblb.png">
<img src="../img/images/nyufvjxt.png">
</div>
</div>
</div>
</div>
</div>
<!-- 街头潮流 -->
<div class="jtcl">
<img src="../img/images/common-l-b-m-b.png">
</div>
</div>
<!-- 整体右边部分 -->
<div class="demo-r">
<!-- 从登录注册到阿里app -->
<div class="box-m-r">
<!-- 登录 -->
<div class="box-m-r-t">
<!-- 登录、注册 -->
<div class="dlzc">
<figure>
<img src="../img/images/login-header.png">
<p>Hi! 你好</p>
<figcaption>
<img src="../img/images/gold-money.png">
<span>
<a href="#">领淘金币抵钱</a>
</span>或去<span>
<a href="#">会员俱乐部</a></span>
<ul class="kd">
<li>
<a href="#">登录</a>
</li>
<li>
<a href="#">注册</a>
</li>
<li>
<a href="#">开店</a>
</li>
</ul>
</figcaption>
</figure>
</div>
<!-- 公告、规则 -->
<div class="gz">
<span>公告</span>
<span>规则</span>
<span>论坛</span>
<span>安全</span>
<span>公益</span>
<a href="#">
<p>马云访问阿根廷签战略合作
总统里亲自推销农产品</p>
</a>
<a href="#">
<p>马云阿根廷讲跨境贸易
淘宝发布空巢青年图鉴</p>
</a>
</div>
</div>
<!-- 充话费..... -->
<div class="box-m-r-m">
<ul>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<img src="../img/images/phone.png">
<p>充话费</p>
</a>
</li>
</ul>
</div>
<!-- 阿里APP -->
<div class="box-m-r-b">
<span>阿里APP</span>
<a href="#">更多></a>
<ul>
<li>
<img src="../img/images/app-logo.png">
</li>
<li>
<img src="../img/images/app-logo.png">
</li>
<li>
<img src="../img/images/app-logo.png">
</li>
<li>
<img src="../img/images/app-logo.png">
</li>
<li>
<img src="../img/images/app-logo.png">
</li>
<li>
<img src="../img/images/app-logo.png">
</li>
<li>
<img src="../img/images/app-logo.png">
</li>
<li>
<img src="../img/images/app-logo.png">
</li>
<li>
<img src="../img/images/app-logo.png">
</li>
<li>
<img src="../img/images/app-logo.png">
</li>
</ul>
</div>
</div>
<!-- 淘宝头条 -->
<div class="tbtt">
<div class="tbtt-t">
<img src="../img/images/tkbktbtc.png">
<a href="#">更多></a>
</div>
<!-- 淘宝头条内容 -->
<div class="tbtt-b">
<img src="../img/images/common-r-t-b-f.png">
<div>
<a href="#">
<h1>工作需要放松,享受下午茶时光</h1>
</a>
<a href="#">
<p>你有吃下午茶的习惯吗?最早关于下午茶的由来,可以追溯到英国17世纪</p>
</a>
</div>
</div>
</div>
<!-- 有好货 -->
<div class="yhh">
<img src="../img/images/ybhkho.png">
<!-- 丹麦 -->
<div class="md">
<img src="../img/images/common-r-b-m-f-1.png">
<div>
<a href="#">丹麦Mat 手工皮革隔热</a>
<p>皮革质地能有效隔热 ,触感细腻独特.造型简约大方,质感</p>
<p class="sh">164 人说好</p>
</div>
</div>
<!-- 广东特产 -->
<div class="gdtc">
<img src="../img/images/images/common-r-b-m-f-2.png">
<div class="gdtc2">
<a href="#">广东特产红豆饼糕点</a>
<p>广东特产红豆饼糕点，馅心低糖清甜，饼皮软韧酥脆，馅料</p>
<p class="gdtc3">17 人说好</p>
</div>
</div>
<!-- 韩国面膜 -->
<div class="gdtc">
<img src="../img/images/images/common-r-b-m-f-3.png">
<div class="gdtc2">
<a href="#">韩国VERITE镇静肌肤面</a>
<p>暗黄斑点肤质适用的一款面膜贴，含有维他命C诱导体、樱</p>
<p class="gdtc3">0 人说好</p>
</div>
</div>
<!-- 思亲肤青葡萄 -->
<div class="gdtc">
<img src="../img/images/images/common-r-b-m-f-4.png">
<div class="gdtc2">
<a href="#">思亲肤青葡萄唤醒粉饼</a>
<p>控油和保湿兼具的一款粉饼，含有青葡萄萃取精华，可以调</p>
<p class="gdtc3">159 人说好</p>
</div>
</div>
<!-- 印花长袖T恤 -->
<div class="gdtc">
<img src="../img/images/images/01-(278)_03.png">
<div class="gdtc2">
<a href="#">印花长袖T恤</a>
<p>趣味十足的人像印花设计，让整个造型充满灵气和气氛。简</p>
<p class="gdtc3">20 人说好</p>
</div>
</div>
<!-- 短袖戴帽T恤 -->
<div class="gdtc">
<img src="../img/images/images/common-r-b-m-f-6.png">
<div class="gdtc2">
<a href="#">短袖戴帽T恤</a>
<p>个性十足的人像印花设计，展现别样的穿搭趣味。运动风十</p>
<p class="gdtc3">3 人说好</p>
</div>
</div>
<!-- 换一组 -->
<div class="hyz">
<a href="#"><img src="../img/images/change.png">换一组看看</a>
</div>
</div>
</div>
</div>
<!-- 热卖单品 -->
<div class="rmdp">
<!-- 上 -->
<div class="rmdp-t">
<h1>
<span class="hx">———</span>
<img src="../img/images/fire.png">
热卖单品
<span class="hx">———</span>
</h1>
<ul class="rmdp-t-b">
<li>
<a href="#">客厅灯</a>
</li>
<li>|</li>
<li>
<a href="#">床垫</a>
</li>
<li>|</li>
<li>
<a href="#">沙发垫</a>
</li>
<li>|</li>
<li>
<a href="#">衣柜</a>
</li>
<li>|</li>
<li>
<a href="#">电脑椅</a>
</li>
<li>|</li>
<li>
<a href="#">沙发</a>
</li>
<li>|</li>
<li>
<a href="#">凉席</a>
</li>
<li>|</li>
<li>
<a href="#">男内裤</a>
</li>
<li>|</li>
<li>
<a href="#">蚊帐</a>
</li>
<li>|</li>
<li>
<a href="#">拉杆箱</a>
</li>
<li>|</li>
<li>
<a href="#">鞋柜</a>
</li>
<li>|</li>
<li>
<a href="#">防晒衣</a>
</li>
<li>|</li>
<li>
<a href="#">窗帘</a>
</li>
<li>|</li>
<li>
<a href="#">运动鞋</a>
</li>
<li>|</li>
<li>
<a href="#">凉鞋男</a>
</li>
<li>|</li>
<li>
<a href="#">夹克</a>
</li>
<li>|</li>
<li>
<a href="#">电风扇</a>
</li>
<li>|</li>
<li>
<a href="#">牛仔裤</a>
</li>
<li>|</li>
<li>
<a href="#">电脑桌</a>
</li>
<li>|</li>
<li>
<a href="#">T恤男</a>
</li>
<li>|</li>
<li>
<a href="#">男T恤</a>
</li>
<li>|</li>
<li>
<a href="#">男包</a>
</li>
<li>|</li>
<li>
<a href="#">真丝群</a>
</li>
<li>|</li>
</ul>
</div>
<!-- 中 -->
<div class="rmdp-m">
<!-- 左 -->
<div class="rmdp-m-l">
<div class="rmdp-m-l-l">
<figure>
<a href="#">
<img src="../img/images/hot-b-l-l-t.png">
</a>
<figcaption>
<p class="jiage">￥ 799.00</p>
<p class="yuexiao">月销2笔</p>
<p>真皮时尚 高档箱包 头层牛皮包 欧美时尚鳄鱼纹 气质女包</p>
<p>评价 0 收藏 70</p>
</figcaption>
</figure>
</div>
<!-- 右上 -->
<div class="rmdp-m-l-r">
<div class="rmdp-m-r-t">
<figure>
<a href="#">
<img src="../img/images/hot-b-l-r-t.png">
</a>
<figcaption>
<p class="jiage2">￥ 799.00</p>
<p class="yuexiao2">
<span class="baoyou">包邮</span>
月销9笔
</p>
</figcaption>
</figure>
</div>
<!-- 右下 -->
<div class="rmdp-m-r-b">
<figure>
<a href="#">
<img src="../img/images/hot-b-l-r-b-t.png">
</a>
<figcaption>
<p class="jiage2">￥ 28.00</p>
<p class="yuexiao2">
<span class="baoyou">包邮</span>
月销9笔
</p>
</figcaption>
</figure>
</div>
</div>
</div>
<!-- 中 -->
<div class="rmdp-m-m">
<!-- 左 -->
<div class="rmdp-m-l">
<div class="rmdp-m-l-l">
<figure>
<a href="#">
<img src="../img/images/01-(214)_03_03.png">
</a>
<figcaption>
<p class="jiage">￥ 546.00</p>
<p class="yuexiao">月销27笔</p>
<p>进口尼龙面料 防泼水 香港品牌女包 轻盈</p>
<p>评价 145 收藏 7100</p>
</figcaption>
</figure>
</div>
<!-- 右上 -->
<div class="rmdp-m-l-r">
<div class="rmdp-m-r-t">
<figure>
<a href="#">
<img src="../img/images/01-(212)_03.png">
</a>
<figcaption>
<p class="jiage2">￥ 149.00</p>
<p class="yuexiao2">
<span class="baoyou2">新品</span>
月销320笔
</p>
</figcaption>
</figure>
</div>
<!-- 右下 -->
<div class="rmdp-m-r-b">
<figure>
<a href="#">
<img class="xiezi" src="../img/images/01-(210)_06.png">
</a>
<figcaption>
<p class="jiage2">￥ 708.00</p>
<p class="yuexiao2">
<span class="baoyou">包邮</span>
月销58笔
</p>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<!-- 右 -->
<div class="rmdp-m-r">
<!-- 左 -->
<div class="rmdp-m-l">
<div class="rmdp-m-l-l">
<figure>
<a href="#">
<img src="../img/images/01-(21)_03.png">
</a>
<figcaption>
<p class="jiage">￥ 198.00</p>
<p class="yuexiao">月销446笔</p>
<p>优质橡胶原材料制作打底时尚的； 行走的时候脚底压力得到很好</p>
<p>评价 64 收藏 2798</p>
</figcaption>
</figure>
</div>
<!-- 右上 -->
<div class="rmdp-m-l-r">
<div class="rmdp-m-r-t">
<figure>
<a href="#">
<img src="../img/images/01-(22)_03.png">
</a>
<figcaption>
<p class="jiage2">￥ 128.00</p>
<p class="yuexiao2">
<span class="baoyou">包邮</span>
月销202笔
</p>
</figcaption>
</figure>
</div>
<!-- 右下 -->
<div class="rmdp-m-r-b">
<figure>
<a href="#">
<img src="../img/images/01-(23)_06.png">
</a>
<figcaption>
<p class="jiage2">￥ 19.00</p>
<p class="yuexiao2">
月销9206笔
</p>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<!-- 下 -->
<div class="rmdp-b">
<ul>
<li>
<img src="../img/images/add-two.png">
</li>
<li>
<img src="../img/images/add-three.png">
</li>
<li>
<img src="../img/images/hot-f-3.png">
</li>
</ul>
</div>
</div>
<!-- 消费者 -->
<div class="xfz">
<!-- 消费者保障 -->
<div class="xfzbz">
<p class="xfzbz2">
<img src="../img/images/about-icon1.png">
<span class="xfbz-bt">消费者保障</span>
</p>
<p class="xfbz-nr">保障范围 退货退款流程 服务中心 更多特色服务</p>
</div>
<!-- 新手上路 -->
<div class="xssl">
<p class="xfzbz2">
<img src="../img/images/footer-t2.png">
<span class="xfbz-bt">新手上路</span>
</p>
<p class="xfbz-nr">新手专区 消费警示 交易安全 24小时在线帮助 免费开店</p>
</div>
<!-- 付款方式 -->
<div class="fkfs">
<p class="xfzbz2">
<img src="../img/images/footer-t3.png">
<span class="xfbz-bt">付款方式</span>
</p>
<p class="xfbz-nr">快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款</p>
</div>
<!-- 淘宝特色 -->
<div class="tbts">
<p class="xfzbz2">
<img src="../img/images/footer-t4.png">
<span class="xfbz-bt">淘宝特色</span>
</p>
<p class="xfbz-nr">手机淘宝 旺旺/旺信 大众评审</p>
</div>
</div>
<!-- 右边固定导航栏 -->
<ul class="gddhl">
<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>
<li>
<a href="#">猜你喜欢</a>
</li>
<li>
<a href="#">反馈</a>
</li>
<li>
<a href="#">暴恐举报</a>
</li>
<li>
<a href="#">返回顶部</a>
</li>
</ul>
<!-- 尾部 -->
<footer>
<!-- 上 -->
<div class="footer-top">
<!-- 阿里巴巴集团那行 -->
<ul>
<li>
<a href="#">阿里巴巴集团</a>
</li>
<li>|</li>
<li>
<a href="#">淘宝网</a>
</li>
<li>|</li>
<li>
<a href="#">天猫</a>
</li>
<li>|</li>
<li>
<a href="#">聚划算</a>
</li>
<li>|</li>
<li>
<a href="#">全球速卖通</a>
</li>
<li>|</li>
<li>
<a href="#">阿里巴巴国际交易市场</a>
</li>
<li>|</li>
<li>
<a href="#">1688</a>
</li>
<li>|</li>
<li>
<a href="#">阿里妈妈</a>
</li>
<li>|</li>
<li>
<a href="#">飞猪</a>
</li>
<li>|</li>
<li>
<a href="#">阿里云计算</a>
</li>
<li>|</li>
<li>
<a href="#">YunOS</a>
</li>
<li>|</li>
<li>
<a href="#">阿里通信</a>
</li>
<li>|</li>
<li>
<a href="#">一淘</a>
</li>
<li>|</li>
<li>
<a href="#">万网</a>
</li>
<li>|</li>
<li>
<a href="#">高德</a>
</li>
<li>|</li>
<li>
<a href="#">UC</a>
</li>
<li>|</li>
<li>
<a href="#">友盟</a>
</li>
</ul>
<!-- 虾米 -->
<ul>
<li>
<a href="#">虾米</a>
</li>
<li>|</li>
<li>
<a href="#">阿里星球</a>
</li>
<li>|</li>
<li>
<a href="#">钉钉</a>
</li>
<li>|</li>
<li>
<a href="#">支付宝</a>
</li>
<li>|</li>
<li>
<a href="#">优酷</a>
</li>
<li>|</li>
<li>
<a href="#">土豆</a>
</li>
<li>|</li>
<li>
<a href="#">阿里健康</a>
</li>
<li>|</li>
<li>
<a href="#">阿里影业</a>
</li>
<li>|</li>
<li>
<a href="#">阿里体育</a>
</li>
<li>|</li>
<li>
<a href="#">网商银行</a>
</li>
</ul>
</div>
<!-- 下 -->
<div class="footer-bottom">
<!-- 关于淘宝那行 -->
<ul class="gytb">
<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>
<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>
<li>
<a href="#">知识产权</a>
</li>
<li>|</li>
<li>
©2003-2017 Taobao.com版权所有
</li>
</ul>
<!-- 文化经营 -->
<ul class="whjy">
<li>
<a href="#">网络文化经营许可:浙网[2013]0268-027号</a>
</li>
<li>|</li>
<li>
<a href="#">增值电信业务经营许可证：浙B2-20080224</a>
</li>
<li>|</li>
<li>
信息网路传播视听节目许可证：1109364号
</li>
<li>|</li>
<li>互联网违法和不良信息举报电话：0571-81683755 [email protected]
</li>
</ul>
<!-- 浙公网安备 -->
<p class="zgwab">
<a href="#">
<img src="../img/images/index_0111_03.png">
浙公网安备 33010002000078号
</a>
</p>
<!-- 图片 -->
<ul class="tupian">
<li>
<a href="#">
<img src="../img/images/index_019_03.png">
</a>
</li>
<li>
<a href="#">
<img src="../img/images/index_051_03.png">
</a>
</li>
<li>
<a href="#">
<img src="../img/images/index_015_03.png">
</a>
</li>
<li>
<a href="#">
<img src="../img/images/index_1_03.png">
</a>
</li>
<li>
<a href="#">
<img src="../img/images/index_121_03.png">
</a>
</li>
<li>
<a href="#">
<img src="../img/images/index_11_03.png">
</a>
</li>
<li>
<a href="#">
<img src="../img/images/index_0112_03.png">
</a>
</li>
<li>
<a href="#">
<img src="../img/images/index_011_03.png">
</a>
</li>
<li>
<a href="#">
<img src="../img/images/index_0411_03.png">
</a>
</li>
<li>
<a href="#">
<img src="../img/images/index_01235_19.png">
</a>
</li>
<li>
<a href="#">
<img src="../img/images/footer-f3.png">
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
CSS代码
a{
text-decoration: none;
}
a:link,
a:visited{
color: black;
}
ul,ol{
list-style: none;
}
/*背景颜色*/
body{
background-color:#F5F5F5;
}
/*导航栏*/
header{
width:1200px;
height: 36px;
margin: 0 auto;
position: fixed;
top: 0;
left: 351.5px;
background-color: #f5f5f5;
}
header>ul:first-child>li{
float: left;
}
header>ul:first-child>li:last-child>a{
margin-left: 21px;
}
header>ul:first-child>li:first-child>a{
color: #F23045;
margin: 0 10px;
}
header>ul:last-child>li{
float: right;
}
header>ul>li>a{
font-size: 14px;
line-height: 36px;
}
header>ul:last-child>li>a{
margin:0 10px 0 6px;
}
header>ul>li{
margin-right:16px;
}
.gwc{
font-weight: bold;
color: red;
}
.spfl{
padding: 6px;
}
.dhl{
width: 100%;
height: 36px;
background-color: #f5f5f5;
}
/*白底背景*/
.beijing{
width: 100%;
background-color: #fff;
}
/*白底区域设置一个1200的宽*/
.taobaowang{
width:1200px;
margin:0 auto;
padding-top: 60px;
box-sizing:border-box;
}
/*淘宝网logo*/
.logo>a>img{
margin-right: 75px;
margin-top: 17px;
}
/*搜索框那一块*/
.logo>a{
float: left;
}
.sousuokuang-top>ul{
height: 26px;
}
.sousuokuang-top>ul>li{
float: left;
}
.sousuokuang-top>ul>li>a{
font-size: 14px;
padding-right: 13px;
color: red;
padding: 5px 12px;
}
.sousuokuang-top>ul>li>a:hover{
background-color: red;
color: #fff9f7;
font-weight: bold;
}
.sousuokuang{
overflow: hidden;
}
/*搜索栏*/
.sousuo>form>input{
width: 465px;
height: 40px;
border: 3px solid #ff5602;
outline: none;
float: left;
padding-left: 40px;
padding-right: 40px;
}
.sousuo>form{
position: relative;
}
.fdj{
position: absolute;
top: 20px;
left: 20px;
}
.zxj{
position: absolute;
top: 20px;
left: 510px;
}
.sousuo>form>button{
width: 120px;
height: 48px;
background-color: #ff6806;
color: #fff9f7;
font-size: 20px;
padding: 0px;
border: 0px;
float: left;
}
.sousuo>form>div>a{
width: 38px;
height: 48px;
margin-left: 10px;
float: left;
text-align: center;
}
.sousuo>form>div>a:hover{
background-color: #ff6806;
color: #fff9f7;
}
.sousuo>form>ul{
width:666px;
}
.sousuo>form>ul>li>a{
font-size: 12px;
}
.sousuo>form>ul>li{
margin-top: 8px;
}
.sousuo>form>ul>li>a:hover{
color: red;
}
.sousuo>form>ul>li:not(:last-child){
float: left;
padding-right: 12px;
}
.sousuo>form>ul>li:last-child{
float: right;
}
/*主题市场*/
/*左边分类块*/
.ztsc-all{
margin-top: 16px;
height: 33px;
}
.ztsc-l{
width: 190px;
height: 34px;
background-color:#FF6A07;
float: left;
}
.ztsc-l>h1{
color: #fff;
line-height: 34px;
padding:0px 10px;
float: left;
}
.ztsc-l>a>img{
float: right;
padding-top: 10px;
padding-right: 10px;
}
/*天猫、聚划算、天猫超市*/
.ztsc-r{
float: left;
}
.ztsc-r>li{
float: left;
margin-left: 10px;
line-height: 33px;
}
.ztsc-r>li>a{
padding: 0 10px;
}
.ztsc-r>li:hover>a{
color: #fff;
font-weight: bold;
background-color: #FF4502;
transition-duration: 0.5s;
border-radius: 10px;
padding:0 10px;
}
.ztsc-r>li:nth-child(4)>a{
margin-left: 7px;
}
/*淘宝网下面那块*/
.demo{
width: 1200px;
clear: both;
margin: 0 auto;
}
.demo-l{
width: 900px;
height: 613px;
/*border: 1px solid red;*/
float: left;
}
.demo-r{
float: left;
}
/*中间*/
.box{
height: 610px;
margin: 0 auto;
clear: both;
}
/*左边分类*/
.box-l{
float: left;
}
.box-l>ul{
width: 190px;
height: 524px;
background-color: #FF6706;
color: #fff;
font-weight: 400;
}
.box-l>ul>li>a{
font-size: 12px;
color: #fff;
font-weight: bold;
}
.box-l>ul>li:not(:last-child){
margin-bottom: 8px;
margin-left: 10px;
}
.box-l>ul>li:first-child{
padding-top: 10px;
}
.box-l>ul>li:nth-child(16){
padding-bottom: 9px;
}
.gt{
float: right;
padding-right: 10px;
}
.box-l>ul>li>a>img{
margin-right: 2px;
}
.box-l>ul>li>a:hover{
text-decoration: underline;
color: black;
}
/*中间*/
.box-m{
width: 690px;
height: 523px;
float: left;
margin: 5px;
float: left;
}
.box-m-t-l{
width: 519px;
float: left;
}
.box-m-t-r{
width: 160px;
height: 280px;
float: right;
}
.box-m-t-r>p{
font-size: 12px;
color: #c1c1c1;
padding-top: 10px;
}
.box-m-b-l>img{
margin-top: 10px;
}
.box-m-b-l{
width: 522px;
border-bottom:3px solid #C12E28;
}
.tmbg{
font-size: 14px;
font-weight: bold;
vertical-align: bottom;
}
.tmbg>span{
font-size: 12px;
vertical-align: bottom;
}
.tmbg2{
margin-top: 10px;
font-size: 12px;
float: right;
color: #C12E4D;
vertical-align: bottom;
}
.tmbg2>span{
vertical-align: bottom;
color: black
}
.box-m-b-l>ul>li{
float: left;
}
.box-m-b-l>ul>li>img{
margin-top: 10px;
}
.box-m-b-r>img{
margin-left: 10px;
margin-top: 10px;
}
.box-m-bt>img{
float: left;
}
.box-m-bt>div>a>h1{
font-size: 18px;
color: #9B7560;
}
.box-m-bt>div>p{
font-size: 12px;
}
.box-b{
clear: both;
width: 894px;
height: 80px;
background-color: #fff;
}
.box-b>li{
float: left;
width: 167px;
margin-top: 8px;
margin-left: 10px;
}
/*我常逛的*/
.wcgd{
width: 894px;
height: 425px;
}
.wcgd2{
height: 50px;
width: 894px;
text-align: center;
margin-top: 10px;
}
.wcgd3{
font-size: 16px;
font-weight: bold;
line-height: 50px;
}
.wcgd2>span:last-child>a{
font-size: 14px;
border: 1px solid #fff;
border-radius: 10px;
margin: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #fff;
line-height: 50px;
}
.wcgd2>span:last-child{
float: right;
}
.wcgd2>span:last-child:hover>a{
background-color: red;
color: #fff;
}
.hx{
font-weight: 100;
color: #c1c1c1;
}
.wcgd-b{
width: 894px;
height: 376px;
}
.wcgd-b-l{
width: 443px;
height: 376px;
border: 2px solid #FFC0D9;
float: left;
}
.wcgd-b-r{
width: 443px;
height: 376px;
border: 1px solid #6349B4;
float: left;
}
/*亲宝贝*/
.wcgd-b-l-b>img{
width: 100px;
}
.wcgd-b-l-b{
width: 100px;
height: 363px;
background-color:#FF3386;
float: left;
}
.wcgd-b-l-b>ul>li:not(:first-child){
width: 64px;
height: 19px;
line-height: 19px;
background-color: #FF5B9F;
margin-top:4px;
margin-left: 8px;
}
.wcgd-b-l-b>ul>li:not(:first-child)>a{
color: #fff;
font-size: 14px;
}
.wcgd-b-l-b>ul>li:first-child{
font-size: 16px;
color: #fff;
pdding-top: 10px;
margin-left: 8px;
}
.wcgd-b-l-b>ul>li:hover>a{
text-decoration: underline;
color: black;
}
.qbb-img1{
width: 100px;
height: 201px;
float: left;
}
.qbb-img1>img,
.qbb-img3>img{
border-bottom: 1px solid #c1c1c1;
float: left;
}
.qbb-img2>img{
border-bottom: 1px solid #c1c1c1;
border-left: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
float: left;
}
.qbb-r-b{
width: 340px;
height: 160px;
float: left;
}
.qbb-r-b-img>img{
float: left;
}
/*全球购*/
.wcgd-b-l-b>.qqg>li:not(:first-child){
width: 65px;
height: 19px;
line-height: 19px;
background-color: #6349B4;
margin-top:4px;
margin-left: 8px;
}
.qqg{
height: 265px;
background-color: #826EC2;
}
.qqg>ul>li:not(:first-child)>a{
color: #fff;
font-size: 14px;
}
.qqg>ul>li:first-child{
font-size: 16px;
color: #fff;
pdding-top: 10px;
margin-left: 8px;
}
.wcgd-b-l-b>.qqg>li:hover>a{
text-decoration: underline;
color: red;
}
/*天丝新款裤子*/
.tskz>img{
margin:15px 0;
}
/*时尚爆料王*/
.ssblw{
width: 892px;
height: 309px;
}
.ssblw-logo{
width: 890px;
height: 47px;
line-height: 47px;
margin-top: 10px;
}
.ssblw-logo{
text-align: center;
}
.ssblw-logo>span:last-child>a{
font-size: 14px;
border: 1px solid #fff;
border-radius: 10px;
margin: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #fff;
line-height: 50px;
}
.gd{
float: right;
}
.ssblw-logo>span:last-child:hover>a{
color: #fff;
background: linear-gradient(to right,#FFC223,#FF8A1B);
}
.ifashion,
.aiguangjie,
.meizhuangxiu,
.quanqiugou{
width: 222px;
height: 255px;
float: left;
background-color: #fff;
outline:1px solid #c1c1c1;
}
.ssblw-nr{
width: 890px;
height: 257px;
float: left;
}
.ifashion-t{
width: 223px;
height: 42px;
}
.ifashion-b>img,
.ifashion-b-r>img{
float: left;
border-bottom: 1px solid #c1c1c1;
margin-bottom: 17px;
margin-left: 10px;
margin-top: 5px;
}
/*街头潮流*/
.jtcl>img{
margin:15px 0;
}
/*右边登录*/
.box-m-r{
width:290px;
height: 600px;
}
.box-m-r-t{
width: 300px;
height: 280px;
}
.dlzc{
height:169px;
background-color: #fff;
}
.dlzc>figure>img{
margin-top: 15px;
}
.dlzc>figure>p{
font-size: 14px;
margin-top: 7px;
}
.dlzc>figure>figcaption>span>a{
color: red;
margin-top: 12px;
}
.dlzc>figure>figcaption{
font-size: 14px;
}
.dlzc>figure{
text-align: center;
margin-top: 5px;
}
.kd>li{
width: 74px;
height: 26px;
background-color: #FF5A04;
border: 1px solid #FF5A04;
float: left;
margin-top: 5px;
line-height: 26px;
}
.kd>li:nth-child(1){
width: 91px;
height: 26px;
color: #fff;
background-color: #FF5A04;
margin-left: 10px;
margin-right: 10px;
}
.kd>li:nth-child(3){
margin-left: 10px;
}
.kd>li:hover>a{
color: #fff;
font-weight: bold;
transition-duration: 0.5s;
color: #fff;
}
.gz{
margin-top: 5px;
font-size: 14px;
background-color: #fff;
padding: 8px;
}
.gz>span{
margin-left:16px;
}
.gz>span:hover{
font-weight: bold;
border-bottom: 2px solid red;
transition-duration: 1s;
}
.gz>a>p{
font-size: 12px;
margin-top: 17px;
}
.gz>a>p:hover{
color: red;
}
/*充话费*/
.box-m-r-m{
width:300px;
height: 200px;
margin-top: 5px;
}
.box-m-r-m>ul>li>a{
font-size: 12px;
}
.box-m-r-m>ul{
float: left;
}
.box-m-r-m>ul>li{
width: 73px;
height: 66px;
margin: 1px;
background-color: #fff;
text-align: center;
line-height: 30px;
}
.box-m-r-m>ul>li:hover{
transform:scale(1.2);
transition-duration:1s;
}
/*阿里APP*/
.box-m-r-b{
margin-top: 5px;
width: 300px;
height: 119px;
background-color: #fff;
}
.box-m-r-b>span{
font-size: 14px;
font-weight: 600;
margin-right: 150px;
}
.box-m-r-b>a{
font-size: 14px;
}
.box-m-r-b>a:hover{
background: linear-gradient(to right,#FFC223,#FF8A1B);
}
.box-m-r-b>span,
.box-m-r-b>a{
margin-left:15px;
}
.box-m-r-b>ul>li{
margin-top: 10px;
margin-left: 20px;
float: left;
}
.box-m-r-b>ul>li:hover>img{
transform:scale(1.2);
transition-duration:1s;
}
/*淘宝头条*/
.tbtt{
margin-top: 20px;
width: 300px;
height: 116px;
background-color: #fff;
}
.tbtt-t{
height: 26px;
}
.tbtt-t>img{
margin-top: 9px;
margin-left: 10px;
}
.tbtt-t>a{
font-size: 12px;
float: right;
line-height: 26px;
margin-right: 10px;
}
.tbtt-b{
height: 75px;
margin-top: 10px;
margin-left: 10px;
}
.tbtt-b>img{
float: left;
margin-right: 10px;
}
.tbtt-b>div{
float: left;
width: 190px;
margin-left: 5px;
}
.tbtt-b>div>a>h1{
font-size: 14px;
margin-bottom: 5px;
}
.tbtt-b>div>a>p{
font-size: 12px;
}
.tbtt-t>a:hover{
background: linear-gradient(to right,#FFC223,#FF8A1B);
color: #fff;
}
.tbtt-b>div>a>h1:hover{
transform:scale(1.1);
transition-duration:0.5s;
color: red;
text-decoration: underline;
}
/*有好货*/
.yhh{
width: 300px;
margin-top: 10px;
background-color: #fff;
margin-bottom: 15px;
}
.yhh>img{
margin-top: 15px;
margin-left: 10px;
}
.md{
height: 92px;
margin-top: 22px;
}
.yhh>div>div{
width: 155px;
}
.yhh>div>img,
.yhh>div>div{
float: left;
margin-left: 10px;
}
.yhh>div>div>a{
font-size: 14px;
font-weight: 900;
}
.yhh>div>div>p{
font-size: 12px;
margin-top: 10px;
}
.sh{
font-size: 14px;
color: #69ADF5;
font-weight: 900;
}
.md>img:hover{
transform:scale(1.5);
transition-duration: 0.5s;
}
.md>div>a:hover{
color: red;
text-decoration: underline;
transition-duration: 0.5s;
}
/*广东特产*/
.gdtc{
margin-top: 22px;
width: 290px;
height: 101px;
}
.gdtc>img{
float: left;
margin-left: 10px;
}
.gdtc2{
width: 155px;
margin-left: 10px;
}
.gdtc2>a{
font-size: 14px;
}
.gdtc2>p{
font-size: 12px;
margin-top: 10px;
}
.gdtc3{
font-size: 14px;
color: #69ADF5;
font-weight: 900;
}
.gdtc>img:hover{
transform:scale(1.5);
transition-duration: 0.5s;
}
.gdtc2>a:hover{
color: red;
text-decoration: underline;
transition-duration: 0.5s;
}
/*换一组*/
.hyz{
margin-top: 14px;
text-align: center;
}
/*热卖单品*/
.rmdp{
clear: both;
width: 1200px;
height: 652px;
margin: 0 auto;
margin-top: 20px;
background-color: #fff;
}
/*上*/
.rmdp-t{
margin-top: 20px;
height: 80px;
}
.rmdp-t>h1{
font-size:18px;
text-align: center;
padding-top: 13px;
margin-bottom: 10px;
}
.rmdp-t-b>li{
float: left;
margin-left: 5.7px;
}
.rmdp-t-b>li>a{
font-size: 14px;
}
.rmdp-t-b>li:nth-child(even){
color: #c1c1c1;
}
.rmdp-t-b>li>a:hover{
background-color: red;
color: #fff;
border-radius: 4px;
}
/*中间一大块*/
.rmdp-m{
height: 400px;
}
/*左边的图片*/
.rmdp-m-l,
.rmdp-m-m,
.rmdp-m-r{
width: 400px;
height: 400px;
outline: 1px solid #c1c1c1;
float: left;
}
.rmdp-m-l-l{
width: 235px;
height: 400px;
float: left;
}
.rmdp-m-l-l>figure>figcaption{
margin-left: 10px;
}
.jiage{
color: red;
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
}
.yuexiao{
color:#c1c1c1;
font-size: 12px;
margin-bottom: 20px;
}
.rmdp-m-l-l>figure>figcaption>p:nth-child(3){
font-size: 14px;
}
.rmdp-m-l-l>figure>figcaption>p:nth-child(4){
color: #c1c1c1;
font-size: 12px;
margin-top: 40px;
}
.rmdp-m-l-l>figure{
border-right: 1px solid #c1c1c1;
}
.rmdp-m-l-r{
width: 162px;
height: 400px;
float: left;
}
.rmdp-m-l-r>figure{
border-bottom: 1px solid #c1c1c1;
}
.rmdp-m-r-t>figure>figcaption{
margin-left: 10px;
}
.jiage2{
font-size: 12px;
font-weight: 900;
color: red;
margin-bottom: 5px;
}
.yuexiao2{
color:#c1c1c1;
font-size: 12px;
margin-bottom: 4px;
}
.baoyou{
font-size: 10px;
background-color: #8EC04E;
color: #f1f1f1;
padding: 1px;
}
.rmdp-m-r-b>figure{
border-top: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1;
}
.rmdp-m-r-b>figure>figcaption{
margin-left: 10px;
}
.rmdp-m figure>a>img:hover{
transform:scale(1.3);
transition-duration: 1s;
}
.baoyou2{
font-size: 10px;
background-color:#FC4720;
color: #fff;
padding: 1px;
}
.xiezi{
width: 159px;
height: 158px;
}
/*下面部分*/
.rmdp-b>ul>li{
float: left;
margin:12px;
}
/*消费者*/
.xfz{
width: 1200px;
height: 221px;
margin: 0 auto;
}
/*消费者保障*/
.xfzbz,
.xssl,
.fkfs,
.tbts{
width: 300px;
height: 221px;
float: left;
padding: 68px 60px 63px 24px;
box-sizing: border-box;
}
.xfzbz2{
margin-bottom: 10px;
}
.xfbz-bt{
font-size: 16px;
font-weight: bold;
}
.xfbz-nr{
font-size: 14px;
color: #c1c1c1;
line-height: 2;
}
/*固定导航栏*/
.gddhl{
width: 50px;
height: 450px;
position: fixed;
top: 35%;
right: 14%;
}
.gddhl>li{
width: 50px;
height: 50px;
border-bottom: 1px solid #c1c1c1;
padding:5px 10px;
box-sizing: border-box;
font-size: 14px;
background-color: #fff;
}
.gddhl>li:first-child{
background-color: #FF4302;
border-radius: 10px 10px 0px 0px;
}
.gddhl>li:last-child{
border-radius: 0px 0px 10px 10px;
}
.gddhl>li:nth-child(1)>a{
color: #fff;
font-weight: bold;
}
.gddhl>li:nth-child(2)>a{
color: red;
line-height: 40px;
}
.gddhl>li:nth-child(3)>a{
line-height: 40px;
color: #9183FB;
}
.gddhl>li:nth-child(4)>a{
color: #ABC049;
line-height: 40px;
}
.gddhl>li:nth-child(5)>a{
color: #A3755C;
line-height: 40px;
}
.gddhl>li:nth-child(6)>a{
color: #FF5602;
}
.gddhl>li:nth-child(7)>a{
line-height: 40px;
}
.gddhl>li:not(:first-child):hover{
background: linear-gradient(45deg,#FF8B18,#FF5403);
transition:all 1s;
}
.gddhl>li:not(:first-child):hover>a{
color: #fff;
font-weight: bold;
}
/*尾部*/
footer{
clear: both;
width: 100%;
height: 250px;
margin: 0 auto;
background-color: #fff;
}
.footer-top{
width: 1200px;
height: 71px;
margin: 0 auto;
}
footer>div>ul>li{
float: left;
margin-left: 9px;
font-size: 12px;
margin-top: 10px;
}
.footer-top>ul>li:nth-child(even){
color: #c1c1c1;
}
.footer-top>ul>li:hover>a{
color: red;
}
.footer-top{
border-bottom: 1px solid #c1c1c1;
}
/*关于淘宝*/
.footer-bottom{
width: 1200px;
height: 177px;
margin:0 auto;
}
.gytb>li:last-child{
color: #c1c1c1;
margin-left: 38px;
}
.gytb>li:nth-child(12){
color: #c1c1c1;
}
.gytb>li:hover>a{
color: red;
}
/*文化经营*/
.whjy{
clear: both;
}
.whjy>li:nth-child(2),
.whjy>li:nth-child(4),
.whjy>li:nth-child(5),
.whjy>li:nth-child(6),
.whjy>li:nth-child(7){
color: #c1c1c1;
}
.whjy>li:hover>a{
color: red;
}
/*浙公网安备*/
.zgwab{
font-size: 12px;
margin-top: 35px;
}
.zgwab:hover>a{
color: red;
}
/*图片*/
.tupian>li{
float: left;
margin-right: 20px;
}
以上是关于淘宝网页练习的主要内容，如果未能解决你的问题，请参考以下文章