本项目较第一个项目来说完善了很多,基本没有什么明显的问题,也适当加入了动画,过度,锚点等功能,对H5C3的项目书写也更加熟练。
html代码段如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天猫国际</title>
<link rel="stylesheet" href="./img/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./首页.css">
<link rel="stylesheet" href="./img/swiper/swiper-bundle.min.css">
</head>
<body>
<div>
<aside>
<ul>
<li><a href="#a"><img src="./img/1.png" alt=""><span class="ce-2">美容护肤</span></a></li>
<li><a href="#b"><img src="./img/2.png" alt=""><span class="ce-2">个人护理</span></a></li>
<li><a href="#c"><img src="./img/3.png" alt=""><span class="ce-2">母婴用品</span></a></li>
<li><a href="#d"><img src="./img/4.png" alt=""><span class="ce-2">食品饮料</span></a></li>
<li><a href="#e"><img src="./img/5.png" alt=""><span class="ce-2">营养保健</span></a></li>
<li><a href="#f"><img src="./img/7.png" alt=""><span class="ce-2">服饰箱包</span></a></li>
<li><a href=""><img src="./img/8.png" alt=""></a></li>
</ul>
</aside>
<nav>
<div id="a" class="nav-center">
<ul class="nav-left">
<li class="nl-home"><a href=""><img src="./img/home.png" alt="">
<div>天猫首页</div>
</a></li>
<li><a href="">喵,欢迎来到天猫国际</a></li>
<li><a href="../登录页/登录.html">请登录</a></li>
</ul>
<ul class="nav-right">
<li><a href="">商家中心</a></li>
<li class="my-tb"><a href=""> 商家支持<span class="nav-sanjiao xuan"></span></a>
<ul class="my-tb1">
<li><a href="">已买到的宝贝</a></li>
<li><a href="">已卖出的宝贝</a></li>
</ul>
</li>
</li>
<li><a href="">网页无障碍</a></li>
<li><a href="">淘宝网</a></li>
<li class="nav-tu1"><a href=""><i class="fa fa-mobile" aria-hidden="true"></i>手机版</a>
<ul class="nav-tu">
<div class="nav-sanjiao tu-sj"></div>
<li>
<img src="./img/0.01.jpg" alt="" width="145px">
</li>
</ul>
</li>
<li>
<div class="nav-long"></div>
</li>
<li class="my-tb l-1"><a href="">收藏夹<span class="nav-sanjiao xuan"></span></a>
<ul class="my-tb1">
<li><a href="">已买到的宝贝</a></li>
<li><a href="">已卖出的宝贝</a></li>
</ul>
</li>
<li><a href=""><i class="fa fa-shopping-cart" aria-hidden="true"></i>购物车</a></li>
<li class="my-tb"><a href="">我的淘宝<span class="nav-sanjiao xuan"></span></a>
<ul class="my-tb1">
<li><a href="">已买到的宝贝</a></li>
<li><a href="">已卖出的宝贝</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<header>
<div class="h-all">
<div class="header-left"><img class="h-img1" src="./img/天猫国际.png" alt=""><img class="h-img2"
src="./img/我的.png" alt=""></div>
<div class="header-right">
<div class="hr-1"></div>
<div class="hr-2"> <span>搜 索</span></div>
</div>
</div>
</header>
<main>
<div id="b" class="main-head">
<ul class="main-center">
<li class="mh-one"><a href="">全部商品分类</a></li>
<li class="mh-two"><a href="">首页</a></li>
<li class="mh-three"><a href="">全球精选</a></li>
<li class="mh-three"><a href="">进口超市</a></li>
<li class="mh-three"><a href="">海外直购</a></li>
</ul>
</div>
<div class="main-main">
<ul class="mm">
<li class="mm-1"><a href="">
<div class="mm-tu"><img src="./img/下载.png" alt="">
<div class="tu-font">美妆个护</div>
</div>
<div class="font">面膜/防晒/面部护理套装</div>
</a>
<ul>
<div><a href="">
<div class="item i0">
<div class="item-1">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-1">
<div class="item-11">彩妆香水</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-2">
<div class="item-11">化妆水/爽肤水</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-3">
<div class="item-11">磨砂/去角质/按摩</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-4">
<div class="item-11">面部护理套装</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-5">
<div class="item-11">眼部护理</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
</a></div>
</li>
</ul>
</li>
<li class="mm-22"><a href="">
<div class="mm-tu"><img src="./img/下载 (1).png" alt="">
<div class="tu-font">食品保健</div>
</div>
<div class="font">代餐奶昔/酵素/葡萄酒</div>
</a>
<ul>
<li><a href="">
<div class="item i1">
<div class="item-1">
<div class="item-11">酵素/葡萄酒</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-1">
<div class="item-11">精油芳疗</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-2">
<div class="item-11">润唇膏</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-3">
<div class="item-11">面膜</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-4">
<div class="item-11">乳液/面霜</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-5">
<div class="item-11">男士护理</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
</div>
</a></li>
</ul>
</li>
<li class="mm-3"><a href="">
<div class="mm-tu"><img src="./img/下载 (2).png" alt="">
<div class="tu-font">母婴用品</div>
</div>
<div class="font">奶粉/纸尿裤/钙铁锌</div>
</a>
<ul>
<li><a href="">
<div class="item i2">
<div class="item-1">
<div class="item-11">保湿补水</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-1">
<div class="item-11">手法护理</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-2">
<div class="item-11">胸部护理</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-3">
<div class="item-11">乳液/面霜</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-4">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-5">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
</div>
</a></li>
</ul>
</li>
<li class="mm-4"><a href="">
<div class="mm-tu"><img src="./img/下载 (3).png" alt="">
<div class="tu-font">服饰鞋包</div>
</div>
<div class="font">腕表/箱包/潮流穿搭</div>
</a>
<ul>
<li><a href="">
<div class="item i3">
<div class="item-1">
<div class="item-11">爽肤水</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-1">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-2">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-3">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-4">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-5">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
</div>
</a></li>
</ul>
</li>
<li class="mm-5"><a href="">
<div class="mm-tu"><img src="./img/下载 (4).png" alt="">
<div class="tu-font">生活/数码</div>
</div>
<div class="font">滤水壶/滤芯/扫地机器人</div>
</a>
<ul>
<li><a href="">
<div class="item i4">
<div class="item-1">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-1">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-2">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-3">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-4">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
<div class="item-1 it-5">
<div class="item-11">美妆护肤</div>
<div class="item12">
<a class="i-red" href="">保湿补水</a>
<div class="nav-long nl1"></div>
<a href="">乳液/面霜</a>
<div class="nav-long nl1"></div>
<a href="">化妆水/爽肤水</a>
<a class="i-red" href="">面部护理套装</a>
<div class="nav-long nl1"></div>
<a href="">眼部护理</a>
<div class="nav-long nl1"></div>
<a href="">男士护理</a>
<a href="">精油芳疗</a>
<div class="nav-long nl1"></div>
<a href="">身体护理</a>
<div class="nav-long nl1"></div>
<a href="">手法护理</a>
<div class="nav-long nl1"></div>
<a class="i-red" href="">胸部护理</a>
<a href="">润唇膏</a>
<div class="nav-long nl1"></div>
<a href="">防晒</a>
<div class="nav-long nl1"></div>
<a href="">面膜</a>
<div class="nav-long nl1"></div>
<a href="">磨砂/去角质/按摩</a>
</div>
</div>
</div>
</a></li>
</ul>
</li>
</ul>
<div class="lbt">
<div class="swiper-pagination"></div>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/lbt1.png" alt=""></div>
<div class="swiper-slide"><img src="./img/lbt2.png" alt=""></div>
</div>
<div class="swiper-button-next"><a href=""></a></div>
<div class="swiper-button-prev"><a href=""></a></div>
</div>
<!-- Initialize Swiper -->
<script src="./img/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev", hideOnClick: true,
},
});
</script>
</div>
<div class="mm-er">
<div class="me-top">
<p class="m-tmgj">天猫国际</p>
<p class="m-english">TMALL GLOBAL</p><img src="./img/波折.jpg" alt="">
</div>
<img src="./img/二维码1.jpg" alt="">
<div class="mm-2">畅享全球好货</div>
<div class="mm-3">正品保障,破损无忧,晚到必赔!</div>
</div>
</div>
</main>
<footer>
<div id="c" class="box"><img src="./img/美容.png" alt=""></div>
<div class="f-all">
<ul>
<li><a href="">最热<span>HOT</span></a></li>
<li><a href="">口红</a></li>
<li><a href="">香水</a></li>
<li><a href="">雪花秀</a></li>
<li><a href="">爱丽小屋</a></li>
<li><a href="">面霜</a></li>
<li><a href="">气垫</a></li>
<li><a href="">迪奥</a></li>
<li><a href="">眼霜</a></li>
<li><a href="">洗面奶</a></li>
<li><a href="">防晒霜</a></li>
<li><a href="">香奈儿</a></li>
<li><a href="">悦诗风吟</a></li>
<li><a href="">唇膏</a></li>
</ul>
<div class="f-tu">
<div class="ft-1"><a href=""><img src="./img/化妆品.jpg" alt="">
<div class="mr-">
<div class="mr">美容护肤热卖品牌</div>
<div class="more">查看更多</div>
</div>
</a></div>
<div class="ft-2"><a href="">
<div class="ft-21">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品1.png" alt="">
</div>
<div class="ft-22">
<div class="ft-221">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品2.png" alt="">
</div>
<div class="ft-222">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品3.png" alt="">
</div>
</div>
</a></div>
<div class="ft-3"><a href="">
<div class="ft-31">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品4.png" alt="">
</div>
<div class="ft-32">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品5.jpg" alt="">
</div>
</a></div>
<div class="all">
<div class="yuan1"></div>
<div class="l-font">BRAND <span> 美容护肤热卖平牌</span>
<div>
<ul>
<li id="a">
<div class="yuan"></div>
<ul class="c">
<li class="item1c"><a href=""><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
</ul>
<ul class="b">
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</footer>
<footer>
<div id="d" class="box"><img src="./img/my.png" alt=""></div>
<div class="f-all">
<ul>
<li><a href="">最热<span>HOT</span></a></li>
<li><a href="">口红</a></li>
<li><a href="">香水</a></li>
<li><a href="">雪花秀</a></li>
<li><a href="">爱丽小屋</a></li>
<li><a href="">面霜</a></li>
<li><a href="">气垫</a></li>
<li><a href="">迪奥</a></li>
<li><a href="">眼霜</a></li>
<li><a href="">洗面奶</a></li>
<li><a href="">防晒霜</a></li>
<li><a href="">香奈儿</a></li>
<li><a href="">悦诗风吟</a></li>
<li><a href="">唇膏</a></li>
</ul>
<div class="f-tu">
<div class="ft-1"><a href=""><img src="./img/my-1.jpg" alt="">
<div class="mr-">
<div class="mr">美容护肤热卖品牌</div>
<div class="more">查看更多</div>
</div>
</a></div>
<div class="ft-2"><a href="">
<div class="ft-21">
<div>¥59 <del>¥199.0</del></div><img src="./img/my-2.jpg" alt="">
</div>
<div class="ft-22">
<div class="ft-221">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品2.png" alt="">
</div>
<div class="ft-222">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品3.png" alt="">
</div>
</div>
</a></div>
<div class="ft-3"><a href="">
<div class="ft-31">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品4.png" alt="">
</div>
<div class="ft-32">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品5.jpg" alt="">
</div>
</a></div>
<div class="all">
<div class="yuan1"></div>
<div class="l-font">BRAND <span> 美容护肤热卖平牌</span>
<div>
<ul>
<li id="a">
<div class="yuan"></div>
<ul class="c">
<li class="item1c"><a href=""><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
</ul>
<ul class="b">
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</footer>
<footer>
<div id="e" class="box"><img src="./img/yybj.png" alt=""></div>
<div class="f-all">
<ul>
<li><a href="">最热<span>HOT</span></a></li>
<li><a href="">口红</a></li>
<li><a href="">香水</a></li>
<li><a href="">雪花秀</a></li>
<li><a href="">爱丽小屋</a></li>
<li><a href="">面霜</a></li>
<li><a href="">气垫</a></li>
<li><a href="">迪奥</a></li>
<li><a href="">眼霜</a></li>
<li><a href="">洗面奶</a></li>
<li><a href="">防晒霜</a></li>
<li><a href="">香奈儿</a></li>
<li><a href="">悦诗风吟</a></li>
<li><a href="">唇膏</a></li>
</ul>
<div class="f-tu">
<div class="ft-1"><a href=""><img src="./img/yy-1.jpg" alt="">
<div class="mr-">
<div class="mr">美容护肤热卖品牌</div>
<div class="more">查看更多</div>
</div>
</a></div>
<div class="ft-2"><a href="">
<div class="ft-21">
<div>¥59 <del>¥199.0</del></div><img src="./img/yy-2.png" alt="">
</div>
<div class="ft-22">
<div class="ft-221">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品2.png" alt="">
</div>
<div class="ft-222">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品3.png" alt="">
</div>
</div>
</a></div>
<div class="ft-3"><a href="">
<div class="ft-31">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品4.png" alt="">
</div>
<div class="ft-32">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品5.jpg" alt="">
</div>
</a></div>
<div class="all">
<div class="yuan1"></div>
<div class="l-font">BRAND <span> 美容护肤热卖平牌</span>
<div>
<ul>
<li id="a">
<div class="yuan"></div>
<ul class="c">
<li class="item1c"><a href=""><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
</ul>
<ul class="b">
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</footer>
<footer>
<div id="f" class="box"><img src="./img/grhl.png" alt=""></div>
<div class="f-all">
<ul>
<li><a href="">最热<span>HOT</span></a></li>
<li><a href="">口红</a></li>
<li><a href="">香水</a></li>
<li><a href="">雪花秀</a></li>
<li><a href="">爱丽小屋</a></li>
<li><a href="">面霜</a></li>
<li><a href="">气垫</a></li>
<li><a href="">迪奥</a></li>
<li><a href="">眼霜</a></li>
<li><a href="">洗面奶</a></li>
<li><a href="">防晒霜</a></li>
<li><a href="">香奈儿</a></li>
<li><a href="">悦诗风吟</a></li>
<li><a href="">唇膏</a></li>
</ul>
<div class="f-tu">
<div class="ft-1"><a href=""><img src="./img/gr-1.jpg" alt="">
<div class="mr-">
<div class="mr">美容护肤热卖品牌</div>
<div class="more">查看更多</div>
</div>
</a></div>
<div class="ft-2"><a href="">
<div class="ft-21">
<div>¥59 <del>¥199.0</del></div><img src="./img/gr-2.jpg" alt="">
</div>
<div class="ft-22">
<div class="ft-221">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品2.png" alt="">
</div>
<div class="ft-222">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品3.png" alt="">
</div>
</div>
</a></div>
<div class="ft-3"><a href="">
<div class="ft-31">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品4.png" alt="">
</div>
<div class="ft-32">
<div>¥59 <del>¥199.0</del></div><img src="./img/化妆品5.jpg" alt="">
</div>
</a></div>
<div class="all">
<div class="yuan1"></div>
<div class="l-font">BRAND <span> 美容护肤热卖平牌</span>
<div>
<ul>
<li id="a">
<div class="yuan"></div>
<ul class="c">
<li class="item1c"><a href=""><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
<li class="item1c"><img src="./img/名牌1.png" alt="">
<div class="hg">
韩国LG旗下彩妆
</div><a href=""></a>
</li>
</ul>
<ul class="b">
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
<li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
<div class="hg">
韩国LG旗下彩妆
</div>
</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div class="last-all">
<div class="tm-last">
<div class="left">
<div class="tml-1"><img src="./img/天猫国际2.png" alt=""></div>
<div class="tml-2">工作时间:09:00-24:00(周一到周日)</div>
<div class="tml-3"><a href=""><i class="fa fa-user-circle-o" aria-hidden="true"></i>买家在线咨询</a></div>
<div class="tml-4"><a href=""><i class="fa fa-commenting-o" aria-hidden="true"></i>问题反馈</a></div>
<div class="tml-er"><img src="./img/l二维码.png" alt="">扫一扫,品质在手</div>
</div>
<div class="right">
<ul>
<li><a href="">服务保障</a>
<ul>
<li><a href="">招商频道</a></li>
<li><a href="">阿里巴巴找人</a></li>
<li><a href="">赌博营销</a></li>
<li><a href="">卷钱跑路</a></li>
<li><a href="">社会经验</a></li>
<li><a href="">阿巴阿巴</a></li>
<li><a href="">没词了怎么办</a></li>
<li><a href="">好好学习</a></li>
<li><a href="">天天向上</a></li>
<li><a href="">花不拉几</a></li>
</ul>
</li>
<li><a href="">消费者指南</a>
<ul>
<li><a href="">京东买好货</a></li>
<li><a href="">淘宝假货</a></li>
<li><a href="">天猫永远滴神</a></li>
<li><a href="">米西米西</a></li>
<li><a href="">拼夕夕</a></li>
<li><a href="">招商频道</a></li>
</ul>
</li>
<li><a href="">支付方式</a>
<ul>
<li><a href="">支付宝</a></li>
<li><a href="">微信</a></li>
<li><a href="">银行卡</a></li>
<li><a href="">金条</a></li>
<li><a href="">钻石</a></li>
</ul>
</li>
<li><a href="">商家支持</a>
<ul>
<li><a href="">啥也不支持</a></li>
<li><a href="">啥也不知道</a></li>
<li><a href="">啥也不懂</a></li>
<li><a href="">别问我</a></li>
<li><a href="">阿巴阿巴阿巴</a></li>
</ul>
</li>
</ul>
</div>
<div class="bottom">
<div class="b-cen"><p> 阿里巴巴集团 淘宝网 天猫 聚划算 全球速卖通 阿里巴巴国际交易市场 1688 阿里妈妈 去啊 阿里云计算 YunOS 阿里通信 万网 高德 优视 友盟 酷盘 虾米 天天动听 来往 支付宝 钉钉</p>
<span> © 2013-2016 Tmall.hk. 版权所有</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
css段代码如下
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
html {
height: 100%;
width: 100%;
}
/* 全文 */
nav {
height: 27px;
width: 100%;
background-color: #F2F2F2;
position: relative;
}
nav a {
color: #999999;
}
.nav-center {
width: 1190px;
height: 26px;
margin: 0 auto;
/* background-color: red; */
}
.nav-left li,
.nav-left img {
float: left;
margin-left: 20px;
}
.nav-left a,
.nav-right li {
font-size: 12px;
line-height: 27px;
}
.nl-home {
width: 89px;
}
.nav-left img {
margin-top: 10px;
width: 12px;
}
/* 左导航栏 */
.nav-right li {
float: right;
margin: 0 5px;
text-align: center;
}
.nav-right .nav-long {
height: 14px;
width: 1px;
background-color: #999999;
margin: 7px -0px 0px;
float: left;
}
.fa-mobile {
font-size: 16px;
vertical-align: middle;
}
.nav-sanjiao {
height: 0px;
width: 0px;
border: 3px solid #999999;
border-color: #999999 transparent transparent transparent;
position: relative;
top: 9px;
left: 1px;
}
.nav-right i {
color: red;
width: 12px;
}
/* nav hover效果 */
nav a:hover {
text-decoration: underline;
color: red;
}
.my-tb {
width: 62px;
height: 28px;
border: 1px solid #F2F2F2;
border-color: white #F2F2F2 white #F2F2F2;
position: relative;
}
.my-tb:hover {
background-color: white;
}
.mt-tb:hover .xuan {
transform: rotate(90deg);
}
.my-tb1 {
width: 76px;
height: 57px;
padding-left: 10px;
margin-left: -1px;
border-color: white #F2F2F2 #F2F2F2 #F2F2F2;
border: 1px solid #F2F2F2;
margin-top: -1px;
visibility: hidden;
z-index: 2;
background-color: white;
}
.my-tb:hover .my-tb1 {
visibility: visible;
}
.my-tb1 li {
width: 96px;
height: 28px;
float: left;
margin-left: -14px;
text-align: center;
visibility: hidden;
}
.my-tb:hover .my-tb1 li {
visibility: visible;
}
/* 下拉· */
.nav-tu1{
position: relative;
}
.nav-tu{
}
.nav-tu li {
position: absolute;
width: 175px;
height: 227px;
background-color: red;
z-index: 5;
text-align: center;
background: url(./img/二维码.png) no-repeat white;
background-size: 175px;
visibility: hidden;
position: absolute;
left: -60px;
box-shadow: 1px 1px 10px #999;
}
.nav-tu img {
margin-top: 185px;
}
.nav-tu1:hover .nav-tu li {
visibility: visible;
}
.nav-tu1:hover .tu-sj {
visibility: visible;
}
.tu-sj {
position: absolute;
left:20px;
border: 8px solid yellow;
border-color: transparent transparent white transparent;
top: 12px;
z-index: 6;
visibility: hidden;
}
/* 上面是下拉二维码 */
/* 右导航栏 */
.h-all,
.f-all {
width: 1190px;
height: 120px;
margin: 0 auto;
line-height: 120px;
/* background-color: aquamarine; */
}
.header-left {
float: left;
}
.h-img1 {
height: 40px;
float: left;
margin: 35px 20px 0 0;
}
.h-img2 {
height: 16px;
}
.header-right {
float: right;
margin-top: 42px;
}
.hr-1 {
height: 30px;
width: 347px;
border: 3px solid #7A45E5;
float: left;
z-index: 1;
}
.hr-2 {
height: 36px;
width: 90px;
background: linear-gradient(to right, #7A45E5, #B23CEF);
float: right;
}
.hr-2 span {
float: left;
margin: -40px 0 -0 25px;
color: white;
}
/* 头部 */
.main-head {
height: 38px;
border-bottom: 1px solid #7A45E5;
}
.main-head a {
color: black;
}
.main-center {
height: 38px;
width: 1190px;
margin: 0 auto;
/* background-color: yellow; */
}
.main-head li {
height: 38px;
line-height: 38px;
float: left;
font-size: 14px;
}
.mh-one {
width: 180px;
background: linear-gradient(to right, #7A45E5, #B23CEF);
/* text-align: center; */
padding-left: 20px;
}
.mh-one a {
color: white;
}
.mh-two {
width: 120px;
font-weight: bold;
text-align: center;
/* background-color: red; */
}
.mh-two a {
color: #7A45E5;
}
.mh-three {
width: 56px;
margin-right: 40px;
}
/* 上面导航 */
.main-main {
width: 1190px;
margin: 0 auto;
position: relative;
}
.mm li {
width: 200px;
height: 84px;
background-color: #333333;
}
/* 下面横拉 */
.item {
width: 640px;
background-color: white;
position: absolute;
left: 200px;
z-index: 60;
visibility: hidden;
padding: 0 30px;
}
.i0 {
height: 509px;
}
.it3,
.it4,
.it5 {
float: right;
}
.mm-1:hover .item {
visibility: visible;
}
.item12 a:hover {
text-decoration: underline;
color: red;
}
.mm-22:hover .item {
visibility: visible;
}
.i1 {
height: 584px;
top: 0px;
}
.i2 {
height: 470px;
top: 0px;
}
.mm-3:hover .item {
visibility: visible;
}
.i3 {
height: 507px;
top: 0px;
}
.mm-4:hover .item {
visibility: visible;
}
.i4 {
height: 470px;
top: 0px;
}
.mm-5:hover .item {
visibility: visible;
}
.item-1 {
height: 140px;
width: 300px;
/* background-color: red; */
z-index: 19;
margin: 15px 10px;
float: left;
}
.item-11 {
width: 300px;
height: 30px;
font-weight: bold;
border-bottom: 1px solid black;
color: #333333;
}
.item12 {
width: 300px;
height: 90px;
/* background-color: blueviolet; */
}
.item12 a {
text-indent: 0;
margin: 4px 4px 4px 0;
float: left;
color: #666666;
/* background-color: yellow; */
}
.nl1 {
float: left;
margin: 7px 8px 0;
}
.item12 .i-red {
color: red;
z-index: 20;
}
.it2 {
position: absolute;
top: 100px;
}
.it3,
.it4,
.it5 {
float: right;
}
.mm>li>a {
display: block;
width: 160px;
margin: 0 auto;
color: white;
border-bottom: 1px dotted #545454;
}
.mm-tu img {
width: 24px;
float: left;
margin-top: 20px;
}
.tu-font {
font-size: 16px;
float: left;
font-weight: bold;
margin: 15px 10px;
}
/* .mm .fu {
position: absolute;
top: 0px;
left: 570px;
z-index: 50;
background-color: transparent;
visibility: hidden;
} */
.mm-1:hover .fu {
visibility: visible;
}
.font {
font-size: 12px;
float: left;
}
.mm-1 a {
border: none;
}
/* 左边导航 */
.lbt {
width: 750px;
height: 420px;
position: absolute;
top: 0px;
left: 200px;
/* background-color: red; */
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.hr-2 {
font-size: 16px;
/* font-weight: bold; */
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* swiper轮播图 */
.mm-er {
width: 240px;
height: 420px;
/* background-color: red; */
position: absolute;
top: 0px;
left: 950px;
}
.me-top {
height: 120px;
/* background-color: teal; */
}
.mm-er p {
color: #7A45E5;
text-align: center;
font-weight: bold;
}
.m-tmgj {
font-size: 18px;
padding-top: 30px;
}
.m-english {
font-size: 20px;
margin-top: 10px;
}
.me-top img {
height: 11px;
margin-top: 20px;
margin-left: 100px;
}
.mm-er>img {
margin: 10px 0 10px 20px;
}
.mm-2 {
font-size: 14px;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
.mm-3 {
font-size: 12px;
text-align: center;
}
/* 中部主体 */
header,
.main-head {
background-color: white;
}
body {
background-color: #F5F5F5;
}
.box {
width: 600px;
height: 40px;
margin: 0 auto;
/* background-color: red; */
padding-left: 400px;
margin-top: 30px;
margin-bottom: -30px;
}
.f-all {
height: 475px;
width: 1200px;
margin-top: 30px;
background-color: white;
position: relative;
text-align: center;
padding-right: 20px;
}
footer ul {
padding: 15px;
width: 117px;
height: 475px;
float: left;
/* background-color: red; */
}
footer a {
color: black;
}
footer li {
line-height: 17px;
margin-top: 15px;
font-size: 12px;
}
.f-tu {
width: 1040px;
height: 474px;
/* background-color: #545454; */
float: right;
}
.f-tu img {
margin-left: -40px;
}
.ft-1 {
width: 192px;
height: 474px;
border: 1px solid transparent;
/* background-color: green; */
}
.ft-1 img{
margin-left: 0px;
}
.ft-2 {
width: 398px;
height: 474px;
border: 1px solid #E8E8E8;
position: absolute;
top: 0px;
left: 352px;
}
.ft-21 {
height: 238px;
border: 1px solid #E8E8E8;
}
.ft-21 img {
height: 211px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.ft-21 div {
width: 111px;
float: left;
margin: 90px 0 0 50px;
font-size: 18px;
color: orange;
/* background-color: yellow; */
}
del {
font-size: 13px;
color: #A6A6A6;
text-decoration: line-through;
}
.ft-221 {
width: 199px;
height: 231px;
border: 1px solid #E8E8E8;
float: left;
}
.ft-221 img {
margin: 20px;
width: 160px;
float: right;
}
.ft-221 div {
height: 18px;
width: 111px;
position: absolute;
top: 390px;
left: 60px;
font-size: 18px;
color: orange;
/* background-color: yellow; */
}
.ft-222 img {
width: 160px;
position: absolute;
top: 270px;
left: 260px;
}
.ft-222 div {
height: 18px;
width: 111px;
position: absolute;
top: 390px;
left: 260px;
font-size: 18px;
color: orange;
}
.ft-3 {
width: 200px;
height: 474px;
border: 1px solid transparent;
position: absolute;
left: 750px;
top: 0px;
}
.ft-31 {
height: 237px;
border: 1px solid #E8E8E8;
}
.ft-31 img {
width: 160px;
position: absolute;
top: 20px;
left: 60px;
}
.ft-31 div {
position: absolute;
top: 140px;
left: 65px;
}
.ft-32 {
height: 234px;
border: 1px solid #E8E8E8;
}
.ft-32 img {
width: 160px;
position: absolute;
top: 260px;
left: 60px;
}
.ft-32 div {
position: absolute;
top: 380px;
left: 65px;
}
.mr- {
position: absolute;
top: 350px;
text-align: center;
}
.mr {
font-size: 20px;
color: white;
margin-left: 0px;
margin-bottom: -40px;
}
.more {
font-size: 12px;
color: white;
width: 80px;
margin: 0 40px;
border: 1px solid white;
border-color: white transparent white transparent;
line-height: 30px;
}
/* 底部,未完成 */
/* 图片右动 */
.ft-3 img:hover {
left: 10px;
}
.ft-21 img:hover {
position: absolute;
right: 5px;
}
.ft-221 img:hover {
position: absolute;
left: 5px;
}
.ft-222 img:hover {
position: absolute;
left: 255px;
}
.ft-32 img:hover {
position: absolute;
left: 50px;
}
.ft-31 img:hover {
position: absolute;
left: 50px;
}
.all {
height: 475px;
width: 279px;
border: 1px solid #E8E8E8;
margin: 0 auto;
background-color: #FFFFFF;
position: absolute;
top: 0px;
left: 951px;
z-index: 99;
}
.itemc,
.item1c {
height: 87px;
width: 130px;
float: left;
margin: 3px;
}
.itemc {
background-color: #FFFFFF;
visibility: hidden;
z-index: 99;
}
.b,
.c {
position: absolute;
height: 260px;
width: 260px;
border-radius: 5px;
}
.item1c {
background-color: #FFFFFF;
}
#a:hover .itemc {
visibility: visible;
transition: 1s;
}
.yuan,
.yuan1 {
width: 10px;
height: 10px;
background-color: red;
border-radius: 5px;
position: absolute;
top: 450px;
left: 150px;
}
.yuan1 {
left: 120px;
}
.b,
.c {
padding: 0px;
width: 279px;
margin-left: -21px;
margin-top: -10px;
}
.l-font {
font-size: 22px;
color: #999;
/* background-color: red; */
line-height: 41px;
width: 256px;
text-align: center;
margin-left: 10px;
border-bottom: 1px solid #737373;
}
.l-font span {
font-size: 18px;
color: #999;
}
.item1c img {
width: 90px;
margin-left: 10px;
}
.hg {
background-color: #EDEDED;
width: 130px;
color: #737373;
}
.itemc img {
width: 90px;
margin-left: 10px;
}
.ce-2 {
border: 1px solid #5C2694;
color: #5C2694;
box-sizing: border-box;
height: 40px;
line-height: 20px;
border-top: transparent;
text-align: center;
margin-top: 2px;
width: 38px;
font-size: 14px;
background-color: white;
float: right;
transition: all .2s;
/* visibility: hidden; */
}
aside li:hover {
visibility: visible;
transform: translateX(-40px);
/* display: block; */
}
aside {
width: 41px;
/* background-color: #ccc; */
height: 370px;
line-height: 20px;
margin: 0 auto;
margin-top: 150px;
/* 开启固定定位 */
position: fixed;
position: sticky;
top: 240px;
right: 60px;
float: right;
}
aside img {
width: 40px;
float: left;
transition: all 1s;
}
aside li {
margin: -5px 0 -5px -2px;
/* float: right; */
width: 80px;
transition: all .5s;
overflow: hidden;
background-color: #545454;
}
aside ul {
width: 38px;
overflow: hidden;
/* display: block; */
}
.i2 .item-11 {
font-size: 14px;
text-align: left;
}
.i2 {
font-size: 14px;
}
.xuan {
/* background-color: red; */
/* color: green; */
}
.mt-tb:hover .xuan {
transform: rotate(90deg);
}
.last-all {
width: 100%;
height: 394px;
background: linear-gradient(to right, #7A45E5, #B23CEF);
margin-top: 20px;
}
.last-all .tm-last {
width: 1190px;
height: 354px;
margin: 0 auto;
/* background-color: #F5F5F5; */
padding-top: 40px;
position: relative;
}
.tm-last .left {
height: 250px;
float: left;
/* background-color: #5C2694; */
}
.tm-last .left div {
margin: 0px 0px 20px;
}
.tml-1 img {
width: 160px;
}
.tm-last .left i {
font-size: 20px;
margin: 5px;
}
.tml-2 {
font-size: 12px;
color: #eee;
}
.tml-3 a,
.tml-4 a {
font-size: 14px;
color: #eee;
}
.tml-er {
height: 112px;
width: 112px;
background-color: #E8E8E8;
border-radius: 3px;
position: absolute;
top: 40px;
left: 240px;
color: white;
font-size: 12px;
text-align: center;
}
.tml-er img {
height: 104px;
margin: 4px;
}
.tm-last .right{
float: right;
}
.tm-last .right>ul>li{
float: left;
}
.tm-last .right>ul>li>a{
color: white;
font-size: 18px;
font-weight: bold;
margin-left: 80px;
}
.tm-last .right>ul>li>ul>li>a{
margin-left: 80px;
color: #C0A6F2;
font-size: 12px;
}
.tm-last .right>ul>li>ul>li{
margin-top: 5px;
}
.tm-last .right>ul>li>ul>li:hover{
text-decoration: underline;
}
.tm-last .bottom{
height: 104px;
width: 1190px;
/* background-color: aquamarine; */
display: inline-block;
}
.tm-last .b-cen{
height: 52px;
/* background-color: #5C2694; */
margin-top: 26px;
border-top: 1px solid white;
}
.tm-last .b-cen p,
.tm-last .b-cen span{
font-size: 12px ;
color: #C0A6F2;
margin: 0 1px 0 4px;
line-height: 26px;
}
.tm-last .b-cen p{
margin-top: 10px;
}
因效果图放上会被违规就不放了
大家可以搜索天猫国际
和原网站90%相似