仿写美团页面终极打卡
这里给大家放了我写的代码，有点粗糙，不过基本样式都实现了的，欢迎大家提出意见。
1. HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上海美团网-上海美食_酒店_旅游_团购_电影_吃喝玩乐</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!-- 头部区域 -->
<header class="header">
<div class="header-bar main">
<span class="header-bar-le">
<span style="color: #666;">上海</span>
<a href="#" class="switch">切换城市</a>
[
<a href="#">彰化</a>
<a href="#">宜兰</a>
<a href="#">太仓</a>
]
<a class="login" href="#">立即登录</a>
<a class="reg" href="#">注册</a>
</span>
<span class="header-bar-ri">
<a href="#">我的美团</a>
<a href="#">手机APP</a>
<a href="#">商家中心</a>
<a href="#">美团规则</a>
<a href="#">网站导航</a>
</span>
</div>
<div class="header-content">
<div class="main">
<div class="header-content-title fl">
<a href="#">
<img src="//s0.meituan.net/bs/fe-web-meituan/10afbf1/img/logo.png" alt="美团">
</a>
</div>
<div class="header-content-sear fl">
<input type="text" placeholder="搜索商家或地点">
<button>搜索</button>
</div>
</div>
</div>
</header>
<!-- 内容区域 -->
<div class="container main">
<div class="container-banner">
<div class="container-banner-left fl">
<div class="con-ban-le-title">
<span>全部分类</span>
</div>
<ul>
<li>美食
<div class="right-arrow"></div>
</li>
<li>外卖
<div class="right-arrow"></div>
</li>
<li>酒店
<div class="right-arrow"></div>
</li>
<li>民宿
<div class="right-arrow"></div>
</li>
<li>猫眼电影
<div class="right-arrow"></div>
</li>
<li>机票 / 火车票
<div class="right-arrow"></div>
</li>
<li>休闲娱乐 / KTV
<div class="right-arrow"></div>
</li>
<li>生活服务
<div class="right-arrow"></div>
</li>
<li>丽人 / 美发 / 医学美容
<div class="right-arrow"></div>
</li>
<li>结婚 / 婚纱摄影 / 婚宴
<div class="right-arrow"></div>
</li>
<li>亲子 / 儿童乐园 / 幼教
<div class="right-arrow"></div>
</li>
<li>运动健身 / 健身中心
<div class="right-arrow"></div>
</li>
<li>家装 / 建材 / 家居
<div class="right-arrow"></div>
</li>
<li>学习培训 / 音乐培训
<div class="right-arrow"></div>
</li>
<li>医疗健康 / 宠物 / 爱车
<div class="right-arrow"></div>
</li>
<li>酒吧 / 密室逃脱
<div class="right-arrow"></div>
</li>
</ul>
</div>
<div class="container-banner-right fl">
<div class="con-ban-ri-link">
<a href="#">美团外卖</a>
<a href="#">猫眼电影</a>
<a href="#">美团酒店</a>
<a href="#">民宿 / 公寓</a>
<a href="#">商家入驻</a>
<a href="#">美团公益</a>
</div>
<div class="con-ban-ri-row">
<div class="banner-slider fl">
<div class="banner-slider-img"></div>
</div>
<a href="" class="fl">
<img src="http://p0.meituan.net/codeman/e473bb428f070321269b23370ff02ba956209.jpg" alt="休闲生活">
</a>
<div class="banner-logincard fl">
<div class="login-image">
<img src="//s0.meituan.net/bs/fe-web-meituan/e350c4a/img/avatar.jpg" alt="">
</div>
<p>Hi! 你好</p>
<a href="#" class="login-btn">注册</a>
<a href="#" class="login-btn">立即登录</a>
</div>
</div>
<div class="con-ban-ri-row">
<div class="fl">
<a href="#">
<img class="image-link" src="http://p1.meituan.net/codeman/8cce56c467a17e04f3094d1e455462a0132772.png" alt="住酒店">
</a>
</div>
<div class="fl">
<a href="#">
<img class="image-link" src="http://p1.meituan.net/codeman/16442c19da1f1c4544f794e29d99c92051716.jpg" alt="涨姿势">
</a>
</div>
<div class="fl">
<a href="#">
<img class="image-hezuo" src="http://p1.meituan.net/codeman/5b21cddb4bb1cbc3a9c3bce0f726c75940469.jpg" alt="我是商家">
</a>
</div>
<div class="fl download-app">
<img src="//s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png" alt="下载APP" class="download-image">
<div class="phone">美团APP手机版</div>
<div>
<span style="color: red;">1元起</span>
<span>吃喝玩乐</span>
</div>
</div>
</div>
</div>
</div>
<div class="container-maoyan clear">
<div class="index-nav fl">
<span class="triangle"></span>
<span style="font-size: 16px;">猫眼电影</span>
<span>正在热映</span>
<span>即将上映</span>
<span>
<a href="#" style="color: #fff;">全部
<span class="ri-row"></span>
</a>
</span>
</div>
<div class="slider clear">
<a href="#">
<div class="slider-film fl">
<img src="//p0.meituan.net/movie/63cb3dbbaff624b236b2e22b2ee59cff1553093.jpg@214w_297h_1e_1c">
<div class="film-back">
<div class="film-info">
<p class="film-score">观众评
<span>9.4</span>
</p>
<p class="film-title">1921</p>
<span class="buy-ticket fr">购票</span>
</div>
</div>
</div>
</a>
<a href="#">
<div class="slider-film fl">
<img src="https://p1.meituan.net/movie/57917609b106b561b5dba984a0f376035045141.jpg@214w_297h_1e_1c">
<div class="film-back">
<div class="film-info">
<p class="film-score">观众评
<span>9.4</span>
</p>
<p class="film-title">革命者</p>
<span class="buy-ticket fr">购票</span>
</div>
</div>
</div>
</a>
<a href="#">
<div class="slider-film fl">
<img src="https://p0.meituan.net/movie/2b709fe7f7c2c9b21c6d37b79e41eb5f1849773.jpg@214w_297h_1e_1c">
<div class="film-back">
<div class="film-info">
<p class="film-score">观众评
<span>9.4</span>
</p>
<p class="film-title">守岛人</p>
<span class="buy-ticket fr">购票</span>
</div>
</div>
</div>
</a>
<a href="#">
<div class="slider-film fl">
<img src="https://p0.meituan.net/movie/94bfc893acb9c586f6270eb8ef5096d53124190.jpg@214w_297h_1e_1c">
<div class="film-back">
<div class="film-info">
<p class="film-score">观众评
<span>9.2</span>
</p>
<p class="film-title">了不起的老爸</p>
<span class="buy-ticket fr">购票</span>
</div>
</div>
</div>
</a>
<a href="#">
<div class="slider-film fl">
<img src="https://p0.meituan.net/movie/94bfc893acb9c586f6270eb8ef5096d53124190.jpg@214w_297h_1e_1c">
<div class="film-back">
<div class="film-info">
<p class="film-score">观众评
<span>9.2</span>
</p>
<p class="film-title">了不起的老爸</p>
<span class="buy-ticket fr">购票</span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="container-minsu clear">
<div class="index-nav fl" style="background: linear-gradient(to right, rgb(243, 182, 74) 2%, rgb(242, 197, 69) 97%) rgb(243, 182, 74);">
<span style="font-size: 16px;">推荐民宿</span>
<span>南京</span>
<span>杭州</span>
<span>苏州</span>
<span>合肥</span>
<span>宁波</span>
<span>无锡</span>
<span>扬州</span>
<span>嘉兴</span>
<span>常州</span>
<span>黄山</span>
<span>
<a href="#" style="color: #fff;">全部
<span class="ri-row"></span>
</a>
</span>
</div>
<div class="index-border">
<div class="products fl">
<div class="minsu-item fl">
<a href="#">
<div class="minsu-card">
<img src="https://img.meituan.net/phoenix/7614af4021c3296013663e48c7b77c63650125.jpg@740w_416h_1e_1c" class="minsu-img">
<img src="http://p0.meituan.net/phoenix/461eaee20b3447c4b6f765c6ca979d37828059.jpg@200w_200h_1e_1c" alt="" class="head-img">
</div>
<div class="minsu-info">
<div class="minsu-title">
【易住民宿】南京南站步行700米，地铁直达新街口、夫子庙、中山陵景区，临近地铁1号，3号线以及机场S1线YZ252
</div>
<div class="sub-title">
整套1居室·可住2人 | 南京南站/明发
</div>
<div class="minsu-price">
<span style="font-size: 14px;">￥</span>
110
</div>
</div>
</a>
</div>
<div class="minsu-item fl">
<a href="#">
<div class="minsu-card">
<img src="https://img.meituan.net/phoenix/7614af4021c3296013663e48c7b77c63650125.jpg@740w_416h_1e_1c" class="minsu-img">
<img src="http://p0.meituan.net/phoenix/461eaee20b3447c4b6f765c6ca979d37828059.jpg@200w_200h_1e_1c" alt="" class="head-img">
</div>
<div class="minsu-info">
<div class="minsu-title">
【易住民宿】南京南站步行700米，地铁直达新街口、夫子庙、中山陵景区，临近地铁1号，3号线以及机场S1线YZ252
</div>
<div class="sub-title">
整套1居室·可住2人 | 南京南站/明发
</div>
<div class="minsu-price">
<span style="font-size: 14px;">￥</span>
110
</div>
</div>
</a>
</div>
<div class="minsu-item fl">
<a href="#">
<div class="minsu-card">
<img src="https://img.meituan.net/phoenix/7614af4021c3296013663e48c7b77c63650125.jpg@740w_416h_1e_1c" class="minsu-img">
<img src="http://p0.meituan.net/phoenix/461eaee20b3447c4b6f765c6ca979d37828059.jpg@200w_200h_1e_1c" alt="" class="head-img">
</div>
<div class="minsu-info">
<div class="minsu-title">
【易住民宿】南京南站步行700米，地铁直达新街口、夫子庙、中山陵景区，临近地铁1号，3号线以及机场S1线YZ252
</div>
<div class="sub-title">
整套1居室·可住2人 | 南京南站/明发
</div>
<div class="minsu-price">
<span style="font-size: 14px;">￥</span>
110
</div>
</div>
</a>
</div>
<div class="minsu-item fl">
<a href="#">
<div class="minsu-card">
<img src="https://img.meituan.net/phoenix/7614af4021c3296013663e48c7b77c63650125.jpg@740w_416h_1e_1c" class="minsu-img">
<img src="http://p0.meituan.net/phoenix/461eaee20b3447c4b6f765c6ca979d37828059.jpg@200w_200h_1e_1c" alt="" class="head-img">
</div>
<div class="minsu-info">
<div class="minsu-title">
【易住民宿】南京南站步行700米，地铁直达新街口、夫子庙、中山陵景区，临近地铁1号，3号线以及机场S1线YZ252
</div>
<div class="sub-title">
整套1居室·可住2人 | 南京南站/明发
</div>
<div class="minsu-price">
<span style="font-size: 14px;">￥</span>
110
</div>
</div>
</a>
</div>
<div class="minsu-item fl">
<a href="#">
<div class="minsu-card">
<img src="https://img.meituan.net/phoenix/7614af4021c3296013663e48c7b77c63650125.jpg@740w_416h_1e_1c" class="minsu-img">
<img src="http://p0.meituan.net/phoenix/461eaee20b3447c4b6f765c6ca979d37828059.jpg@200w_200h_1e_1c" alt="" class="head-img">
</div>
<div class="minsu-info">
<div class="minsu-title">
【易住民宿】南京南站步行700米，地铁直达新街口、夫子庙、中山陵景区，临近地铁1号，3号线以及机场S1线YZ252
</div>
<div class="sub-title">
整套1居室·可住2人 | 南京南站/明发
</div>
<div class="minsu-price">
<span style="font-size: 14px;">￥</span>
110
</div>
</div>
</a>
</div>
<div class="minsu-item fl">
<a href="#">
<div class="minsu-card">
<img src="https://img.meituan.net/phoenix/7614af4021c3296013663e48c7b77c63650125.jpg@740w_416h_1e_1c" class="minsu-img">
<img src="http://p0.meituan.net/phoenix/461eaee20b3447c4b6f765c6ca979d37828059.jpg@200w_200h_1e_1c" alt="" class="head-img">
</div>
<div class="minsu-info">
<div class="minsu-title">
【易住民宿】南京南站步行700米，地铁直达新街口、夫子庙、中山陵景区，临近地铁1号，3号线以及机场S1线YZ252
</div>
<div class="sub-title">
整套1居室·可住2人 | 南京南站/明发
</div>
<div class="minsu-price">
<span style="font-size: 14px;">￥</span>
110
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="container-recom clear">
<div class="index-nav fl" style="background: linear-gradient(to right, rgb(88, 174, 221) 2%, rgb(66, 191, 205) 97%) rgb(88, 174, 221);">
<span style="font-size: 16px;">猜你喜欢</span>
<span>为你甄选最合适的</span>
<span>
<a href="#" style="color: #fff;">全部
<span class="ri-row"></span>
</a>
</span>
</div>
<div class="index-border">
<div class="recom-lists fl">
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
<div class="recom-item fl">
<a href="#">
<div class="recom-card">
<img src="//p1.meituan.net/shaitu/a346e2901a066b0068b6a69c0d526d2f119711.jpg@214w_120h_1e_1c" class="recom-image">
</div>
<div class="recom-info">
<div class="title-line">盘古烤猪蹄（鹿都店）</div>
<div class="score-line">
<span class="star">
<ul class="clear">
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</span>
<span class="comments">17736个评价</span>
</div>
<div class="desc-line">鹿都国际商业广场</div>
<div class="bottom-line">
<span style="font-size: 14px">￥</span>
<span style="font-size: 22px;font-weight: 500;">17.5</span>
<span style="font-size: 12px; margin-left: 4px;">起</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 导航区域 -->
<nav class="bottom-nav main">
<div class="nav-title">
美食导航
</div>
<dl class="nav-content">
<div class="nav-classification clear">
<div class="subtitle fl">
<dt>热门城市</dt>
</div>
<div class="sublists fl">
<dd class="list-item">
<a href="#">佛山</a>
</dd>
<dd class="list-item">
<a href="#">北京</a>
</dd>
<dd class="list-item">
<a href="#">上海</a>
</dd>
<dd class="list-item">
<a href="#">石家庄</a>
</dd>
<dd class="list-item">
<a href="#">南宁</a>
</dd>
<dd class="list-item">
<a href="#">昆明</a>
</dd>
<dd class="list-item">
<a href="#">青岛</a>
</dd>
<dd class="list-item">
<a href="#">合肥</a>
</dd>
<dd class="list-item">
<a href="#">济南</a>
</dd>
<dd class="list-item">
<a href="#">武汉</a>
</dd>
<dd class="list-item">
<a href="#">温州</a>
</dd>
<dd class="list-item">
<a href="#">贵阳</a>
</dd>
<dd class="list-item">
<a href="#">广州</a>
</dd>
<dd class="list-item">
<a href="#">无锡</a>
</dd>
<dd class="list-item">
<a href="#">长春</a>
</dd>
<dd class="list-item">
<a href="#">太原</a>
</dd>
<dd class="list-item">
<a href="#">深圳</a>
</dd>
<dd class="list-item">
<a href="#">重庆</a>
</dd>
<dd class="list-item">
<a href="#">厦门</a>
</dd>
<dd class="list-item">
<a href="#">苏州</a>
</dd>
</div>
</div>
<div class="nav-classification clear">
<div class="subtitle fl">
<dt>热门分类</dt>
</div>
<div class="sublists fl">
<dd class="list-item">
<a href="#">酒店</a>
</dd>
<dd class="list-item">
<a href="#">美食</a>
</dd>
<dd class="list-item">
<a href="#">休闲娱乐</a>
</dd>
<dd class="list-item">
<a href="#">运动健身</a>
</dd>
<dd class="list-item">
<a href="#">生活服务</a>
</dd>
<dd class="list-item">
<a href="#">上门服务</a>
</dd>
<dd class="list-item">
<a href="#">购物</a>
</dd>
<dd class="list-item">
<a href="#">时尚购</a>
</dd>
<dd class="list-item">
<a href="#">本地购物</a>
</dd>
<dd class="list-item">
<a href="#">结婚</a>
</dd>
<dd class="list-item">
<a href="#">摄影写真</a>
</dd>
<dd class="list-item">
<a href="#">宴会</a>
</dd>
<dd class="list-item">
<a href="#">丽人</a>
</dd>
<dd class="list-item">
<a href="#">母婴亲子</a>
</dd>
<dd class="list-item">
<a href="#">学习培训</a>
</dd>
<dd class="list-item">
<a href="#">家装</a>
</dd>
<dd class="list-item">
<a href="#">汽车服务</a>
</dd>
<dd class="list-item">
<a href="#">医疗</a>
</dd>
<dd class="list-item">
<a href="#">宠物</a>
</dd>
</div>
</div>
<div class="nav-classification clear">
<div class="subtitle fl">
<dt>周边热门</dt>
</div>
<div class="sublists fl">
<dd class="list-item">
<a href="#">彰化酒店</a>
</dd>
<dd class="list-item">
<a href="#">宜兰美食</a>
</dd>
<dd class="list-item">
<a href="#">宜兰休闲娱乐</a>
</dd>
<dd class="list-item">
<a href="#">彰化运动健身</a>
</dd>
<dd class="list-item">
<a href="#">宜兰生活服务</a>
</dd>
<dd class="list-item">
<a href="#">彰化上门服务</a>
</dd>
<dd class="list-item">
<a href="#">太仓购物</a>
</dd>
<dd class="list-item">
<a href="#">彰化时尚购</a>
</dd>
<dd class="list-item">
<a href="#">彰化本地购物</a>
</dd>
<dd class="list-item">
<a href="#">太仓结婚</a>
</dd>
<dd class="list-item">
<a href="#">彰化摄影写真</a>
</dd>
<dd class="list-item">
<a href="#">太仓宴会</a>
</dd>
<dd class="list-item">
<a href="#">太仓丽人</a>
</dd>
<dd class="list-item">
<a href="#">宜兰母婴亲子</a>
</dd>
<dd class="list-item">
<a href="#">太仓学习培训</a>
</dd>
<dd class="list-item">
<a href="#">太仓家装</a>
</dd>
<dd class="list-item">
<a href="#">彰化汽车服务</a>
</dd>
<dd class="list-item">
<a href="#">宜兰医疗</a>
</dd>
<dd class="list-item">
<a href="#">宜兰宠物</a>
</dd>
</div>
</div>
</dl>
</nav>
<!-- 底部区域 -->
<footer class="footer main">
<div class="footer-link clear">
<div class="footer-column fl">
<dl>
<dt>用户帮助</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>
</dl>
<dl>
<dt>美团服务</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>
<dd><a href="#">无人配送</a></dd>
<dd><a href="#">企业送餐、企业差旅</a></dd>
</dl>
</div>
<div class="footer-column fl">
<dl>
<dt>商家合作</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>
<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>
<dd><a href="#">快驴进货商家合作</a></dd>
<dd><a href="#">美团闪购商家入驻</a></dd>
</dl>
</div>
<div class="footer-column fl">
<dl>
<dt>合作商招募</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>
<dd><a href="#">美团充电宝合作商招募</a></dd>
</dl>
<dl>
<dt>美团规则</dt>
<dd><a href="#">规则中心</a></dd>
<dd><a href="#">规则目录</a></dd>
<dd><a href="#">规则评议院</a></dd>
</dl>
</div>
<div class="footer-column fl">
<dl>
<dt>关注美团</dt>
<dd><a href="#">美团新浪微博</a></dd>
</dl>
<dl>
<dt>公司信息</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>廉正举报</dt>
<dd><a href="#">廉正举报平台</a></dd>
</dl>
<dl>
<dt>知识产权</dt>
<dd><a href="#">知识产权维权平台</a></dd>
</dl>
</div>
<div class="footer-column fl">
<dl>
<dt>消费者服务热线</dt>
<dd><a href="#">外卖消费者：10109777</a></dd>
<dd><a href="#">猫眼消费者：10105335</a></dd>
<dd><a href="#">其他消费者：10107888</a></dd>
</dl>
<dl>
<dt>商家服务热线</dt>
<dd><a href="#">外卖&餐饮商家：10105557</a></dd>
<dd><a href="#">休闲娱乐、丽人、KTV、教育、结婚、亲子、家装等商家：10100107
</a></dd>
</dl>
<dl>
<dt>投诉举报专区</dt>
<dd><a href="#">违法和不良信息举报电话：4006018900</a></dd>
<dd><a href="#">举报邮箱：tousujubao@meituan.com</a></dd>
<dd><a href="#">网上有害信息举报</a></dd>
</dl>
<dl>
<dt><a href="#">商家自助入驻美团入口</a></dt>
</dl>
<dl>
<dt><a href="#">供应商注册入口</a></dt>
</dl>
</div>
</div>
<div class="footer-content">
<div class="footer-left">
<div>
<span>©美团网团购 meituan.com</span>
<a href="#">京ICP证0707091号</a>
<a href="#">京ICP备10211739号-1</a>
</div>
<div>
<a href="#">广播电视节目制作经营许可证（京）字第03889号</a>
</div>
<div>
<a href="#">食品经营许可证</a>
<a href="#">互联网药品信息服务资格证（京）-经营性-2017-0014</a>
</div>
<div>
<a href="#">医疗器械网络交易服务第三方平台备案：（京）网械平台备字[2018]第00004号</a>
</div>
<a href="#">平台EDI许可证</a>
</div>
<div class="footer-right">
<a href="#" class="footer-right-fir">
<img src="https://p0.meituan.net/travelcube/d0289dc0a46fc5b15b3363ffa78cf6c719256.png">
<span>京公网安备 11000002002052号</span>
</a>
<div class="footer-right-se">
<a href="#">
<img src="https://p1.meituan.net/travelcube/3e7f8a17e55bace814166b667618b459366061.png@76h_76w_2e">
<span>北京三快科技有限公司</span>
</a>
<a class="back img1" href="#" title="备案信息" target="_blank"></a>
<a class="back img2" href="#" title="可信网站认证" target="_blank"></a>
<a class="back img3" href="#" title="12315消费争议" target="_blank"></a>
</div>
</div>
</div>
</footer>
</body>
</html>
2. CSS部分
/* reset */
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0;
}
span, img, a{
display: inline-block;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #999;
}
a:hover{
color: orange;
}
input{
margin: 0;
padding: 0;
border: none;
}
.main{
width: 1190px;
margin: 0 auto;
}
.clear {
content: '';
display: block;
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
body {
background-color: #f8f8f8;
}
/* header start */
.header {
width: auto;
font-size: 12px;
}
.header .header-bar {
height: 40px;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: space-between;
}
.header .header-bar .header-bar-le {
color: #999;
}
.header .header-bar .header-bar-le a {
margin: 0 4px;
}
.header .header-bar .header-bar-le .switch {
border: 1px solid #e5e5e5;
border-radius: 2px;
color: #666;
padding: 0 2px;
}
.header .header-bar .header-bar-le .login{
margin-left: 15px;
margin-right: 0;
color: orange;
}
.header .header-bar .header-bar-le .reg {
margin-left: 10px;
}
.header .header-bar .header-bar-ri a{
padding: 12px 14px;
}
.header .header-content{
height: 152px;
background-color: white;
}
.header .header-content .header-content-title{
padding: 28px 60px 40px 0;
}
.header .header-content img {
width: 126px;
height: 46px;
}
.header .header-content .header-content-sear {
width: 550px;
height: 40px;
position: absolute;
padding-top: 28px;
left: 50%;
transform: translate(-50%);
}
.header .header-content .header-content-sear input{
border: 1px solid #e5e5e5;
border-radius: 4px 0 0 4px;
outline: none;
box-sizing: border-box;
padding: 15px;
font-size: 14px;
width: 85.45%;
height: 100%;
}
.header .header-content .header-content-sear button {
width: 14.55%;
height: 100%;
color: #222;
border: none;
outline: none;
background-color: #ffc300;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
float: right;
box-sizing: border-box;
cursor: pointer;
}
/* container start */
.container .container-banner{
width: 100%;
height: 425px;
}
.container .container-banner .container-banner-left {
width: 228px;
height: 475px;
background-color: white;
text-align: left;
position: relative;
bottom: 50px;
border: 1px solid #e5e5e5;
}
.container .container-banner .container-banner-left .con-ban-le-title{
height: 50px;
color: #222;
font-size: 16px;
padding: 15px 0 0;
box-sizing: border-box;
}
.container .container-banner .container-banner-left .con-ban-le-title span {
margin-left: 15px;
font-weight: bolder;
}
.container .container-banner .container-banner-left ul {
height: 420px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top:8px;
font-size: 13px;
color: #646464;
}
.container .container-banner .container-banner-left ul li {
padding: 2px 12px;
}
.container .container-banner .container-banner-left ul li .right-arrow {
width: 4px;
height: 4px;
border-bottom: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf;
transform: rotate(-45deg);
position: relative;
bottom: 9px;
left: 196px;
}
.container .container-banner .container-banner-right {
position: relative;
}
.container .container-banner .container-banner-right .con-ban-ri-link {
position: absolute;
top: -35px;
left: 20px;
}
.container .container-banner .container-banner-right .con-ban-ri-link a {
color: #222;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
margin: 0 20px;
}
.container .container-banner .container-banner-right .con-ban-ri-row {
margin-top: 10px;
margin-left: 10px;
}
.container .container-banner .container-banner-right .con-ban-ri-row .banner-slider-img {
width: 550px;
height: 240px;
background-image:url("http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg");
background-size: cover;
margin-right: 10px;
}
.container .container-banner .container-banner-right .con-ban-ri-row a img {
width: 150px;
height: 240px;
margin-right: 10px;
}
.container .container-banner .container-banner-right .con-ban-ri-row .banner-logincard {
width: 228px;
height: 238px;
border: 1px solid #e5e5e5;
background-color: white;
}
.container .container-banner .container-banner-right .con-ban-ri-row .banner-logincard{
display: flex;
align-items: center;
flex-direction: column;
}
.container .container-banner .container-banner-right .con-ban-ri-row .banner-logincard .login-image img {
width: 47px;
height: 47px;
border-radius: 50%;
border: 4px solid #e5e5e5;
margin-top: 30px;
}
.container .container-banner .container-banner-right .con-ban-ri-row .banner-logincard p {
font-size: 16px;
text-align: center;
color: #222;
margin-top: 10px;
}
.container .container-banner .container-banner-right .con-ban-ri-row .banner-logincard .login-btn {
width: 118px;
height: 38px;
line-height: 38px;
font-size: 14px;
color: #333;
text-align: center;
border: 1px solid #e5e5e5;
border-radius: 40px;
margin-top: 10px;
}
.container .container-banner .container-banner-right .con-ban-ri-row .image-link {
width: 270px;
height: 165px;
margin-top: 8px;
}
.container .container-banner .container-banner-right .con-ban-ri-row .image-hezuo {
width: 150px;
height: 165px;
margin-top: 8px;
}
.container .container-banner .container-banner-right .con-ban-ri-row .download-app{
width: 228px;
height: 163px;
margin-top: 8px;
border: 1px solid #e5e5e5;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
}
.container .container-banner .container-banner-right .con-ban-ri-row .download-app .download-image {
width: 95px;
height: 95px;
margin: 10px 0 5px 0;
}
.container .container-banner .container-banner-right .con-ban-ri-row .download-app .phone {
font-size: 16px;
color: #222;
}
.container .container-maoyan {
width: 100%;
height: 342px;
margin-top: 40px;
}
.container .index-nav{
background: linear-gradient(to right, rgb(250, 60, 104) 2%, rgb(254, 70, 77) 97%) rgb(250, 60, 104);
width: 100%;
height: 44px;
line-height: 44px;
font-size: 14px;
color: #fff;
box-sizing: border-box;
text-align: left;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding-left: 15px;
position: relative;
}
.container .index-nav .triangle {
content: '';
border-width: 8px;
border-style: solid;
border-color: transparent transparent #fff transparent;
position: absolute;
top: 30px;
left: 114px;
}
.container .index-nav span {
margin: 0 5px;
cursor: pointer;
}
.container .index-nav span:last-child {
float: right;
margin-right: 16px;
position: relative;
}
.container .index-nav span a .ri-row {
width: 6px;
height: 6px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
position: absolute;
top: 18px;
left: 22px;
}
.container .slider {
margin: 0 12px;
}
.container .slider .slider-film {
position: relative;
}
.container .slider .slider-film img{
width: 214px;
height: 296px;
margin-top: 2px;
margin-right: 12px;
border-radius: 4px;
background-size: 100%;
background-repeat: no-repeat;
}
.container .slider .slider-film .film-back {
width: 214px;
height: 100px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(29,45,55,0.80) 99%);
position: absolute;
bottom: 4px;
}
.container .slider .slider-film .film-back .film-info {
position: relative;
top: 50px;
padding: 0 12px;
}
.container .slider .slider-film .film-info .film-score {
font-size: 12px;
color: #fff;
font-weight: 500;
}
.container .slider .slider-film .film-info .film-score span {
font-size: 16px;
color: orange;
}
.container .slider .slider-film .film-info .film-title {
font-size: 16px;
color: #fff;
font-weight: 500;
}
.container .slider .slider-film .film-info .buy-ticket {
position: relative;
bottom: 28px;
font-size: 14px;
color: #fff;
background-color: #ff4949;
border-radius: 100px;
padding: 2px 12px 3px 12px;
text-align: center;
line-height: 20px;
}
.container .container-minsu {
width: 100%;
height: 733px;
margin-top: 40px;
}
.container .index-border {
height: 100%;
border: 1px solid #e5e5e5;
border-top: 0;
background-color: #fff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.container .container-minsu .products {
padding: 20px 0 0 20px;
}
.container .container-minsu .products .minsu-item {
margin-right: 18px;
position: relative;
}
.container .container-minsu .products .minsu-item .minsu-img {
width: 370px;
height: 208px;
margin-bottom: 11px;
border-radius: 4px;
}
.container .container-minsu .products .minsu-item .head-img {
height: 48px;
width: 48px;
border: 2px solid #fff;
border-radius: 40px;
position: absolute;
top: 184px;
right: 15px;
z-index: 9;
}
.container .container-minsu .products .minsu-item .minsu-info {
margin-bottom: 25px;
}
.container .container-minsu .products .minsu-item .minsu-info .minsu-title {
font-size: 16px;
width: 297px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #222;
margin-top: 10px;
}
.container .container-minsu .products .minsu-item .minsu-info .sub-title {
font-size: 12px;
color: #999;
text-align: left;
margin-top: 4px;
}
.container .container-minsu .products .minsu-item .minsu-info .minsu-price {
font-size: 22px;
color: #ff6600;
margin: 4px 0;
font-weight: 500;
letter-spacing: -3.3px;
}
.container .container-recom {
width: 100%;
height: 802px;
margin-top: 40px;
}
.container .container-recom .recom-lists {
padding: 20px 0 0 20px;
}
.container .container-recom .recom-lists .recom-item {
padding-right: 20px;
margin-bottom: 20px;
}
.container .container-recom .recom-lists .recom-item .recom-card .recom-image {
border-radius: 4px;
width: 213px;
}
.container .container-recom .recom-lists .recom-item .recom-info .title-line{
font-size: 16px;
line-height: 22px;
height: 22px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #222;
margin-top: 10px;
}
.container .container-recom .recom-lists .recom-item .recom-info .score-line .star li {
width: 0;
height: 0;
border-style: solid;
border-width: 6px;
border-color: transparent transparent #ff6600 transparent;
margin-left: 4px;
}
.container .container-recom .recom-lists .recom-item .recom-info .score-line .comments {
font-size: 12px;
color: #999;
height: 24px;
line-height: 24px;
margin-left: 10px;
}
.container .container-recom .recom-lists .recom-item .recom-info .desc-line {
font-size: 12px;
color: #999;
height: 18px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.container .container-recom .recom-lists .recom-item .recom-info .bottom-line {
color: #ff6600;
letter-spacing: -1.5px;
font-weight: 700;
}
/* nav start */
.bottom-nav {
height: 268px;
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-top: 40px;
}
.bottom-nav .nav-title {
padding: 6px 0 0 20px;
font-size: 16px;
color: #222;
height: 44px;
line-height: 44px;
}
.bottom-nav .nav-content .nav-classification .subtitle{
width: 100px;
font-size: 14px;
color: #222;
text-align: center;
padding: 10px 0;
}
.bottom-nav .nav-content .nav-classification .sublists {
width: 1090px;
height: 60px;
padding-top: 12px;
border-bottom: 1px solid #e5e5e5;
}
.bottom-nav .nav-content .nav-classification .sublists .list-item {
width: 100px;
height: 17px;
font-size: 12px;
text-align: left;
margin-bottom: 13px;
float: left;
}
.bottom-nav .nav-content .nav-classification .sublists .list-item a {
color: #222;
}
/* footer start */
.footer{
margin-top: 40px;
bottom: 0;
background-color: #f8f8f8;
line-height: 1.6;
font-size: 12px;
position: relative;
}
.footer .footer-link {
height: 456px;
color: #333;
line-height: 2;
padding: 40px 45px;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.footer .footer-link .footer-column {
width: 20%;
}
.footer .footer-link .footer-column dl {
margin-bottom: 20px;
}
.footer .footer-link .footer-column dl dt {
font-size: 14px;
font-weight: 500;
}
.footer .footer-content {
height: 140px;
padding: 15px 0 30px 20px;
color: #999;
}
.footer .footer-left span {
margin-right: 20px;
}
.footer .footer-left a {
margin-right: 20px;
}
.footer .footer-right {
float: right;
text-align: right;
position: absolute;
bottom: 96px;
right: 0;
}
.footer .footer-right .footer-right-fir {
height: 20px;
}
.footer .footer-right .footer-right-fir img {
width: 15px;
height: 15px;
vertical-align: middle;
}
.footer .footer-right .footer-right-se {
height: 49px;
padding: 6px 0 0;
}
.footer .footer-right .footer-right-se a:first-child{
position: relative;
top: -16px;
}
.footer .footer-right .footer-right-se img {
width: 38px;
height: 38px;
/* 文本和图片居中对齐 */
vertical-align: middle;
}
.footer .footer-right .footer-right-se .back{
background-image: url('./images/footer.png');
background-repeat: no-repeat;
height: 38px;
margin-right: 2px;
}
.footer .footer-right .footer-right-se .img1{
background-position: 0 -167px;
width: 109px;
}
.footer .footer-right .footer-right-se .img2{
background-position: 0 -127px;
width: 107px;
}
.footer .footer-right .footer-right-se .img3{
background-position: 0 -40px;
width: 107px;
}
浙公网安备 33010602011771号