菜单 搜索
首页 前端知识 html项目天猫商城（含有jquery）

html项目天猫商城（含有jquery）

2024-08-24 23:08:01 前端知识 前端哥 437 995 我要收藏

目录

 效果图

GitHub  仓库链接

布局

项目实战.html

项目实战.css

rest.css

 效果图

GitHub  仓库链接

GitHub - webyifengwu/webDemo

布局

项目实战.html

<!DOCTYPE html>
<html lang="zh-cn">
<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="icon" href="./img/天猫图标.png">
    <link rel="stylesheet" href="./css/rest.css">
    <link rel="stylesheet" href="./css/项目实战.css">
    
    <!-- 引入swipercss文件样式 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> 
</head>
<body>
    <a href="top"></a>
    <!-- 头部广告 -->
    <header>
        <a href="#" target="_new"><img src="./img/头部广告.jpg" alt=""></a>
    </header>
    <!-- 头部导航 -->
    <nav>
       <div class="nav-container">
        <div class="left" >
            <span>喵，欢迎来天猫</span>
            <a href="#">请登录</a>
            <a href="#">免费注册</a>
        </div>
        <!-- 右边导航 -->
        <ul class="right" >
            <li class="delta"><a>我的淘宝<b></b></a><div class="menu_01"><a href="">已买到的宝贝</a><a href="">已卖出的宝贝</a></div></li>
            <li><a><span class="iconfont" style="color: red;font-size: 12px;">&#xe674;</span>购物车</a></li>
            <li class="delta"><a>收藏夹<b></b></a><div class="menu_02"><a href="">收藏的宝贝</a><a href="">收藏的店铺</a></div></li>
            <li><span>|</span><a><span class="iconfont" style="color: red;font-size: 12px;">&#xe644;</span>手机版</a>
            <div class="pic">
                    <img src="./img/小熊.png" alt="">
                    
            </div>
            </li>
            <li><a href="#">淘宝网</a></li>
            <!-- 第六个li -->
            <li class="delta"><a>商家支持<b></b></a>
                <div class="menu_03">
                    <p>商家：</p>
                <ul class="busi">
               <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 >
            <p>帮助：</p>
            <ul class="help">
                <li><a href="">商家服务大厅</a></li>
                <li><a href="">问商友</a></li>
            </ul>
        </div></li>

            <li class="tu" ><a> <span class="iconfont" style="color: red; font-size: 12px;">&#xe63b;</span>网站导航<b></b></a>
          <!-- 第四个虚拟窗口 -->
            <div class="menu_04">
                <div class="box_01"><h3>热点推荐&nbsp;Hot</h3>
                <ul class="hot">
                    <li><a href="">天猫超市</a></li>
                    <li><a href="">喵鲜生</a></li>
                    <li><a>科技产品<sup style="background-color: rgb(50, 243, 50); color: white;">N</sup></a></li>
                    <li><a>女装新品<sup style="background-color: red; color: white;">H</sup></a></li>
                    <li><a>酷玩街</a></li>
                    <li><a>内衣新品<sup style="background-color: red; color: white;">H</sup></a></li>
                   <li><a href="">试美妆</a></li>
                    <li><a href="">运动新品</a></li>
                    <li><a href="">时尚先生<sup style="background-color: red; color: white;">H</sup></a></li>
                    <li><a href="">精明妈咪</a></li>
                    <li><a href="">吃乐会<sup style="background-color: rgb(50, 243, 50); color: white;">N</sup></a></li>
                    <li><a href="">企业采购</a></li>
                    <li><a href="">会员积分</a></li>
                    <li><a href="">天猫国际</a></li>
                    <li><a href="">品质频道</a></li>
                </ul>
                </div>
                <div class="box_02"><h3>行业市场&nbsp;Market</h3>
                    <ul class="market">
                        <li><a href="">美妆</a></li>
                        <li><a href="">电器</a></li>
                        <li><a>女装<sup style="background-color: red; color: white;">H</sup></a></li>
                        <li><a>男装<sup style="background-color: red; color: white;">H</sup></a></li>
                        <li><a>女鞋</a></li>
                        <li><a>男鞋</a></li>
                       <li><a href="">内衣<sup style="background-color: red; color: white;">H</sup></a></li>
                        <li><a href="">箱包</a></li>
                        <li><a href="">运动</a></li>
                        <li><a href="">母婴</a></li>
                        <li><a href="">家装<sup style="background-color: rgb(50, 243, 50); color: white;">N</sup></a></li>
                        <li><a href="">医药</a></li>
                        <li><a href="">食品</a></li>
                        <li><a href="">配饰<sup style="background-color: rgb(50, 243, 50); color: white;">N</sup></a></li>
                        <li><a href="">汽车</a></li>
                    </ul>
                </div>
                <div class="box_03">
                    <h3>服务指南&nbsp;Help</h3>
                <ul class="help">
                    <li><a href="">帮助中心</a></li>
                    <li><a href="">品质保障</a></li>
                    <li><a href="">特色服务</a></li>
                    <li><a href="">7天退换货</a></li>
                </ul>
             </div>
            
            </li>
        </ul>
        </div>
    </nav>
      <!-- 头部搜索栏 区域-->
        <div class="top">
            <div class="search">
                <!-- logo区域 -->
                <div class="logo">
                    <a href="">
                        <img src="./img/logo.png" alt="">
                    </a>
                </div>
                <!-- 搜索栏 -->
                <div class="find">
                    <input type="text" name="search" placeholder="搜索 天猫 商品/品牌/店铺">
                    <button>搜索</button>
                </div>
            </div>
                <div class="sign">
                    <!-- 菜单区 -->
                <div class="sidar-sign">
                   <span><span class="iconfont">&#xe63b;</span>  商品分类</span>
                   <div class="nav_side">
                        <ul>
                            <!-- 第一个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe603;</span>女装/内衣</a>
                                <div class="wrap_01">
                                    <!-- 第1个元素 -->
                                    <div class="element_01">
                                        <p>当季流行</p>
                                        <ul>
                                            <li><a href="">女装新品</a></li>
                                            <li><a href="">商场同款</a></li>
                                            <li><a href="">仙女连衣裙</a></li>
                                            <li><a href="">T恤</a></li>
                                            <li><a href="">衬衫</a></li>
                                            <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>
                                    <!-- 第2个元素 -->
                                    <div class="element_01">
                                        <p>当季流行</p>
                                        <ul>
                                            <li><a href="">女装新品</a></li>
                                            <li><a href="">商场同款</a></li>
                                            <li><a href="">仙女连衣裙</a></li>
                                            <li><a href="">T恤</a></li>
                                            <li><a href="">衬衫</a></li>
                                            <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>
                                    <!-- 第3个元素 -->
                                    <div class="element_01">
                                        <p>当季流行</p>
                                        <ul>
                                            <li><a href="">女装新品</a></li>
                                            <li><a href="">商场同款</a></li>
                                            <li><a href="">仙女连衣裙</a></li>
                                            <li><a href="">T恤</a></li>
                                            <li><a href="">衬衫</a></li>
                                            <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>
                                    <!-- 第4个元素 -->
                                    <div class="element_01">
                                        <p>当季流行</p>
                                        <ul>
                                            <li><a href="">女装新品</a></li>
                                            <li><a href="">商场同款</a></li>
                                            <li><a href="">仙女连衣裙</a></li>
                                            <li><a href="">T恤</a></li>
                                            <li><a href="">衬衫</a></li>
                                            <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>
                                      <!-- 第5个元素 -->
                                      <div class="element_01">
                                        <p>当季流行</p>
                                        <ul>
                                            <li><a href="">女装新品</a></li>
                                            <li><a href="">商场同款</a></li>
                                            <li><a href="">仙女连衣裙</a></li>
                                            <li><a href="">T恤</a></li>
                                            <li><a href="">衬衫</a></li>
                                            <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>
                                      <!-- 第6个元素 -->
                                      <div class="element_01">
                                        <p>当季流行</p>
                                        <ul>
                                            <li><a href="">女装新品</a></li>
                                            <li><a href="">商场同款</a></li>
                                            <li><a href="">仙女连衣裙</a></li>
                                            <li><a href="">T恤</a></li>
                                            <li><a href="">衬衫</a></li>
                                            <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>
                                     
                                    
                                </div>
                            </li>
                            <!-- 第二个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe90b;</span>男装/运动户外</a>
                                <div class="wrap_02">
                                    
                                </div>
                            </li>
                            <!-- 第三个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe626;</span> 女鞋 /男鞋 /箱包</a>
                                <div class="wrap_03">
                                    
                                </div>
                            </li>
                            <!-- 第四个菜单 -->
                            <li><a href="">
                                <span class="iconfont">&#xe60b;</span> 美妆 /个人护理</a>
                                <div class="wrap_04">
                                    
                                </div>
                            </li>
                            <!-- 第五个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe676;</span>  腕表 /眼镜 /珠宝饰品</a>
                                <div class="wrap_05">
                                    
                                </div>
                            </li>
                             <!-- 第六个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe601;</span> 手机 /数码 /电脑办公</a>
                                <div class="wrap_06">
                                    
                                </div>
                            </li>
                             <!-- 第七个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe60e;</span> 母婴玩具</a>
                                <div class="wrap_07">
                                    
                                </div>
                            </li>
                             <!-- 第八个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe625;</span> 零食 /茶酒 /进口食品</a>
                                <div class="wrap_08">
                                    
                                </div>
                            </li>
                             <!-- 第九个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe631;</span>  生鲜水果</a>
                                <div class="wrap_09">
                                    
                                </div>
                            </li>
                             <!-- 第十个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe623;</span> 大家电 /生活电器</a>
                                <div class="wrap_010">
                                    
                                </div>
                            </li>
                             <!-- 第十一个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe60f;</span>家具建材</a>
                                <div class="wrap_011">
                                    
                                </div>
                            </li>
                             <!-- 第十二个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe61d;</span> 汽车 /配件 /用品</a>
                                <div class="wrap_012">
                                    
                                </div>
                            </li>
                             <!-- 第十三个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe619;</span> 家纺 /家饰 /鲜花</a>
                                <div class="wrap_013">
                                    
                                </div>
                            </li>
                             <!-- 第十四个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe6fe;</span> 医药保健</a>
                                <div class="wrap_014">
                                    
                                </div>
                            </li>
                             <!-- 第十五个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe602;</span> 厨具 /收纳 /宠物</a>
                                <div class="wrap_015">
                                    
                                </div>
                            </li>
                             <!-- 第十六个菜单 -->
                            <li>
                                <a href=""><span class="iconfont">&#xe70a;</span> 图书音像</a>
                                <div class="wrap_016">
                                    
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
              
                    <div class="pic">
                        <a><img src="./img/天猫超市.png" alt=""></a>
                        <a><img src="./img/天猫国际.png" alt=""></a>
                    </div>
                    <ul class="list">

                        <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>
        </div>
        <div >

        </div>
            <!-- 轮播图区域 -->
     <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #F77619;">
                <div class="main-banner">
                    <img src="https://img.alicdn.com/imgextra/i3/O1CN01Am8Sra21Zaice06ax_!!6000000006999-2-tps-1130-500.png_q100.jpg_.webp" alt="">
                </div>
            </div>
            <div class="swiper-slide" style="background-color: #E8E8E8;">
                <div class="main-banner">
                    <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" alt="">
                </div>
            </div>
            <div class="swiper-slide" style="background-color: #023353;">
                <div class="main-banner">
                    <img src="https://img.alicdn.com/imgextra/i3/6000000005596/O1CN01kntVM21rD15gyAIyX_!!6000000005596-0-octopus.jpg" alt="">
                </div>
            </div>
            <div class="swiper-slide" style="background-color: #E8E8E8;">
                <div class="main-banner">
                    <img src="https://aecpm.alicdn.com/simba/img/TB1_JXrLVXXXXbZXVXXSutbFXXX.jpg" alt="">
                </div>
            </div>
            <div class="swiper-slide" style="background-color: #718CF5;">
                <div class="main-banner">
                    <img src="https://img.alicdn.com/tfs/TB1_1OLxQL0gK0jSZFtXXXQCXXa-1130-500.jpg_q100.jpg_.webp" alt="">
                </div>
            </div>
            <div class="swiper-slide" style="background-color: #F6712C;">
                <div class="main-banner">
                    <img src="https://img.alicdn.com/tps/i4/i3/6000000003435/O1CN01fS1G4M1bFHA2rvIwi_!!6000000003435-0-ald.jpg_q100.jpg_.webp" alt="">
                </div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>      
     </div>
    <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  
    <script>
        let mySwiper = new Swiper ('.swiper-container', {
            // 分页器样式  
            pagination: {
                // 选择到你的分页类名
                el: '.swiper-pagination',
                //点击分页 切换你的轮播图
                clickable :true,
            },
            centeredSlides:true,
            // 自动切换
            // autoplay:true,
            autoplay:{
                //自动切换时间间隔
                delay: 2000,
            },
            // 切换效果
            effect: 'fade',
            // 无限循环播放
            loop:true
        });
    </script>
    <!-- 品牌图标 -->
        <div class="brand">
            <img src="./img/品牌.jpg" alt="">
        </div>
        <!-- 天猫超市 -->
        <div class="TMmarket">
            <div class="pic"><img src="./img/天猫超市头标.png" alt=""></div>
            <div class="left">
                <img src="./img/水果.png" alt="">
                <div class="text">
                    <ul>
                        <li>韩国</li>
                        <li>进口</li>
                    </ul>
                    <ul>
                        <li>天猫专享</li>
                        <li>进口水果</li>
                    </ul>
                </div>
                <div class="tu">
                    <img src="./img/图标箭头.png" alt="">
                </div>
            </div>
            <div class="right">
                <ul>
                    <!-- 第一个商品 -->
                    <li><a href="">
                        <ul>
                            <li>量贩装</li>
                            <li ></li>
                        </ul>
                        <div class="triangle">
                            <div>
                                <img src="./img/勾.png" alt="" width="23" height="23">
                                <p>单件包邮</p>
                            </div>
                            <p>低价享不停</p>
                           
                        </div>
                        <img src="./img/虾.png" alt="" width="230" height="230">

                    </a></li>
                    <!-- 第二个商品 -->
                    <li><a href="">
                        <div class="pic"><img src="./img/蛋白秫.png" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div>
                    </a></li>
                    <!-- 第三个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/洗衣液.png" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                             <!-- 第四个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/手机.png" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                             <!-- 第五个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/牙膏.png" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                             <!-- 第六个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/啤酒.png" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                             <!-- 第七个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/拖把.png" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                </ul>
            </div>
        </div>
        <!-- 天猫国际 -->
        <!-- 天猫国际图标 -->
        <div class="TMALL"><img src="./img/天猫国际头标.png" alt=""></div>
        <!-- 天猫国际正式栏 -->
        <div class="TMLL_list">
            <!-- 左边 -->
            <div class="left">
                <ul>
