页面重构初尝试

Web学习Day12——第一次尝试页面重构

美团网
在这里插入图片描述实现 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面重构——美团网</title>
    <link rel="stylesheet" href="./iconfont/font_1979981_8ws8fw10j1j/iconfont.css">
    <link rel="stylesheet" href="./iconfont2/font_1979981_hcdikqtj71g/iconfont.css">
     <style>
      /* 头部css代码 */
          header{ 
             width: 1190px;
             height:  122px;
             margin: 0 auto;
             padding-bottom: 35px;
         }
         div.header_top{ 
             width: 100%;
             height: 40px;
             margin-bottom: 35px;
             background-color: rgba(187, 182, 182, 0.185);
         }
         div.header_top_position{
           height: 100%;
           width: 408px;
           padding: 10px;
           word-spacing: 3px;
           float: left;
           color: rgba(116, 109, 109, 0.712);
            font-size: 12px;
           
         } 
         div.header_top_position a:hover,nav.header_top_nav ul li a:hover{
          color: rgba(255, 102, 0, 0.781);
         }
         div.near_city,div.user_entry{
           display: inline-block;
         
         }
         div.near_city a,div.user_entry a{
          text-decoration:none;
          color: rgba(116, 109, 109, 0.712);
          font-size: 12px;
         }
         /* div.user_entry a{
          text-decoration:none;
          color: rgba(116, 109, 109, 0.712);
          font-size: 12px;
         } */
         /* div.user_entry{
           display: inline-block;
          } */
          nav.header_top_nav{
           height: 100%;
           width: 387.2px;
           float: right;
          }
          nav.header_top_nav ul{
            width: 100%;
            height: 16px; 
            font-size: 12px;
            color:#999;
            list-style:none;
            float: right;
          }
          nav.header_top_nav ul li{
            float: right; 
          }
          nav.header_top_nav ul li a{
            color: rgba(116, 109, 109, 0.712);
            font-size: 12px;
            padding:12px 12px;
            text-decoration: none;
          }
          /* nav.header_top_nav ul li a:hover{
            
          } */
         div.header_center{ 
             width: 100%;
             height: 157px;
         }
         div.header_logo{
           box-sizing: content-box;
            width: 280px;
             height: 54px;
             float: left;
             padding-left: 12px;
         }
         div.header_logo>img{ 
             width: 126px;
             height: 50px; 
         }
        
         div.header-search{
             width: 550px;
             height: 40px;
             margin: 0 auto;
             text-align:center;
             padding-top: 10px;
         }
         div.header-search input{
           border: 1px solid #ccc;
           border-radius: 4px 0 0 4px;
           border-right: none;
           box-sizing: border-box;
           padding: 15px;
           font-size: 14px;
           height: 40px;
           width: 470px;  
           float :left ;
         }
         div.header-search button{ 
           width: 80px;
           height: 40px;
           border-radius: 0 4px 4px 0;
           float :left;
           border-left: none;
           text-shadow: none;
           background-color: rgb(250, 182, 54);
         }
         /* 体部CSS代码 */
          article{
              width: 1190px;
              height: 2424px;
              margin: 0 auto; 
              padding-bottom: 100px;
          } 
          div.article_header{
            width: 1190px;
              height: 35px;
              margin: 0 auto; 
          }
          div.category-nav-head{
            width: 228px;
            height: 30px;
            color: black; 
            font-weight: 700;
            font-size: 16px;
            font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            margin-left: 10px;
            float:left
          }
          div.header_nav{
            width: 680px;
            height: 30px;
            margin: 20 auto;  
           float: left;
          }
          
          div.header_nav a{
            color: black;
            font-weight: 700;
            font-size: 16px;
            text-decoration: none;
            margin: 0 20px;
            font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
          }
          div.header_nav a:hover{
            color: #f2be47;
          }
          div.category-nav{
             width: 225px;
             height: 420px;   
             float: left; 
             border: 1px solid #ccc;
          } 
          #outer{
            margin-left:20px;
            width: 225px;
            height: 425px;
            background-color: white; 
        } 
        #category-nav div{
            width: 200px;
            height: 26px;
            background-color:white;
            word-spacing: 3px;  
        }
        #category-nav div a:hover{
            color:black;
            font-weight: bold; 
        }
        #category-nav div:hover{
            background-color:rgba(243, 114, 39, 0.233);
        }
        #category-nav div a{
            font-size: 12px;
            color: rgb(138, 134, 134);
            text-decoration: none;
            word-spacing: 3px;
        } 
        #category-nav span{
          padding: 5px;
        }
        div.homepage{
          width: 1190px;
          height: 430px;
        }
          div.homepage1{
            width: 550px;
             height: 240px;  
             float: left; 
             margin: 5px;
          }
          div.homepage1 a>img{
            width: 550px;
             height: 240px;
          }
          div.homepage2{
            width:150px;
             height: 240px;  
             float: left;
             margin: 5px; 
          }
          div.homepage2 a>img{
            width:150px;
             height: 240px;
          }
          div.homepage3{
            width: 228px;
             height: 240px;  
             float: left; 
             margin: 5px; 
          }
          div.homepage3 a>img{
            width: 228px;
            height: 240px; 
         }
         div.homepage4,div.homepage5{
            width: 270px;
             height: 165px;  
             float: left; 
             margin: 5px;
          }
          div.homepage4 a>img,div.homepage5 a>img{
            width: 270px;
             height: 165px; 
          }

          div.homepage6{
            width: 150px;
             height: 165px;  
             float: left; 
             margin: 5px;
          }
          div.homepage6 a>img{
            width: 150px;
             height: 165px; 
         }
         div.homepage7{
            width: 228px;
             height: 165px;  
             float: left; 
             margin: 5px; 

          }
          div.homepage7 a>img{
            width: 228px;
            height: 165px; 
         }
         div.maoyan-movie-banner{
           margin-top: 20px;
           width: 100%;
           height: 44px;
           line-height: 44px;
           background-color:#fd4451;
           border-radius: 4px 4px 0 0;
           border-bottom: none;
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         ul.maoyan-movie-nav{
           margin: 0 0 0 10px;
           padding: 0;
           width: 100%;
           height: 44px;
           float: left;
           display:block;
         }
         ul.maoyan-movie-nav li{
          color: white;
           list-style-type: none;
           display:block;
           height: 44px; 
           float: left;
           padding: 0 12px;
         }
         ul.maoyan-movie-nav-more{
           color: white;
          list-style-type: none;
           display:block;
           height: 44px; 
           float: right;
           padding-right:20px ;
         }
         ul.maoyan-movie-nav li a,ul.maoyan-movie-nav-more a{
          color: white;
          text-decoration: none;
         }
         div.maoyan-movie-content{
           width: 100%;
           height: 300px;

         }
         div.mapyan-movie-content1,div.mapyan-movie-content2,div.mapyan-movie-content3,div.mapyan-movie-content4,div.mapyan-movie-content5,div.mapyan-movie-content6{
           width: 214px;
           height: 297.35px;
           float: left;
           margin:3px 12px;
         }
         div.mapyan-movie-content1 a>img,div.mapyan-movie-content2 a>img,div.mapyan-movie-content3 a>img,div.mapyan-movie-content4 a>img,div.mapyan-movie-content5 a>img,div.mapyan-movie-content6 a>img{
           width: 214px;
           height: 297.35px;
         }
  
         /* 推荐民宿部分 */
         div.recommend-homestay-banner{
           margin-top: 20px;
           width: 100%;
           height: 44px;
           line-height: 44px;
           background-color:#f2be47;
           border-radius: 4px 4px 0 0;
           border-bottom: none;
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         ul.recommend-homestay-nav{
           margin: 0 0 0 10px;
           padding: 0;
           width: 100%;
           height: 44px;
           float: left;
           display:block;
         }
         ul.recommend-homestay-nav li{
          color: white;
           list-style-type: none;
           display:block;
           height: 44px; 
           float: left;
           padding: 0 12px;
         }
         ul.recommend-homestay-nav-more{
           color: white;
          list-style-type: none;
           display:block;
           height: 44px; 
           float: right;
           padding-right:20px ;
         }
         ul.recommend-homestay-nav li a,ul.recommend-homestay-nav-more a{
          color: white;
          text-decoration: none;
         }
         div.recommend-homestay-content{
           width: 100%;
           height: 750px;
           margin-bottom:25px;
         }
         div.recommend-homestay-content1,div.recommend-homestay-content2,div.recommend-homestay-content3,div.recommend-homestay-content4,div.recommend-homestay-content5,div.recommend-homestay-content6{
           width: 370px;
           height: 355px;
           float: left;
           margin:12px;
         }
         div.recommend-homestay-content1 a>img,div.recommend-homestay-content2 a>img,div.recommend-homestay-content3 a>img,div.recommend-homestay-content4 a>img, div.recommend-homestay-content5 a>img, div.recommend-homestay-content6 a>img{
          width: 370px;
           height: 355px;
         }
         /* 猜你喜欢部分 */
         div.what-you-like-banner{
           margin-top: 20px;
           width: 100%;
           height: 44px;
           line-height: 44px;
           background-color:#4cb7d4;
           border-radius: 4px 4px 0 0;
           border-bottom: none;
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         ul.what-you-like-nav{
           margin: 0 0 0 10px;
           padding: 0;
           width: 100%;
           height: 44px;
           float: left;
           display:block;
         }
         ul.what-you-like-nav li{
          color: white;
           list-style-type: none;
           display:block;
           height: 44px; 
           float: left;
           padding: 0 12px;
         }
         ul.what-you-like-nav-more  {
           color: white;
          list-style-type: none;
           display:block;
           height: 44px; 
           float: right;
           padding-right:20px ;
         }
         ul.what-you-like-nav li a,ul.what-you-like-nav-more a{
          color: white;
          text-decoration: none;
         }
         div.what-you-like-content{
           width: 100%;
           height: 500px;

         }
         div.what-you-like-content1,div.what-you-like-content2,div.what-you-like-content3,div.what-you-like-content4,div.what-you-like-content5{
           width: 214px;
           height: 222px;
           margin: 10px;
           float: left;
         }
         div.what-you-like-content1 a>img,div.what-you-like-content2 a>img,div.what-you-like-content3 a>img,div.what-you-like-content4 a>img,div.what-you-like-content5 a>img{
          width: 214px;
           height: 222px;
         }
      
         div.what-you-like-content6,div.what-you-like-content7, div.what-you-like-content8, div.what-you-like-content9, div.what-you-like-content10{
           width: 214px;
           height: 222px;
           margin: 10px;
           float: left;
         }
         div.what-you-like-content6 a>img,div.what-you-like-content7 a>img,div.what-you-like-content8 a>img,div.what-you-like-content9 a>img,div.what-you-like-content10 a>img{
          width: 214px;
           height: 222px;
         }
        
         
         div.article-footer-nav{
           width: 1190px;
           height: 270px;
           padding: 0px;
           margin: 0px auto ;
            
         }
         div.article-footer-nav-title{ 
           width: 100%;
           height: 44px; 
           font-size: 16px;
           font-weight: 500;
           text-align: left;
           line-height: 44px;
           padding-left: 10px;
            
         }
         dl.article-footer-nav-content{ 
           width: 1190px;
           height: 220px;
            
           margin: 0 auto;
         }
         div.article-footer-nav-content1,div.article-footer-nav-content2,div.article-footer-nav-content3{
           width: 100%;
           height:73px;
           
            
         } 
         dt.nav-content1,dt.nav-content2,dt.nav-content3{
           width: 80px;
           font-size: 16px;
           font-weight: 500;
           text-align: left;
           line-height: 44px;
           padding-left:10px; 
           float: left; 
         } 
         div.nav-content1-item,div.nav-content2-item,div.nav-content3-item{
           width: 1090px;
           height:73px;
           float: left; 
           border-bottom: 1px solid rgba(128, 126, 126, 0.493);
         }
         dd.nav-content1-item,dd.nav-content2-item,dd.nav-content3-item{
           width: 80px;
           height: 17px;
           font-size: 12px;
           text-align: left;
           float: left;
           padding-top: 10px;
           margin:0 10px;
         }
         dd.nav-content1-item a,dd.nav-content2-item a,dd.nav-content3-item a{
           display: block;
           width: 80px;
           cursor: pointer;
           text-decoration: none;
           color: rgba(119, 116, 116, 0.774); 
           margin: 0;
         }
         dd.nav-content1-item a:hover,dd.nav-content2-item a:hover,dd.nav-content3-item a:hover{
           color: rgba(255, 127, 80, 0.705);
         }
         
         /* 脚部css代码 */
         footer{
          width: 1190px;
             height:600px;
             margin: 0 auto;
         }
         div.footer-link{
           width: 100%;
           height: 540px;
         }
         div.footer-link>img{
          width: 100%;
           height: 540px;
         }
         
     </style>
</head>
<body>
     <div>
         <div>
             <header>
               <div class="header_top">
                 <div class="header_top_position">
                   <!-- 版头顶部的定位信息  -->
                   <span class="header_top_position_icon"></span>
                   <span class="iconfont icon-dingwei"></span>
                   <span class="current_city">苏州</span>
                   <a href="#">切换城市</a>
                   <!-- 附近城市的选项 -->
                   <div class="near_city">
                     [
                     <a href="#">昆山</a>
                     <a href="#">杭州</a>
                     <a href="#">上海</a>
                     ]
                   </div>
                   <!-- 用户登录注册分段 -->
                   <div class="user_entry">
                     <a href="#" style="color: rgba(255, 102, 0, 0.781);">立即登录</a>
                    <a href="#">注册</a></div>   
                 </div>
                 <!-- 顶部导航 -->
                 <nav class="header_top_nav"> 
                  <ul class="header_top_nav_ul">
                     <li><a class="header_top_nav_a" href="#">网站导航</a></li> 
                     <li><a class="header_top_nav_a" href="#">美团规则</a></li> 
                     <li><a class="header_top_nav_a" href="#">商家中心</a></li> 
                     <li><a class="header_top_nav_a" href="#">手机APP</a></li> 
                     <li><a class="header_top_nav_a" href="#">我的美团</a></li> 
                  </ul> 
                 </nav>
               </div>
               <div class="header_center">
                 <!-- LOGO部分 -->
                 <div class="header_logo">
                   <img src="./美团外卖首页图片/首页图/logo2.png" alt="美团">
                  </div>
                  <!-- 搜索栏和按钮 -->
                   <div class="header-search"> 
                   <input class="header-search-input" type="text" name="search" placeholder="搜索商家和地址"> 
                   <button class="header-search-button">
                     <span class="iconfont icon-sousuo"></span>
                   </button></div>
                </div>
               </div> 
             </header>
             <!-- 体部 -->
           
             <article> 
               <div class="article_header">
            <div class="category-nav-head" style="padding-left: 20px;">全部分类</div>
            <!-- 体部首行导航 -->
            <div class="header_nav">
              <a href="#">美团外卖</a>
              <a href="#">猫眼电影</a>
              <a href="#">美团酒店</a>
              <a href="#">民宿/公寓</a>
              <a href="#">商家入驻</a>
              <a href="#">美团公益</a>
            </div>
          </div>
          <!-- 体部侧边栏导航 -->
                <div class="category-nav"> 
                  <nav id="category-nav">
                    <div id="outer">
                        <div><span class="iconfont icon-canju"></span><a href="#">美食</a></div>
                        <div><span class="iconfont icon-_waimai"></span><a href="#">外卖</a></div>
                        <div><span class="iconfont icon-jiudian"></span><a href="#">酒店</a> </div>
                        <div><span class="iconfont icon-bojuelvpaiicontilian_huabanfuben"></span><a href="#">民宿</a> </div>
                        <div><span class="iconfont icon-dianying"></span><a href="#">猫眼电影</a> </div>
                        <div><span class="iconfont icon-lvhang"></span><a href="#">机票</a>/<a href="#">火车票</a></div>
                        <div><span class="iconfont icon-maikefeng"></span><a href="#">休闲娱乐</a>/<a href="#">KTV</a></div>
                        <div><span class="iconfont icon-shenghuofuwu"></span><a href="#">生活服务</a></div>
                        <div><span class="iconfont icon-meirongke"></span><a href="#">丽人</a>/<a href="#">美发</a>/<a href="#"> 医学美容</a></div>
                        <div><span class="iconfont icon-jiehunzhao"></span><a href="#">结婚</a>/<a href="#">婚纱摄影</a>/<a href="#">婚宴</a></div>
                        <div><span class="iconfont icon-qinziyou"></span><a href="#">亲子</a>/<a href="#">儿童乐园</a>/<a href="#">幼教</a></div>
                        <div><span class="iconfont icon-jianshen"></span><a href="#">运动健身</a>/<a href="#">健身中心</a></div>
                        <div><span class="iconfont icon-zhuangxiu"></span><a href="#">家装</a>/<a href="#">建材</a>/<a href="#">家居</a></div>
                        <div><span class="iconfont icon-xuexiguiji"></span><a href="#">学习培训</a>/<a href="#">音乐培训</a></div>
                        <div><span class="iconfont icon-yiliaoxiang"></span><a href="#">医疗健康</a>/<a href="#">宠物</a>/<a href="#">爱车</a></div>
                        <div><span class="iconfont icon-jiulei"></span><a href="#">酒吧</a>/<a href="#">密室逃脱</a></div>
                    </div>
                </nav>
                <!-- 体部首页图(包括轮播图和登录注册页面) -->
                </div>
                <div class="homepage">
                <div class="homepage1"><a href="#"><img src="./美团外卖首页图片/首页图/3.png" alt="轮播图"></a> </div>
                <div class="homepage2"><a href="#"><img src="./美团外卖首页图片/首页图/1.png" alt="休闲生活"> </a> </div>
                <div class="homepage3"><a href="#"><img src="./美团外卖首页图片/首页图/register.png" alt="登陆注册部分"></a></div>
                <div class="homepage4"><a href="#"><img src="./美团外卖首页图片/首页图/4.png" alt="住酒店"></a></div>
                <div class="homepage5"><a href="#"><img src="./美团外卖首页图片/首页图/5.png" alt="涨姿势"></a></div>
                <div class="homepage6"><a href="#"><img src="./美团外卖首页图片/首页图/2.png" alt="我是商家"></a></div>
                <div class="homepage7"><a href="#"><img src="./美团外卖首页图片/首页图/QR code.png" alt="手机APP二维码"></a></div>
                </div>
                <!-- 猫眼电影部分 -->
                <div class="maoyan-movie">
                  <div class="maoyan-movie-banner">
                    <ul class="maoyan-movie-nav">
                      <li style="font-weight: bold;"><a href="#">猫眼电影</a></li>
                      <li><a href="#">正在热映</a></li>
                      <li><a href="#">即将上映</a></li>
                    <ul class="maoyan-movie-nav-more">
                      <li ><a href="#">全部 ></a></li>
                    </ul>
                    </ul>
                  </div>
                  <div class="maoyan-movie-content">
                  <div class="mapyan-movie-content1"><a href="#"><img src="./美团外卖首页图片/电影/Snipaste_2020-07-23_16-02-18.png" alt="电影图"></a></div>
                  <div class="mapyan-movie-content2"><a href="#"><img src="./美团外卖首页图片/电影/Snipaste_2020-07-23_16-03-20.png" alt="电影图"></a></div>
                  <div class="mapyan-movie-content3"><a href="#"><img src="./美团外卖首页图片/电影/Snipaste_2020-07-23_20-07-20.png" alt="电影图"></a></div>
                  <div class="mapyan-movie-content4"><a href="#"><img src="./美团外卖首页图片/电影/Snipaste_2020-07-23_20-07-33.png" alt="电影图"></a></div>
                  <div class="mapyan-movie-content5"><a href="#"><img src="./美团外卖首页图片/电影/Snipaste_2020-07-23_20-07-46.png" alt="电影图"></a></div>
                </div>
                </div>
                <!-- 推荐民宿部分 -->
                <div class="recommend-homestay">
                  <div class="recommend-homestay-banner">
                    <ul class="recommend-homestay-nav">
                      <li style="font-weight: bold;"> <a href="#">推荐民宿</li>
                      <li><a href="#">上海</li></a>
                      <li><a href="#">北京</li></a>
                      <li><a href="#">杭州</li></a>
                      <li><a href="#">厦门</li></a>
                      <li><a href="#">成都</li></a>
                    <ul class="recommend-homestay-nav-more">
                      <li><a href="#">全部 ></a> </li>
                    </ul>
                    </ul>
                  </div>
                  <div class="recommend-homestay-content">
                  <div class="recommend-homestay-content1"><a href="#"><img src="./美团外卖首页图片/民宿/Snipaste_2020-07-23_16-06-06.png" alt="民宿图"></a></div>
                  <div class="recommend-homestay-content2"><a href="#"><img src="./美团外卖首页图片/民宿/Snipaste_2020-07-23_16-06-01.png" alt="民宿图"></a></div>
                  <div class="recommend-homestay-content3"><a href="#"><img src="./美团外卖首页图片/民宿/Snipaste_2020-07-23_16-05-57.png" alt="民宿图"></a></div>
                  <div class="recommend-homestay-content4"><a href="#"><img src="./美团外卖首页图片/民宿/Snipaste_2020-07-23_16-05-51.png" alt="民宿图"></a></div>
                  <div class="recommend-homestay-content5"><a href="#"><img src="./美团外卖首页图片/民宿/Snipaste_2020-07-23_16-05-40.png" alt="民宿图"></a></div>
                  <div class="recommend-homestay-content6"><a href="#"><img src="./美团外卖首页图片/民宿/Snipaste_2020-07-23_16-05-32.png" alt="民宿图"></a></div>
                </div>
                </div>
                <!-- 猜你喜欢部分 -->
                <div class="what-you-like">
                  <div class="what-you-like-banner">
                    <ul class="what-you-like-nav">
                      <li style="font-weight: bold;"><a href="#">猜你喜欢</a></li>
                      <li><a href="#">为你甄选最适合的</a></li>
                    <ul class="what-you-like-nav-more">
                      <li ><a href="#">全部 ></a></li>
                    </ul>
                    </ul>
                  </div>
                  <div class="what-you-like-content">
                  <div class="what-you-like-content1"><a href="#"><img src="./美团外卖首页图片/猜你喜欢/Snipaste_2020-07-23_16-36-58.png" alt="猜你喜欢"></a></div>
                  <div class="what-you-like-content2"><a href="#"><img src="./美团外卖首页图片/猜你喜欢/Snipaste_2020-07-23_16-37-03.png" alt="猜你喜欢"></a></div>
                  <div class="what-you-like-content3"><a href="#"><img src="./美团外卖首页图片/猜你喜欢/Snipaste_2020-07-23_16-37-17.png" alt="猜你喜欢"></a></div>
                  <div class="what-you-like-content4"><a href="#"><img src="./美团外卖首页图片/猜你喜欢/Snipaste_2020-07-23_16-37-22.png" alt="猜你喜欢"></a></div>
                  <div class="what-you-like-content5"><a href="#"><img src="./美团外卖首页图片/猜你喜欢/Snipaste_2020-07-23_16-37-31.png" alt="猜你喜欢"></a></div>
                  <div class="what-you-like-content6"><a href="#"><img src="./美团外卖首页图片/猜你喜欢/Snipaste_2020-07-23_16-37-38.png" alt="猜你喜欢"></a></div>
                  <div class="what-you-like-content7"><a href="#"><img src="./美团外卖首页图片/猜你喜欢/Snipaste_2020-07-23_16-37-17.png" alt="猜你喜欢"></a></div>
                  <div class="what-you-like-content8"><a href="#"><img src="./美团外卖首页图片/猜你喜欢/Snipaste_2020-07-23_16-36-58.png" alt="猜你喜欢"></a></div>
                  <div class="what-you-like-content9"><a href="#"><img src="./美团外卖首页图片/猜你喜欢/Snipaste_2020-07-23_16-37-22.png" alt="猜你喜欢"></a></div>
                  <div class="what-you-like-content10"><a href="#"><img src="./美团外卖首页图片/猜你喜欢/Snipaste_2020-07-23_16-37-31.png" alt="猜你喜欢"></a></div>
                </div>
                </div>
                <div class="article-footer-nav">
                 <div class="article-footer-nav-title">美团导航</div>
                 <dl class="article-footer-nav-content">
                   <div class="article-footer-nav-content1" >
                     <dt class="nav-content1">热门城市</dt>
                     <div class="nav-content1-item"> 
                      <dd class="nav-content1-item"><a href="#">沈阳</a></dd>
                      <dd class="nav-content1-item"><a href="#">青岛</a></dd>
                      <dd class="nav-content1-item"><a href="#">上海</a></dd>
                      <dd class="nav-content1-item"><a href="#">南京</a></dd>
                      <dd class="nav-content1-item"><a href="#">合肥</a></dd>
                      <dd class="nav-content1-item"><a href="#">杭州</a></dd>
                      <dd class="nav-content1-item"><a href="#">南宁</a></dd>
                      <dd class="nav-content1-item"><a href="#">昆明</a></dd>
                      <dd class="nav-content1-item"><a href="#">深圳</a></dd>
                      <dd class="nav-content1-item"><a href="#">天津</a></dd>
                      <dd class="nav-content1-item"><a href="#">厦门</a></dd>
                      <dd class="nav-content1-item"><a href="#">北京 </a></dd>
                      <dd class="nav-content1-item"><a href="#">西安</a></dd>
                      <dd class="nav-content1-item"><a href="#">重庆</a></dd>
                      <dd class="nav-content1-item"><a href="#">济南</a></dd>
                      <dd class="nav-content1-item"><a href="#">武汉</a></dd>
                      <dd class="nav-content1-item"><a href="#">长沙</a></dd>
                      <dd class="nav-content1-item"><a href="#">海南</a></dd>
                      <dd class="nav-content1-item"><a href="#">佛山</a></dd>
                      <dd class="nav-content1-item"><a href="#">南昌</a></dd>
                    </div> 
                  </div>
                   <div class="article-footer-nav-content2"> 
                     <dt class="nav-content2">热门分类</dt>
                     <div class="nav-content2-item"> 
                     <dd class="nav-content2-item"><a href="#">酒店</a></dd>
                     <dd class="nav-content2-item"><a href="#">美食</a></dd>
                     <dd class="nav-content2-item"><a href="#">休闲娱乐</a></dd>
                     <dd class="nav-content2-item"><a href="#">聚会</a></dd>
                     <dd class="nav-content2-item"><a href="#">酒店</a></dd>
                     <dd class="nav-content2-item"><a href="#">母婴亲子</a></dd>
                     <dd class="nav-content2-item"><a href="#">运动健身</a></dd>
                     <dd class="nav-content2-item"><a href="#">上门服务</a></dd>
                     <dd class="nav-content2-item"><a href="#">生活服务</a></dd>
                     <dd class="nav-content2-item"><a href="#">时尚</a></dd>
                     <dd class="nav-content2-item"><a href="#">本地购物</a></dd>
                     <dd class="nav-content2-item"><a href="#">结婚</a></dd>
                     <dd class="nav-content2-item"><a href="#">丽人</a></dd>
                     <dd class="nav-content2-item"><a href="#">家装</a></dd>
                     <dd class="nav-content2-item"><a href="#">医疗</a></dd>
                     <dd class="nav-content2-item"><a href="#">宠物</a></dd>
                    </div>
                    </div>
                   <div class="article-footer-nav-content3"> 
                     <dt class="nav-content3">周边热门</dt>
                     <div class="nav-content3-item"> 
                     <dd class="nav-content3-item"><a href="#">吴江酒店</a></dd>
                     <dd class="nav-content3-item"><a href="#">周庄美食</a></dd>
                     <dd class="nav-content3-item"><a href="#">昆山休闲娱乐</a></dd>
                     <dd class="nav-content3-item"><a href="#">周庄聚会</a></dd>
                     <dd class="nav-content3-item"><a href="#">吴江摄影写真</a></dd>
                     <dd class="nav-content3-item"><a href="#">昆山母婴亲子</a></dd>
                     <dd class="nav-content3-item"><a href="#">周庄运动健身</a></dd>
                     <dd class="nav-content3-item"><a href="#">吴江上门服务</a></dd>
                     <dd class="nav-content3-item"><a href="#">吴江生活服务</a></dd>
                     <dd class="nav-content3-item"><a href="#">昆山时尚</a></dd>
                     <dd class="nav-content3-item"><a href="#">吴江本地购物</a></dd>
                     <dd class="nav-content3-item"><a href="#">昆山结婚</a></dd>
                     <dd class="nav-content3-item"><a href="#">周庄丽人</a></dd>
                     <dd class="nav-content3-item"><a href="#">昆山家装</a></dd>
                     <dd class="nav-content3-item"><a href="#">周庄医疗</a></dd>
                     <dd class="nav-content3-item"><a href="#">周庄宠物</a></dd>
                    </div>
                    </div>
                 </dl>
                </div>
             </article>
             <!-- 底部 -->
             <footer>
               <div class="footer-link"><img src="./美团外卖首页图片/底部/foot.png"></div>
             </footer>
           
         </div>
 
     </div>
</body>
</html>

实现效果如下
在这里插入图片描述

在这里插入图片描述

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页