html+css实现天猫官网
无保留html+css实现天猫官网
-
- 天猫首页html部分
-
- css部分
- 天猫会员html部分
-
- css部分
- 喵鲜生html部分
-
- css部分
- 医药馆html部分
-
- css部分
- 天猫内容html部分
-
- css部分
天猫首页html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天猫tmall.com--理想生活上天猫</title>
<link rel="icon" href="image/网站图标.png" type="image/png">
<link rel="stylesheet" href="天猫.css" type="text/css">
</head>
<body>
<!--导航栏部分-->
<div id="dao">
<div id="div2">
<a href=""><img src="image/主页.png" width="12px" alt="主页"><font size="2px">天猫首页</font></a>
<p> </p>
<p><font size="2px" color="#a1a1a1">喵，欢迎来到天猫</font></p>
<p> </p>
<a href="https://login.taobao.com/?spm=875.7931836.0.0.66144265H50iTA&redirectURL=https%3A%2F%2Fwww.tmall.com%2F"><font size="2px">请登录</font></a>
<p> </p>
<a href="https://register.tmall.com/?spm=875.7931836.0.0.66144265ZRe7hy"><font size="2px">免费注册</font></a>
<p> </p>
<a href=""><font size="2px">我的淘宝</font></a>
<p> </p>
<a href=""><img src="image/购物车.png" width="10px" alt="购物车"><font size="2px">购物车</font></a>
<p> </p>
<a href=""><font size="2px">收藏夹</font></a>
<p>|</p>
<a href=""><img src="image/手机.png" width="6px" alt="手机"><font size="2px">手机版</font></a>
<p> </p>
<a href="https://www.taobao.com/?spm=875.7931836.0.0.66144265lL1rVn"><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 id="sou">
<img src="image/logo.png" height="55px" alt="天猫">
<input id="a" type="text" placeholder="搜索 天猫 商品/品牌/店铺">
<input id="b" type="submit" value="搜索">
</div>
<!--主页-->
<div id="zhu">
<div>
<!--标签栏-->
<div id="bq">
<p class="p2">主题市场</p>
<div id="t">
<a class="tu"><img src="image/天猫超市.PNG" height="18px" alt="天猫超市"></a>
<p> </p>
<a class="tu"><img src="image/天猫国际.PNG" height="18px" alt="天猫国际"></a>
<p> </p>
<a href="天猫会员.html" class="a1">天猫会员</a>
<p> </p>
<a href="喵鲜生.html" class="a1">喵鲜生</a>
<p> </p>
<a href="医药馆.html" class="a1">医药馆</a>
<p> </p>
<a class="a1">魅力惠</a>
<p> </p>
<a class="a1">飞猪旅行</a>
<p> </p>
<a class="a1">苏宁易购</a>
<p> </p>
<a href="天猫内容.html" class="a1">天猫内容</a>
</div>
<!--列表内容-->
<div class="lie">
<ul class="ul_01">
<li>
<p><img src="image/图标/女装.png" alt="女装"></p>
<a>女装</a>
<p>/</p>
<a>内衣</a>
</li>
<li>
<p><img src="image/图标/男装.png" alt="男装"></p>
<a>男装</a>
<p>/</p>
<a>运动户外</a>
</li>
<li>
<p><img src="image/图标/女鞋.png" alt="女鞋"></p>
<a>女鞋</a>
<p>/</p>
<a>男鞋</a>
<p>/</p>
<a>箱包</a>
</li>
<li>
<p><img src="image/图标/美妆.png" alt="美妆"></p>
<a>美妆</a>
<p>/</p>
<a>个人护理</a>
</li>
<li>
<p><img src="image/图标/腕表.png" alt="腕表"></p>
<a>腕表</a>
<p>/</p>
<a>眼睛</a>
<p>/</p>
<a>珠宝首饰</a>
</li>
<li>
<p><img src="image/图标/数码.png" alt="手机"></p>
<a>手机</a>
<p>/</p>
<a>数码</a>
<p>/</p>
<a>电脑办公</a>
</li>
<li>
<p><img src="image/图标/母婴玩具.png" alt="母婴玩具"></p>
<a>母婴玩具</a>
</li>
<li>
<p><img src="image/图标/零食.png" alt="零食"></p>
<a>零食</a>
<p>/</p>
<a>茶酒</a>
<p>/</p>
<a>进口食品</a>
</li>
<li>
<p><img src="image/图标/生鲜水果.png" alt="生鲜水果"></p>
<a>生鲜水果</a>
</li>
<li>
<p><img src="image/图标/大家电.png" alt="家电"></p>
<a>大家电</a>
<p>/</p>
<a>生活电器</a>
</li>
<li>
<p><img src="image/图标/家具.png" alt="家具"></p>
<a>家具</a>
<p>/</p>
<a>灯具</a>
<p>/</p>
<a>卫浴</a>
</li>
<li>
<p><img src="image/图标/汽车.png" alt="汽车"></p>
<a>汽车</a>
<p>/</p>
<a>配件</a>
<p>/</p>
<a>用品</a>
</li>
<li>
<p><img src="image/图标/家纺.png" alt="家纺"></p>
<a>家纺</a>
<p>/</p>
<a>家饰</a>
<p>/</p>
<a>鲜花</a>
</li>
<li>
<p><img src="image/图标/医药保健.png" alt="医药保健"></p>
<a>医药保健</a>
</li>
<li>
<p><img src="image/图标/厨具.png" alt="厨具"></p>
<a>厨具</a>
<p>/</p>
<a>收纳</a>
<p>/</p>
<a>宠物</a>
</li>
<li>
<p><img src="image/图标/图书音像.png" alt="图书音像"></p>
<a>图书音像</a>
</li>
</ul>
</div>
<!--中部banner-->
<div class="banner">
<div class="container">
<!-- 先把第一张图片显示出来 -->
<img class="on" src="image/banner/1.png" alt="banner"/>
<img src="image/banner/2.png" alt="banner"/>
<img src="image/banner/3.png" alt="banner"/>
<img src="image/banner/4.png" alt="banner"/>
<img src="image/banner/5.png" alt="banner"/>
<!-- 左右切换 -->
<div class="left"><</div>
<div class="right">></div>
<!-- 焦点 -->
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- js部分 -->
<script type="text/javascript">
//1、找到container下的所有img标签,li标签,左右按钮
const aImgs = document.querySelectorAll('.container img');
const aLis = document.querySelectorAll('.container li');
const btnLeft = document.querySelector('.container .left');
const btnRight = document.querySelector('.container .right');
//点击事件
//点击按钮图片切换
let index = 0; //当前图片下标
let 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>
</div>
<div class="ban2">
<div class="container_01">
<!-- 先把第一张图片显示出来 -->
<img class="on_01" src="image/banner/熊.png" alt="banner"/>
<img src="image/banner/精.png" alt="banner"/>
<img src="image/banner/孩.png" alt="banner"/>
<img src="image/banner/粉.png" alt="banner"/>
<!-- 左右切换 -->
<div class="left_01"><</div>
<div class="right_02">></div>
<!-- 焦点 -->
<ul>
<li class="active_01"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- js部分 -->
<script type="text/javascript">
//1、找到container下的所有img标签,li标签,左右按钮
const aImgs = document.querySelectorAll('.container_01 img');
const aLis = document.querySelectorAll('.container_01 li');
const btnLeft = document.querySelector('.container_01 .left_01');
const btnRight = document.querySelector('.container_01 .right_02');
//点击事件
//点击按钮图片切换
let index = 0; //当前图片下标
let lastIndex = 0;
btnRight.onclick = function(){
//记录上一张图片的下标
lastIndex = index;
//清除上一张图片的样式
aImgs[lastIndex].className = '';
aLis[lastIndex].className = '';
index++;
index %= aImgs.length; //实现周期性变化
//设置当前图片的样式
aImgs[index].className = 'on_01';
aLis[index].className = 'active_01';
}
//左边按钮类似
btnLeft.onclick = function(){
//记录上一张图片的下标
lastIndex = index;
//清除上一张图片的样式
aImgs[lastIndex].className = '';
aLis[lastIndex].className = '';
index--;
if (index < 0) {
index = aImgs.length - 1;
}
//设置当前图片的样式
aImgs[index].className = 'on_01';
aLis[index].className = 'active_01';
}
</script>
<!--右侧公告栏-->
</div>
<div class="gong">
<div class="img_01">
<img src="image/客服.png">
</div>
<div class="p_01">
<p class="a_01">Hi!你好</p>
</div>
<div class="wai">
<img class="gao" src="image/超市广告.PNG">
</div>
<!--公告栏文字-->
<div class="zi">
<div class="zi_001">
<p>公告</p>
</div>
<div class="zi_002">
<p>新鲜事儿都在这里~</p>
</div>
<div class="zi_003">
<input class="bia" type="button" value="热点">
</div>
<div class="zi_004">
<p class="p_02">设计创享家3D设计服务大赛来袭！</p>
</div>
<div class="zi_005">
<input class="bia" type="button" value="热点">
</div>
<div class="zi_006">
<p class="p_02">全球新发现，好物开抢就现在！</p>
</div>
<div class="zi_007">
<input class="bia" type="button" value="热点">
</div>
<div class="zi_008">
<p class="p_02">万款新品流行速递抢先看</p>
</div>
</div>
<div class="shou">
<div>
<img class="xing" src="image/图标/星星.png" alt="收藏的宝贝">
<img class="mai" src="image/图标/手提包.png" alt="买过的店铺">
<img class="dian" src="image/图标/店铺.png" alt="收藏的店铺">
<img class="zhong" src="image/图标/钟.png" alt="我的足迹">
</div>
<div class="zi_01">
<p class="zi_02">收藏的宝贝</p>
<p class="zi_03">买过的店铺</p>
<p class="zi_04">收藏的店铺</p>
<p class="zi_05">我的足迹</p>
</div>
</div>
</div>
</div>
<div class="chao">
<input class="lv" type="button" value="天猫超市">
</div>
<div class="di">
<img class="tian1" src="image/分类/天猫超市1.png" alt="商品图">
<img class="tian1" src="image/分类/天猫超市2.png" alt="商品图">
<img class="tian1" src="image/分类/天猫超市3.png" alt="商品图">
<img class="tian1" src="image/分类/天猫超市4.png" alt="商品图">
<img class="tian1" src="image/分类/天猫超市5.png" alt="商品图">
</div>
<div class="di_01">
<p>十月结晶婴儿洗衣皂115g*...</p>
<p class="wen_1">ABC卫生巾日用mini巾超薄...</p>
<p class="wen_4">海飞丝洗发水洗发露洗头清...</p>
<p class="wen_2">【凑单】喜之郎什锦果汁果...</p>
<p class="wen_3">创得多层饺子盒收纳盒保险...</p>
</div>
<div class="jia">
<p>￥49.9</p>
<p class="wen_5">￥39.8</p>
<p class="wen_5">￥29.9</p>
<p class="wen_6">￥27.9</p>
<p class="wen_7">￥49.9</p>
</div>
<div class="guo">
<input class="lv_01" type="button" value="天猫国际">
</div>
<div class="di">
<img class="tian1" src="image/分类/天猫国际1.png" alt="商品图">
<img class="tian1" src="image/分类/天猫国际2.png" alt="商品图">
<img class="tian1" src="image/分类/天猫国际3.png" alt="商品图">
<img class="tian1" src="image/分类/天猫国际4.png" alt="商品图">
<img class="tian1" src="image/分类/天猫国际5.png" alt="商品图">
</div>
<div class="di_02">
<p class="wen_1">进口超值</p>
<p class="wen_8">日本SHUKIKU儿童防晒帽男...</p>
<p class="wen_2"> Onzie美国 裸感高腰弹力瑜...</p>
<p class="wen_3"> 正品MrsRogers喜马拉雅纯...</p>
</div>
<div class="jia_1">
<p>限时好礼（红色）</p>
<p class="wen_9">￥79</p>
<p class="wen_01">￥135</p>
<p class="wen_02">￥298</p>
</div>
<div class="guo">
<p class="lv_02">猜你喜欢</p>
<p class="lv_03">个性推荐</p>
</div>
<div class="di">
<img class="tian1" src="image/分类/猜你喜欢1.png" alt="商品图">
<img class="tian1" src="image/分类/猜你喜欢2.png" alt="商品图">
<img class="tian1" src="image/分类/猜你喜欢3.png" alt="商品图">
<img class="tian1" src="image/分类/猜你喜欢4.png" alt="商品图">
<img class="tian1" src="image/分类/猜你喜欢5.png" alt="商品图">
</div>
<div class="di_01">
<p class="wen_03">红太阳熟咸蛋高邮咸鸭蛋75<br>克20枚红心流油蛋黄盐蛋非海鸭蛋非</br></p>
<p class="wen_04">【三只松鼠_坚果炒货零食<br>大礼包】零食小吃休闲食品夜宵充饥宿舍</br></p>
<p class="wen_05">la有氧洗威露士抗菌洗衣液松<br>木2斤手洗除菌去渍新旧包装随机发</br></p>
<p class="wen_05">维达抽纸超韧家用擦手纸卫生<br>纸巾3层100抽10包面巾纸实惠餐巾纸i2</br></p>
<p class="wen_05">维达超韧手帕纸4层8张18包<br>小包餐巾纸卫生纸巾面巾纸抽纸新旧交替</br></p>
</div>
<div class="jia">
<p>￥49.9</p>
<p class="wen_06">￥41.5</p>
<p class="wen_07">￥29.9</p>
<p class="wen_08">￥19.9</p>
<p class="wen_09">￥9.9</p>
</div>
</div>
</div>
<div class="dibu">
<img class="dibu_1" src="image/底部/底部 (3).png">
<img class="dibu_2" src="image/底部/底部 (2).png">
<img class="dibu_2" src="image/底部/底部 (4).png">
<img class="dibu_2" src="image/底部/底部 (1).png">
<div class="fen">
<hr style="width: 1250px" color="#EFEFEF">
</div>
<div class="gou">
<table class="dibu_3">
<tr align="left">
<th><font color="#666666" size="3px">购物指南</font></th>
<th><font color="#666666" size="3px">天猫保障</font></th>
<th><font color="#666666" size="3px">支付方式</font></th>
<th><font color="#666666" size="3px">商家服务</font></th>
<th><font color="#666666" size="3px">手机天猫</font></th>
</tr>
<tr>
<td>免费注册</td>
<td>发票保障</td>
<td>快捷支付</td>
<td>天猫规则</td>
<td rowspan="5"><img class="ma" src="image/二维码.png" alt="二维码"></td>
</tr>
<tr>
<td>开通支付宝</td>
<td>售后规则</td>
<td>信用卡</td>
<td>商家入驻</td>
</tr>
<tr>
<td>支付宝充值</td>
<td>物流时效保障</td>
<td>余额宝</td>
<td>商家中心</td>
</tr>
<tr>
<td></td>
<td></td>
<td>蚂蚁花呗</td>
<td>天猫必修课</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>喵言喵语</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>运营服务</td>
</tr>
</table>
<div class="mao">
<img width="65px" src="image/猫.png">
</div>
</div>
</div>
<div class="hei">
<div class="hei_1">
<table class="dibu_4">
<tr align="left">
<td><font color="#ffffff">关于天猫</font></td>
<td><font color="#ffffff">商家服务大厅</font></td>
<td><font color="#ffffff">开放平台</font></td>
<td><font color="#ffffff">诚聘英才</font></td>
<td><font color="#ffffff">联系我们</font></td>
<td><font color="#ffffff">网站合作</font></td>
<td><font color="#ffffff">法律声明</font></td>
<td><font color="#ffffff">隐私权政策</font></td>
<td><font color="#ffffff">知识产权</font></td>
<td><font color="#ffffff">廉政举报</font></td>
<td><font color="#ffffff">不当竞争举报</font></td>
</tr>
</table>
<div class="wen_001">
<a>阿里巴巴集团</a>
<p>|</p>
<a>淘宝网</a>
<p>|</p>
<a>天猫</a>
<p>|</p>
<a>聚划算</a>
<p>|</p>
<a>全球速卖通</a>
<p>|</p>
<a>阿里巴巴国际交易市场</a>
<p>|</p>
<a>1688</a>
<p>|</p>
<a>阿里妈妈</a>
<p>|</p>
<a>飞猪</a>
<p>|</p>
<a>阿里云计算</a>
<p>|</p>
<a>AliOS</a>
<p>|</p>
<a>阿里通信</a>
<p>|</p>
<a>万网</a>
<p>|</p>
<a>高德</a>
<p>|</p>
<a>UC</a>
<p>|</p>
<a>友盟</a>
<p>|</p>
<a>虾米</a>
<p>|</p>
<a>钉钉</a>
<p>|</p>
<a>支付宝</a>
<p>|</p>
<a>阿里安全</a>
</div>
<div class="wen_002">
<a>增值电信业务经营许可证：浙B2-20110446</a>
<p>市场名称登记证：工商网市字3301004119号</p>
<p>出版物网络交易平台服务经营备案证： 新出发浙备字第2019002号</p>
</div>
<div class="wen_003">
<p>互联网违法和不良信息举报电话：0571-81683755 jubao.tb@service.taobao.com</p>
<a>中国互联网举报中心</a>
<a>中国扫黄打非网</a>
<a>全国文化和旅游市场网上举报投诉处理系统</a>
<a>全国12315平台</a>
</div>
<div class="wen_004">
<a>浙江省互联网违法和不良信息举报中心</a>
<div class="wen_005"><a>全网举报</a></div>
<p>互联网药品信息服务资质证书编号：</p>
<a>浙-（经营性）-2017-0005</a>
<div><a><img class="hui" src="image/徽章.png" alt="徽章">浙公网安备 33010002000120号</a></div>
</div>
<div class="wen_006">
<p>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</p>
<p class="wen_007">网络文化经营许可证：浙网文 [2021]1668-073号</p>
<img class="yuan" src="image/圆徽章.gif">
</div>
<div class="wen_008">
<p>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002</p>
<a>12318举报</a>
<a>浙B2-20110446-1</a>
</div>
<div class="wen_009">
<p>©2003-现在 TMALL.COM 版权所有</p>
</div>
<div class="tu_001">
<img src="image/底部/最下.png" alt="图片">
<img src="image/底部/最下%202.png" alt="图片">
<img src="image/底部/最下%203.png" alt="图片">
<img src="image/底部/最下%204.png" alt="图片">
</div>
<div class="tu_002">
<img src="image/底部/最下%205副本.png">
</div>
<div class="tu_003">
<img src="image/底部/最下副本.PNG">
</div>
</div>
</div>
</body>
</html>
css部分
*{overflow-x: hidden}
body{margin:0;
background-color: #f5dddd}
a{text-decoration: none;
line-height: 30px;
padding: 0 8px;
font-size: 14px;
color: #a1a1a1;
float: left;}
#dao{background-color: #eeeeee;width: 1920px;margin: 0;}
#div2{margin-left: 240px;width: auto;height: 25px;}
#sou{width: 100%;
margin-left: 240px;margin-top: 30px;
float: left;}
#a{border: 1px solid red;
width: 540px;height: 40px;
float: right;
margin-right: 800px;
background-color: #ffffff;
border-radius: 300px;
color: #bdbdbd;
padding-left: 20px;
outline:none;}
#b{border: 1px solid red;
width: 100px;height: 44px;
float: right;
background-color: red;
border-radius: 300px;
margin-right: -600px;
text-align: center;
font-size: 18px}
#zhu{width: 1250px;
height: auto;
border-radius: 20px;
background-color: #ffffff;
float: left;
margin-top: 20px;
margin-left: 150px;
margin-right: auto;
}
#bq{margin-top: 10px;}
#t{margin-left: 280px}
.tu{margin-top: 4px}
a:hover{color: red;
text-decoration:underline red;}
.a1:hover{color: red;
text-decoration:underline blue;}
.ul_01{line-height: 20px}
li{height: 35px}
li a:hover{color: red;
text-decoration:none;}
.p2{display: inline;
margin-top: 5px;
margin-left: 20px;
font-size: 18px;font-family: 宋体;
font-weight:bold;
color: red}
p{display: inline;
float: left;
margin-top: 3px}
.lie{float: left;
margin-left: -72px;
color: #979797;}
/*主页轮播图*/
.banner{background-color: #7fff80;
width: 580px;height: 300px;
float: left;
border-radius: 20px;
margin-left: 80px;
margin-right: 0;}
/*清除边距*/
div,ul,li{
margin: 0;
padding: 0;
}
/*首先准备一个放图片的容器*/
.container{
width: 580px;
height: 300px;
position: relative;
top: 0;
left: 0;
/*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; /*焦点激活时的样式*/
}
.ban2 {
width: 580px;
height: 220px;
background-color: #7fff80;
border-radius: 20px;
float: left;
margin-left: 80px;
margin-top: 20px;
}
.container_01{
width: 580px;
height: 220px;
position: relative;
top: 0;
left: 0;}
/*border: 1px solid #ccc;*/
/*图片样式*/
.container_01 img{
position: absolute; /*把所有图片放在同一个位置*/
width: 100%;
transition-duration: 0.5s; /*设置过渡时间*/
opacity: 0; /*把所有图片变透明*/
}
/*图片显示开关*/
.container_01 img.on_01{
opacity: 1; /*用于显示图片*/
}
/*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
.left_01, .right_02{
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_01{
left: 0;
}
.right_02{
right: 0;
}
.container_01:hover .left_01, .container_01:hover .right_02{
display: block; /*鼠标悬停才容器范围内时显示按钮*/
}
.left_01:hover, .right_02:hover{
color: #fff;
}
/*焦点*/
.container_01 ul{
position: absolute;
bottom: 0;
max-width: 500px;
padding: 5px 200px;
}
.container_01 ul li{
list-style: none;
float: left;
background-color: #ccc;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
.container_01 ul li.active_01{
background-color: #282923; /*焦点激活时的样式*/
}
.left_01, .right_02{
position: absolute;
top: 30%;
width: 40px;
height: 100px;
line-height: 100px;
background-color: #cccccc;
opacity: 0.5;
text-align: center;
font-size: 40px;
color: #ff0000;
display: none; /*先隐藏按钮*/
cursor: pointer; /*设置鼠标悬停时的样式*/
}
/*主页右侧公告栏*/
.gong{float: left;
margin-top: -300px;
margin-left: 20px;
border-radius: 20px;
width: 340px;height: 540px;
background-color: #f1f1f1;
overflow-y: hidden;
}
.img_01{float: left;
margin-top: 44px;
margin-left: 125px;}
.p_01{float: left;
font-size: 12px;
margin-top: 125px;
margin-left: -60px}
.a_01:hover{border-bottom: 1px blue solid}
.wai{float: left;
width: 320px;height: 125px;
margin-top: 50px;
margin-left: 10px;
overflow-y: hidden}
.gao{width: 320px;height: 125px;
border-radius: 10px}
.zi{float: left;
overflow-y: hidden;
margin-top: 15px;
width: 340px;height: 140px}
.zi_001{font-size: 18px;
font-weight:700;
margin-top: 22px;
font-family: 宋体;
float: left;
margin-left: 10px}
.zi_002{float: left;
font-size: 17px;
margin-top: 19px;
margin-left: 8px;}
.zi_003{float: left;
overflow-y:hidden;
width: auto;height: auto;
margin-top: 60px;
margin-left: -192px}
.bia{background-color: #ffdddd;
color: red;
outline:none;
border: 0;
font-size: 13px}
.zi_004{float: left;
font-size: 12px;
margin-top: 3px;
margin-left: 8px;}
.zi_005{float: left;
margin-left: -228px;
margin-top: 26px;
overflow-y:hidden;
width: auto;height: auto;}
.zi_006{float: left;
font-size: 12px;
margin-top: -4px;
margin-left: 56px;}
.zi_007{float: left;
margin-left: -213px;
margin-top: 19px;
overflow-y:hidden;
width: auto;height: auto;}
.zi_008{float: left;
font-size: 12px;
margin-top: -4px;
margin-left: 57px;
}
.p_02{color: #979797;}
/*四个图标*/
.shou{width: 340px;height: 60px;
float: left;
margin-top: 25px}
.xing{float: left;
margin-left: 30px;
width: 25px;}
.mai{float: left;
margin-left: 60px;
margin-top: 0px;
width: 25px;}
.dian{float: left;
margin-left: 60px;
margin-top: 0px;
width: 25px;}
.zhong{float: right;
margin-right: 30px;
margin-top: 0px;
width: 25px;}
/*图标下方文字*/
.zi_01{float: left;
margin-top: 5px;
font-size: 10px;}
.zi_02{float: left;
margin-left: 13px}
.zi_02:hover{border-bottom: 1px black solid}
.zi_03{float: left;
margin-left: 25px}
.zi_03:hover{border-bottom: 1px black solid}
.zi_04{float: left;
margin-left: 25px}
.zi_04:hover{border-bottom: 1px black solid}
.zi_05{float: left;
margin-left: 32px}
.zi_05:hover{border-bottom: 1px black solid}
/*商品分类*/
.chao{width: 1250px;
float: left;
margin-left: 20px;
margin-top: 40px}
.lv{background-color: #7fff80;
color: #ffffff;
outline:none;
border-radius: 15px;
border: 1px #7fff80 solid;
font-size: 20px}
.di{float: left;
width: 1250px;}
.tian1{float: left;
width: 225px;
margin-top: 23px;
margin-left: 20px;
border-radius: 20px}
.di_01{float: left;
margin-left: 20px;
margin-top: 10px}
.wen_1{float: left;
margin-left: 43px}
.wen_2{float: left;
margin-left: 33px}
.wen_3{float: left;
margin-left: 50px}
.wen_4{float: left;
margin-left: 40px}
.jia{float: left;
margin-top: -13px;
margin-left: 20px;
color: red}
.wen_5{float: left;
margin-left: 195px;}
.wen_6{float: left;
margin-left: 198px;}
.wen_7{float: left;
margin-left: 198px;}
.guo{width: 1250px;
float: left;
margin-top: 10px;
margin-left: 20px;}
.lv_01{background-color: #9300ff;
color: #ffffff;
outline:none;
border-radius: 15px;
border: 1px #9300ff solid;
font-size: 20px}
.di_02{float: left;
margin-left: 230px;
margin-top: -50px}
.wen_8{float: left;
margin-left: 170px}
.jia_1{float: left;
margin-top: -23px;
margin-left: 273px;
color: red}
.wen_9{float: left;
margin-left: 105px}
.wen_01{float: left;
margin-left: 218px}
.wen_02{float: left;
margin-left: 218px}
.lv_02{
color: #000000;
outline:none;
font-weight: 600;
font-family: 宋体;
font-size: 20px}
.lv_03{background-color: red;
color: #ffffff;
outline:none;
border-radius: 15px;
border: 1px red solid;
font-size: 13px}
.wen_03{float: left;
width: 208px;
text-overflow: ellipsis;/*当对象内文本溢出时省略标记（...）*/
overflow: hidden;/*隐藏溢出部分*/
white-space: nowrap;/*强制一行内显示多少文字不换行*/}
.wen_04{float: left;
margin-left: 45px;
width: 208px;
text-overflow: ellipsis;/*当对象内文本溢出时省略标记（...）*/
overflow: hidden;/*隐藏溢出部分*/
white-space: nowrap;/*强制一行内显示多少文字不换行*/}
.wen_05{float: left;
margin-left: 39px;
width: 208px;
text-overflow: ellipsis;/*当对象内文本溢出时省略标记（...）*/
overflow: hidden;/*隐藏溢出部分*/
white-space: nowrap;/*强制一行内显示多少文字不换行*/}
.wen_03:hover{text-decoration: underline blue 1px}
.wen_04:hover{text-decoration: underline blue 1px}
.wen_05:hover{text-decoration: underline blue 1px}
.wen_06{float: left;
margin-left: 204px;}
.wen_07{float: left;
margin-left: 198px;}
.wen_08{float: left;
margin-left: 200px;}
.wen_09{float: left;
margin-left: 198px;}
.dibu{float: left;
margin-top: 100px;
border-top:1px solid #666666;
background-color: #ffffff;
overflow-y: hidden;
width: 100%;height: 280px}
.dibu_1{float: left;
margin-left: 170px;
height: 80px}
.dibu_2{float: left;
margin-left: 100px;
height: 80px;}
.fen{float: left;
margin-left: 150px}
.gou{float: left;
margin-left: 170px}
.dibu_3{font-size: 12px;
width: 1480px;
color: #b6b6b6}
.dibu_3 td:hover{text-decoration: underline}
.ma{width: 105px}
.mao{float: left;
margin-top: -5px}
.hei{float: left;
border-top:2px solid red;
width: 100%;height: 500px;
background-color: #0c0c0c;}
.hei_1{float: left;
margin-left: 170px}
.dibu_4{font-size: 12px;
width: 750px;
color: #b6b6b6}
.dibu_4 td:hover{text-decoration: underline}
.wen_001 a{color: #ffffff;
float: left;
font-size: 12px;
margin-left: -5px}
.wen_001 a:hover{text-decoration: underline #ffffff}
.wen_001 p{color: #ffffff;
float: left;
margin-left: -3px;
margin-top: 7px;
overflow: hidden;
height: 14px}
.wen_002 a{color: #b6b6b6;
float: left;
margin-top: -9px;
font-size: 12px;
margin-left: -5px}
.wen_002 p{color: #b6b6b6;
float: left;
margin-top: -2px;
font-size: 12px;
margin-left: 65px}
.wen_002 a:hover{text-decoration: underline #979797}
.wen_003 p{color: #b6b6b6;
float: left;
margin-top: -2px;
font-size: 12px;
margin-left: 3px}
.wen_003 a{color: #b6b6b6;
float: left;
margin-top: -9px;
font-size: 12px;
margin-left: 65px}
.wen_003 a:hover{text-decoration: underline #979797}
.wen_004 p{color: #b6b6b6;
float: left;
margin-top: -2px;
font-size: 12px;
margin-left: 65px}
.wen_004 a{color: #b6b6b6;
float: left;
margin-top: -9px;
font-size: 12px;
margin-left: -4px}
.wen_004 a:hover{text-decoration: underline #979797}
.wen_005{color: #b6b6b6;
float: left;
margin-left: 65px}
.hui{float: left;
width: 15px;
margin-left: 65px;
margin-top: 8px}
.wen_006{height: auto;
float: left;
margin-top: 5px;
margin-left: 4px;
font-size: 12px;
color: #b6b6b6;}
.wen_007{float: left;
margin-top: 3px;
margin-left: 65px;}
.yuan{float: right;
width: 25px;}
.wen_008{float: left;
margin-top: 30px;
margin-left: -771px;
font-size: 12px;
color: #b6b6b6;}
.wen_008 a{color: #b6b6b6;
float: left;
margin-left: 40px;
margin-top: -3px;
font-size: 12px;}
.wen_008 a:hover{text-decoration: underline #979797}
.wen_009{font-size: 8px;
margin-top: 55px;
margin-left: -772px;
float: left;
color: #6b6b6b;}
.tu_001{float: left;
margin-top: 50px;}
.tu_001 img{float: left;
margin-right: 40px;}
.tu_002{float: left;
margin-left: -980px;
margin-top: 110px;}
.tu_003{float: left;
margin-top: 50px;}
.tu_003 img{float: left;
margin-left: 500px;
margin-right: 40px;}
天猫会员html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天猫积分中心</title>
<link rel="icon" href="image/网站图标.png" type="image/png">
<link rel="stylesheet" href="天猫会员.css" type="text/css">
</head>
<body>
<!--导航栏部分-->
<div id="dao">
<div id="div2">
<a href="天猫.html"><img src="image/主页.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="image/购物车.png" width="10px" 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 id="sou">
<img src="image/天猫会员logo.png" height="40px" alt="天猫">
<input id="a" type="text" placeholder="搜索 天猫 商品/品牌/店铺">
<input id="b" type="submit" value="搜索">
</div>
<div class="xian"></div>
<div class="vip">
<p>88VIP</p>
<a>天猫会员</a>
</div>
<div class="hui_001">
<img src="image/天猫会员.png" alt="">
</div>
<div class="di">
<img src="image/底部/底部 (3).png" alt="图片">
<img src="image/底部/底部 (2).png" alt="图片">
<img src="image/底部/底部 (4).png" alt="图片">
<img src="image/底部/底部 (1).png" alt="图片">
</div>
<div class="fen">
<hr style="width: 1250px" color="#EFEFEF">
</div>
<div class="gou">
<table class="dibu_3">
<tr align="left">
<th><font color="#666666" size="3px">购物指南</font></th>
<th><font color="#666666" size="3px">天猫保障</font></th>
<th><font color="#666666" size="3px">支付方式</font></th>
<th><font color="#666666" size="3px">商家服务</font></th>
<th><font color="#666666" size="3px">手机天猫</font></th>
</tr>
<tr>
<td>免费注册</td>
<td>发票保障</td>
<td>快捷支付</td>
<td>天猫规则</td>
<td rowspan="5"><img class="ma" src="image/二维码.png" alt="二维码"></td>
</tr>
<tr>
<td>开通支付宝</td>
<td>售后规则</td>
<td>信用卡</td>
<td>商家入驻</td>
</tr>
<tr>
<td>支付宝充值</td>
<td>物流时效保障</td>
<td>余额宝</td>
<td>商家中心</td>
</tr>
<tr>
<td></td>
<td></td>
<td>蚂蚁花呗</td>
<td>天猫必修课</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>喵言喵语</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>运营服务</td>
</tr>
</table>
<div class="mao">
<img width="65px" src="image/猫.png" alt="图片">
</div>
</div>
<div class="hei">
<div class="hei_1">
<table class="dibu_4">
<tr align="left">
<td><font color="#ffffff">关于天猫</font></td>
<td><font color="#ffffff">商家服务大厅</font></td>
<td><font color="#ffffff">开放平台</font></td>
<td><font color="#ffffff">诚聘英才</font></td>
<td><font color="#ffffff">联系我们</font></td>
<td><font color="#ffffff">网站合作</font></td>
<td><font color="#ffffff">法律声明</font></td>
<td><font color="#ffffff">隐私权政策</font></td>
<td><font color="#ffffff">知识产权</font></td>
<td><font color="#ffffff">廉政举报</font></td>
<td><font color="#ffffff">不当竞争举报</font></td>
</tr>
</table>
</table>
<div class="wen_001">
<a>阿里巴巴集团</a>
<p>|</p>
<a>淘宝网</a>
<p>|</p>
<a>天猫</a>
<p>|</p>
<a>聚划算</a>
<p>|</p>
<a>全球速卖通</a>
<p>|</p>
<a>阿里巴巴国际交易市场</a>
<p>|</p>
<a>1688</a>
<p>|</p>
<a>阿里妈妈</a>
<p>|</p>
<a>飞猪</a>
<p>|</p>
<a>阿里云计算</a>
<p>|</p>
<a>AliOS</a>
<p>|</p>
<a>阿里通信</a>
<p>|</p>
<a>万网</a>
<p>|</p>
<a>高德</a>
<p>|</p>
<a>UC</a>
<p>|</p>
<a>友盟</a>
<p>|</p>
<a>虾米</a>
<p>|</p>
<a>钉钉</a>
<p>|</p>
<a>支付宝</a>
<p>|</p>
<a>阿里安全</a>
</div>
<div class="wen_002">
<a>增值电信业务经营许可证：浙B2-20110446</a>
<p>市场名称登记证：工商网市字3301004119号</p>
<p>出版物网络交易平台服务经营备案证： 新出发浙备字第2019002号</p>
</div>
<div class="wen_003">
<p>互联网违法和不良信息举报电话：0571-81683755 jubao.tb@service.taobao.com</p>
<a>中国互联网举报中心</a>
<a>中国扫黄打非网</a>
<a>全国文化和旅游市场网上举报投诉处理系统</a>
<a>全国12315平台</a>
</div>
<div class="wen_004">
<a>浙江省互联网违法和不良信息举报中心</a>
<div class="wen_005"><a>全网举报</a></div>
<p>互联网药品信息服务资质证书编号：</p>
<a>浙-（经营性）-2017-0005</a>
<div><a><img class="hui" src="image/徽章.png" alt="徽章">浙公网安备 33010002000120号</a></div>
</div>
<div class="wen_006">
<p>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</p>
<p class="wen_007">网络文化经营许可证：浙网文 [2021]1668-073号</p>
<img class="yuan" src="image/圆徽章.gif" alt="徽章">
</div>
<div class="wen_008">
<p>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002</p>
<a>12318举报</a>
<a>浙B2-20110446-1</a>
</div>
<div class="wen_009">
<p>©2003-现在 TMALL.COM 版权所有</p>
</div>
<div class="tu_001">
<img src="image/底部/最下.png" alt="图片">
<img src="image/底部/最下%202.png" alt="图片">
<img src="image/底部/最下%203.png" alt="图片">
<img src="image/底部/最下%204.png" alt="图片">
</div>
<div class="tu_002">
<img src="image/底部/最下%205.png" alt="图片">
</div>
<div class="tu_003">
<img src="image/底部/最下副本.PNG" alt="图片">
</div>
</div>
</div>
</body>
</html>
css部分
*{overflow-x: hidden}
body{margin: 0}
#dao{float: left;
background-color: #dcdcdc;
width: 100%;height: 25px;
overflow: hidden}
#div2{float: left;
margin-left: 245px}
#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;}
#sou{width: 100%;
margin-left: 240px;
float: left;}
#a{border: 3px solid red;
width: 400px;height: 30px;
float: right;
margin-right: 680px;
background-color: #ffffff;
color: #bdbdbd;
padding-left: 20px;
outline:none;
}
.xian{width: 418px;height: 2px;
box-shadow: 0 10px #a8a8a8;
float: right;
margin-right: 448px;
margin-top: -52px}
#b{border: 3px solid red;
width: 80px;height: 38px;
float: right;
background-color: red;
margin-right: -500px;
text-align: center;
font-size: 18px}
.vip{float: left;
font-weight: 700;
font-family: 微软雅黑;
margin-top: 30px;
margin-left: 250px;}
.vip p{display: inline;
color: #6b0000;
float: left;
margin-top: 0}
.vip a{color: black;
float: left;
margin-left: 40px}
.vip a:hover{color: red}
.hui_001{float: left;
width: 1920px;
background-color: black;}
.hui_001 img{width: 990px;height: 537px;
float: left;
margin-right: 15%;
margin-left: 15%}
.di{float: left;
margin-top: 100px;
margin-left: 0;
border-top:1px solid #666666;
background-color: #ffffff;
overflow-y: hidden;
width: 100%;height: 280px}
.di img{float: left;
margin-left: 130px;
height: 80px;}
.fen{float: left;
margin-left: 130px;
margin-top: -200px}
.gou{float: left;
margin-top: -150px;
margin-left: 170px}
.dibu_3{font-size: 12px;
width: 1480px;
color: #b6b6b6}
.dibu_3 td:hover{text-decoration: underline}
.ma{width: 105px}
.mao{float: left;
margin-top: 0
}
.hei{float: left;
border-top:2px solid red;
width: 100%;height: 500px;
background-color: #0c0c0c;
margin-top: -45px}
.hei_1{float: left;
margin-left: 170px}
.dibu_4{font-size: 12px;
width: 750px;
float: left;
margin-left: -3px;
color: #b6b6b6}
.dibu_4 td:hover{text-decoration: underline}
.wen_001{float: left;}
.wen_001 a{color: #ffffff;
float: left;
font-size: 12px;
margin-left: 0px}
.wen_001 a:hover{text-decoration: underline #ffffff}
.wen_001 p{color: #ffffff;
float: left;
margin-left: 4px;
margin-right: 4px;
margin-top: 0;
overflow: hidden;
height: 14px}
.wen_002{float: left;}
.wen_002 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_002 p{color: #b6b6b6;
float: left;
margin-top: -2px;
font-size: 12px;
margin-left: 65px}
.wen_002 a:hover{text-decoration: underline #979797}
.wen_003{float: left;}
.wen_003 p{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_003 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 65px}
.wen_003 a:hover{text-decoration: underline #979797}
.wen_004{float: left;}
.wen_004 p{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 65px}
.wen_004 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_004 a:hover{text-decoration: underline #979797}
.hui{float: left;
width: 15px;
margin-left: 65px;
margin-top: 0}
.wen_005{color: #b6b6b6;
float: left;
margin-left: 65px}
.wen_006{float: left;
height: auto;
margin-top: 5px;
margin-left: 0;
font-size: 12px;
color: #b6b6b6;}
.wen_006 p{display: inline}
.wen_007{margin-top: 0;
margin-left: 65px;}
.yuan{float: right;
margin-top: 0;
width: 25px;}
.wen_008{float: left;
margin-top: 30px;
margin-left: -775px;
font-size: 12px;
color: #b6b6b6;}
.wen_008 p{display: inline;
float: left}
.wen_008 a{color: #b6b6b6;
float: left;
margin-left: 40px;
margin-top: 12px;
font-size: 12px;}
.wen_008 a:hover{text-decoration: underline #979797}
.wen_009{font-size: 8px;
margin-top: 55px;
margin-left: -775px;
float: left;
color: #6b6b6b;}
.tu_001{float: left;
margin-top: 50px;}
.tu_001 img{float: left;
margin-right: 40px;}
.tu_002{float: left;
margin-left: -980px;
margin-top: 110px;}
.tu_003{float: left;
margin-top: 50px;}
.tu_003 img{float: left;
margin-left: 500px;
margin-right: 40px;}
喵鲜生html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天猫-喵鲜生</title>
<link rel="icon" href="image/网站图标.png" type="image/png">
<link rel="stylesheet" href="喵鲜生.css" type="text/css">
</head>
<body>
<div class="logo">
<a href="天猫.html"><img src="image/喵鲜生logo.png" alt="logo"></a>
</div>
<div class="tu">
<img src="image/banner/喵鲜生.png" alt="banner">
</div>
<div class="deng">
<img class="deng-img2" src="image/半边二维码.png" alt="气泡框">
<img class="deng-img" src="image/登录框.png" alt="气泡框">
<div class="wen">
<p class="mi">密码登录</p>
<p>短信登录</p>
</div>
<div class="wen_01">
<p>请重新登录</p>
</div>
<div class="kao">
<input class="nei_01" type="text" placeholder="账号名/邮箱/手机号">
<input class="nei" type="password" placeholder="请输入密码">
</div>
<div class="jv">
<div><img height="35px" src="image/用户.png" alt="图片"></div>
<div class="jv-img"><img width="37.5px" height="35px" src="image/锁.png" alt="图片"></div>
</div>
<div class="an">
<input type="submit" value="登录">
</div>
<div class="wei">
<img width="16px" src="image/新浪.png" alt="图标">
<a>微博登录</a>
<img class="zhi" width="16px" src="image/支付宝.png" alt="图标">
<a>支付宝登录</a>
</div>
<div class="wang">
<a>忘记密码</a>
<a>忘记账号名</a>
<a>免费注册</a>
</div>
</div>
<div class="hei">
<div class="hei_1">
<table class="dibu_4">
<tr align="left">
<td><font color="#ffffff">关于天猫</font></td>
<td><font color="#ffffff">商家服务大厅</font></td>
<td><font color="#ffffff">开放平台</font></td>
<td><font color="#ffffff">诚聘英才</font></td>
<td><font color="#ffffff">联系我们</font></td>
<td><font color="#ffffff">网站合作</font></td>
<td><font color="#ffffff">法律声明</font></td>
<td><font color="#ffffff">隐私权政策</font></td>
<td><font color="#ffffff">知识产权</font></td>
<td><font color="#ffffff">廉政举报</font></td>
<td><font color="#ffffff">不当竞争举报</font></td>
</tr>
</table>
</table>
<div class="wen_001">
<a>阿里巴巴集团</a>
<p>|</p>
<a>淘宝网</a>
<p>|</p>
<a>天猫</a>
<p>|</p>
<a>聚划算</a>
<p>|</p>
<a>全球速卖通</a>
<p>|</p>
<a>阿里巴巴国际交易市场</a>
<p>|</p>
<a>1688</a>
<p>|</p>
<a>阿里妈妈</a>
<p>|</p>
<a>飞猪</a>
<p>|</p>
<a>阿里云计算</a>
<p>|</p>
<a>AliOS</a>
<p>|</p>
<a>阿里通信</a>
<p>|</p>
<a>万网</a>
<p>|</p>
<a>高德</a>
<p>|</p>
<a>UC</a>
<p>|</p>
<a>友盟</a>
<p>|</p>
<a>虾米</a>
<p>|</p>
<a>钉钉</a>
<p>|</p>
<a>支付宝</a>
<p>|</p>
<a>阿里安全</a>
</div>
<div class="wen_002">
<a>增值电信业务经营许可证：浙B2-20110446</a>
<p>市场名称登记证：工商网市字3301004119号</p>
<p>出版物网络交易平台服务经营备案证： 新出发浙备字第2019002号</p>
</div>
<div class="wen_003">
<p>互联网违法和不良信息举报电话：0571-81683755 jubao.tb@service.taobao.com</p>
<a>中国互联网举报中心</a>
<a>中国扫黄打非网</a>
<a>全国文化和旅游市场网上举报投诉处理系统</a>
<a>全国12315平台</a>
</div>
<div class="wen_004">
<a>浙江省互联网违法和不良信息举报中心</a>
<div class="wen_005"><a>全网举报</a></div>
<p>互联网药品信息服务资质证书编号：</p>
<a>浙-（经营性）-2017-0005</a>
<div><a><img class="hui" src="image/徽章.png" alt="徽章">浙公网安备 33010002000120号</a></div>
</div>
<div class="wen_006">
<p>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</p>
<p class="wen_007">网络文化经营许可证：浙网文 [2021]1668-073号</p>
<img class="yuan" src="image/圆徽章.gif" alt="徽章">
</div>
<div class="wen_008">
<p>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002</p>
<a>12318举报</a>
<a>浙B2-20110446-1</a>
</div>
<div class="wen_009">
<p>©2003-现在 TMALL.COM 版权所有</p>
</div>
<div class="tu_001">
<img src="image/底部/最下.png" alt="图片">
<img src="image/底部/最下%202.png" alt="图片">
<img src="image/底部/最下%203.png" alt="图片">
<img src="image/底部/最下%204.png" alt="图片">
<img src="image/底部/最下%205.png">
</div>
</div>
</div>
</body>
</html>
css部分
body{margin: 0;
overflow-x: hidden}
.logo{float: left;
margin-left: 15%;
margin-top: 1%}
.logo img{width: 186px;height: 26px}
.tu{float: left;
width: 1570px;height: 600px;
margin-top: 3%;}
.deng{width: 350px;height: 360px;
float: right;
margin-right: 10%;
margin-top: -32%;
background-color: #ffffff;
opacity: 0.9;/*设置图像不透明度*/}
.deng-img{float: right;
margin-top: 1%;
width: 106px;}
.deng-img2{float: right;
margin-top: 1%;
margin-right: 1%;
width: 52px;}
.wen p{display: inline;
float: left;
font-weight: 700;
margin-top: 10%;
margin-left: 8%}
.mi{border-bottom: black 2px solid;
padding-bottom: 1%}
.wen_01{float: left;
margin-top: 15%;
margin-left: -44.5%}
.wen_01 p{font-size: 12px;
color: darkorange}
.kao{float: left;
width: 240px;height: 35px;
margin-left: -50px;
margin-top: 34px;}
.jv{float: left;
margin-top: 7.5%;
margin-left: -72%}
.jv img{float: left;
margin-top: 20%;
margin-left: 0}
.jv-img{float: left;
margin-top: 29%;
margin-left: 0}
.nei{float: left;
margin-left: -12px;
width: 250px;height: 28px;
margin-top: 8%;
padding-left: 37px;
outline: none}
.nei_01{float: left;
margin-left: -12px;
padding-left: 37px;
width: 250px;height: 28px;
outline: none}
.an{float: left;
margin-left: 30px;
margin-top: 70px;
width: 293px;height: 28px;}
.an input{width: 100%;height: 35px;
background-color: #ff2d00;
border: 1px #ff2d00 solid;
border-radius: 3px}
.wei{float: left;
margin-left: 30px;
margin-top: 30px}
.wei img{float: left;}
.wei a{font-size: 12px;
float: left;}
.zhi{float: left;
margin-left: 10px}
.wei a:hover{color: red;}
.wang{float: left;
margin-top: 8%;
margin-left: 156px;}
.wang a{font-size: 12px;}
.wang a:hover{color: red}
.hei{float: left;
border-top:2px solid #000000;
width: 100%;height: auto;
background-color: #ffffff;
margin-top: -45px}
.hei_1{float: left;
margin-left: 170px}
.dibu_4{font-size: 12px;
width: 750px;
float: left;
margin-left: -3px;
color: #b6b6b6}
.dibu_4 td:hover{text-decoration: underline}
.wen_001{float: left;}
.wen_001 a{color: #969696;
float: left;
font-size: 12px;
margin-left: 0px}
.wen_001 a:hover{text-decoration: underline #969696
}
.wen_001 p{color: #969696;
float: left;
margin-left: 1px;
margin-right: 1px;
margin-top: 0;
overflow: hidden;
height: 14px}
.wen_002{float: left;}
.wen_002 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_002 p{color: #b6b6b6;
float: left;
margin-top: -2px;
font-size: 12px;
margin-left: 20px}
.wen_002 a:hover{text-decoration: underline #979797}
.wen_003{float: left;}
.wen_003 p{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_003 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 20px}
.wen_003 a:hover{text-decoration: underline #979797}
.wen_004{float: left;}
.wen_004 p{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 20px}
.wen_004 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_004 a:hover{text-decoration: underline #979797}
.hui{float: left;
width: 15px;
margin-left: 0;
margin-top: 0}
.wen_005{color: #b6b6b6;
float: left;
margin-left: 20px}
.wen_006{float: left;
height: auto;
margin-top: 5px;
margin-left: 0;
font-size: 12px;
color: #b6b6b6;}
.wen_006 p{display: inline}
.wen_007{margin-top: 0;
margin-left: 65px;}
.yuan{float: right;
margin-top: 0;
width: 25px;}
.wen_008{float: left;
margin-top: 30px;
margin-left: -775px;
font-size: 12px;
color: #b6b6b6;}
.wen_008 p{display: inline;
float: left}
.wen_008 a{color: #b6b6b6;
float: left;
margin-left: 40px;
margin-top: 12px;
font-size: 12px;}
.wen_008 a:hover{text-decoration: underline #979797}
.wen_009{font-size: 8px;
margin-top: 55px;
margin-left: -775px;
float: left;
color: #6b6b6b;}
.tu_001{float: left;
margin-top: 50px;}
.tu_001 img{float: left;
margin-right: 40px;}
医药馆html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天猫-医药堂</title>
<link rel="icon" href="image/网站图标.png" type="image/png">
<link rel="stylesheet" href="医药馆.css" type="text/css">
</head>
<body>
<!--导航栏部分-->
<div id="dao">
<div id="div2">
<a href="天猫.html"><img src="image/主页.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="image/购物车.png" width="10px" 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 id="sou">
<img src="image/天猫会员logo.png" height="40px" alt="天猫">
<input id="a" type="text" placeholder="搜索 天猫 商品/品牌/店铺">
<input id="b" type="submit" value="搜索">
</div>
<div class="xian"></div>
<div class="hui_001">
<img src="image/banner/医药馆.png" alt="">
</div>
<div class="di">
<img src="image/底部/底部 (3).png" alt="图片">
<img src="image/底部/底部 (2).png" alt="图片">
<img src="image/底部/底部 (4).png" alt="图片">
<img src="image/底部/底部 (1).png" alt="图片">
</div>
<div class="fen">
<hr style="width: 1250px" color="#EFEFEF">
</div>
<div class="gou">
<table class="dibu_3">
<tr align="left">
<th><font color="#666666" size="3px">购物指南</font></th>
<th><font color="#666666" size="3px">天猫保障</font></th>
<th><font color="#666666" size="3px">支付方式</font></th>
<th><font color="#666666" size="3px">商家服务</font></th>
<th><font color="#666666" size="3px">手机天猫</font></th>
</tr>
<tr>
<td>免费注册</td>
<td>发票保障</td>
<td>快捷支付</td>
<td>天猫规则</td>
<td rowspan="5"><img class="ma" src="image/二维码.png" alt="二维码"></td>
</tr>
<tr>
<td>开通支付宝</td>
<td>售后规则</td>
<td>信用卡</td>
<td>商家入驻</td>
</tr>
<tr>
<td>支付宝充值</td>
<td>物流时效保障</td>
<td>余额宝</td>
<td>商家中心</td>
</tr>
<tr>
<td></td>
<td></td>
<td>蚂蚁花呗</td>
<td>天猫必修课</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>喵言喵语</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>运营服务</td>
</tr>
</table>
<div class="mao">
<img width="65px" src="image/猫.png" alt="图片">
</div>
</div>
<div class="hei">
<div class="hei_1">
<table class="dibu_4">
<tr align="left">
<td><font color="#ffffff">关于天猫</font></td>
<td><font color="#ffffff">商家服务大厅</font></td>
<td><font color="#ffffff">开放平台</font></td>
<td><font color="#ffffff">诚聘英才</font></td>
<td><font color="#ffffff">联系我们</font></td>
<td><font color="#ffffff">网站合作</font></td>
<td><font color="#ffffff">法律声明</font></td>
<td><font color="#ffffff">隐私权政策</font></td>
<td><font color="#ffffff">知识产权</font></td>
<td><font color="#ffffff">廉政举报</font></td>
<td><font color="#ffffff">不当竞争举报</font></td>
</tr>
</table>
</table>
<div class="wen_001">
<a>阿里巴巴集团</a>
<p>|</p>
<a>淘宝网</a>
<p>|</p>
<a>天猫</a>
<p>|</p>
<a>聚划算</a>
<p>|</p>
<a>全球速卖通</a>
<p>|</p>
<a>阿里巴巴国际交易市场</a>
<p>|</p>
<a>1688</a>
<p>|</p>
<a>阿里妈妈</a>
<p>|</p>
<a>飞猪</a>
<p>|</p>
<a>阿里云计算</a>
<p>|</p>
<a>AliOS</a>
<p>|</p>
<a>阿里通信</a>
<p>|</p>
<a>万网</a>
<p>|</p>
<a>高德</a>
<p>|</p>
<a>UC</a>
<p>|</p>
<a>友盟</a>
<p>|</p>
<a>虾米</a>
<p>|</p>
<a>钉钉</a>
<p>|</p>
<a>支付宝</a>
<p>|</p>
<a>阿里安全</a>
</div>
<div class="wen_002">
<a>增值电信业务经营许可证：浙B2-20110446</a>
<p>市场名称登记证：工商网市字3301004119号</p>
<p>出版物网络交易平台服务经营备案证： 新出发浙备字第2019002号</p>
</div>
<div class="wen_003">
<p>互联网违法和不良信息举报电话：0571-81683755 jubao.tb@service.taobao.com</p>
<a>中国互联网举报中心</a>
<a>中国扫黄打非网</a>
<a>全国文化和旅游市场网上举报投诉处理系统</a>
<a>全国12315平台</a>
</div>
<div class="wen_004">
<a>浙江省互联网违法和不良信息举报中心</a>
<div class="wen_005"><a>全网举报</a></div>
<p>互联网药品信息服务资质证书编号：</p>
<a>浙-（经营性）-2017-0005</a>
<div><a><img class="hui" src="image/徽章.png" alt="徽章">浙公网安备 33010002000120号</a></div>
</div>
<div class="wen_006">
<p>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</p>
<p class="wen_007">网络文化经营许可证：浙网文 [2021]1668-073号</p>
<img class="yuan" src="image/圆徽章.gif" alt="徽章">
</div>
<div class="wen_008">
<p>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002</p>
<a>12318举报</a>
<a>浙B2-20110446-1</a>
</div>
<div class="wen_009">
<p>©2003-现在 TMALL.COM 版权所有</p>
</div>
<div class="tu_001">
<img src="image/底部/最下.png" alt="图片">
<img src="image/底部/最下%202.png" alt="图片">
<img src="image/底部/最下%203.png" alt="图片">
<img src="image/底部/最下%204.png" alt="图片">
</div>
<div class="tu_002">
<img src="image/底部/最下%205.png">
</div>
<div class="tu_003">
<img src="image/底部/最下副本.PNG">
</div>
</div>
</div>
</body>
</html>
css部分
*{overflow-x: hidden}
body{margin: 0}
#dao{float: left;
background-color: #dcdcdc;
width: 100%;height: 25px;
overflow: hidden}
#div2{float: left;
margin-left: 245px}
#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;}
#sou{width: 100%;
margin-left: 240px;
float: left;}
#a{border: 3px solid red;
width: 400px;height: 30px;
float: right;
margin-right: 680px;
background-color: #ffffff;
color: #bdbdbd;
padding-left: 20px;
outline:none;
}
.xian{width: 418px;height: 2px;
box-shadow: 0 10px #a8a8a8;
float: right;
margin-right: 448px;
margin-top: -52px}
#b{border: 3px solid red;
width: 80px;height: 38px;
float: right;
background-color: red;
margin-right: -500px;
text-align: center;
font-size: 18px}
.hui_001{float: left;
width: 100%;height: 500px;
background-color: #ffcc00;}
.hui_001 img{width: 100%;}
.di{float: left;
margin-top: 100px;
margin-left: 0;
border-top:1px solid #666666;
background-color: #ffffff;
overflow-y: hidden;
width: 100%;height: 280px}
.di img{float: left;
margin-left: 130px;
height: 80px;}
.fen{float: left;
margin-left: 130px;
margin-top: -200px}
.gou{float: left;
margin-top: -150px;
margin-left: 170px}
.dibu_3{font-size: 12px;
width: 1480px;
color: #b6b6b6}
.dibu_3 td:hover{text-decoration: underline}
.ma{width: 105px}
.mao{float: left;
margin-top: 0
}
.hei{float: left;
border-top:2px solid red;
width: 100%;height: 500px;
background-color: #0c0c0c;
margin-top: -45px}
.hei_1{float: left;
margin-left: 170px}
.dibu_4{font-size: 12px;
width: 750px;
float: left;
margin-left: -3px;
color: #b6b6b6}
.dibu_4 td:hover{text-decoration: underline}
.wen_001{float: left;}
.wen_001 a{color: #ffffff;
float: left;
font-size: 12px;
margin-left: 0px}
.wen_001 a:hover{text-decoration: underline #ffffff}
.wen_001 p{color: #ffffff;
float: left;
margin-left: 4px;
margin-right: 4px;
margin-top: 0;
overflow: hidden;
height: 14px}
.wen_002{float: left;}
.wen_002 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_002 p{color: #b6b6b6;
float: left;
margin-top: -2px;
font-size: 12px;
margin-left: 65px}
.wen_002 a:hover{text-decoration: underline #979797}
.wen_003{float: left;}
.wen_003 p{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_003 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 65px}
.wen_003 a:hover{text-decoration: underline #979797}
.wen_004{float: left;}
.wen_004 p{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 65px}
.wen_004 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_004 a:hover{text-decoration: underline #979797}
.hui{float: left;
width: 15px;
margin-left: 65px;
margin-top: 0}
.wen_005{color: #b6b6b6;
float: left;
margin-left: 65px}
.wen_006{float: left;
height: auto;
margin-top: 5px;
margin-left: 0;
font-size: 12px;
color: #b6b6b6;}
.wen_006 p{display: inline}
.wen_007{margin-top: 0;
margin-left: 65px;}
.yuan{float: right;
margin-top: 0;
width: 25px;}
.wen_008{float: left;
margin-top: 30px;
margin-left: -775px;
font-size: 12px;
color: #b6b6b6;}
.wen_008 p{display: inline;
float: left}
.wen_008 a{color: #b6b6b6;
float: left;
margin-left: 40px;
margin-top: 12px;
font-size: 12px;}
.wen_008 a:hover{text-decoration: underline #979797}
.wen_009{font-size: 8px;
margin-top: 55px;
margin-left: -775px;
float: left;
color: #6b6b6b;}
.tu_001{float: left;
margin-top: 50px;}
.tu_001 img{float: left;
margin-right: 40px;}
.tu_002{float: left;
margin-left: -980px;
margin-top: 110px;}
.tu_003{float: left;
margin-top: 50px;}
.tu_003 img{float: left;
margin-left: 500px;
margin-right: 40px;}
天猫内容html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天猫内容</title>
<link rel="icon" href="image/网站图标.png" type="image/png">
<link rel="stylesheet" href="天猫内容.css" type="text/css">
</head>
<body>
<div id="dao">
<div id="div2">
<a href="天猫.html"><img src="image/主页.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="image/购物车.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="image/手机.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 class="zhi">
<p>直播</p>
</div>
<div class="tu">
<div class="qi">
<img src="image/天猫内容/01.jpg" alt="图片">
<div class="zi">
<p> 唱唱歌，卖卖货</p>
<a href="https://main.m.tmall.com/tmall-content/index.html?spm=875.7931836.0.0.661442655NJVPH#/detail/312675470193">直播新面孔</a>
</div>
</div>
<div class="nei">
<img src="image/天猫内容/02.jpg" alt="图片">
<div class="zi_01">
<p> 伊伊伊小莹的直播间</p>
<a href="https://main.m.tmall.com/tmall-content/index.html?spm=875.7931836.0.0.661442655NJVPH#/detail/308703880406">直播新面孔</a>
</div>
</div>
<div class="nei">
<img src="image/天猫内容/03.jpg" alt="图片">
<div class="zi_02">
<p> zhen1050324117的直播间</p>
<a href="https://main.m.tmall.com/tmall-content/index.html?spm=875.7931836.0.0.661442655NJVPH#/detail/342347688361">直播新面孔</a>
</div>
</div>
</div>
<div class="tu">
<div class="qi">
<img src="image/天猫内容/04.jpg" alt="图片">
<div class="zi_06">
<p> 在吗?这里好声音~</p>
<a href="https://main.m.tmall.com/tmall-content/index.html?spm=875.7931836.0.0.661442655NJVPH#/detail/321336938090">音乐之声</a>
</div>
</div>
<div class="nei">
<img src="image/天猫内容/05.jpg" alt="图片">
<div class="zi_01">
<p> 你主动我们就会有故事</p>
<a href="https://main.m.tmall.com/tmall-content/index.html?spm=875.7931836.0.0.661442655NJVPH#/detail/303735941337">直播新面孔</a>
</div>
</div>
<div class="nei">
<img src="image/天猫内容/06.jpg" alt="图片">
<div class="zi_04">
<p> 沫小沫</p>
<a href="https://main.m.tmall.com/tmall-content/index.html?spm=875.7931836.0.0.661442655NJVPH#/detail/311905776333">直播新面孔</a>
</div>
</div>
</div>
<div class="tu">
<div class="qi">
<img src="image/天猫内容/07.jpg" alt="图片">
<div class="zi_04">
<p> 小帕酱</p>
<a href="https://main.m.tmall.com/tmall-content/index.html?spm=875.7931836.0.0.661442655NJVPH#/detail/303105664900">直播新面孔</a>
</div>
</div>
<div class="nei">
<img src="image/天猫内容/08.jpg" alt="图片">
<div class="zi_01">
<p> 关注主播领红包</p>
<a href="https://main.m.tmall.com/tmall-content/index.html?spm=875.7931836.0.0.661442655NJVPH#/detail/316073024184">直播新面孔</a>
</div>
</div>
<div class="nei">
<img src="image/天猫内容/09.jpg" alt="图片">
<div class="zi_05">
<p> 老跳祝您暴富</p>
<a href="https://main.m.tmall.com/tmall-content/index.html?spm=875.7931836.0.0.661442655NJVPH#/detail/300769074176">直播新面孔</a>
</div>
</div>
</div>
<div class="tu">
<div class="qi">
<img src="image/天猫内容/10.jpg" alt="图片">
<div class="zi_07">
<p> t_1500293009612_0305的直播间</p>
<a href="https://main.m.tmall.com/tmall-content/index.html?spm=875.7931836.0.0.661442655NJVPH#/detail/307230208667">直播新面孔</a>
</div>
</div>
</div>
<div class="zhi">
<p>视频</p>
</div>
<div class="tu">
<div class="shi_01">
<video src="video/01.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>172girls眉飞色舞</a>
</div>
</div>
<div class="shi_03">
<video src="video/02.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>毛不易易燃易爆炸</a>
</div>
</div>
<div class="shi_03">
<video src="video/03.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>王二妮薛之谦演员</a>
</div>
</div>
</div>
<div class="tu">
<div class="shi_04">
<video src="video/04.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>阿朵穿高跟鞋背身打鼓</a>
</div>
</div>
<div class="shi_03">
<video src="video/05.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>集齐7颗硬糖即可召唤成龙</a>
</div>
</div>
<div class="shi_03">
<video src="video/06.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>好担心娜扎爬楼梯摔倒</a>
</div>
</div>
</div>
<div class="tu">
<div class="shi_04">
<video src="video/07.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>阿云嘎腾格尔玲花是亲戚</a>
</div>
</div>
<div class="shi_03">
<video src="video/08.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>李宇春说唱西门少年</a>
</div>
</div>
<div class="shi_03">
<video src="video/09.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>龚丽娜周深笑之歌</a>
</div>
</div>
</div>
<div class="tu">
<div class="shi_04">
<video src="video/10.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>张杰川剧唱腔</a>
</div>
</div>
<div class="shi_03">
<video src="video/11.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>张韶涵太稳了</a>
</div>
</div>
<div class="shi_03">
<video src="video/12.mp4" controls></video>
<div class="zi_08">
<p> 616超级晚</p>
<a>吴宣仪陈立农合唱仿佛在看偶像剧</a>
</div>
</div>
</div>
<div class="di">
<img src="image/底部/底部 (3).png" alt="图片">
<img src="image/底部/底部 (2).png" alt="图片">
<img src="image/底部/底部 (4).png" alt="图片">
<img src="image/底部/底部 (1).png" alt="图片">
</div>
<div class="fen">
<hr style="width: 1250px" color="#EFEFEF">
</div>
<div class="gou">
<table class="dibu_3">
<tr align="left">
<th><font color="#666666" size="3px">购物指南</font></th>
<th><font color="#666666" size="3px">天猫保障</font></th>
<th><font color="#666666" size="3px">支付方式</font></th>
<th><font color="#666666" size="3px">商家服务</font></th>
<th><font color="#666666" size="3px">手机天猫</font></th>
</tr>
<tr>
<td>免费注册</td>
<td>发票保障</td>
<td>快捷支付</td>
<td>天猫规则</td>
<td rowspan="5"><img class="ma" src="image/二维码.png" alt="二维码"></td>
</tr>
<tr>
<td>开通支付宝</td>
<td>售后规则</td>
<td>信用卡</td>
<td>商家入驻</td>
</tr>
<tr>
<td>支付宝充值</td>
<td>物流时效保障</td>
<td>余额宝</td>
<td>商家中心</td>
</tr>
<tr>
<td></td>
<td></td>
<td>蚂蚁花呗</td>
<td>天猫必修课</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>喵言喵语</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>运营服务</td>
</tr>
</table>
<div class="mao">
<img width="65px" src="image/猫.png" alt="图片">
</div>
</div>
<div class="hei">
<div class="hei_1">
<table class="dibu_4">
<tr align="left">
<td><font color="#ffffff">关于天猫</font></td>
<td><font color="#ffffff">商家服务大厅</font></td>
<td><font color="#ffffff">开放平台</font></td>
<td><font color="#ffffff">诚聘英才</font></td>
<td><font color="#ffffff">联系我们</font></td>
<td><font color="#ffffff">网站合作</font></td>
<td><font color="#ffffff">法律声明</font></td>
<td><font color="#ffffff">隐私权政策</font></td>
<td><font color="#ffffff">知识产权</font></td>
<td><font color="#ffffff">廉政举报</font></td>
<td><font color="#ffffff">不当竞争举报</font></td>
</tr>
</table>
</table>
<div class="wen_001">
<a>阿里巴巴集团</a>
<p>|</p>
<a>淘宝网</a>
<p>|</p>
<a>天猫</a>
<p>|</p>
<a>聚划算</a>
<p>|</p>
<a>全球速卖通</a>
<p>|</p>
<a>阿里巴巴国际交易市场</a>
<p>|</p>
<a>1688</a>
<p>|</p>
<a>阿里妈妈</a>
<p>|</p>
<a>飞猪</a>
<p>|</p>
<a>阿里云计算</a>
<p>|</p>
<a>AliOS</a>
<p>|</p>
<a>阿里通信</a>
<p>|</p>
<a>万网</a>
<p>|</p>
<a>高德</a>
<p>|</p>
<a>UC</a>
<p>|</p>
<a>友盟</a>
<p>|</p>
<a>虾米</a>
<p>|</p>
<a>钉钉</a>
<p>|</p>
<a>支付宝</a>
<p>|</p>
<a>阿里安全</a>
</div>
<div class="wen_002">
<a>增值电信业务经营许可证：浙B2-20110446</a>
<p>市场名称登记证：工商网市字3301004119号</p>
<p>出版物网络交易平台服务经营备案证： 新出发浙备字第2019002号</p>
</div>
<div class="wen_003">
<p>互联网违法和不良信息举报电话：0571-81683755 jubao.tb@service.taobao.com</p>
<a>中国互联网举报中心</a>
<a>中国扫黄打非网</a>
<a>全国文化和旅游市场网上举报投诉处理系统</a>
<a>全国12315平台</a>
</div>
<div class="wen_004">
<a>浙江省互联网违法和不良信息举报中心</a>
<div class="wen_005"><a>全网举报</a></div>
<p>互联网药品信息服务资质证书编号：</p>
<a>浙-（经营性）-2017-0005</a>
<div><a><img class="hui" src="image/徽章.png" alt="徽章">浙公网安备 33010002000120号</a></div>
</div>
<div class="wen_006">
<p>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</p>
<p class="wen_007">网络文化经营许可证：浙网文 [2021]1668-073号</p>
<img class="yuan" src="image/圆徽章.gif" alt="徽章">
</div>
<div class="wen_008">
<p>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002</p>
<a>12318举报</a>
<a>浙B2-20110446-1</a>
</div>
<div class="wen_009">
<p>©2003-现在 TMALL.COM 版权所有</p>
</div>
<div class="tu_001">
<img src="image/底部/最下.png" alt="图片">
<img src="image/底部/最下%202.png" alt="图片">
<img src="image/底部/最下%203.png" alt="图片">
<img src="image/底部/最下%204.png" alt="图片">
</div>
<div class="tu_002">
<img src="image/底部/最下%205.png" alt="图片">
</div>
</div>
</div>
</body>
</html>
css部分
*{overflow-x: hidden}
body{margin: 0;
background-color: #efefef
}
#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%;
margin-top: 10px;
font-size: 20px;
font-family: 宋体;
font-weight: 700;
width: 1920px}
.tu{float: left;
margin-left: 13%;
margin-top: -10px;}
.tu a{text-decoration: none;
color: black}
.qi{width: 350px;height: 256px;
background-color: black;
float: left;
margin-top: 30px}
.qi img{width: 200px;
float: left;
margin-left: 22%;
margin-right: 22%}
.nei{width: 350px;height: 256px;
background-color: black;
float: left;
margin-top: 30px;
margin-left: 30px}
.nei img{width: 200px;
float: left;
margin-left: 22%;
margin-right: 22%}
.zi{float: left;
margin-left: 0;
margin-top: 0;
background-color: #ffffff;
width: 350px;height: 56px;}
.zi p{float: left;
margin-left: -5px;
margin-top: 10px;
font-family: 宋体;
font-weight: 700;}
.zi a{float: left;
margin-top: 35px;
margin-left: -114px;
font-size: 13px;
font-family: 宋体}
.zi_01{float: left;
margin-left: 0;
margin-top: 0;
background-color: #ffffff;
width: 350px;height: 56px;}
.zi_01 p{width: 350px;
float: left;
margin-left: -5px;
margin-top: 10px;
font-family: 宋体;
font-weight: 700;}
.zi_01 a{float: left;
margin-top: 35px;
margin-left: -332px;
font-size: 13px;
font-family: 宋体}
.zi_02{float: left;
margin-left: 0;
margin-top: 0;
background-color: #ffffff;
width: 350px;height: 56px;}
.zi_02 p{float: left;
margin-left: -5px;
margin-top: 10px;
font-family: 宋体;
font-weight: 700;}
.zi_02 a{float: left;
margin-top: 35px;
margin-left: -181px;
font-size: 13px;
font-family: 宋体}
.zi_04{float: left;
margin-left: 0;
margin-top: 0;
background-color: #ffffff;
width: 350px;height: 56px;}
.zi_04 p{float: left;
margin-left: -5px;
margin-top: 10px;
font-family: 宋体;
font-weight: 700;}
.zi_04 a{float: left;
margin-top: 35px;
margin-left: -48px;
font-size: 13px;
font-family: 宋体}
.zi_05{float: left;
margin-left: 0;
margin-top: 0;
background-color: #ffffff;
width: 350px;height: 56px;}
.zi_05 p{float: left;
margin-left: -5px;
margin-top: 10px;
font-family: 宋体;
font-weight: 700;}
.zi_05 a{float: left;
margin-top: 35px;
margin-left: -95px;
font-size: 13px;
font-family: 宋体}
.zi_06{float: left;
margin-left: 0;
margin-top: 0;
background-color: #ffffff;
width: 350px;height: 56px;}
.zi_06 p{float: left;
margin-left: -5px;
margin-top: 10px;
font-family: 宋体;
font-weight: 700;}
.zi_06 a{float: left;
margin-top: 35px;
margin-left: -130px;
font-size: 13px;
font-family: 宋体}
.zi_07{float: left;
margin-left: 0;
margin-top: 0;
background-color: #ffffff;
width: 350px;height: 56px;}
.zi_07 p{float: left;
margin-left: -5px;
margin-top: 10px;
font-family: 宋体;
font-weight: 700;}
.zi_07 a{float: left;
margin-top: 35px;
margin-left: -234px;
font-size: 13px;
font-family: 宋体}
.shi_01{width: 350px;height: 256px;
background-color: black;
float: left;
margin-top: 30px}
.shi_01 video{
height: 200px;
float: left;
margin-left: 34%;}
.zi_08{float: left;
margin-left: 0;
margin-top: 0;
background-color: #ffffff;
width: 350px;height: 56px;}
.zi_08 p{float: left;
margin-left: -5px;
margin-top: 10px;
font-family: 宋体;
font-weight: 700;}
.zi_08 a{float: left;
margin-top: 35px;
margin-left: -75px;
font-size: 13px;
font-family: 宋体}
.shi_02{width: 350px;height: 256px;
background-color: black;
float: left;
margin-left: 30px;
margin-top: 30px}
.shi_02 video{
height: 200px;
float: left;
margin-left: 34%;}
.shi_03{width: 350px;height: 256px;
background-color: black;
float: left;
margin-left: 30px;
margin-top: 30px}
.shi_03 video{
height: 200px;
float: left;}
.shi_04{width: 350px;height: 256px;
background-color: black;
float: left;
margin-left: 0;
margin-top: 30px}
.shi_04 video{
height: 200px;
float: left;}
.di{float: left;
margin-top: 100px;
margin-left: 0;
border-top:1px solid #666666;
background-color: #ffffff;
overflow-y: hidden;
width: 100%;height: 280px}
.di img{float: left;
margin-left: 130px;
height: 80px;}
.fen{float: left;
margin-left: 130px;
margin-top: -200px}
.gou{float: left;
margin-top: -150px;
margin-left: 170px}
.dibu_3{font-size: 12px;
width: 1480px;
color: #b6b6b6}
.dibu_3 td:hover{text-decoration: underline}
.ma{width: 105px}
.mao{float: left;
margin-top: 0
}
.hei{float: left;
border-top:2px solid red;
width: 100%;height: auto;
background-color: #0c0c0c;
margin-top: -45px}
.hei_1{float: left;
margin-left: 170px}
.dibu_4{font-size: 12px;
width: 750px;
float: left;
margin-left: -3px;
color: #b6b6b6}
.dibu_4 td:hover{text-decoration: underline}
.wen_001{float: left;}
.wen_001 a{color: #ffffff;
float: left;
font-size: 12px;
margin-left: 0px}
.wen_001 a:hover{text-decoration: underline #ffffff}
.wen_001 p{color: #ffffff;
float: left;
margin-left: 4px;
margin-right: 4px;
margin-top: 0;
overflow: hidden;
height: 14px}
.wen_002{float: left;}
.wen_002 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_002 p{color: #b6b6b6;
float: left;
margin-top: -2px;
font-size: 12px;
margin-left: 65px}
.wen_002 a:hover{text-decoration: underline #979797}
.wen_003{float: left;}
.wen_003 p{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_003 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 65px}
.wen_003 a:hover{text-decoration: underline #979797}
.wen_004{float: left;}
.wen_004 p{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 65px}
.wen_004 a{color: #b6b6b6;
float: left;
margin-top: 0;
font-size: 12px;
margin-left: 0}
.wen_004 a:hover{text-decoration: underline #979797}
.hui{float: left;
width: 15px;
margin-left: 65px;
margin-top: 0}
.wen_005{color: #b6b6b6;
float: left;
margin-left: 65px}
.wen_006{float: left;
height: auto;
margin-top: 5px;
margin-left: 0;
font-size: 12px;
color: #b6b6b6;}
.wen_006 p{display: inline}
.wen_007{margin-top: 0;
margin-left: 65px;}
.yuan{float: right;
margin-top: 0;
width: 25px;}
.wen_008{float: left;
margin-top: 30px;
margin-left: -775px;
font-size: 12px;
color: #b6b6b6;}
.wen_008 p{display: inline;
float: left}
.wen_008 a{color: #b6b6b6;
float: left;
margin-left: 40px;
margin-top: 12px;
font-size: 12px;}
.wen_008 a:hover{text-decoration: underline #979797}
.wen_009{font-size: 8px;
margin-top: 55px;
margin-left: -775px;
float: left;
color: #6b6b6b;}
.tu_001{float: left;
margin-top: 50px;}
.tu_001 img{float: left;
margin-right: 40px;}
.tu_002{float: left;
margin-left: -980px;
margin-top: 110px;}