<li><a href=""><img src="./img/紫色.jpg" alt="">  
     <div class="text">
    <ul>
        <li>进口</li>
        <li>尖货</li>
    </ul>
    <ul>
        <li>国庆狂欢节</li>
        <li>爆款直降</li>
    </ul>
</div>
<div class="tu">
    <img src="./img/图标箭头.png" alt="">
</div></a></li>

<li><a href=""><img src="./img/红色.jpg" alt="">
    <div class="text">
        <ul>
            <li>进口</li>
            <li>品质</li>
        </ul>
        <ul>
            <li>直营精选</li>
            <li>一触即达</li>
        </ul>
    </div>
    <div class="tu">
        <img src="./img/图标箭头.png" alt="">
    </div>
    
</a></li>
                </ul>
               
            </div>
            <!-- 右边 -->
            <div class="right">
                <ul>
                    <!-- 第1个商品 -->
                    <li><a href="">
                        <div class="pic"><img src="./img/化妆水.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>美白更美颜</p>
                        <p>化妆水</p>
                        <p>￥29.8</p>
                        </div>
                    </a></li>
                    <!-- 第2个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/手表.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>华为手机通用可以接</p>
                        <p>打电话的只能手表多</p>
                        <p>¥548</p>
                        </div></a></li>
                             <!-- 第3个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/洗面奶.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                             <!-- 第4个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/绿色.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                             <!-- 第5个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/跑鞋.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                             <!-- 第6个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/敞口瓶.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                                  <!-- 第7个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/内裤.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                                  <!-- 第8个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/咽喉片.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
    
                </ul>
            </div>
        </div>
        <!-- 美丽人生 -->
        <!-- 美丽人生的广告牌 -->
        <div class="life_adv">
