HTML+css样式制作静态天猫官网部分页面
天猫官网部分页面的静态页面 html+css
-
- 天猫官网首页
- 官网首页css样式部分
- 分页面
- 天猫会员html部分
- 天猫会员css样式部分
- 喵鲜生html部分
- 喵鲜生css样式部分
- 医药馆html部分
- 医药馆css样式部分
- 天猫内容html部分
- 天猫内容css样式部分
天猫官网首页
<!doctype html>
<html>
<head>
<link rel="icon" href="图/网页图标.png" type="image/png">
<link rel="stylesheet" href="天猫官网首页.css" type="text/css">
<meta charset="utf-8">
<title>天猫tmall.com--理想生活上天猫</title>
</head>
<body>
<!--顶部导航栏-->
<div class="dh">
<div class="dh1">
<div class="a1">
<a href="#"><img src="图/导航栏房子1.png">天猫首页</a>
<p>喵，欢迎来天猫</p>
<a href="#">请登录</a>
<a href="#">免费注册</a>
</div>
<div class="a2">
<a href="#">我的淘宝</a>
<a href="#"><img src="图/购物车1.png">购物车</a>
<a href="#">收藏夹</a>
<p>|</p>
<a href="#"><img src="图/手机1.png">手机版</a>
<a href="#">淘宝网</a>
<a href="#">网页无障碍</a>
<a href="#">商家支持</a>
<a href="#">商家中心</a>
</div>
</div>
</div>
<!--第二行搜索栏-->
<div class="ss">
<div class="logo">
<img src="图/第二栏天猫logo.png" width="87">
</div>
<div class="sousuo">
<input type="text" placeholder=" 搜索 天猫 商品/品牌/店铺">
<button type="reset" value="搜索"><a href="#">搜索</a></button>
</div>
</div>
<!--中部内容-->
<div class="neirong">
<!--第一个内容-->
<div class="d1">
<!--左边选择栏-->
<div class="zuonei">
<ul>
<li>
</li>
<li>
<p class="p2">主题市场</p>
</li>
<li>
<img src="图/女装.png">
<a href="#">女装</a>
<p>/</p>
<a href="#">内衣</a>
</li>
<li>
<img src="图/男装.png">
<a href="#">男装</a>
<p>/</p>
<a href="#">运动户外</a>
</li>
<li>
<img src="图/女鞋.png">
<a href="#">女鞋</a>
<p>/</p>
<a href="#">男鞋</a>
<p>/</p>
<a href="#">箱包</a>
</li>
<li>
<img src="图/美妆.png">
<a href="#">美妆</a>
<p>/</p>
<a href="#">个人护理</a>
</li>
<li>
<img src="图/腕表.png">
<a href="#">腕表</a>
<p href="#">/</p>
<a href="#">眼镜</a>
<p>/</p>
<a href="#">珠宝饰品</a>
</li>
<li>
<img src="图/数码.png">
<a href="#">手机</a>
<p>/</p>
<a href="#">数码</a>
<p>/</p>
<a href="#">电脑办公</a>
</li>
<li>
<img src="图/母婴玩具.png">
<a href="#">母婴玩具</a>
</li>
<li>
<img src="图/零食.png">
<a href="#">零食</a>
<p>/</p>
<a href="#">茶酒</a>
<p>/</p>
<a href="#">进口食品</a>
</li>
<li>
<img src="图/生鲜水果.png">
<a href="#">生鲜水果</a>
</li>
<li>
<img src="图/大家电.png">
<a href="#">大家电</a>
<p>/</p>
<a href="#">生活电器</a>
</li>
<li>
<img src="图/家具.png">
<a href="#">家具</a>
<p>/</p>
<a href="#">灯具</a>
<p>/</p>
<a href="#">卫浴</a>
</li>
<li>
<img src="图/汽车.png">
<a href="#">汽车</a>
<p>/</p>
<a>配件</a>
<p>/</p>
<a href="#">用品</a>
</li>
<li>
<img src="图/家纺.png">
<a href="#">家纺</a>
<p>/</p>
<a href="#">家饰</a>
<p>/</p>
<a href="#">鲜花</a>
</li>
<li>
<img src="图/医药保健.png">
<a href="#">医药保健</a>
</li>
<li>
<img src="图/厨具.png">
<a href="#">厨具</a>
<p>/</p>
<a href="#">收纳</a>
<p>/</p>
<a href="#">宠物</a>
</li>
<li>
<img src="图/图书音像.png">
<a href="#">图书音像</a>
</li>
</ul>
</div>
<!--内容顶部导航-->
<div>
<div class="neishang">
<a><img src="图/天猫超市.PNG"></a>
<a><img src="图/天猫国际.PNG"></a>
<div class="neishangwenzi">
<a href="天猫会员.html">天猫会员</a>
<a href="喵鲜生.html">喵鲜生</a>
<a href="医药馆.html">医药馆</a>
<a href="#">魅力惠</a>
<a href="#">飞猪旅行</a>
<a href="#">苏宁易购</a>
<a href="天猫内容.html">天猫内容</a>
</div>
</div>
</div>
<!--内容轮播-->
<div>
<!--上面轮播-->
<div class="lunbo1">
<div class="container">
<!-- 先把第一张图片显示出来 -->
<img class="on" src="图/1轮播图1.png" />
<img class="oo" src="图/1轮播图2.png" />
<img class="oo" src="图/1轮播图3.png"/>
<img class="oo" src="图/1轮播图4.png" />
<img class="oo" src="图/1轮播图5.png" />
<!-- 左右切换 -->
<div class="left"></div>
<div class="right"></div>
<!-- 焦点 -->
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!--下面轮播-->
<div class="lunbo2">
<div class="container">
<!-- 先把第一张图片显示出来 -->
<img class="on" src="图/1轮播图1.png" />
<img class="oo" src="图/熊.png"/>
<img class="oo" src="图/精.png"/>
<img class="oo" src="图/孩.png"/>
<img class="oo" src="图/粉.png"/>
<!-- 左右切换 -->
<div class="left"></div>
<div class="right"></div>
<!-- 焦点 -->
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<!--右边-->
<div class="youshang">
<div>
<img class="kefu" src="图/你好.png">
</div>
<div class="hi"><a href="#">Hi! 你好</a></div>
<div>
<img class="tmcs" src="图/右上二图.png">
</div>
<div class="youshangwenben">
<div class="youshanggonggao">
<ul>
<li>
<p class="gonggao">公告</p>
</li>
<li>
<button type="reset" value="red" class="redian"><a href="#">热点</a></button>
</li>
<li>
<button type="reset" value="red" class="redian"><a href="#">热点</a></button>
</li>
<li>
<button type="reset" value="red" class="redian"><a href="#">热点</a></button>
</li>
</ul>
</div>
<div class="youshangneirong">
<ul class="redianneirong">
<li class="gonggaoneirong">
新鲜事儿都在这里~
</li>
<li>
设计创享家3D设计服务大赛来袭！
</li>
<li>
全球新发现，好物开抢就现在！
</li>
<li>
万款新品流行速递抢先看
</li>
</ul>
</div>
</div>
<!--收藏-->
<div class="yiyouxia">
<div class="tubiao">
<div class="shoucang">
<img src="图/收藏.png">
</div>
<div class="maiguo">
<img src="图/买过.png">
</div>
<div class="shoucangdianpu">
<img src="图/收藏店铺.png">
</div>
<div class="zuji">
<img src="图/足迹.png">
</div>
</div>
<div class="tubiaowenzi">
<div>
<a class="a-tubiao1" href="#">收藏的宝贝</a>
</div>
<div>
<a class="a-tubiao2" href="#">买过的店铺</a>
</div>
<div>
<a class="a-tubiao3" href="#">收藏的店铺</a>
</div>
<div>
<a class="a-tubiao4" href="#">我的足迹</a>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<img class="tmcs001" src="图/天猫超市01.jpg">
</div>
<div class="tmcsxiazong">
<div class="tmcs01">
<a href="#">
<div class="tmcstu1">
<img src="图/天猫超市1.png">
</div>
<div>
<div class="tmcswenzi1">卡士007 家庭大桶装原味益生菌1KG低温酸奶</div>
</div>
<div class="tmcsqian1">
<a href="#">￥35.8</a>
</div>
</a>
</div>
<div class="tmcs02">
<a href="#">
<div class="tmcstu2">
<img src="图/天猫超市2.png">
</div>
<div>
<div class="tmcswenzi2">ABC卫生巾日用mini巾超薄棉柔迷你巾3包装护垫 带护翼防漏姨妈巾</div>
</div>
<div class="tmcsqian2">
<a href="#">￥19.3</a>
</div>
</a>
</div>
<div class="tmcs03">
<a href="#">
<div class="tmcstu3">
<img src="图/天猫超市3.png">
</div>
<div>
<div class="tmcswenzi3">汰渍洗衣皂肥皂香皂三重功效柠檬清香无磷去污渍净白404g×1套</div>
</div>
<div class="tmcsqian3">
<a href="#">￥6.9</a>
</div>
</a>
</div>
<div class="tmcs04">
<a href="#">
<div class="tmcstu4">
<img src="图/天猫超市4.png">
</div>
<div>
<div class="tmcswenzi4">PRAMY/柏瑞美定妆喷雾持久定妆保湿补水控油不脱妆100ml×1瓶</div>
</div>
<div class="tmcsqian4">
<a href="#">￥49.9</a>
</div>
</a>
</div>
<div class="tmcs05">
<a href="#">
<div class="tmcstu5">
<img src="图/天猫超市5.png">
</div>
<div>
<div class="tmcswenzi5">创得多层饺子盒收纳盒保鲜装速冻盒冰箱收纳盒鸡蛋收纳盒水饺</div>
</div>
<div class="tmcsqian5">
<a href="#">￥49.9</a>
</div>
</a>
</div>
</div>
</div>
<div>
<div class="tmgj001"><img src="图/天猫国际.jpg"></div>
<div class="tmgjxiazong">
<div class="tmgj01">
<a href="#">
<div class="tmgjtu1">
<img src="图/天猫国际01.png" width="220px" height="300px">
</div>
</a>
</div>
<div class="tmgj02">
<a href="#">
<div class="tmgjtu2">
<img src="图/天猫国际2.png">
</div>
<div>
<div class="tmgjwenzi2">进口超值</div>
</div>
<div class="tmgjqian2">
<a href="#">限时好礼</a>
</div>
</a>
</div>
<div class="tmgj03">
<a href="#">
<div class="tmgjtu3">
<img src="图/天猫国际3.png">
</div>
<div>
<div class="tmgjwenzi3">细步野洗面奶男女深层控油温和清洁毛孔日本氨基酸洁面乳敏感100g</div>
</div>
<div class="tmgjqian3">
<a href="#">￥129</a>
</div>
</a>
</div>
<div class="tmgj04">
<a href="#">
<div class="tmgjtu4">
<img src="图/天猫国际4.png">
</div>
<div>
<div class="tmgjwenzi4">澳洲Life space孕妇益生菌孕期哺乳期妈妈产后调理肠道肠胃益倍适</div>
</div>
<div class="tmgjqian4">
<a href="#">￥129</a>
</div>
</a>
</div>
<div class="tmgj05">
<a href="#">
<div class="tmgjtu5">
<img src="图/天猫国际5.png">
</div>
<div>
<div class="tmgjwenzi5">钠含量直降66%！百克含钠低至13克！食用细盐 健康食盐 碘盐 罐装</div>
</div>
<div class="tmgjqian5">
<a href="#">￥129</a>
</div>
</a>
</div>
</div>
</div>
<div>
<div class="cnxh001"><img src="图/猜你喜欢.png"></div>
<div class="cnxhxiazong">
<div class="cnxh01">
<a href="#">
<div class="cnxhtu1">
<img src="图/猜你喜欢1.png">
</div>
<div class="cnxhwenzi1"><a href="#">红太阳熟咸蛋高邮咸鸭蛋75克20枚红心流油蛋黄盐蛋非海鸭蛋</a></div>
<div class="cnxhqian1">
<a href="#" class="cnxhqian01">￥41.5</a>
</div>
</a>
</div>
<div class="cnxh02">
<a href="#">
<div class="cnxhtu2">
<img src="图/猜你喜欢2.png">
</div>
<div class="cnxhwenzi2"><a href="#">【三只松鼠_坚果炒货零食大礼包】零食小吃休闲食品夜宵充饥宿舍</a></div>
<div class="cnxhqian2">
<a href="#" class="cnxhqian02">￥29.9</a>
</div>
</a>
</div>
<div class="cnxh03">
<a href="#">
<div class="cnxhtu3">
<img src="图/猜你喜欢3.png">
</div>
<div class="cnxhwenzi3"><a href="#">la有氧洗威露士抗菌洗衣液松木2斤手洗除菌去渍新旧包装随机发</a></div>
<div class="cnxhqian3">
<a href="#" class="cnxhqian03">￥29.9</a>
</div>
</a>
</div>
<div class="cnxh04">
<a href="#">
<div class="cnxhtu4">
<img src="图/猜你喜欢4.png">
</div>
<div class="cnxhwenzi4"><a href="#">维达抽纸超韧家用擦手纸卫生纸巾3层100抽10包面巾纸实惠餐巾纸i2</a></div>
<div class="cnxhqian4">
<a href="#" class="cnxhqian04">￥19.9</a>
</div>
</a>
</div>
<div class="cnxh05">
<a href="#">
<div class="cnxhtu5">
<img src="图/猜你喜欢5.png">
</div>
<div class="cnxhwenzi5"><a href="#">维达超韧手帕纸4层8张18包小包餐巾纸卫生纸巾面巾纸抽纸新旧交替</a></div>
<div class="cnxhqian5">
<a href="#" class="cnxhqian05">￥9.9</a>
</div>
</a>
</div>
</div>
</div>
</div>
<!--底部导航-->
<div class="dbdh">
<div class="dibudaohang">
<div class="daohang1">
<a href="#"><img src="图/导航1.1-1.png"></a>
<a href="#"><img src="图/导航1.2-1.png"></a>
<a href="#"><img src="图/导航1.3-1.png"></a>
<a href="#"><img src="图/导航1.4-1.png"></a>
</div>
<div class="shuipingxian"><hr/ color="#EFEFEF"></div>
<div class="daohang2">
<div class="daohang21">
<p>购物指南</p>
<br>
<a href="#">免费注册</a>
<br>
<a href="#">开通支付宝</a>
<br>
<a href="#">支付宝充值</a>
</div>
<div class="daohang22">
<p>天猫保障</p>
<br>
<a href="#">发票保障</a>
<br>
<a href="#">售后规则</a>
<br>
<a href="#">物流时效保障</a>
</div>
<div class="daohang23">
<p>支付方式</p>
<br>
<a href="#">快捷支付</a>
<br>
<a href="#">信用卡</a>
<br>
<a href="#">余额宝</a>
<br>
<a href="#">蚂蚁花呗</a>
</div>
<div class="daohang24">
<p>商家服务</p>
<br>
<a href="#">天猫规则</a>
<br>
<a href="#">商家入驻</a>
<br>
<a href="#">商家中心</a>
<br>
<a href="#">天猫必修课</a>
<br>
<a href="#">喵言喵语</a>
<br>
<a href="#">运营服务</a>
</div>
<div class="daohang25">
<p>手机天猫</p>
<br>
<a href="#"><img src="图/底部导航2二维码.png"></a>
</div>
</div>
</div>
<div class="zuidi">
<div class="mao">
<img src="图/裁后的猫.png">
</div>
<div class="hei">
<div class="hei1">
<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>
<a href="#">不当竞争举报</a>
</div>
<div class="hei2">
<a href="#">阿里巴巴集团</a>
<font>|</font>
<a href="#">淘宝网</a>
<font>|</font>
<a href="#">天猫</a>
<font>|</font>
<a href="#">聚划算</a>
<font>|</font>
<a href="#">全球速卖通</a>
<font>|</font>
<a href="#">阿里巴巴国际交易市场</a>
<font>|</font>
<a href="#">1688</a>
<font>|</font>
<a href="#">阿里妈妈</a>
<font>|</font>
<a href="#">飞猪</a>
<font>|</font>
<a href="#">阿里云计算</a>
<font>|</font>
<a href="#">Alios</a>
<font>|</font>
<a href="#">阿里通信</a>
<font>|</font>
<a href="#">万网</a>
<font>|</font>
<a href="#">高德</a>
<font>|</font>
<a href="#">UC</a>
<font>|</font>
<a href="#">友盟</a>
<font>|</font>
<a href="#">虾米</a>
<font>|</font>
<a href="#">钉钉</a>
<font>|</font>
<a href="#">支付宝</a>
<font>|</font>
<a href="#">阿里安全</a>
</div>
<div class="hei3">
<div class="hei31">
<a href="#">增值电信业务经营许可证：浙B2-20110446</a>
<font>市场名称登记证：工商网市字3301004119号</font>
<font>出版物网络交易平台服务经营备案证：新出发浙备字第2013002号</font>
</div>
<div class="hei32">
<font>互联网违法和不良信息举报电话：0571-81683755 jubao.tb@service.taobao.com</font>
<a href="#">中国互联网举报中心</a>
<a href="#">中国扫黄打非网</a>
<a href="#">全国文化和旅游市场网上举报投诉处理系统</a>
<a href="#">全国12315平台</a>
</div>
<div class="hei33">
<a href="#" class="hei331">浙江省互联网违法和不良信息举报电话中心</a>
<a href="#" class="hei331">全网举报</a>
<font>互联网药品信息服务资质证书编号：<a href="#">浙-（经营性）-2017-0005</a></font>
<a href="#" class="hei331"><img src="图/公安1.png">浙公网安备 33010002000120号</a>
</div>
<div class="hei34">
<font>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</font>
<font>网络文化经营许可证：浙网文[2021]1668-073号<a href="#"><img src="图/公安2.png"></a></font>
</div>
<div class="hei35">
<font>浙江省网络食品销售第三方平台提供者备案：全网食A33010002</font>
<a href="#">12318举报</a>
<a href="#">浙B2-20110446-1</a>
</div>
<div class="hei36">
<font>©2003-现在TMALL.COM版权所有</font>
</div>
<div class="hei37">
<a href="#"><img src="图/最低图1.png"></a>
<a href="#"><img src="图/最低图2.png"></a>
<a href="#"><img src="图/最低图3.png"></a>
<a href="#"><img src="图/最低图4.png"></a>
</div>
<div class="hei38">
<a href="#"><img src="图/最低图5.png"></a>
</div>
<div class="hei39">
<img src="图/最后图片.png">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//1、找到container下的所有img标签,li标签,左右按钮
var aImgs = document.querySelectorAll('.container img');
var aLis = document.querySelectorAll('.container li');
var btnLeft = document.querySelector('.container .left');
var btnRight = document.querySelector('.container .right');
//点击事件
//点击按钮图片切换
var index = 0; //当前图片下标
var lastIndex = 0;
btnRight.onclick = function(){
//记录上一张图片的下标
lastIndex = index;
//清除上一张图片的样式
aImgs[lastIndex].className = '';
aLis[lastIndex].className = '';
index++;
index %= aImgs.length; //实现周期性变化
//设置当前图片的样式
aImgs[index].className = 'on';
aLis[index].className = 'active';
}
//左边按钮类似
btnLeft.onclick = function(){
//记录上一张图片的下标
lastIndex = index;
//清除上一张图片的样式
aImgs[lastIndex].className = '';
aLis[lastIndex].className = '';
index--;
if (index < 0) {
index = aImgs.length - 1;
}
//设置当前图片的样式
aImgs[index].className = 'on';
aLis[index].className = 'active';
}
</script>
</body>
</html>
官网首页css样式部分
body{background-color: #ECD0D0;
margin: 0;
overflow-x: hidden;
}
*{list-style-type: none;}
p{color: #8A8484;display:inline}
body{background-color: #ECD0D0;
margin:0px;
overflow-x: hidden;}
p{color: #8A8484;
display:inline}
.dh{height: 35px;
background-color: #f5f5f5;
font-size: 12px;}
.dh1 .a1{float:left;
margin-left: 250px;}
.dh1 a{margin-right:20px;
text-decoration: none;
color: #8A8484;
text-align: center;
line-height: 35px;}
.dh1 p{margin-right:20px;}
.dh1 a:hover{text-decoration: underline;
color: #FF0004;}
.dh1 .a2{float: left;
height: 35px;
width: 600px;
margin-left: 200px;}
.dh img{margin-bottom: -2px;}
/*搜索栏*/
.ss{width: 100%;
margin-left: 280px;
margin-top: 30px;
float: left;
}
input{border: 1px solid red;
width: 540px;height: 42px;
float: right;
margin-right: 800px;
background-color: #ffffff;
border-radius: 300px;
color: #bdbdbd;
outline:none;
border: red 1px solid;
}
.sousuo button{border: 1px solid red;
width: 100px;height: 45px;
float: right;
background-color: red;
border-radius: 300px;
margin-right: -550px;
text-align: center;
font-size: 18px}
.sousuo button a{text-decoration: none;
color: #FFFFFF;}
.sousuo{margin-top: -55px}
/*
input{border:1px solid #FF0004;
width: 540px;
height: 42px;
border-radius: 300px;
color: #C5B4B4;
}
button{
color: #FFFFFF;
background-color: #E62225;
width: 90px;
height: 46px;
border:0px solid #FF0004;
border-radius: 300px;
margin-left: -90px;
margin-bottom: 50px;
}
.logo{float: left;
margin-left:250px;
margin-top: 50px;
margin-bottom: 50px
}
.sousuo{float: left;
margin-left:100px;
margin-top: 50px;
}
*/
/*中部内容*/
.neirong{background-color:#FFFFFF;
border-radius: 20px;
margin-top: 120px;
width: 1190px;
height: 1900px;
margin-left: auto;
margin-right: auto;
}
/*内容顶部*/
/*左侧选择栏*/
.p2{color: #FF0004;
font-size: 16px;
font-family: 宋体;
margin-left: -10px;
margin-top: 100px;
font-weight: bold;}
.zuonei a{font-size: 14px;
color: #8A8484;
text-decoration: none;}
.zuonei a:hover{color: #FF0004;}
.zuonei li{margin-left: -15px;margin-top: 15px;}
li img{margin-right:15px;}
.zuonei{margin-left: 30px}
/*内容顶部导航*/
.neishang{float:left;
margin-left: 250px;
margin-top: -590px;
font-size: 14px;}
.neishang img{margin-right: 15px;
width: 100px;
float:left;}
.neishangwenzi{float:left;}
.neishangwenzi a{color: #4D4848;
text-decoration: none;
margin-right: 15px;}
.neishangwenzi a:hover{color: #FF0004;
text-decoration: underline;
}
/*轮播图1*/
/*清除边距*/
div,ul,li{
margin: 0;
padding: 0;
}
/*首先准备一个放图片的容器*/
.container{
width: 500px;
height: 270px;
position: relative;
top: 100px;
left: 30%;
/* background-color: #00FFEE;*/
/*border: 1px solid #ccc;*/
}
/*图片样式*/
.container img{
position: absolute;
/*把所有图片放在同一个位置*/
width: 100%;
transition-duration: 0.5s;
/*设置过渡时间*/
opacity: 0;
/*把所有图片变透明*/
}
/*图片显示开关*/
.container img.on{
opacity: 1;
/*用于显示图片*/
}
/*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
.left, .right{
position: absolute;
top: 30%;
width: 60px;
height: 100px;
line-height: 100px;
background-color: #666;
opacity: 0.5;
text-align: center;
font-size: 60px;
color: #ccc;
display: none;
/*先隐藏按钮*/
cursor: pointer;
/*设置鼠标悬停时的样式*/
}
.left{
left: 0;
}
.right{
right: 0;
}
.container:hover .left, .container:hover .right{
display: block;
/*鼠标悬停才容器范围内时显示按钮*/
}
.left:hover, .right:hover{
color: #fff;
}
/*焦点*/
.container ul{
position: absolute;
bottom: 0;
max-width: 500px;
padding: 5px 200px;
}
.container ul li{
list-style: none;
float: left;
background-color: #ccc;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
.container ul li.active{
background-color: #282923;
/*焦点激活时的样式*/
}
.lunbo1{margin-left: -150px;
margin-top:-660px;}
.container img.on{border-radius: 15px}
/*轮播2*/
.lunbo2{margin-left: -150px;
margin-top:22px;}
/*右上内容*/
.youshang{width:350px;
background-color: #EBE4E4;
height: 550px;
float: right;
margin-top:-560px;
margin-right: 45px;
border-radius: 15px;}
.kefu{margin-left:132px;
margin-top:25px}
.hi a{margin-left:150px;
font-size: 12px;
margin-top:10px;
color: #000000;
text-decoration: none;}
.hi a:hover{color: #000000;
text-decoration: underline;}
.tmcs{width: 330px;
height: 115px;
border-radius: 10px;
margin-left: 10px;
margin-top:20px}
.youshangwenben{width: 350px;
height: 150px;
background-color: #EBE4E4;}
.gonggao{font-weight: 900;
color: #000000;}
.redian{background-color: #F7C2C3;
border: 1px solid #F7C2C3;
font-size: 12px;
width: 40px;
height: 20px;}
.redian a{color: #FF0004;
text-decoration: none;}
.redianneirong{font-size: 12px;
color: #726E6E;}
.gonggaoneirong{font-size: 14px;}
.youshanggonggao{float:left;
margin-left: 15px;}
.youshangneirong{float:left;
margin-left: 15px;
margin-top: 18px;}
.youshanggonggao ul li{margin-top:15px;}
.youshangneirong ul li{margin-bottom:19px;}
.tubiao{width: 350px;
height: 30px;}
.shoucang{float: left;
margin-left: -210px;}
.maiguo{float:left;
margin-left: -132px;}
.shoucangdianpu{float:left;
margin-left: -55px;}
.zuji{float:left;
margin-left: 20px;}
.tubiaowenzi a{font-size:12px;
color: #000000;
text-decoration: none;}
.tubiaowenzi a:hover{text-decoration: underline;}
.a-tubiao1{float:left;
margin-left: -275px}
.a-tubiao2{float:left;
margin-left: -197px;}
.a-tubiao3{float:left;
margin-left: -120px;}
.a-tubiao4{float:left;
margin-left: -40px}
.yiyouxia{margin-top:35px;
margin-left: 250px}
/*天猫超市*/
.tmcs001{margin-top: 61px;
margin-left: 15px;}
.tmcstu1 img{border-radius: 15px;}
.tmcswenzi1{
margin-top: 11px;
font-size: 16px;
font-weight: 500;
height: 22px;
/* line-height: 22px;*/
width: 208px;
text-overflow: ellipsis;/*当对象内文本溢出时显示省略标记(...)*/
overflow: hidden;/*隐藏溢出部分*/
white-space: nowrap;/*强制一行内显示多少文字不换行*/
color: #000;}
.tmcsqian1 a{font-size: 20px;
color: #FF0004;
}
.tmcstu2 img{border-radius: 15px;}
.tmcswenzi2{
margin-top: 11px;
font-size: 16px;
font-weight: 500;
height: 22px;
width: 208px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #000;}
.tmcsqian2 a{font-size: 20px;
color: #FF0004;
}
.tmcstu3 img{border-radius: 15px;}
.tmcswenzi3{
margin-top: 11px;
font-size: 16px;
font-weight: 500;
height: 22px;
width: 208px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #000;}
.tmcsqian3 a{font-size: 20px;
color: #FF0004;
}
.tmcstu4 img{border-radius: 15px;}
.tmcswenzi4{
margin-top: 11px;
font-size: 16px;
font-weight: 500;
height: 22px;
width: 208px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #000;}
.tmcsqian4 a{font-size: 20px;
color: #FF0004;
}
.tmcstu5 img{border-radius: 15px;}
.tmcswenzi5{
margin-top: 11px;
font-size: 16px;
font-weight: 500;
height: 22px;
width: 208px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #000;}
.tmcsqian5 a{font-size: 20px;
color: #FF0004;
}
.tmcs01{float: left;
margin-left: 15px;}
.tmcs02{float: left;
margin-left: 15px;}
.tmcs03{float: left;
margin-left: 15px;}
.tmcs04{float: left;
margin-left: 15px;}
.tmcs05{float: left;
margin-left: 15px;}
.tmcsxiazong{margin-top: 20px;}
.tmcsxiazong a{text-decoration: none;}
/*天猫国际*/
.tmgj001{margin-left: 15px;
margin-top: 340px;}
.tmcsxiazong{margin-top: 20px;}
.tmgjxiazong a{text-decoration: none;}
.tmgjtu1 img{border-radius: 15px;}
.tmgjtu2 img{border-radius: 15px;}
.tmgjwenzi2{
margin-top: 11px;
font-size: 16px;
font-weight: 500;
height: 22px;
width: 208px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #000;}
.tmgjqian2 a{font-size: 14px;
color: #FF0004;
font-family: 宋体;
}
.tmgjtu3 img{border-radius: 15px;}
.tmgjwenzi3{
margin-top: 11px;
font-size: 16px;
font-weight: 500;
height: 22px;
width: 208px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #000;}
.tmgjqian3 a{font-size: 20px;
color: #FF0004;
}
.tmgjtu4 img{border-radius: 15px;}
.tmgjwenzi4{
margin-top: 11px;
font-size: 16px;
font-weight: 500;
height: 22px;
width: 208px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #000;}
.tmgjqian4 a{font-size: 20px;
color: #FF0004;
}
.tmgjtu5 img{border-radius: 15px;}
.tmgjwenzi5{
margin-top: 11px;
font-size: 16px;
font-weight: 500;
height: 22px;
width: 208px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #000;}
.tmgjqian5 a{font-size: 20px;
color: #FF0004;
}
.tmgj01{float: left;
margin-left: 15px;}
.tmgj02{float: left;
margin-left: 15px;}
.tmgj03{float: left;
margin-left: 15px;}
.tmgj04{float: left;
margin-left: 15px;}
.tmgj05{float: left;
margin-left: 15px;}
.tmgjxiazong{margin-top: 20px;}
/*猜你喜欢*/
.cnxh001{margin-left: 15px;
margin-top: 370px;}
.cnxhtu1 img{border-radius: 15px;}
.cnxhwenzi1{
margin: 11px 0 0 6px;
width: 208px;
overflow: hidden;
color: #000;
font-size: 16px;
line-height: 22px;}
.cnxhqian1 a{font-size: 20px;
color: #FF0004;
}
.cnxh01 a{text-decoration: none;}
.cnxhwenzi1 a{color: #000000;
}
.cnxhwenzi1 a:hover{border-bottom: #0005FF 1px solid;}
.cnxhtu2 img{border-radius: 15px;}
.cnxhwenzi2{
margin: 11px 0 0 6px;
width: 208px;
height: 44px;
overflow: hidden;
color: #000;
font-size: 16px;
line-height: 22px;}
.cnxhqian2 a{font-size: 20px;
color: #FF0004;
}
.cnxh02 a{text-decoration: none;}
.cnxhwenzi2 a{color: #000000;
}
.cnxhwenzi2 a:hover{border-bottom: #0005FF 1px solid;}
.cnxhtu3 img{border-radius: 15px;}
.cnxhwenzi3{
margin: 11px 0 0 6px;
width: 208px;
height: 44px;
overflow: hidden;
color: #000;
font-size: 16px;
line-height: 22px;}
.cnxhqian3 a{font-size: 20px;
color: #FF0004;
}
.cnxh03 a{text-decoration: none;}
.cnxhwenzi3 a{color: #000000;
}
.cnxhwenzi3 a:hover{border-bottom: #0005FF 1px solid;}
.cnxhtu4 img{border-radius: 15px;}
.cnxhwenzi4{
margin: 11px 0 0 6px;
width: 208px;
height: 44px;
overflow: hidden;
color: #000;
font-size: 16px;
line-height: 22px;}
.cnxhqian4 a{font-size: 20px;
color: #FF0004;
}
.cnxh04 a{text-decoration: none;}
.cnxhwenzi4 a{color: #000000;
}
.cnxhwenzi4 a:hover{border-bottom: #0005FF 1px solid;}
.cnxhwenzi5{
margin: 11px 0 0 6px;
width: 208px;
height: 44px;
overflow: hidden;
color: #000;
font-size: 16px;
line-height: 22px;}
.cnxhqian5 a{font-size: 20px;
color: #FF0004;
}
.cnxh05 a{text-decoration: none;}
.cnxhwenzi5 a{color: #000000;
}
.cnxhwenzi5 a:hover{border-bottom: #0005FF 1px solid;}
.cnxh01{float:left;
margin-left: 15px;}
.cnxh02{float:left;
margin-left: 15px;}
.cnxh03{float:left;
margin-left: 15px;}
.cnxh04{float:left;
margin-left: 15px;}
.cnxh05{float:left;
margin-left: 15px;}
.cnxhxiazong{margin-top: 20px;}
/*底部导航*/
.dbdh{width: 100%;
height: 803px;}
.dibudaohang{height: 400px;
background-color: #FFFFFF;
margin-top: 100px;
border-top:1px solid #BDB8B8;}
.daohang1 a{float: left;
margin-left: 80px;
margin-top: 50px;}
.shuipingxian{width:1200px;
float: left;
margin-top: 20px;
margin-left: 150px;
}
.daohang2{float: left;
margin-top:50px;
margin-left: -1100px;}
.daohang21{float: left;
margin-left: 50px;}
.daohang22{float: left;
margin-left: 120px;}
.daohang23{float: left;
margin-left: 120px;}
.daohang24{float: left;
margin-left: 120px;}
.daohang25{float: left;
margin-left: 120px;}
.daohang2 p{font-size: 16px;
font-weight: bold;
color: #666363;}
.daohang2 .daohang25 img{width: 100px;
height: 103px;}
.daohang2 a{font-size: 12px;
color: #8A8484;
text-decoration: none;}
.daohang2 a:hover{text-decoration: underline;}
.shuipingxian2{width:1200px;
float: left;
margin-top: 175px;
margin-left: 10px;
}
.mao img{float:left;
width: 100px;
margin-left: 150px;
margin-top: -38px;}
.hei{height: 400px;
background-color: #000000;
border-top: #FF0004 2px solid;}
.hei1{margin-left: 130px;}
.hei1 a{font-size: 10px;
color: #FFFFFF;
text-decoration: none;
margin-left: 10px;}
.hei1 a:hover{text-decoration: underline;}
.hei2 font{color: #FFFFFF;}
.hei2 a{font-size: 12px;
color:#FFFFFF;
text-decoration: none;}
.hei2 a:hover{text-decoration: underline;}
.hei2{margin-left: 140px;
margin-top: 10px;}
.hei3{margin-left: 140px;
margin-top: 10px;}
/*黑色部分主内容统一属性*/
.hei3 a{font-size: 10px;
color: #8A8484;
text-decoration: none;}
.hei3 a:hover{text-decoration: underline;}
.hei3 font{font-size: 10px;
color: #8A8484;}
.hei31 a{margin-right: 25px;}
.hei31 font{margin-right: 25px;}
.hei32 a{margin-left: 25px;}
.hei33 .hei331{margin-right: 30px;}
.hei33 font{margin-right: 30px;}
.hei34 font{margin-right: 25px;}
.hei35 font{margin-right: 25px;}
.hei35 a{margin-right: 25px;}
.hei36 font{font-size: 8px;
color: #535252;}
.hei37{margin-top:20px;}s
.hei37 img{height: 30px;
margin-right: 100px;}
.hei38 img{margin-top:5px;
height: 30px;}
.hei39 img{height: 50px;}
.hei39{margin-left: 450px;}
分页面
天猫会员html部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天猫-天猫会员</title>
<link rel="icon" href="图/网页图标.png" type="image/png">
<link rel="stylesheet" href="天猫会员.css" type="text/css">
</head>
<body>
<!--顶部导航栏-->
<div class="dh">
<div class="dh1">
<div class="a1">
<a href="#"><img src="图/导航栏房子1.png">天猫首页</a>
<p>喵，<a href="#">欢迎来天猫</a></p>
<a href="#">退出</a>
</div>
<div class="a2">
<a href="#">我的淘宝</a>
<a href="#"><img src="图/购物车1.png">购物车</a>
<a href="#">收藏夹</a>
<p>|</p>
<a href="#">淘宝网</a>
<a href="#">商家支持</a>
</div>
</div>
</div>
<div class="ss">
<div class="logo">
<a href="#"><img src="图/天猫会员logo.png"></a>
</div>
<div class="sousuo">
<input type="text" placeholder="搜索 天猫 商品/品牌/店铺">
<button type="reset" value="搜索"><a href="#">搜索</a></button>
</div>
</div>
<div class="logoxia">
<p>88VIP</p>
<a href="#">天猫积分</a>
</div>
<div class="zhongbudatu">
<img src="图/天猫会员.png">
</div>
<!--底部导航-->
<div class="dibudaohang">
<div class="daohang1">
<a href="#"><img src="图/导航1.1-1.png"></a>
<a href="#"><img src="图/导航1.2-1.png"></a>
<a href="#"><img src="图/导航1.3-1.png"></a>
<a href="#"><img src="图/导航1.4-1.png"></a>
</div>
<div class="shuipingxian"><hr/ color="#EFEFEF"></div>
<div class="daohang2">
<div class="daohang21">
<p>购物指南</p>
<br>
<a href="#">免费注册</a>
<br>
<a href="#">开通支付宝</a>
<br>
<a href="#">支付宝充值</a>
</div>
<div class="daohang22">
<p>天猫保障</p>
<br>
<a href="#">发票保障</a>
<br>
<a href="#">售后规则</a>
<br>
<a href="#">物流时效保障</a>
</div>
<div class="daohang23">
<p>支付方式</p>
<br>
<a href="#">快捷支付</a>
<br>
<a href="#">信用卡</a>
<br>
<a href="#">余额宝</a>
<br>
<a href="#">蚂蚁花呗</a>
</div>
<div class="daohang24">
<p>商家服务</p>
<br>
<a href="#">天猫规则</a>
<br>
<a href="#">商家入驻</a>
<br>
<a href="#">商家中心</a>
<br>
<a href="#">天猫必修课</a>
<br>
<a href="#">喵言喵语</a>
<br>
<a href="#">运营服务</a>
</div>
<div class="daohang25">
<p>手机天猫</p>
<br>
<a href="#"><img src="图/底部导航2二维码.png"></a>
</div>
</div>
</div>
<div class="zuidi">
<div class="mao">
<img src="图/裁后的猫.png">
</div>
<div class="hei">
<div class="hei1">
<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>
<a href="#">不当竞争举报</a>
</div>
<div class="hei2">
<a href="#">阿里巴巴集团</a>
<font>|</font>
<a href="#">淘宝网</a>
<font>|</font>
<a href="#">天猫</a>
<font>|</font>
<a href="#">聚划算</a>
<font>|</font>
<a href="#">全球速卖通</a>
<font>|</font>
<a href="#">阿里巴巴国际交易市场</a>
<font>|</font>
<a href="#">1688</a>
<font>|</font>
<a href="#">阿里妈妈</a>
<font>|</font>
<a href="#">飞猪</a>
<font>|</font>
<a href="#">阿里云计算</a>
<font>|</font>
<a href="#">Alios</a>
<font>|</font>
<a href="#">阿里通信</a>
<font>|</font>
<a href="#">万网</a>
<font>|</font>
<a href="#">高德</a>
<font>|</font>
<a href="#">UC</a>
<font>|</font>
<a href="#">友盟</a>
<font>|</font>
<a href="#">虾米</a>
<font>|</font>
<a href="#">钉钉</a>
<font>|</font>
<a href="#">支付宝</a>
<font>|</font>
<a href="#">阿里安全</a>
</div>
<div class="hei3">
<div class="hei31">
<a href="#">增值电信业务经营许可证：浙B2-20110446</a>
<font>市场名称登记证：工商网市字3301004119号</font>
<font>出版物网络交易平台服务经营备案证：新出发浙备字第2013002号</font>
</div>
<div class="hei32">
<font>互联网违法和不良信息举报电话：0571-81683755 jubao.tb@service.taobao.com</font>
<a href="#">中国互联网举报中心</a>
<a href="#">中国扫黄打非网</a>
<a href="#">全国文化和旅游市场网上举报投诉处理系统</a>
<a href="#">全国12315平台</a>
</div>
<div class="hei33">
<a href="#" class="hei331">浙江省互联网违法和不良信息举报电话中心</a>
<a href="#" class="hei331">全网举报</a>
<font>互联网药品信息服务资质证书编号：<a href="#">浙-（经营性）-2017-0005</a></font>
<a href="#" class="hei331"><img src="图/公安1.png">浙公网安备 33010002000120号</a>
</div>
<div class="hei34">
<font>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</font>
<font>网络文化经营许可证：浙网文[2021]1668-073号<a href="#"><img src="图/公安2.png"></a></font>
</div>
<div class="hei35">
<font>浙江省网络食品销售第三方平台提供者备案：全网食A33010002</font>
<a href="#">12318举报</a>
<a href="#">浙B2-20110446-1</a>
</div>
<div class="hei36">
<font>©2003-现在TMALL.COM版权所有</font>
</div>
<div class="hei37">
<a href="#"><img src="图/最低图1.png"></a>
<a href="#"><img src="图/最低图2.png"></a>
<a href="#"><img src="图/最低图3.png"></a>
<a href="#"><img src="图/最低图4.png"></a>
</div>
<div class="hei38">
<a href="#"><img src="图/最低图5.png"></a>
</div>
</div>
</div>
</div>
</body>
</html>
天猫会员css样式部分
@charset "utf-8";
/* CSS Document */
body{background-color: #FFFFFF;
margin:0px;
overflow-x: hidden;}
p{color: #8A8484;
display:inline}
.dh{height: 35px;
background-color: #FFFFFF;
font-size: 12px;
border-bottom: 1px solid #797979;}
.dh1 .a1{float:left;
margin-left: 250px;}
.dh1 a{margin-right:20px;
text-decoration: none;
color: #8A8484;
text-align: center;
line-height: 35px;}
.dh1 p{margin-right:20px;}
.dh1 a:hover{text-decoration: underline;
color: #FF0004;}
.dh1 .a2{float: left;
margin-left: 400px;}
.dh img{margin-bottom: -2px;}
/*搜索*/
.logo{float:left;
margin-left: -15px;}
.ss{width: 100%;
margin-left: 280px;
margin-top: 30px;
/* float:left;*/
}
input{border: 1px solid red;
width: 540px;height: 30px;
float: right;
margin-right: 800px;
background-color: #ffffff;
color: #bdbdbd;
outline:none;
border: red 3px solid;
box-shadow: inset 0px 1px 3px black;}
.sousuo button{border: 1px solid red;
width: 100px;height: 30px;
float: right;
background-color: red;
margin-right: -550px;
text-align: center;
font-size: 18px;
margin-top: 4px;}
.sousuo button a{text-decoration: none;
color: #FFFFFF;}
.sousuo{float: left;
margin-left: 450px;
margin-top:-40px;}
.logoxia p{color: #FF0004;
font-weight: bold;
margin-right: 30px;}
.logoxia a{text-decoration: none;
font-weight: bold;
color: #000000;}
.logoxia{float: left;
margin-top:20px;
margin-left: 265px;}
.zhongbudatu{width: 100%;
background-color: #000000;
float:left;
margin-top:30px;}
.zhongbudatu img{margin-left: 20%;}
/*底部导航*/
.dibudaohang{height: 400px;
background-color: #FFFFFF;
margin-top: 100px;}
.daohang1 a{float: left;
margin-left: 80px;
margin-top: 50px;}
.shuipingxian{width:1200px;
float: left;
margin-top: 20px;
margin-left: 150px;
}
.daohang2{float: left;
margin-top:50px;
margin-left: -1100px;}
.daohang21{float: left;
margin-left: 50px;}
.daohang22{float: left;
margin-left: 120px;}
.daohang23{float: left;
margin-left: 120px;}
.daohang24{float: left;
margin-left: 120px;}
.daohang25{float: left;
margin-left: 120px;}
.daohang2 p{font-size: 16px;
font-weight: bold;
color: #666363;}
.daohang2 .daohang25 img{width: 100px;
height: 103px;}
.daohang2 a{font-size: 12px;
color: #8A8484;
text-decoration: none;}
.daohang2 a:hover{text-decoration: underline;}
.shuipingxian2{width:1200px;
float: left;
margin-top: 175px;
margin-left: 10px;
}
/*最低*/
.zuidi{float:left;
margin-top:13%;}
.mao img{float:left;
width: 100px;
margin-left: 150px;
margin-top: -38px;}
.hei{width: 1898px;
height: 400px;
background-color: #000000;
border-top: #FF0004 2px solid;}
.hei1{margin-left: 130px;}
.hei1 a{font-size: 10px;
color: #FFFFFF;
text-decoration: none;
margin-left: 10px;}
.hei1 a:hover{text-decoration: underline;}
.hei2 font{color: #FFFFFF;}
.hei2 a{font-size: 12px;
color:#FFFFFF;
text-decoration: none;}
.hei2 a:hover{text-decoration: underline;}
.hei2{margin-left: 140px;
margin-top: 10px;}
.hei3{margin-left: 140px;
margin-top: 10px;}
/*黑色部分主内容统一属性*/
.hei3 a{font-size: 10px;
color: #8A8484;
text-decoration: none;}
.hei3 a:hover{text-decoration: underline;}
.hei3 font{font-size: 10px;
color: #8A8484;}
.hei31 a{margin-right: 25px;}
.hei31 font{margin-right: 25px;}
.hei32 a{margin-left: 25px;}
.hei33 .hei331{margin-right: 30px;}
.hei33 font{margin-right: 30px;}
.hei34 font{margin-right: 25px;}
.hei35 font{margin-right: 25px;}
.hei35 a{margin-right: 25px;}
.hei36 font{font-size: 8px;
color: #535252;}
.hei37{margin-top:20px;}s
.hei37 img{height: 30px;
margin-right: 100px;}
.hei38 img{margin-top:5px;
height: 30px;}
喵鲜生html部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天猫-喵鲜生</title>
<link rel="icon" href="图/网页图标.png" type="image/png">
<link rel="stylesheet" href="喵鲜生.css" type="text/css">
</head>
<body>
<div class="logo">
<a href="#"><img src="图/喵鲜生logo.png"></a>
</div>
<div class="zhongbutu">
<a><img src="图/喵鲜生banner.png"></a>
<div class="denglu">
<div class="saoma">
<img class="sao" src="图/扫码登录更安全.png">
<img class="erweima" src="图/半边二维码.png">
</div>
<div class="mmdl">
<div class="dengluwenzi">
<a href="#" class="dengluwenzi1">密码登录</a>
<a href="#">短信登录</a>
</div>
<div class="chongxindenglu">
<p>请重新登录</p>
</div>
</div>
<div class="zhanghao">
<div class="zh">
<input type="text" placeholder=" 账号名/邮箱/手机号">
</div>
<div class="mm">
<input type="text" placeholder=" 请输入登录密码">
</div>
<div class="yhtu1">
<img src="图/用户.png">
</div>
<div class="yhtu2">
<img src="图/密码.png">
</div>
<div class="dlanniu">
<button type="reset" value="搜索"><a href="#">登录</a></button>
</div>
<div class="denglufangshi">
<a href="#"><img src="图/微博.png"><p class="weibo">微博登录</p></a>
<a href="#"><img src="图/支付宝.png"><p class="zhifubao">支付宝登录</p></a>
</div>
<div class="youxia">
<a href="#">忘记密码</a>
<a href="#">忘记账号名</a>
<a href="#">免费注册</a>
</div>
</div>
</div>
</div>
<!--底部导航-->
<div class="zuidi">
<div class="hei">
<div class="hei1">
<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>
<a href="#">不当竞争举报</a>
</div>
<div class="hei2">
<a href="#">阿里巴巴集团</a>
<font>|</font>
<a href="#">淘宝网</a>
<font>|</font>
<a href="#">天猫</a>
<font>|</font>
<a href="#">聚划算</a>
<font>|</font>
<a href="#">全球速卖通</a>
<font>|</font>
<a href="#">阿里巴巴国际交易市场</a>
<font>|</font>
<a href="#">1688</a>
<font>|</font>
<a href="#">阿里妈妈</a>
<font>|</font>
<a href="#">飞猪</a>
<font>|</font>
<a href="#">阿里云计算</a>
<font>|</font>
<a href="#">Alios</a>
<font>|</font>
<a href="#">阿里通信</a>
<font>|</font>
<a href="#">万网</a>
<font>|</font>
<a href="#">高德</a>
<font>|</font>
<a href="#">UC</a>
<font>|</font>
<a href="#">友盟</a>
<font>|</font>
<a href="#">虾米</a>
<font>|</font>
<a href="#">钉钉</a>
<font>|</font>
<a href="#">支付宝</a>
<font>|</font>
<a href="#">阿里安全</a>
</div>
<div class="hei3">
<div class="hei31">
<a href="#">增值电信业务经营许可证：浙B2-20110446</a>
<font>市场名称登记证：工商网市字3301004119号</font>
<font>出版物网络交易平台服务经营备案证：新出发浙备字第2013002号</font>
</div>
<div class="hei32">
<font>互联网违法和不良信息举报电话：0571-81683755 jubao.tb@service.taobao.com</font>
<a href="#">中国互联网举报中心</a>
<a href="#">中国扫黄打非网</a>
<a href="#">全国文化和旅游市场网上举报投诉处理系统</a>
<a href="#">全国12315平台</a>
</div>
<div class="hei33">
<a href="#" class="hei331">浙江省互联网违法和不良信息举报电话中心</a>
<a href="#" class="hei331">全网举报</a>
<font>互联网药品信息服务资质证书编号：<a href="#">浙-（经营性）-2017-0005</a></font>
<a href="#" class="hei331"><img src="图/公安01.png">浙公网安备 33010002000120号</a>
</div>
<div class="hei34">
<font>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</font>
<font>网络文化经营许可证：浙网文[2021]1668-073号<a href="#"><img src="图/公安02 (2).png"></a></font>
</div>
<div class="hei35">
<font>浙江省网络食品销售第三方平台提供者备案：全网食A33010002</font>
<a href="#">12318举报</a>
<a href="#">浙B2-20110446-1</a>
</div>
<div class="hei36">
<font>©2003-现在TMALL.COM版权所有</font>
</div>
<div class="hei37">
<a href="#"><img src="图/底部白底1.jpg"></a>
<a href="#"><img src="图/底部白底2.png"></a>
<a href="#"><img src="图/底部白底3.png"></a>
<a href="#"><img src="图/底部白底4.png"></a>
</div>
<div class="hei38">
<a href="#"><img src="图/底部白底5.png"></a>
</div>
<div class="hei39">
<img src="图/底部白底6.png">
</div>
</div>
</div>
</div>
</body>
</html>
喵鲜生css样式部分
@charset "utf-8";
/* CSS Document */
body{overflow-x: hidden;
margin: 0;}
.logo{float:left;
margin-left: 10%;
margin-top: 2%;}
.zhongbutu{float:left;
margin-top: 3%;}
.denglu{width: 350px;height: 360px;
float: right;
margin-right: 25%;
margin-top: -25%;
background-color: #ffffff;
opacity: 0.8;/*设置图像不透明度*/
}
.saoma .sao{float: right;
width: 106px;
margin-right: 20%;
margin-top: 1%;}
.saoma .erweima{width: 52px;
float: right;
margin-right: -49%;
margin-top: 1%;}
.dengluwenzi a{text-decoration: none;
color: #000000;}
.dengluwenzi{float:left;
font-weight:bold;
margin-top: 8%;
margin-left: 5%;}
.dengluwenzi .dengluwenzi1{
border-bottom:3px solid #000000;
}
.chongxindenglu{float:left;
margin-top: 11%;
margin-left: -38%;
font-size:12px;
color:red;}
.zhanghao{float:left;
margin-top:10%;}
.zh input{float:left;
height: 40px;
width: 300px;
margin-left: 6%;
margin-top:3%;}
.mm input{float:left;
height: 40px;
width: 300px;
margin-left: 6%;
margin-top:5%;}
.yhtu1 img{float:left;
width: 43px;
height: 44px;
margin-top:-31%;
margin-left: 6.4%;}
.yhtu2 img{float:left;
width: 43px;
height: 44px;
margin-top: -12.83214%;
margin-left: 6.4%;}
.dlanniu button{float:left;
width: 300px;
height: 42px;
border: 1px solid red;
border-radius: 3px;
background-color: #FF0004;
margin-top: 5%;
margin-left: 7.5%;}
.dlanniu button a{text-decoration: none;
color: #FFFFFF;
font-size: 16px;}
.denglufangshi{float: left;
margin-top: 5%;
margin-left: 8%;
width: 300px;}
.denglufangshi img{float: left;
width: 16px;
margin-right: 1%;}
.denglufangshi a{text-decoration: none;
color: #000000;
font-size: 12px;}
.denglufangshi a:hover{color: #FF0004;}
.denglufangshi p{float: left;
margin-top: -0.2%;
margin-right: 3%;}
.denglufangshi .zhifubao{margin-top: -0.2%;
margin-left: -0.5%;}
.youxia{font-size: 12px;}
.youxia a{text-decoration: none;
color: #000000;}
.youxia a:hover{color: #FF0004;}
.youxia{float: right;
margin-right: 7%;
margin-top: 3%;}
/*底部导航*/
.hei{height: 400px;
/*background-color: #000000;*/
/*border-top: #FF0004 2px solid;*/}
.hei1{margin-left: 130px;}
.hei1 a{font-size: 10px;
color: #FFFFFF;
text-decoration: none;
margin-left: 10px;}
.hei1 a:hover{text-decoration: underline;}
.hei2 font{color: #FFFFFF;}
.hei2 a{font-size: 12px;
color:#FFFFFF;
text-decoration: none;}
.hei2 a:hover{text-decoration: underline;}
.hei2{margin-left: 140px;
margin-top: 10px;}
.hei3{margin-left: 140px;
margin-top: 10px;}
/*黑色部分主内容统一属性*/
.hei3 a{font-size: 10px;
color: #8A8484;
text-decoration: none;}
.hei3 a:hover{text-decoration: underline;}
.hei3 font{font-size: 10px;
color: #8A8484;}
.hei31 a{margin-right: 25px;}
.hei31 font{margin-right: 25px;}
.hei32 a{margin-left: 25px;}
.hei33 .hei331{margin-right: 30px;}
.hei33 font{margin-right: 30px;}
.hei34 font{margin-right: 25px;}
.hei35 font{margin-right: 25px;}
.hei35 a{margin-right: 25px;}
.hei36 font{font-size: 8px;
color: #535252;}
.hei37{margin-top:20px;}s
.hei37 img{height: 30px;
margin-right: 100px;}
.hei38 img{margin-top:5px;
height: 30px;}
.hei39 img{height: 50px;}
.hei39{margin-left: 450px;}
医药馆html部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天猫-医药馆</title>
<link rel="icon" href="图/网页图标.png" type="image/png">
<link rel="stylesheet" href="医药馆.css" type="text/css">
</head>
<body>
<!--顶部导航栏-->
<div class="dh">
<div class="dh1">
<div class="a1">
<a href="#"><img src="图/导航栏房子1.png">天猫首页</a>
<p>喵，<a href="#">欢迎来天猫</a></p>
<a href="#">退出</a>
</div>
<div class="a2">
<a href="#">我的淘宝</a>
<a href="#"><img src="图/购物车1.png">购物车</a>
<a href="#">收藏夹</a>
<p>|</p>
<a href="#">淘宝网</a>
<a href="#">商家支持</a>
</div>
</div>
</div>
<div class="ss">
<div class="logo">
<a href="#"><img src="图/天猫会员logo.png"></a>
</div>
<div class="sousuo">
<input type="text" placeholder="搜索 天猫 商品/品牌/店铺">
<button type="reset" value="搜索"><a href="#">搜索</a></button>
</div>
</div>
<div class="zhongbudatu">
<img src="图/医药馆banner.png">
</div>
<!--底部导航-->
<div class="dibudaohang">
<div class="daohang1">
<a href="#"><img src="图/导航1.1-1.png"></a>
<a href="#"><img src="图/导航1.2-1.png"></a>
<a href="#"><img src="图/导航1.3-1.png"></a>
<a href="#"><img src="图/导航1.4-1.png"></a>
</div>
<div class="shuipingxian"><hr/ color="#EFEFEF"></div>
<div class="daohang2">
<div class="daohang21">
<p>购物指南</p>
<br>
<a href="#">免费注册</a>
<br>
<a href="#">开通支付宝</a>
<br>
<a href="#">支付宝充值</a>
</div>
<div class="daohang22">
<p>天猫保障</p>
<br>
<a href="#">发票保障</a>
<br>
<a href="#">售后规则</a>
<br>
<a href="#">物流时效保障</a>
</div>
<div class="daohang23">
<p>支付方式</p>
<br>
<a href="#">快捷支付</a>
<br>
<a href="#">信用卡</a>
<br>
<a href="#">余额宝</a>
<br>
<a href="#">蚂蚁花呗</a>
</div>
<div class="daohang24">
<p>商家服务</p>
<br>
<a href="#">天猫规则</a>
<br>
<a href="#">商家入驻</a>
<br>
<a href="#">商家中心</a>
<br>
<a href="#">天猫必修课</a>
<br>
<a href="#">喵言喵语</a>
<br>
<a href="#">运营服务</a>
</div>
<div class="daohang25">
<p>手机天猫</p>
<br>
<a href="#"><img src="图/底部导航2二维码.png"></a>
</div>
</div>
</div>
<div class="zuidi">
<div class="mao">
<img src="图/裁后的猫.png">
</div>
<div class="hei">
<div class="hei1">
<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>
<a href="#">不当竞争举报</a>
</div>
<div class="hei2">
<a href="#">阿里巴巴集团</a>
<font>|</font>
<a href="#">淘宝网</a>
<font>|</font>
<a href="#">天猫</a>
<font>|</font>
<a href="#">聚划算</a>
<font>|</font>
<a href="#">全球速卖通</a>
<font>|</font>
<a href="#">阿里巴巴国际交易市场</a>
<font>|</font>
<a href="#">1688</a>
<font>|</font>
<a href="#">阿里妈妈</a>
<font>|</font>
<a href="#">飞猪</a>
<font>|</font>
<a href="#">阿里云计算</a>
<font>|</font>
<a href="#">Alios</a>
<font>|</font>
<a href="#">阿里通信</a>
<font>|</font>
<a href="#">万网</a>
<font>|</font>
<a href="#">高德</a>
<font>|</font>
<a href="#">UC</a>
<font>|</font>
<a href="#">友盟</a>
<font>|</font>
<a href="#">虾米</a>
<font>|</font>
<a href="#">钉钉</a>
<font>|</font>
<a href="#">支付宝</a>
<font>|</font>
<a href="#">阿里安全</a>
</div>
<div class="hei3">
<div class="hei31">
<a href="#">增值电信业务经营许可证：浙B2-20110446</a>
<font>市场名称登记证：工商网市字3301004119号</font>
<font>出版物网络交易平台服务经营备案证：新出发浙备字第2013002号</font>
</div>
<div class="hei32">
<font>互联网违法和不良信息举报电话：0571-81683755 jubao.tb@service.taobao.com</font>
<a href="#">中国互联网举报中心</a>
<a href="#">中国扫黄打非网</a>
<a href="#">全国文化和旅游市场网上举报投诉处理系统</a>
<a href="#">全国12315平台</a>
</div>
<div class="hei33">
<a href="#" class="hei331">浙江省互联网违法和不良信息举报电话中心</a>
<a href="#" class="hei331">全网举报</a>
<font>互联网药品信息服务资质证书编号：<a href="#">浙-（经营性）-2017-0005</a></font>
<a href="#" class="hei331"><img src="图/公安1.png">浙公网安备 33010002000120号</a>
</div>
<div class="hei34">
<font>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</font>
<font>网络文化经营许可证：浙网文[2021]1668-073号<a href="#"><img src="图/公安2.png"></a></font>
</div>
<div class="hei35">
<font>浙江省网络食品销售第三方平台提供者备案：全网食A33010002</font>
<a href="#">12318举报</a>
<a href="#">浙B2-20110446-1</a>
</div>
<div class="hei36">
<font>©2003-现在TMALL.COM版权所有</font>
</div>
<div class="hei37">
<a href="#"><img src="图/最低图1.png"></a>
<a href="#"><img src="图/最低图2.png"></a>
<a href="#"><img src="图/最低图3.png"></a>
<a href="#"><img src="图/最低图4.png"></a>
</div>
<div class="hei38">
<a href="#"><img src="图/最低图5.png"></a>
</div>
</div>
</div>
</div>
</body>
</html>
医药馆css样式部分
@charset "utf-8";
/* CSS Document */
body{background-color: #FFFFFF;
margin:0px;
overflow-x: hidden;}
p{color: #8A8484;
display:inline}
.dh{height: 35px;
background-color: #FFFFFF;
font-size: 12px;
border-bottom: 1px solid #797979;}
.dh1 .a1{float:left;
margin-left: 250px;}
.dh1 a{margin-right:20px;
text-decoration: none;
color: #8A8484;
text-align: center;
line-height: 35px;}
.dh1 p{margin-right:20px;}
.dh1 a:hover{text-decoration: underline;
color: #FF0004;}
.dh1 .a2{float: left;
margin-left: 400px;}
.dh img{margin-bottom: -2px;}
/*搜索*/
.logo{float:left;
margin-left: -15px;}
.ss{width: 100%;
margin-left: 280px;
margin-top: 30px;
/* float:left;*/
}
input{border: 1px solid red;
width: 540px;height: 30px;
float: right;
margin-right: 800px;
background-color: #ffffff;
color: #bdbdbd;
outline:none;
border: red 3px solid;
box-shadow: inset 0px 1px 3px black;}
.sousuo button{border: 1px solid red;
width: 100px;height: 30px;
float: right;
background-color: red;
margin-right: -550px;
text-align: center;
font-size: 18px;
margin-top: 4px;}
.sousuo button a{text-decoration: none;
color: #FFFFFF;}
.sousuo{float: left;
margin-left: 450px;
margin-top:-40px;}
.zhongbudatu{width: 100%;
height: 600px;
background-color: #FFFD00;
float:left;
margin-top:30px;}
.zhongbudatu img{width: 100%;}
/*底部导航*/
.dibudaohang{height: 400px;
background-color: #FFFFFF;
margin-top: 100px;}
.daohang1 a{float: left;
margin-left: 80px;
margin-top: 50px;}
.shuipingxian{width:1200px;
float: left;
margin-top: 20px;
margin-left: 150px;
}
.daohang2{float: left;
margin-top:50px;
margin-left: -1100px;}
.daohang21{float: left;
margin-left: 50px;}
.daohang22{float: left;
margin-left: 120px;}
.daohang23{float: left;
margin-left: 120px;}
.daohang24{float: left;
margin-left: 120px;}
.daohang25{float: left;
margin-left: 120px;}
.daohang2 p{font-size: 16px;
font-weight: bold;
color: #666363;}
.daohang2 .daohang25 img{width: 100px;
height: 103px;}
.daohang2 a{font-size: 12px;
color: #8A8484;
text-decoration: none;}
.daohang2 a:hover{text-decoration: underline;}
.shuipingxian2{width:1200px;
float: left;
margin-top: 175px;
margin-left: 10px;
}
/*最低*/
.zuidi{float:left;
margin-top:13%;}
.mao img{float:left;
width: 100px;
margin-left: 150px;
margin-top: -38px;}
.hei{width: 1898px;
height: 400px;
background-color: #000000;
border-top: #FF0004 2px solid;}
.hei1{margin-left: 130px;}
.hei1 a{font-size: 10px;
color: #FFFFFF;
text-decoration: none;
margin-left: 10px;}
.hei1 a:hover{text-decoration: underline;}
.hei2 font{color: #FFFFFF;}
.hei2 a{font-size: 12px;
color:#FFFFFF;
text-decoration: none;}
.hei2 a:hover{text-decoration: underline;}
.hei2{margin-left: 140px;
margin-top: 10px;}
.hei3{margin-left: 140px;
margin-top: 10px;}
/*黑色部分主内容统一属性*/
.hei3 a{font-size: 10px;
color: #8A8484;
text-decoration: none;}
.hei3 a:hover{text-decoration: underline;}
.hei3 font{font-size: 10px;
color: #8A8484;}
.hei31 a{margin-right: 25px;}
.hei31 font{margin-right: 25px;}
.hei32 a{margin-left: 25px;}
.hei33 .hei331{margin-right: 30px;}
.hei33 font{margin-right: 30px;}
.hei34 font{margin-right: 25px;}
.hei35 font{margin-right: 25px;}
.hei35 a{margin-right: 25px;}
.hei36 font{font-size: 8px;
color: #535252;}
.hei37{margin-top:20px;}s
.hei37 img{height: 30px;
margin-right: 100px;}
.hei38 img{margin-top:5px;
height: 30px;}
天猫内容html部分
<!doctype html>
<html>
<head>
<link rel="icon" href="图/网页图标.png" type="image/png">
<link rel="stylesheet" href="天猫内容.css" type="text/css">
<meta charset="utf-8">
<title>天猫-天猫内容</title>
</head>
<body>
<div id="dao">
<div id="div2">
<a href=""><img src="图/导航栏房子.png" width="12px" alt="主页"><font size="2px">天猫首页</font></a>
<p> </p >
<p><font size="2px">喵，欢迎来到天猫</font></p>
<p> </p >
<a href=""><font size="2px">请登录</font></a>
<p> </p >
<a href=""><font size="2px">免费注册</font></a>
<p>
</p >
<a href=""><font size="2px">我的淘宝</font></a>
<p> </p >
<a href=""><img src="图/购物车1.png" width="11px" alt="购物车"><font size="2px">购物车</font></a>
<p> </p >
<a href=""><font size="2px">收藏夹</font></a>
<p> </p >
<p>|</p >
<p> </p >
<a href=""><img src="图/手机.png" width="7px" alt="手机"><font size="2px">手机版</font></a>
<p> </p >
<a href=""><font size="2px">淘宝网</font></a>
<p> </p >
<a href=""><font size="2px">网页无障碍</font></a>
<p> </p >
<a href=""><font size="2px">商家支持</font></a>
<p> </p >
<a href=""><font size="2px">网站导航</font></a>
</div>
</div>
<div class="se">
<p>天猫内容</p >
</div>
<div>
<div class="zhi">
<p>直播</p>
</div>
<div class="hang1">
<div class="zhibo01">
<div class="tu01">
<img src="图/01.jpg" alt="图片">
<div class="zi01">
<p>唱唱歌，卖卖货。</p>
<a>直播新面孔</a>
</div>
</div>
</div>
<div class="zhibo02">
<div class="tu02">
<img src="图/02.jpg">
<div class="zi02">
<p>伊伊伊小莹的直播间</p>
<a>直播新面孔</a>
</div>
</div>
</div>
<div class="zhibo03">
<div class="tu03">
<img src="图/03.jpg">
<div class="zi03">
<p>zhen1050324117</p>
<a>直播新面孔</a>
</div>
</div>
</div>
</div>
<div class="hang2">
<div class="zhibo04">
<div class="tu04">
<img src="图/04.jpg" alt="图片">
<div class="zi04">
<p>在吗？这里好声音~</p>
<a>音乐之声</a>
</div>
</div>
</div>
<div class="zhibo05">
<div class="tu05">
<img src="图/05.jpg">
<div class="zi05">
<p>你主动我们就会有故事</p>
<a>直播新面孔</a>
</div>
</div>
</div>
<div class="zhibo06">
<div class="tu06">
<img src="图/06.jpg">
<div class="zi06">
<p>沫小沫</p>
<a>直播新面孔</a>
</div>
</div>
</div>
</div>
<div class="hang3">
<div class="zhibo07">
<div class="tu07">
<img src="图/07.jpg" alt="图片">
<div class="zi07">
<p>小帕酱</p>
<a>直播新面孔</a>
</div>
</div>
</div>
<div class="zhibo08">
<div class="tu08">
<img src="图/08.jpg">
<div class="zi08">
<p>关注主播领红包</p>
<a>直播新面孔</a>
</div>
</div>
</div>
<div class="zhibo09">
<div class="tu09">
<img src="图/09.jpg">
<div class="zi09">
<p>老跳祝您暴富</p>
<a>直播新面孔</a>
</div>
</div>
</div>
</div>
<div class="hang4">
<div class="zhibo10">
<div class="tu10">
<img src="图/10.jpg" alt="图片">
<div class="zi10">
<p>t_1500293009612_0305的直播</p>
<a>直播新面孔</a>
</div>
</div>
</div>
</div>
</div>
<div class="shipin">
<div class="zhi2">
<p>视频</p>
</div>
<div class="hang5">
<div class="shipin1">
<div class="shipin01">
<video src="图/视频/1.mp4" controls></video>
<div class="zi001">
<p>616超级晚</p>
<a>龚丽娜周深笑之歌</a>
</div>
</div>
</div>
<div class="shipin2">
<div class="shipin02">
<video src="图/视频/02.mp4" controls></video>
<div class="zi002">
<p>616超级晚</p>
<a>李宇春说唱西门少年</a>
</div>
</div>
</div>
<div class="shipin3">
<div class="shipin03">
<video src="图/视频/03.mp4" controls></video>
<div class="zi003">
<p>616超级晚</p>
<a>毛不易易燃易爆炸</a>
</div>
</div>
</div>
</div>
<div class="hang6">
<div class="shipin4">
<div class="shipin04">
<video src="图/视频/04.mp4" controls></video>
<div class="zi004">
<p>616超级晚</p>
<a>任嘉伦张继科阿云噶开门见山</a>
</div>
</div>
</div>
<div class="shipin5">
<div class="shipin05">
<video src="图/视频/05.mp4" controls></video>
<div class="zi005">
<p>616超级晚</p>
<a>佟丽娅丽人行</a>
</div>
</div>
</div>
<div class="shipin6">
<div class="shipin06">
<video src="图/视频/06.mp4" controls></video>
<div class="zi006">
<p>616超级晚</p>
<a>王二妮薛之谦演员</a>
</div>
</div>
</div>
</div>
<div class="hang7">
<div class="shipin7">
<div class="shipin07">
<video src="图/视频/07.mp4" controls></video>
<div class="zi007">
<p>616超级晚</p>
<a>尤长靖后来遇见他</a>
</div>
</div>
</div>
<div class="shipin8">
<div class="shipin08">
<video src="图/视频/10.mp4" controls></video>
<div class="zi008">
<p>616超级晚</p>
<a>#周涛来了就差顿饺子了#</a>
</div>
</div>
</div>
<div class="shipin9">
<div class="shipin09">
<video src="图/视频/09.mp4" controls></video>
<div class="zi009">
<p>616超级晚</p>
<a>阿朵穿高跟鞋背身打鼓</a>
</div>
</div>
</div>
</div>
</div>
<!--底部导航-->
<div class="dibudaohang">
<div class="daohang1">
<a href="#"><img src="图/导航1.1-1.png"></a>
<a href="#"><img src="图/导航1.2-1.png"></a>
<a href="#"><img src="图/导航1.3-1.png"></a>
<a href="#"><img src="图/导航1.4-1.png"></a>
</div>
<div class="shuipingxian"><hr/ color="#EFEFEF"></div>
<div class="daohang2">
<div class="daohang21">
<p>购物指南</p>
<br>
<a href="#">免费注册</a>
<br>
<a href="#">开通支付宝</a>
<br>
<a href="#">支付宝充值</a>
</div>
<div class="daohang22">
<p>天猫保障</p>
<br>
<a href="#">发票保障</a>
<br>
<a href="#">售后规则</a>
<br>
<a href="#">物流时效保障</a>
</div>
<div class="daohang23">
<p>支付方式</p>
<br>
<a href="#">快捷支付</a>
<br>
<a href="#">信用卡</a>
<br>
<a href="#">余额宝</a>
<br>
<a href="#">蚂蚁花呗</a>
</div>
<div class="daohang24">
<p>商家服务</p>
<br>
<a href="#">天猫规则</a>
<br>
<a href="#">商家入驻</a>
<br>
<a href="#">商家中心</a>
<br>
<a href="#">天猫必修课</a>
<br>
<a href="#">喵言喵语</a>
<br>
<a href="#">运营服务</a>
</div>
<div class="daohang25">
<p>手机天猫</p>
<br>
<a href="#"><img src="图/底部导航2二维码.png"></a>
</div>
</div>
</div>
<div class="zuidi">
<div class="mao">
<img src="图/裁后的猫.png">
</div>
<div class="hei">
<div class="hei1">
<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>
<a href="#">不当竞争举报</a>
</div>
<div class="hei2">
<a href="#">阿里巴巴集团</a>
<font>|</font>
<a href="#">淘宝网</a>
<font>|</font>
<a href="#">天猫</a>
<font>|</font>
<a href="#">聚划算</a>
<font>|</font>
<a href="#">全球速卖通</a>
<font>|</font>
<a href="#">阿里巴巴国际交易市场</a>
<font>|</font>
<a href="#">1688</a>
<font>|</font>
<a href="#">阿里妈妈</a>
<font>|</font>
<a href="#">飞猪</a>
<font>|</font>
<a href="#">阿里云计算</a>
<font>|</font>
<a href="#">Alios</a>
<font>|</font>
<a href="#">阿里通信</a>
<font>|</font>
<a href="#">万网</a>
<font>|</font>
<a href="#">高德</a>
<font>|</font>
<a href="#">UC</a>
<font>|</font>
<a href="#">友盟</a>
<font>|</font>
<a href="#">虾米</a>
<font>|</font>
<a href="#">钉钉</a>
<font>|</font>
<a href="#">支付宝</a>
<font>|</font>
<a href="#">阿里安全</a>
</div>
<div class="hei3">
<div class="hei31">
<a href="#">增值电信业务经营许可证：浙B2-20110446</a>
<font>市场名称登记证：工商网市字3301004119号</font>
<font>出版物网络交易平台服务经营备案证：新出发浙备字第2013002号</font>
</div>
<div class="hei32">
<font>互联网违法和不良信息举报电话：0571-81683755 jubao.tb@service.taobao.com</font>
<a href="#">中国互联网举报中心</a>
<a href="#">中国扫黄打非网</a>
<a href="#">全国文化和旅游市场网上举报投诉处理系统</a>
<a href="#">全国12315平台</a>
</div>
<div class="hei33">
<a href="#" class="hei331">浙江省互联网违法和不良信息举报电话中心</a>
<a href="#" class="hei331">全网举报</a>
<font>互联网药品信息服务资质证书编号：<a href="#">浙-（经营性）-2017-0005</a></font>
<a href="#" class="hei331"><img src="图/公安1.png">浙公网安备 33010002000120号</a>
</div>
<div class="hei34">
<font>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</font>
<font>网络文化经营许可证：浙网文[2021]1668-073号<a href="#"><img src="图/公安2.png"></a></font>
</div>
<div class="hei35">
<font>浙江省网络食品销售第三方平台提供者备案：全网食A33010002</font>
<a href="#">12318举报</a>
<a href="#">浙B2-20110446-1</a>
</div>
<div class="hei36">
<font>©2003-现在TMALL.COM版权所有</font>
</div>
<div class="hei37">
<a href="#"><img src="图/最低图1.png"></a>
<a href="#"><img src="图/最低图2.png"></a>
<a href="#"><img src="图/最低图3.png"></a>
<a href="#"><img src="图/最低图4.png"></a>
</div>
<div class="hei38">
<a href="#"><img src="图/最低图5.png"></a>
</div>
</div>
</div>
</div>
<!--
<div class="zhibo01">
<img src="图/01.jpg">
<p>唱唱歌，卖卖货</p>
</div>
-->
</body>
</html>
天猫内容css样式部分
@charset "utf-8";
/* CSS Document */
body{margin: 0;
overflow-x: hidden;
background-color: #E1DDDD;
width: 1830px;}
#dao{float: left;
background-color: #f1f1f1;
width: 100%;height: 25px;
overflow: hidden}
#div2{float: left;
margin-left: 200px}
#div2 a{float: left;
margin-left: 2px;
color: #6c6c6c;
text-decoration: none}
#div2 a:hover{text-decoration: 1px solid underline;
color: red;}
#div2 p{display: inline;
float: left;
color: #6c6c6c;
margin-left: 2px;
margin-top: 0;}
.se{float: left;
width: 100%;height: 50px;
background-color: #ff1e00;}
.se p{display: inline;
float: left;
margin-left: 13%;
font-size: 18px;
font-family: 宋体;
font-weight: 700;
color: #ffffff}
.zhi{float: left;
margin-left: 13%;
font-size: 18px;
font-family: 宋体;
font-weight: 700}
.zhibo01{width: 350px;
height: 256px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: -35px;}
.tu01 img{width: 200px;
margin-left: 75px;}
.zi01{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi01 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi01 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -130px;}
.zhibo02{width: 350px;
height: 256px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.tu02 img{width: 200px;
margin-left: 75px;}
.zi02{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi02 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi02 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -145px;}
.zhibo03{width: 350px;
height: 256px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.tu03 img{width: 200px;
margin-left: 75px;}
.zi03{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi03 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi03 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -115px;}
.hang2{float: left;
margin-left: 270px;}
.zhibo04{width: 350px;
height: 256px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: -35px;}
.tu04 img{width: 200px;
margin-left: 75px;}
.zi04{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi04 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi04 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -140px;}
.zhibo05{width: 350px;
height: 256px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.tu05 img{width: 200px;
margin-left: 75px;}
.zi05{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi05 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi05 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -160px;}
.zhibo06{width: 350px;
height: 256px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.tu06 img{width: 200px;
margin-left: 75px;}
.zi06{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi06 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi06 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -48px;}
.hang3{float: left;
margin-left: 270px;}
.zhibo07{width: 350px;
height: 256px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: -35px;}
.tu07 img{width: 200px;
margin-left: 75px;}
.zi07{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi07 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi07 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -48px;}
.zhibo08{width: 350px;
height: 256px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.tu08 img{width: 200px;
margin-left: 75px;}
.zi08{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi08 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi08 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -113px;}
.zhibo09{width: 350px;
height: 256px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.tu09 img{width: 200px;
margin-left: 75px;}
.zi09{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi09 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi09 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -95px;}
.hang4{float: left;
/* margin-top:20%;*/
margin-left: 270px;}
.zhibo10{width: 350px;
height: 256px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: -35px;}
.tu10 img{width: 200px;
margin-left: 75px;}
.zi10{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi10 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi10 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -215px;}
.zhi2{float: left;
margin-top: 20%;
margin-left: -19%;
font-size: 18px;
font-family: 宋体;
font-weight: 700}
/**//**/
.hang5{float: left;
margin-top: 20%;
margin-left: -17.5%;}
.shipin1{width: 350px;
height: 245px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: -35px;}
.shipin01 video{width: 340px;
margin-left: 5px;}
.zi001{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi001 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi001 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -75px;}
.shipin2{width: 350px;
height: 245px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.shipin02 video{width: 340px;
margin-left: 5px;}
.zi002{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi002 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi002 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -75px;}
.shipin3{width: 350px;
height: 245px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.shipin03 video{width: 340px;
margin-left: 5px;}
.zi003{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi003 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi003 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -75px;}
.hang6{float: left;
margin-top: 20px;
margin-left: 265px;}
.shipin4{width: 350px;
height: 245px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: -35px;}
.shipin04 video{width: 340px;
margin-left: 5px;}
.zi004{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi004 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi004 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -75px;}
.shipin5{width: 350px;
height: 245px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.shipin05 video{width: 340px;
margin-left: 5px;}
.zi005{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi005 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi005 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -75px;}
.shipin6{width: 350px;
height: 245px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.shipin06 video{width: 340px;
margin-left: 5px;}
.zi006{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi006 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi006 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -75px;}
.hang7{float: left;
margin-top: 20px;
margin-left: 265px;}
.shipin7{width: 350px;
height: 245px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: -35px;}
.shipin07 video{width: 340px;
margin-left: 5px;}
.zi007{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi007 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi007 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -75px;}
.shipin8{width: 350px;
height: 245px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.shipin08 video{width: 340px;
margin-left: 5px;}
.zi008{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi008 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi008 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -75px;}
.shipin9{width: 350px;
height: 245px;
background-color: #000000;
float: left;
margin-top: 80px;
margin-left: 20px;}
.shipin09 video{width: 340px;
margin-left: 5px;}
.zi009{width: 350px;
height: 56px;
background-color: #FFFFFF;
margin-top: -4px;}
.zi009 p{float: left;
font-family: 宋体;
font-weight: bold;
margin-left: 10px;
margin-top: 10px;}
.zi009 a{float: left;
font-family: 宋体;
font-size: 10px;
margin-top: 35px;
margin-left: -75px;}
/*底部导航*/
.dibudaohang{float: left;
width: 100%;
height: 420px;
background-color: #FFFFFF;
margin-top: 20px;}
.daohang1 a{float: left;
margin-left: 80px;
margin-top: 50px;}
.shuipingxian{width:1200px;
float: left;
margin-top: 20px;
margin-left: 150px;
}
.daohang2{float: left;
margin-top:50px;
margin-left: -1100px;}
.daohang21{float: left;
margin-left: 50px;}
.daohang22{float: left;
margin-left: 120px;}
.daohang23{float: left;
margin-left: 120px;}
.daohang24{float: left;
margin-left: 120px;}
.daohang25{float: left;
margin-left: 120px;}
.daohang2 p{font-size: 16px;
font-weight: bold;
color: #666363;}
.daohang2 .daohang25 img{width: 100px;
height: 103px;}
.daohang2 a{font-size: 12px;
color: #8A8484;
text-decoration: none;}
.daohang2 a:hover{text-decoration: underline;}
.shuipingxian2{width:1200px;
float: left;
margin-top: 175px;
margin-left: 10px;
}
/*最低*/
.zuidi{float:left;
margin-top:0px;}
.mao img{float:left;
width: 100px;
margin-left: 150px;
margin-top: -38px;}
.hei{width: 1898px;
height: 400px;
background-color: #000000;
border-top: #FF0004 2px solid;}
.hei1{margin-left: 130px;}
.hei1 a{font-size: 10px;
color: #FFFFFF;
text-decoration: none;
margin-left: 10px;}
.hei1 a:hover{text-decoration: underline;}
.hei2 font{color: #FFFFFF;}
.hei2 a{font-size: 12px;
color:#FFFFFF;
text-decoration: none;}
.hei2 a:hover{text-decoration: underline;}
.hei2{margin-left: 140px;
margin-top: 10px;}
.hei3{margin-left: 140px;
margin-top: 10px;}
/*黑色部分主内容统一属性*/
.hei3 a{font-size: 10px;
color: #8A8484;
text-decoration: none;}
.hei3 a:hover{text-decoration: underline;}
.hei3 font{font-size: 10px;
color: #8A8484;}
.hei31 a{margin-right: 25px;}
.hei31 font{margin-right: 25px;}
.hei32 a{margin-left: 25px;}
.hei33 .hei331{margin-right: 30px;}
.hei33 font{margin-right: 30px;}
.hei34 font{margin-right: 25px;}
.hei35 font{margin-right: 25px;}
.hei35 a{margin-right: 25px;}
.hei36 font{font-size: 8px;
color: #535252;}
.hei37{margin-top:20px;}s
.hei37 img{height: 30px;
margin-right: 100px;}
.hei38 img{margin-top:5px;
height: 30px;}