html+css实现天猫官网
2024-06-08 05:24:43
无保留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="data: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="data: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="data: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="data: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="data:image/天猫超市.PNG" height="18px" alt="天猫超市"></a><p> </p><a class="tu"><img src="data: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="data:image/图标/女装.png" alt="女装"></p><a>女装</a><p>/</p><a>内衣</a></li><li><p><img src="data:image/图标/男装.png" alt="男装"></p><a>男装</a><p>/</p><a>运动户外</a></li><li><p><img src="data:image/图标/女鞋.png" alt="女鞋"></p><a>女鞋</a><p>/</p><a>男鞋</a><p>/</p><a>箱包</a></li><li><p><img src="data:image/图标/美妆.png" alt="美妆"></p><a>美妆</a><p>/</p><a>个人护理</a></li><li><p><img src="data:image/图标/腕表.png" alt="腕表"></p><a>腕表</a><p>/</p><a>眼睛</a><p>/</p><a>珠宝首饰</a></li><li><p><img src="data:image/图标/数码.png" alt="手机"></p><a>手机</a><p>/</p><a>数码</a><p>/</p><a>电脑办公</a></li><li><p><img src="data:image/图标/母婴玩具.png" alt="母婴玩具"></p><a>母婴玩具</a></li><li><p><img src="data:image/图标/零食.png" alt="零食"></p><a>零食</a><p>/</p><a>茶酒</a><p>/</p><a>进口食品</a></li><li><p><img src="data:image/图标/生鲜水果.png" alt="生鲜水果"></p><a>生鲜水果</a></li><li><p><img src="data:image/图标/大家电.png" alt="家电"></p><a>大家电</a><p>/</p><a>生活电器</a></li><li><p><img src="data:image/图标/家具.png" alt="家具"></p><a>家具</a><p>/</p><a>灯具</a><p>/</p><a>卫浴</a></li><li><p><img src="data:image/图标/汽车.png" alt="汽车"></p><a>汽车</a><p>/</p><a>配件</a><p>/</p><a>用品</a></li><li><p><img src="data:image/图标/家纺.png" alt="家纺"></p><a>家纺</a><p>/</p><a>家饰</a><p>/</p><a>鲜花</a></li><li><p><img src="data:image/图标/医药保健.png" alt="医药保健"></p><a>医药保健</a></li><li><p><img src="data:image/图标/厨具.png" alt="厨具"></p><a>厨具</a><p>/</p><a>收纳</a><p>/</p><a>宠物</a></li><li><p><img src="data:image/图标/图书音像.png" alt="图书音像"></p><a>图书音像</a></li></ul></div><!--中部banner--><div class="banner"><div class="container"><!-- 先把第一张图片显示出来 --><img class="on" src="data:image/banner/1.png" alt="banner"/><img src="data:image/banner/2.png" alt="banner"/><img src="data:image/banner/3.png" alt="banner"/><img src="data:image/banner/4.png" alt="banner"/><img src="data: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="data:image/banner/熊.png" alt="banner"/><img src="data:image/banner/精.png" alt="banner"/><img src="data:image/banner/孩.png" alt="banner"/><img src="data: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="data:image/客服.png"></div><div class="p_01"><p class="a_01">Hi!你好</p></div><div class="wai"><img class="gao" src="data: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="data:image/图标/星星.png" alt="收藏的宝贝"><img class="mai" src="data:image/图标/手提包.png" alt="买过的店铺"><img class="dian" src="data:image/图标/店铺.png" alt="收藏的店铺"><img class="zhong" src="data: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="data:image/分类/天猫超市1.png" alt="商品图"><img class="tian1" src="data:image/分类/天猫超市2.png" alt="商品图"><img class="tian1" src="data:image/分类/天猫超市3.png" alt="商品图"><img class="tian1" src="data:image/分类/天猫超市4.png" alt="商品图"><img class="tian1" src="data: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="data:image/分类/天猫国际1.png" alt="商品图"><img class="tian1" src="data:image/分类/天猫国际2.png" alt="商品图"><img class="tian1" src="data:image/分类/天猫国际3.png" alt="商品图"><img class="tian1" src="data:image/分类/天猫国际4.png" alt="商品图"><img class="tian1" src="data: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="data:image/分类/猜你喜欢1.png" alt="商品图"><img class="tian1" src="data:image/分类/猜你喜欢2.png" alt="商品图"><img class="tian1" src="data:image/分类/猜你喜欢3.png" alt="商品图"><img class="tian1" src="data:image/分类/猜你喜欢4.png" alt="商品图"><img class="tian1" src="data: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="data:image/底部/底部 (3).png"><img class="dibu_2" src="data:image/底部/底部 (2).png"><img class="dibu_2" src="data:image/底部/底部 (4).png"><img class="dibu_2" src="data: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="data: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="data: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="data: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="data: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="data:image/底部/最下.png" alt="图片"><img src="data:image/底部/最下%202.png" alt="图片"><img src="data:image/底部/最下%203.png" alt="图片"><img src="data:image/底部/最下%204.png" alt="图片"></div><div class="tu_002"><img src="data:image/底部/最下%205副本.png"></div><div class="tu_003"><img src="data: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="data: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="data: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="data: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="data:image/天猫会员.png" alt="">
</div>
<div class="di"><img src="data:image/底部/底部 (3).png" alt="图片"><img src="data:image/底部/底部 (2).png" alt="图片"><img src="data:image/底部/底部 (4).png" alt="图片"><img src="data: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="data: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="data: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="data: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="data: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="data:image/底部/最下.png" alt="图片"><img src="data:image/底部/最下%202.png" alt="图片"><img src="data:image/底部/最下%203.png" alt="图片"><img src="data:image/底部/最下%204.png" alt="图片"></div><div class="tu_002"><img src="data:image/底部/最下%205.png" alt="图片"></div><div class="tu_003"><img src="data: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="data:image/喵鲜生logo.png" alt="logo"></a></div><div class="tu"><img src="data:image/banner/喵鲜生.png" alt="banner"></div><div class="deng"><img class="deng-img2" src="data:image/半边二维码.png" alt="气泡框"><img class="deng-img" src="data: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="data:image/用户.png" alt="图片"></div><div class="jv-img"><img width="37.5px" height="35px" src="data:image/锁.png" alt="图片"></div></div><div class="an"><input type="submit" value="登录"></div><div class="wei"><img width="16px" src="data:image/新浪.png" alt="图标"><a>微博登录</a><img class="zhi" width="16px" src="data: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="data: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="data: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="data:image/底部/最下.png" alt="图片"><img src="data:image/底部/最下%202.png" alt="图片"><img src="data:image/底部/最下%203.png" alt="图片"><img src="data:image/底部/最下%204.png" alt="图片"><img src="data: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="data: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="data: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="data: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="data:image/banner/医药馆.png" alt="">
</div>
<div class="di"><img src="data:image/底部/底部 (3).png" alt="图片"><img src="data:image/底部/底部 (2).png" alt="图片"><img src="data:image/底部/底部 (4).png" alt="图片"><img src="data: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="data: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="data: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="data: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="data: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="data:image/底部/最下.png" alt="图片"><img src="data:image/底部/最下%202.png" alt="图片"><img src="data:image/底部/最下%203.png" alt="图片"><img src="data:image/底部/最下%204.png" alt="图片"></div><div class="tu_002"><img src="data:image/底部/最下%205.png"></div><div class="tu_003"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:image/底部/底部 (3).png" alt="图片"><img src="data:image/底部/底部 (2).png" alt="图片"><img src="data:image/底部/底部 (4).png" alt="图片"><img src="data: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="data: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="data: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="data: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="data: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="data:image/底部/最下.png" alt="图片"><img src="data:image/底部/最下%202.png" alt="图片"><img src="data:image/底部/最下%203.png" alt="图片"><img src="data:image/底部/最下%204.png" alt="图片"></div><div class="tu_002"><img src="data: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;}html+css实现天猫官网相关推荐
- 游戏网站的设计与实现（HTML和CSS实现魔兽世界官网）
学习游戏网站的设计与实现(HTML和CSS实现魔兽世界官网),本文实现该系统的功能截图,HTML和CSS部分关键语句,系统功能图等供大家参考 整个页面是由很多很多DIV标签和ul标签构成 /*部分代码 ...
- 用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- 用html和css仿作小米官网（静态）
目录 一:准备工作 二:头部导航栏部分 三:中间照片部分 四:尾部文字部分 准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
- html、css --苏宁官网静态界面
前一阵子自己扒下来的一个苏宁官网的界面: html部分: <!DOCTYPE html> <html lang="en"> <head>< ...
- html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
- css:动画 小米官网盒子阴影 心跳动画
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
- HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
- HTML+CSS实现小米官网顶部导航栏
效果图 效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
- HTML+CSS之金立官网部分实现
一.HTML代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- HTML+CSS仿BMW官网
看着苹果官网使劲敲代码. 我的期末作业. 先看看两张参考图片... 再来一个参考视频..... 乐爷宝马 - 360极速浏览器 12.0 2020-12-17 20-14-05 再来看看我敲的东东.. ...
最新文章
- 〖Linux〗Kubuntu， the application 'Google Chrome' has requested to open the wallet 'kdewallet'解决方法...
- PostgreSQL 打开文件句柄优化 - 百万以上实体对象初始化优化
- 软件测试中英文词汇汇总
- stoi() 函数----将一个string类型转换为int型
- CF505E-Mr. Kitayuta vs. Bamboos【贪心,二分】
- 【HDU - 1863】 畅通工程（并查集+最小生成树）
- 用计算机对话的小品,爆笑小品剧本台词《作弊记》
- c语言去掉数组中重复的,C语言删除无序整型数组中的重复元素及时间复杂度
- windows iphone 传输
- 梁肇新《编程高手箴言》书评
- dll文件懒加载_模块已加载，但对dllregisterServer的调用失败
- 组合模式中的“整体与部分”你真的清楚吗？
- [CF364D]Ghd
- 2022年全球市场燃油液位传感器总体规模、主要生产商、主要地区、产品和应用细分研究报告
- 利用Python实现阴阳师自动抽卡
- JeeSite （三）前端
- PLY格式介绍与读取
- windows远程桌面功能和粘贴拷贝功能
- 计算机网络: 码元 波特 速率 带宽
- seo可以从哪些方面优化(seo优化的方法有哪些)