<img src="./img/美丽人生广告牌.jpg" alt="">
        </div>
        <!-- 美丽人生的标题区 -->
        <div class="life_title">
            <p>||| 美丽人生 FANSHION & BEAUTY</p>
        </div>
        <!-- 美丽人生商品区 -->
        <div class="life">
            <div class="left">
                <img src="./img/漂亮的小姐姐.png" alt="">
                <div class="text">
                    <ul>
                        <li>焕新</li>
                        <li>换型</li>
                    </ul>
                    <ul>
                        <li>时尚女装</li>
                        <li>优雅而知性</li>
                    </ul>
                </div>
                <div class="tu">
                    <img src="./img/图标箭头.png" alt="">
                </div>
            </div>
            <div class="right">
                <ul>
                    <!-- 第1个商品 -->
                    <li><a href="">
                        <div class="pic"><img src="./img/美丽人生2.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>美白更美颜</p>
                        <p>化妆水</p>
                        <p>￥29.8</p>
                        </div>
                    </a></li>
                    <!-- 第2个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/美丽人生3.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>华为手机通用可以接</p>
                        <p>打电话的只能手表多</p>
                        <p>¥548</p>
                        </div></a></li>
                             <!-- 第3个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/美丽人生4.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                             <!-- 第4个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/美丽人生5.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                             <!-- 第5个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/美丽人生6.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                             <!-- 第6个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/美丽人生7.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                                  <!-- 第7个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/美丽人生8.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
                                  <!-- 第8个商品 -->
                    <li><a href=""><div class="pic"><img src="./img/美丽人生9.jpg" alt="" ></div>
                        <div class="text">                        
                        <p>比比赞蛋黄酥雪媚娘</p>
                        <p>爆款12枚整箱早餐面</p>
                        <p>￥29.8</p>
                        </div></a></li>
    
                </ul>
            </div>
        </div>
     
  <!--天猫底部导航区-->
  <div class="TMfooter">
    <div class="footer">
        <a href="#">
            <img src="./img/foot1.png" alt="">
        </a>
        <a href="#">
            <img src="./img/foot2.png" alt="">
        </a>
        <a href="#">
            <img src="./img/foot3.png" alt="">
        </a>
        <a href="#">
            <img src="./img/foot4.png" alt="">
        </a>
        <div class="footer-content">
            <dl>
                <dt>
                    <h5>购物指南</h5>
                </dt>
                <dd><a href="#">免费注册</a></dd>
                <dd><a href="#">开通支付宝</a></dd>
                <dd><a href="#">支付宝充值</a></dd>
            </dl>
            <dl>
                <dt>
                    <h5>天猫保障</h5>
                </dt>
                <dd><a href="#">发票保障</a></dd>
                <dd><a href="#">售后规则</a></dd>
                <dd><a href="#">缺货赔付</a></dd>
            </dl>
            <dl>
                <dt>
                    <h5>支付方式</h5>
                </dt>
                <dd><a href="#">快捷支付</a></dd>
                <dd><a href="#">信用卡</a></dd>
                <dd><a href="#">余额宝</a></dd>
                <dd><a href="#">蚂蚁花呗</a></dd>
                <dd><a href="#">货到付款</a></dd>
            </dl>
            <dl>
                <dt>
                    <h5>商家服务</h5>
                </dt>
                <dd><a href="#">天猫规则</a></dd>
                <dd><a href="#">商家入驻</a></dd>
                <dd><a href="#">商家中心</a></dd>
                <dd><a href="#">天猫智库</a></dd>
                <dd><a href="#">物流服务</a></dd>
                <dd><a href="#">喵言喵语</a></dd>
                <dd><a href="#">运营服务</a></dd>
            </dl>
            <dl>
                <dt>
                    <h5>手机天猫</h5>
                </dt>
                <dd><img src="./img/foot5.png" alt=""></dd>
            </dl>
        </div>
    </div>
</div>
        <!-- 版权区域 -->
        <div class="copyright"></div>
       <!-- 固定跳转栏 -->
        <div class="fixed">
            <ul>
                <li>导航</li>
                <li><a href="">天猫超市</a></li>
                <li><a href="">天猫国际</a></li>
                <li><a href="">美丽人生</a></li>
                <li><a href="">潮店酷玩</a></li>
                <li><a href="">居家生活</a></li>
                <li><a href="">打造爱巢</a></li>
                <li><a href="">户外出行</a></li>
                <li><a href="">猜你喜欢</a></li>
                <li><a href="#top"><span class="iconfont">&#xe64a;<br></span>顶部</a></li>
            </ul>
        </div>
</body>
</html>

项目实战.css

header
{
    /* position: relative; */
    width: 100%;
    height: 80px;
    background-color: rgb(206, 11, 34);
}
header>a
{
    /* position: absolute; */
    /* left: 750px; */
display: block;
width: 990px;
height: 100%;
margin: 0px auto;
}
header>a>img
{
    width: 100%;
    height: 100%;
}
body
{
    background-color: #E0DFDF;
}
/* 导航 */
nav
{
    width: 100%;
    height: 30px;
    color: rgb(153, 153, 153);
    background-color: rgb(242, 242, 242);
    font-size: 12px;
    line-height: 30px;
}

nav a
{
color: rgb(153, 153, 153);
/* background-color: salmon; */
padding: 0 10px;
position: relative;

}

nav a:hover
{
    color: red;
}
nav>.nav-container
{
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    width: 1200px;
    height: 30px;
    /* background-color: salmon; */
    margin: 0 auto;
    
}
/* 右导航 */
nav>.nav-container>.right
{
    display: flex;
    /* background-color: rgb(40, 39, 136); */
}
nav>.nav-container>.right>li
{
   
    position: relative;
   
}
/* 三角形 */
nav>.nav-container>.right>li>a>b
{
    position: absolute;
    top: 7px;
width: 0;
height: 0;
border-width: 3px;
border-style: solid;
border-color: pink transparent transparent transparent;
line-height: 0;
font-size: 0;

/* transform:  */
}
/* hover三角形的旋转 */
nav>.nav-container>.right>li:hover b
{
    transform: rotate(180deg) translateY(2px);
}
nav>.nav-container>.right>li>.menu_01
{
    display: none;
width: 100px;
height: 55px;
background-color: white;
border: rgb(153, 153, 153) solid 1px;
border-top-style:none ;
transform: translateX(-1px);
/* display: none; */
}
/* 移动到处的效果 */
nav>.nav-container>.right>li>.menu_01 a:hover 
{
    text-decoration: underline;
}
/* 右导航栏的各个属性分开设置 */
nav>.nav-container>.right>li:nth-of-type(1)
{
    width: 70px;
    /* background-color: white; */
}
nav>.nav-container>.right>li>.menu_02
{
    display: none;
width: 100px;
height: 55px;
background-color: white;
border: rgb(153, 153, 153) solid 1px;
border-top-style:none ;
transform: translateX(-1px);
}
nav>.nav-container>.right>li>.menu_02 a:hover 
{
    text-decoration: underline;
}
nav>.nav-container>.right>li:nth-of-type(3)
{
    width: 70px;
   
}

/* 第六个li */
nav>.nav-container>.right>li>.menu_03
{
    margin-top: 10px;
 
    display: none;   
    width: 142px;
    height: 200px;
    border: #999 1px solid;
    border-top: none;
    transform: translateX(-73px);
}
nav>.nav-container>.right>li>.menu_03 a:hover
{
    text-decoration: underline;  
}

nav>.nav-container>.right>li>.menu_03>p:nth-of-type(1)
{
    padding:  0px 3px;
    margin-top: -10px;
    text-align: left;
    text-indent: 5px;
    color: rgb(48, 46, 46);
}
nav>.nav-container>.right>li>.menu_03>.busi
{
    margin-left: 3px;
    /* box-sizing: border-box;  */
    display: flex;
    flex-wrap: wrap;
    width: 135px;
    height: 110px;
    border-bottom: dashed #999 1px;
}
nav>.nav-container>.right>li>.menu_03>.busi>li>a
{
    display: block;
    /* margin-bottom: -20px; */
    /* background-color: turquoise; */
    width: 50px;
    height: 20px;
    padding: 0px 5px;
    line-height: 30px;
    
}
/* 帮助栏 */
nav>.nav-container>.right>li>.menu_03>p:nth-of-type(2)
{
    padding: 3px;
    margin-top: -5px;
    text-align: left;
    text-indent: 5px;
    color: rgb(48, 46, 46);
}
nav>.nav-container>.right>li>.menu_03>.help
{
    /* padding: 3px; */
    margin-left: 3px;
    /* background-color: tomato; */
    height: 60px;
    width: 135px;
    border-bottom: dashed #999 1px;
}
nav>.nav-container>.right>li>.menu_03>.help>li>a
{
    display: block;
    /* margin-bottom: -20px; */
    /* background-color: turquoise; */
    
    padding: 0px 5px;
    line-height: 30px;
    
}
nav>.nav-container>.right>li:nth-of-type(6)
{
    width: 70px;
   /* background-color: white; */
}

/* 移动到小三角的效果 */
nav .right>.delta>a:hover 
{
    text-decoration: underline;
}
nav .right>.delta:hover .menu_01
{
    display: block;
background-color: white;
}
nav .right>.delta:hover .menu_02
{
    display: block;
  
background-color: white;
}
nav .right>.delta:hover .menu_03
{
    display: block;
 
background-color: white;
}
nav .right>.tu:hover .menu_04
{
display: flex;
background-color: white;
z-index: 103;
}
nav .right>.delta:hover
{
    background-color: white;
}
nav .right>.tu:hover 
{
    
 
background-color: white;
}
/* 第四个菜单 */
.menu_04
{
    position: absolute;
    right: 0px;
    display: flex;
   
display: none;
    width: 1200px;
    height: 165px;
    border: #999 solid 1px;
    border-top: none;
   
}
.menu_04 a
{
    color: #999;
}
.menu_04 a:hover
{
    color: red;
    text-decoration: underline;
}
.menu_04 li
{
    
    width: 80px;
    height: 25px;
}
/* 盒子一 */
.menu_04>.box_01
{
   
  margin: 20px ;
    width: 500px;
    height: 125px;
    border: 1px solid #999;
    border-top:none ;
    border-bottom:none ;
    border-left:none ;
}
.menu_04>.box_01>h3
{
    color: orange;
}
.menu_04>.box_01>.hot
{
    display: flex;
    justify-content: space-evenly;
    align-content: space-evenly;
    width: 100%;
    height: 100px;
    flex-wrap: wrap;
    /* border:1px solid black ; */
}
/* 盒子二 */
.menu_04>.box_02
{
  margin: 20px ;
    width: 490px;
    height: 120px;
    border: 1px solid #999;
    border-top:none ;
    border-bottom:none ;
    border-left:none ;
}
.menu_04>.box_02>h3
{
    color: blue;
}
.menu_04>.box_02>.market
{
    display: flex;
    justify-content: space-evenly;
    align-content: space-evenly;
    width: 100%;
    height: 100px;
    flex-wrap: wrap;
    /* border:1px solid black ; */
}
/* 盒子三 */
.menu_04>.box_03
{
  margin: 20px ;
    width: 180px;
    height: 120px;
    /* border: 1px solid #999;
    border-top:none ;
    border-bottom:none ;
    border-left:none ; */
}
.menu_04>.box_03>h3
{
    color: #999;
}
.menu_04>.box_03>.help
{
    display: flex;
    justify-content: space-evenly;
    align-content: space-evenly;
    width: 100%;
    height: 100px;
    flex-wrap: wrap;
    /* border:1px solid black ; */
}
sup
{
    line-height: 10px;
}
nav>.nav-container>.right>li:nth-of-type(4)>.pic
{
    display: none;
    position: absolute;
    right: -50px;
    width: 180px;
    height: 230px;
    border: 1px solid red;
}
nav>.nav-container>.right>li:nth-of-type(4)>.pic>img
{
    width: 100%;
    height: 100%;
}
nav>.nav-container>.right>li:nth-of-type(4):hover .pic
{
display: block;
}
/* 图标 */
@font-face {
    font-family: 'iconfont';
    src: url('../天猫图标/iconfont.ttf') format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* 搜索栏加其他 */
  .top
  {
      /* display: flex; */
      width: 100%;
      height: 165px;
      /* background-color: antiquewhite; */
  }
/* 搜索栏区域 */
.top>.search
{
    display: flex;
    justify-content: space-between;
    width: 1015px;
    height: 135px;
    /* background-color: blueviolet; */
    margin: auto;
}
/* 搜索栏区域的logo */
.top>.search>.logo
{
    width: 200px;
    height: 100%;
    background-color: white;
}
.top>.search>.logo img
{
    height: 100%;
    width: 100%;
}
/* 搜索栏 */
.top>.search>.find
{
    display: flex;
    margin-top: 45px;
    width: 625px;
    height: 45px;
    border: red solid 2px;
}
/* 搜索输入框 */
.top>.search>.find>input
{
    width: 492px;
    height: 43px;
    background-color: white;
    border: none;
}
/* 搜索按钮 */
.top>.search>.find>button
{
width: 130px;
height: 46px;
background-color: red;
border: none;
}
/* 菜单标题 */
.top>.sign
{
    display: flex;
    width: 1015px;
    height: 30px;
    /* background-color: tomato; */
    margin: auto;
}
.top>.sign>.sidar-sign
{
    position: relative;
    line-height: 30px;
    font-size: 18px;
    font-weight: 600;
    text-indent: 15px;
    color: white;
    width: 200px;
    height: 100%;
    background-color: red;
}
.top>.sign>.pic
{
    display: flex;
    justify-content: space-evenly;
    width: 230px;
    height: 100%;
}
.top>.sign>.pic>a>img
{
    width: 100px;
    height: 30px;
}
/* 天猫国际右边的菜单 */
.top>.sign>.list
{
    display: flex;
    justify-content: space-between;
    width: 590px;
    height: 100%;
    /* background-color: turquoise; */

}
.top>.sign>.list>li
{
  
    width: 70px;
    height: 100%;
}
.top>.sign>.list>li>a
{
    line-height: 30px;
    color: rgb(51, 51, 51);
}
.top>.sign>.list>li>a:hover
{
    color: red;
}

/* 轮播样式 */
.swiper-container{
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #FF0036;
}


/* 轮播图片盒子 */
.main-banner{
    width: 1200px;
    height: 500px;
    /* background-color: #096; */
    margin: auto;
    /* border: 1px solid #096; */
}
.main-banner>img{
   width: 100%;
   height: 100%;
}

/* 分页按钮的样式 */
.swiper-pagination-bullet{
    width: 50px !important;
    border-radius: 1px !important;
    background-color: #ccc !important;
}
.nav_side
{
    z-index: 10001;
    position: absolute;
    top: 30px;
    left: 0px;
    width: 199px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.5);
    /* opacity: 0.6; */
}
.nav_side>ul
{
   
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.nav_side>ul>li
{
    
    width: 100%;
    font-size: 15px;
    letter-spacing: 1px;
}
.nav_side>ul>li>a
{
    
    color: #FFFFFF;
}
.nav_side>ul>li>a:hover
{
color: #FF0036;
}
/* 第一个菜单 */
.nav_side>ul>li:nth-of-type(1)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(1)>.wrap_01
{
   
    display: none;
    position: absolute;
    left: 199px;
    top: 0px;
    width: 800px;
    height: 500px;
    background-color:white;
 
}
.nav_side>ul>li:nth-of-type(1)>.wrap_01>.element_01
{
    display: flex;
    width: 635px;
    height: 80px;
    /* background-color: black; */
    border: rgb(199, 56, 104) 1px solid;
    border-top: none;
    border-left: none;
    border-right: none;
}
.nav_side>ul>li:nth-of-type(1)>.wrap_01>.element_01>p
{
  
    width: 110px;
    height: 65px;
    color: black;
    /* background-color: blueviolet; */
    
}
/* 第一个元素 */
.nav_side>ul>li:nth-of-type(1)>.wrap_01>.element_01>ul
{
    display: flex;
    flex-wrap: wrap;
    width: 525px;
    height: 65px;
    /* background-color: brown; */
    transform: translateY(15px);
}
.nav_side>ul>li:nth-of-type(1)>.wrap_01>.element_01>ul>li>a
{
    color: #999;
}
/* hover效果*/
.nav_side>ul>li:nth-of-type(1)>.wrap_01>.element_01>ul>li>a:hover
{
    color: rgb(206, 11, 34);
}
/* 第二个菜单 */
.nav_side>ul>li:nth-of-type(2)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(2)>.wrap_02
{
    display: none;
    position: absolute;
    left: 199px;
    top: -30px;
    width: 800px;
    height: 500px;
    background-color: white;
}
/* 第三个菜单 */
.nav_side>ul>li:nth-of-type(3)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(3)>.wrap_03
{
    display: none;
    position: absolute;
    left: 199px;
    top: -60px;
    width: 800px;
    height: 500px;
    background-color: White;
}
/* 第四个菜单 */
.nav_side>ul>li:nth-of-type(4)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(4)>.wrap_04
{
    display: none;
    position: absolute;
    left: 199px;
    top: -90px;
    width: 800px;
    height: 500px;
    background-color: White;
}
/* 第五个菜单 */
.nav_side>ul>li:nth-of-type(5)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(5)>.wrap_05
{
    display: none;
    position: absolute;
    left: 199px;
    top: -120px;
    width: 800px;
    height: 500px;
    background-color: White;
}
/* 第六个菜单 */
.nav_side>ul>li:nth-of-type(6)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(6)>.wrap_06
{
    display: none;
    position: absolute;
    left: 199px;
    top: -150px;
    width: 800px;
    height: 500px;
    background-color: White;
}
/* 第七个菜单 */
.nav_side>ul>li:nth-of-type(7)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(7)>.wrap_07
{
    display: none;
    position: absolute;
    left: 199px;
    top: -180px;
    width: 800px;
    height: 500px;
    background-color: White;
}
/* 第八个菜单 */
.nav_side>ul>li:nth-of-type(8)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(8)>.wrap_08
{
    display: none;
    position: absolute;
    left: 199px;
    top: -210px;
    width: 800px;
    height: 500px;
    background-color: White;
}
/* 第九个菜单 */
.nav_side>ul>li:nth-of-type(9)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(9)>.wrap_09
{
    display: none;
    position: absolute;
    left: 199px;
    top: -240px;
    width: 800px;
    height: 500px;
    background-color: White;
}

/* 第十个菜单 */
.nav_side>ul>li:nth-of-type(10)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(10)>.wrap_010
{
    display: none;
    position: absolute;
    left: 199px;
    top: -270px;
    width: 800px;
    height: 500px;
    background-color: White;
}
/* 第十一个菜单 */
.nav_side>ul>li:nth-of-type(11)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(11)>.wrap_011
{
    display: none;
    position: absolute;
    left: 199px;
    top: -300px;
    width: 800px;
    height: 500px;
    background-color: White;
}
/* 第十二个菜单 */
.nav_side>ul>li:nth-of-type(12)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(12)>.wrap_012
{
    display: none;
    position: absolute;
    left: 199px;
    top: -330px;
    width: 800px;
    height: 500px;
    background-color: White;
}
/* 第十三个菜单 */
.nav_side>ul>li:nth-of-type(13)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(13)>.wrap_013
{
    display: none;
    position: absolute;
    left: 199px;
    top: -360px;
    width: 800px;
    height: 500px;
    background-color: White;
}/* 第十四个菜单 */
.nav_side>ul>li:nth-of-type(14)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(14)>.wrap_014
{
    display: none;
    position: absolute;
    left: 199px;
    top: -390px;
    width: 800px;
    height: 500px;
    background-color: White;
}
/* 第十五个菜单 */
.nav_side>ul>li:nth-of-type(15)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(15)>.wrap_015
{
    display: none;
    position: absolute;
    left: 199px;
    top: -420px;
    width: 800px;
    height: 500px;
    background-color: White;
}/* 第十六个菜单 */
.nav_side>ul>li:nth-of-type(16)
{
position: relative;
}
.nav_side>ul>li:nth-of-type(16)>.wrap_016
{
    display: none;
    position: absolute;
    left: 199px;
    top: -450px;
    width: 800px;
    height: 500px;
    background-color: White;
}
.nav_side>ul>li:hover
{
    background-color: white;
}
.nav_side>ul>li:nth-of-type(n+1):hover>div
{
    display: block;
}
/* 品牌图标 */
.brand
{
    width: 1200px;
    height: 330px;
    margin: 20px auto;
    /* background-color: #FF0036; */
}
.brand>img
{
width: 100%;
height: 100%;
}
/* 天猫超市 */
.TMmarket
{
    /* display: flex; */
    width: 1200px;
    height: 660px;
    /* background-color: #FF0036; */
    margin: 10px auto;
}
/* 天猫超市头标 */
.TMmarket>.pic
{
    width: 100%;
    height: 30px;
    /* background-color: bisque; */
}
.TMmarket>.pic>img
{
    width: 215px;
    height: 30px;
}
/* 天猫超市左边 */
.TMmarket>.left
{
    float: left;
    position: relative;
margin: 5px;
    width: 230px;
    height: 620px;
    /* background-color: white; */
}
.TMmarket>.left>img
{
    width: 100%;
    height: 100%;
}
.TMmarket>.left>.text
{
    position: absolute;
    bottom: 140px;
    display: flex;
    width: 210px;
    height: 75px;
    /* background-color: chartreuse; */
    font-size: 20px;
   
    color: white;
    /* letter-spacing: 5px; */

}

.TMmarket>.left>.text>ul:nth-of-type(1)
{
width: 80px;
height: 75px;
background-color: #096;
opacity: 0.5;
text-indent: 22px;
font-weight: 600;
line-height: 40px;
}
.TMmarket>.left>.text>ul:nth-of-type(2)
{
    width: 130px;
    height: 75px;
    background-color: #999;
    opacity: 0.5;
    text-indent: 22px;
    line-height: 40px;
}
.TMmarket>.left>.tu
{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    /* background-color: crimson; */
}
.TMmarket>.left>.tu>img
{
    width: 100%;
    height: 100%;
}
/* 天猫超市右边 */
.TMmarket>.right>ul
{

    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 960px;
    height: 625px;
    /* background-color: darkgoldenrod; */
    /* border: skyblue 1px solid; */
}
/* 天猫超市右边第一个框 */
.TMmarket>.right>ul>li:nth-of-type(1)
{
    position: relative;
    width: 480px;
    height: 305px;
    background-color: white;

}
.TMmarket>.right>ul>li:nth-of-type(1)>a>ul
{
    position: absolute;
    top: 10px;
    left: 8px;
display: flex;
width: 464px;
height: 56px;

}
.TMmarket>.right>ul>li:nth-of-type(1)>a>ul>li:nth-of-type(1)
{
    width: 232px;
    height: 56px;
    color: white;
    font-size: 20px;
    font-weight: 500;
   text-indent: 80px;
   line-height: 50px;
   background-color: green;
}
.TMmarket>.right>ul>li:nth-of-type(1)>a>ul>li:nth-of-type(2)
{
    width: 232px;
    height: 56px;
    background-color: #999;
   
}
.TMmarket>.right>ul>li:nth-of-type(1)>a>.triangle
{
    position: relative;
    z-index: 2;
    position: absolute;
    bottom: 50px;
    left: 20px;
    width: 260px;
    height: 66px;
    background: linear-gradient(135deg,transparent 0,rgba(230, 228, 228,0.6) 0) top left, linear-gradient(-135deg,transparent 33px,rgba(230, 228, 228,0.6) 0) top right, linear-gradient(-45deg,transparent 33px,rgba(230, 228, 228,0.6) 0) bottom right, linear-gradient(45deg,transparent 0,rgba(230, 228, 228,0.6) 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
.TMmarket>.right>ul>li:nth-of-type(1)>a>.triangle>div
{
    position: absolute;
    left: 25px;
    top: 10px;
    width: 250px;
    height: 30px;
display: flex;
font-size: 16px;
/* background-color: #FF0036; */
color: #096;
font-weight: 600;
text-indent: 16px;
line-height: 0px;
}
.TMmarket>.right>ul>li:nth-of-type(1)>a>.triangle>p
{
    position: absolute;
    right: 70px;
    bottom:20px;
    font-size: 12px;
    color: black;
}
/* 虾 */
.TMmarket>.right>ul>li:nth-of-type(1)>a>img
{
    position: absolute;
    right: 30px;
    bottom: 9px;
}
/* 之后的 */
.TMmarket>.right>ul>li:nth-of-type(n+2)
{
   
    width: 230px;
    height: 300px;
    background-color: white;
}
.TMmarket>.right>ul>li:nth-of-type(n+2)>a
{
    position: relative;    
    width: 230px;
    height: 300px;
}
.TMmarket>.right>ul>li:nth-of-type(n+2)>a>.pic
{
  margin: 10px 25px 0px 25px ;
    width: 185px;
    height: 185px;
}
.TMmarket>.right>ul>li:nth-of-type(n+2)>a>.pic>img
{
    width: 100%;
    height: 100%;
}
.TMmarket>.right>ul>li:nth-of-type(n+2)>a>.text
{
    width: 100%;
    height: 90px;
    /* background-color: blueviolet; */
}
.TMmarket>.right>ul>li:nth-of-type(n+2)>a>.text>p
{
    margin-top: 5px;
    padding-top: 5px;
    text-align:center;
    color: black;
}
.TMmarket>.right>ul>li:nth-of-type(n+2)>a>.text>p:nth-of-type(3)
{
    color: red;
}

/* 天猫国际 */
/* 天猫国际图标 */
.TMALL
{
    display: flex;
    width: 1200px;
    height: 30px;
    margin: auto;
    /* background-color: tomato; */
}
.TMALL>img
{
    width: 215px;
    height: 30px;   
}
/* 天猫国际列表*/
.TMLL_list
{
    display: flex;
    width: 1200px;
    height: 630px;
    margin: auto;
    /* background-color: tomato; */
}
/* 左边 */
.TMLL_list>.left
{
    width: 240px;
    height: 630px;
    /* background-color: thistle; */
}
.TMLL_list>.left>ul
{
width: 240px;
height: 630px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
/* justify-content: space-between; */
/* background-color: yellow; */
}
.TMLL_list>.left>ul>li
{
width: 240px;
height: 300px;
/* background-color: rgb(35, 180, 125); */
}
.TMLL_list>.left>ul>li>a
{
    position: relative;
    display: block;
width: 230px;
height: 300px;
}
.TMLL_list>.left>ul>li>a>img
{
    width: 100%;
    width: 100%;
}
.TMLL_list>.left>ul>li>a>.text
{
position: absolute;
font-size: 20px;
top: 180px;
display: flex;
}
.TMLL_list>.left>ul>li>a>.text>ul:nth-of-type(1)
{
    width: 80px;
    height: 75px;
    text-align: center;
    font-weight: 600;
    line-height: 40px;
    background-color: #096;
    opacity: 0.5;
    color: white;
}
.TMLL_list>.left>ul>li>a>.text>ul:nth-of-type(2)

{
    width: 130px;
    height: 75px;
    /* text-indent: 22px; */
    text-align: center;
    line-height: 40px;
    background-color: #999;
    opacity: 0.5;
    color: white;
}
.TMLL_list>.left>ul>li>a>.tu
{
    position: absolute;
bottom: 10px;
right: 10px;
width: 35px;
height: 35px;
}
.TMLL_list>.left>ul>li>a>.tu>img
{
width: 100%;
height: 100%;
}
/* 右边的 */
/* 之后的 */
.TMLL_list>.right>ul
{
    /* margin-left: 20px; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 960px;
    height: 620px;
    /* background-color: rgb(34, 161, 72); */
    /* border: skyblue 1px solid; */
}
.TMLL_list>.right>ul>li:nth-of-type(n+1)
{
   
    width: 230px;
    height: 300px;
    background-color: white;
}
.TMLL_list>.right>ul>li:nth-of-type(n+1)>a
{
    position: relative;    
    width: 230px;
    height: 300px;
}
.TMLL_list>.right>ul>li:nth-of-type(n+1)>a>.pic
{
  margin: 10px 25px 0px 25px ;
    width: 185px;
    height: 185px;
}
.TMLL_list>.right>ul>li:nth-of-type(n+1)>a>.pic>img
{
    width: 100%;
    height: 100%;
}
.TMLL_list>.right>ul>li:nth-of-type(n+1)>a>.text
{
    width: 100%;
    height: 90px;
    /* background-color: blueviolet; */
}
.TMLL_list>.right>ul>li:nth-of-type(n+1)>a>.text>p
{
    margin-top: 5px;
    padding-top: 5px;
    text-align:center;
    color: black;
}
.TMLL_list>.right>ul>li:nth-of-type(n+1)>a>.text>p:nth-of-type(3)
{
    color: red;
}
/* 美丽人生 */
.life_adv
{
    width: 1200px;
    height: 95px;
    margin: 20px auto;
}
.life_adv>img
{
    width: 100%;
    height: 100%;
}
/* 美丽人生的标题区 */
.life_title
{
    width: 1200px;
    margin: auto;
    height: 30px;
    /* background-color: thistle; */
}
/* 美丽人生商品区 */
.life
{
    display: flex;
    width: 1200px;
    height: 600px;
    /* background-color: thistle; */
    margin: auto;

}
/* 左边 */
.life>.left
{
    /* float: left; */
    position: relative;
/* margin: 5px; */
    width: 230px;
    height: 600px;
    /* background-color: white; */
}
.life>.left>img
{
    width: 100%;
    height: 620px;
}
.life>.left>.text
{
    position: absolute;
    bottom: 140px;
    display: flex;
    width: 210px;
    height: 75px;
    /* background-color: chartreuse; */
    font-size: 20px;
   
    color: white;
    /* letter-spacing: 5px; */

}

.life>.left>.text>ul:nth-of-type(1)
{
width: 80px;
height: 75px;
background-color: #096;
opacity: 0.5;
text-indent: 22px;
font-weight: 600;
line-height: 40px;
}
.life>.left>.text>ul:nth-of-type(2)
{
    width: 130px;
    height: 75px;
    background-color: #999;
    opacity: 0.5;
    text-align: center;
    line-height: 40px;
}
.life>.left>.tu
{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    /* background-color: crimson; */
}
.life>.left>.tu>img
{
    width: 100%;
    height: 100%;
}
/* 右边 */


.life>.right>ul
{
    margin-left: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: space-between;
    width: 980px;
    height: 620px;
    /* background-color: rgb(34, 161, 72); */
    /* border: skyblue 1px solid; */
}
.life>.right>ul>li:nth-of-type(n+1)
{
   
    width: 230px;
    height: 300px;
    background-color: White;
    
}
.life>.right>ul>li:nth-of-type(n+1)>a
{
     
    width: 230px;
    height: 300px;
}
.life>.right>ul>li:nth-of-type(n+1)>a>.pic
{
  margin: 10px 25px 0px 25px ;
    width: 185px;
    height: 185px;
}
.life>.right>ul>li:nth-of-type(n+1)>a>.pic>img
{
    width: 100%;
    height: 100%;
}
.life>.right>ul>li:nth-of-type(n+1)>a>.text
{
    width: 100%;
    height: 90px;
    /* background-color: blueviolet; */
}
.life>.right>ul>li:nth-of-type(n+1)>a>.text>p
{
    margin-top: 5px;
    padding-top: 5px;
    text-align:center;
    color: black;
}
.life>.right>ul>li:nth-of-type(n+1)>a>.text>p:nth-of-type(3)
{
    color: red;
}
/* 声明区 */
.TMfooter{
    margin-top: 10px;
    width:100%;
    height:300px;
    background-color: white;
    transform: translateY(200px);
    border-top:1px solid #999;
}
.footer{
    width:1000px;
    height:100%;
    margin: 10px auto;
}
.footer>a>img{
    width:255;
    height:100px;
    transform: translateY(-10px);
    margin: 0px 8px;
}
.footer-content{
    width:1000px;
    height:250px;
    transform: translateY(-10px);
    border-top:1px solid rgb(204, 204, 204);
}
.footer-content>dl{
    float:left;
    margin:13px 80px 0px 50px;
}

.footer-content>dl>dd>a{
    font-size: 12px;
    color:#999;
}
dl>dd>img{
    width:105px;
    height:105px;
}
/* 版权区 */
.copyright
{
    width: 100%;
    height: 300px;
    background-color: black;
}
/* 天猫超市的hover效果 */
.TMmarket>.left:hover
{
    /* filter: blur(65px); */
    /* display: none; */
    opacity: 0.7;
}
.TMmarket>.right>ul>li:hover
{
    border: red 1px solid;
}
/* 天猫国际的hover效果 */
.TMLL_list>.left>ul>li>a:hover
{
    opacity: 0.6;
}
.TMLL_list>.right>ul>li:hover
{
    border: 1px solid red;
}
/* 美丽人生的hover效果 */
.life>.left:hover
{
    opacity: 0.7;
}
.life>.right>ul>li:hover
{
border: 1px solid red;
}
/* 固定跳转栏 */
.fixed
{
    position: fixed;
    top: 150px ;
    /* left: 30px ; */
    width: 40px;
    height: 410px;
    background-color: white;

}
.fixed>ul
{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    width: 40px;
    height: 410px;

}
.fixed>ul>li
{
    z-index: 20;
    width: 40px;
    height: 40px;
    background-color: burlywood;
    text-align: center;
    color: white;
}
.fixed>ul>li:nth-of-type(1)
{
    background-color: red;
    line-height: 40px;
}
.fixed>ul>li:nth-of-type(n+2)
{
    background-color: #626262;
    
}
.fixed>ul>li:nth-of-type(n+2)>a
{
    color: white;
}
.fixed>ul>li:nth-of-type(10)
{
background-color: #ABABAB;
}

rest.css

body,dl,dt,dd,h1,h2,h3,h4,h5,h6
{
    margin: 0;
}
ul,ol
{
    /* height: 0; */
    margin: 0;
    padding: 0;
    list-style: none;
}
img
{
    border: none;
}
button,input
{
    outline: none;
}
a{
    text-decoration: none;
}
p{
    /* margin-top: 0; */
    height: 0px;
    padding: 0;
}
转载请注明出处或者链接地址：https://www.qianduange.cn//article/16724.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

探索高效时间管理：jQuery DateTimePicker 开源项目推荐

2024-09-03 02:09:33

jQuery File Upload 使用教程

2024-09-03 02:09:33

jQuery笔记

2024-05-03 18:05:51

jquery ajax post 请求表单格式x-www-form-urlencoded

2024-09-03 02:09:28

推荐开源项目：jQuery-disablescroll，实现超流畅滚动体验！

2024-09-03 02:09:28

jQuery实现返回顶部按钮特效的代码教程

2024-09-03 02:09:27

推荐文章：打造优雅全屏编辑体验 —— jQuery Fullscreen Editor 深度解析与应用指南...

2024-09-03 02:09:27

jQuery-Spectragram 使用教程

2024-09-03 02:09:26

echarts问题汇总

2024-09-03 02:09:12

echarts自定义悬浮提示

2024-09-03 02:09:12

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
3

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
4

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
5

npm的使用

2024-08-18 00:08:131000
6

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
7

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
8

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
9

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
10

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！