仿猫眼官网静态页面（纯HTML）

DJ懒

已于 2024-07-25 06:52:13 修改

阅读量1.7k

点赞数 30

分类专栏：前端文章标签： html 前端

于 2022-05-13 22:08:46 首次发布

本文链接：https://blog.csdn.net/weixin_52377956/article/details/124760657

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

仿猫眼官网静态页面（纯HTML）

准备工作

用到的图片如下，具体可以去官网下面截取（这里就不上传图片了，供参考）
在这里插入图片描述
界面效果

正文

HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="text.css">
    <title>猫眼</title>
</head>

<body>
    <header>
        <div class="nav">
            <a href="" class="logo">
                <img src="img/logo.png" alt="">
            </a>
            <div class="city-content">
                <div class="select"></div>
            </div>
            <div class="nav-inner">
                <ul>
                    <li><a href="" class="active">首页</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 class="download">
                <a href=""><img src="img/phone.png" alt=""></a>
                <span class="text">APP下载</span>
                <div class="select"></div>
            </div>
            <div class="search">
                <input type="search" class="search" maxlength="32" placeholder="找影视剧，影人，影院">
                <input type="submit" class="submit" value="">
            </div>
            <div class="login">
                <img src="img/user.png" alt="">
                <div class="select"></div>
            </div>
        </div>
    </header>
    <div class="content">
        <div class="dl">
            <span class="text1">正在热映（44部）</span>
            <div class="all"><span class="text">全部</span><img src="img/icon.png" alt=""></div>
            <dl class="movie-list">
                <dt>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film1.png" alt="">
                        <div class="ticket">购 票</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film2.png" alt="">
                        <div class="ticket">购 票</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film3.png" alt="">
                        <div class="ticket">购 票</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film4.png" alt="">
                        <div class="ticket">购 票</div>
                    </div>
                </dd>
                </dt>
                <dt>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film5.png" alt="">
                        <div class="ticket">购 票</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film6.png" alt="">
                        <div class="ticket">购 票</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film7.png" alt="">
                        <div class="ticket">购 票</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film8.png" alt="">
                        <div class="ticket">购 票</div>
                    </div>
                </dd>
                </dt>
            </dl>

            <span class="text2">即将上映（84部）</span>
            <div class="all_another"><span class="text">全部</span><img src="img/icon_2.png" alt=""></div>
            <dl class="movie-list">
                <dt>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film9.png" alt="">
                        <div class="ticket1">72662人想看</div>
                        <div class="booking">
                            <div class="reserve1">预告片</div>
                            <div class="reserve2">预售</div>
                        </div>
                        <div class="data">1月8日上映</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film10.png" alt="">
                        <div class="ticket1">1572人想看</div>
                        <div class="booking">
                            <div class="reserve1">预告片</div>
                            <div class="reserve2">预售</div>
                        </div>
                        <div class="data">1月8日上映</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film11.png" alt="">
                        <div class="ticket1">5851人想看</div>
                        <div class="booking">
                            <div class="reserve1">预告片</div>
                            <div class="reserve2">预售</div>
                        </div>
                        <div class="data">1月8日上映</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film12.png" alt="">
                        <div class="ticket1">1240人想看</div>
                        <div class="booking">
                            <div class="reserve1">预告片</div>
                            <div class="reserve2">预售</div>
                        </div>
                        <div class="data">1月8日上映</div>
                    </div>
                </dd>
                </dt>
                <dt>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film13.png" alt="">
                        <div class="ticket1">44人想看</div>
                        <div class="booking">
                            <div class="reserve1">预告片</div>
                            <div class="reserve2">预售</div>
                        </div>
                        <div class="data">1月8日上映</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film14.png" alt="">
                        <div class="ticket1">146783人想看</div>
                        <div class="booking">
                            <div class="reserve1">预告片</div>
                            <div class="reserve2">预售</div>
                        </div>
                        <div class="data">1月8日上映</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film15.png" alt="">
                        <div class="ticket1">27071人想看</div>
                        <div class="booking">
                            <div class="reserve1">预告片</div>
                            <div class="reserve2">预售</div>
                        </div>
                        <div class="data">1月8日上映</div>
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film16.png" alt="">
                        <div class="ticket1">7917人想看</div>
                        <div class="booking">
                            <div class="reserve1">预告片</div>
                            <div class="reserve2">预售</div>
                        </div>
                        <div class="data">1月8日上映</div>
                    </div>
                </dd>
                </dt>
            </dl>

            <span class="text1_1">热播电影</span>
            <ul class="movie-type">
                <li>爱情</li>
                <li>喜剧</li>
                <li>动作</li>
                <li>恐怖</li>
                <li>动画</li>
            </ul>
            <div class="all"><span class="text">全部</span><img src="img/icon.png" alt=""></div>
            <dl class="movie-list">
                <dt>
                <dd>
                    <div class="movie-intro_1">
                        <img src="img/film17.png" alt="">
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film18.png" alt="">
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film19.png" alt="">
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film20.png" alt="">
                    </div>
                </dd>
                </dt>
                <dt>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film21.png" alt="">
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film22.png" alt="">
                    </div>
                </dd>
                <dd>
                    <div class="movie-intro">
                        <img src="img/film23.png" alt="">
                    </div>
                </dd>
                </dt>
            </dl>
        </div>
        <div class="dr">
            <div class="panel1">
                <h2 class="text3">今日票房</h2>
                <ul class="ranking-box">
                    <li class="ranking-top">
                        <div class="ranking-top-left">
                            <img src="img/ranking-top.png" alt="">
                        </div>
                        <div class="ranking-top-right">
                            <div class="text5">
                                <span class="text4">穿越寒冬拥抱你</span>
                                <p class="ranking-top-num">143.33万</p>
                            </div>
                        </div>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index1">2</i>
                        <span class="ranking-name">爱情神话</span>
                        <span class="ranking-num">129.22万</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index1">3</i>
                        <span class="ranking-name">李茂扮太子</span>
                        <span class="ranking-num">96.93万</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">4</i>
                        <span class="ranking-name">反贪风暴5：最终章</span>
                        <span class="ranking-num">83.44万</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">5</i>
                        <span class="ranking-name">以年为单位的恋爱</span>
                        <span class="ranking-num">83.00万</span>
                    </li>
                </ul>
            </div>
            <div class="panel2">
                <div class="banner">
                    <p>今<br>日<br>大<br>盘</p>
                </div>
                <div class="data">
                    <div class="box-office"><b>6432.0</b>&nbsp;万</div>
                    <div class="more">查看更多&nbsp;<img src="img/icon.png" alt=""></div>
                    <div class="notes">北京时间 09:25:34猫眼专业版实时票房数据</div>
                </div>
            </div>
            <div class="panel3">
                <h2 class="text3">最受期待</h2>
                <div class="all"><span class="text">查看完整榜单</span><img src="img/icon_3.png" alt=""></div>
                <ul class="ranking-box">
                    <div class="ranking-top">
                        <img src="img/ranking-top2.png" alt="">
                        <div class="top-intro">
                            <span class="intro1">这个杀手不太冷静</span><br>
                            <span class="intro2">上映时间：2022-02-01</span><br>
                            <span class="intro3">261971人想看</span>
                        </div>
                    </div>
                    <div class="ranking-second">
                        <div class="next-intro">
                            <img src="img/ranking-second.png" alt="">
                            <span class="intro1">超能一家人</span><br>
                            <span class="intro3">423958人想看</span>
                        </div>
                    </div>
                    <div class="ranking-third">
                        <div class="next-intro">
                            <img src="img/ranking-third.png" alt="">
                            <span class="intro1">奇迹</span><br>
                            <span class="intro3">350540人想看</span>
                        </div>
                    </div>
                    <li class="ranking-next">
                        <i class="ranking-index">4</i>
                        <span class="ranking-name">四海</span>
                        <span class="ranking-num">313964人想看</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">5</i>
                        <span class="ranking-name">熊出没·重返地球</span>
                        <span class="ranking-num">171237人想看</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">6</i>
                        <span class="ranking-name">黑客帝国：矩阵重启</span>
                        <span class="ranking-num">145767人想看</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">7</i>
                        <span class="ranking-name">长津湖之水门桥</span>
                        <span class="ranking-num">189042人想看</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">8</i>
                        <span class="ranking-name">好想去你的世界爱你</span>
                        <span class="ranking-num">174885人想看</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">9</i>
                        <span class="ranking-name">平原上的火焰</span>
                        <span class="ranking-num">299563人想看</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">10</i>
                        <span class="ranking-name">魔法满屋</span>
                        <span class="ranking-num">55894人想看</span>
                    </li>
                </ul>
            </div>

            <div class="panel4">
                <h2 class="text3">TOP 100</h2>
                <div class="all"><span class="text">查看完整榜单</span><img src="img/icon_3.png" alt=""></div>
                <ul class="ranking-box">
                    <li class="ranking-top">
                        <div class="ranking-top-left">
                            <img src="img/ranking-top3.png" alt="">
                        </div>
                        <div class="ranking-top-right">
                            <div class="text5">
                                <span class="text4">我不是药神</span>
                                <p class="ranking-top-num">9.6分</p>
                            </div>
                        </div>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index2">2</i>
                        <span class="ranking-name">肖申克的救赎</span>
                        <span class="ranking-num">9.5分</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index2">3</i>
                        <span class="ranking-name">绿皮书</span>
                        <span class="ranking-num">9.5分</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">4</i>
                        <span class="ranking-name">海上钢琴师</span>
                        <span class="ranking-num">9.3分</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">5</i>
                        <span class="ranking-name">哪吒之魔童降世</span>
                        <span class="ranking-num">9.6分</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">6</i>
                        <span class="ranking-name">霸王别姬</span>
                        <span class="ranking-num">9.4分</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">7</i>
                        <span class="ranking-name">美丽人生</span>
                        <span class="ranking-num">9.3分</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">8</i>
                        <span class="ranking-name">小偷家族</span>
                        <span class="ranking-num">8.1分</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">9</i>
                        <span class="ranking-name">这个杀手不太冷</span>
                        <span class="ranking-num">9.4分</span>
                    </li>
                    <li class="ranking-next">
                        <i class="ranking-index">10</i>
                        <span class="ranking-name">怦然心动</span>
                        <span class="ranking-num">8.9分</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer>
        <p>关于猫眼 : <span>关于我们</span> | <span>管理团队</span> | <span>投资者关系</span> &nbsp;&nbsp;&nbsp;&nbsp; 友情链接 : <span>美团网</span>
            | <span>格瓦拉</span> | <span>美团下载</span> | <span>欢喜首映</span><br>
            商务合作邮箱：v@maoyan.com 客服电话：10105335 违法和不良信息/涉未成年人有害信息举报电话：4006018900<br>
            用户举报/涉未成年人有害信息举报邮箱：tousujubao@meituan.com 舞弊线索举报邮箱：wubijubao@maoyan.com<br>
            中华人民共和国增值电信业务经营许可证 京B2-20190350 营业性演出许可证 京演（机构）（2019）4094号<br>
            广播电视节目制作经营许可证 （京）字第08478号 网络文化经营许可证 京网文（2019）3837-369号<br>
            猫眼用户服务协议 猫眼平台交易规则总则 隐私政策<br>
            京公网安备 11010102003232号 京ICP备16022489号-1<br>
            北京猫眼文化传媒有限公司<br>
            ©2022 猫眼电影 www.maoyan.com<br>
        <div class="img">
            <a href=""><img src="img/footer1.png" alt=""></a>
            <a href=""><img src="img/footer2.png" alt=""></a>
            <a href=""><img src="img/footer3.png" alt=""></a>
        </div>
    </footer>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
}

header {
    height: 81px;
    border-bottom: 2px solid #f0ebeb;
}

.select {
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    border-top: 5px solid #666;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.nav {
    width: 1200px;
    height: 80px;
    margin: 0 auto;
}

.nav a.logo {
    width: 133px;
    height: 80px;
    line-height: 80px;
    float: left;
}

.nav a.logo img {
    vertical-align: middle;
}

.nav .city-content {
    width: 34px;
    height: 80px;
    float: left;
}

.nav .city-content .select {
    margin-top: 43px;
    margin-left: 15px;
}

.nav .nav-inner {
    width: 520px;
    height: 80px;
    float: left;
}

.nav ul li {
    list-style: none;
}

.nav ul li a {
    list-style: none;
    height: 80px;
    line-height: 80px;
    color: black;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    margin-left: 4px;
    padding-left: 16px;
    padding-right: 16px;
    float: left;
}

.nav ul li a:hover {
    color: #ef4238;
}

.nav ul li a.active {
    color: #fff;
    background-color: #ef4238;
}

.nav .download {
    width: 132px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    cursor: pointer;
    margin-left: 55px;
    float: left;
}

.nav .download a {
    text-decoration: none;
    text-align: center;
}

.nav .download a img {
    width: 15px;
    height: 24px;
    vertical-align: text-top;
}

.nav .download .select, .login .select {
    margin-top: 40px;
    margin-left: 5px;
}

.nav .download a span.text {
    margin-left: 5px;
}

.search {
    margin-left: 15px;
    float: left;
}

.search input.search {
    width: 220px;
    height: 40px;
    margin-top: 20px;
    padding: 0 40px 0 20px;
    font-size: 14px;
    border: 1px solid #ccc;
    background-color: #faf8fa;
    border-radius: 15px;
    outline: none;
}

.search input.submit {
    width: 40px;
    height: 40px;
    border: 0px;
    border-radius: 30px;
    margin-top: 20px;
    margin-left: -38px;
    background-image: url(img/search.png);
    background-color: #ef4238;
}

.login img {
    width: 40px;
    height: 40px;
    margin-top: 20px;
    margin-left: 20px;
}

.content {
    width: 1200px;
    height: 1200px;
    margin: 0 auto;
}

.content .dl {
    float: left;
}

.content .dr {
    float: right;
}

.content span {
    font-size: 26px;
    font-weight: 500;
    margin-left: 23px;
}

.content span.text1 {
    margin-top: 50px;
    color: #ef4238;
    float: left;
}

.content .all {
    margin-top: 60px;
    padding-right: 20px;
    font-size: 14px;
    color: #ef4238;
    float: right;
    cursor: pointer;
}

.content .all_another {
    margin-top: 56px;
    padding-right: 20px;
    font-size: 14px;
    color: #2d98f3;
    float: right;
    cursor: pointer;
}

.content .all span.text, .all_another span.text {
    font-size: 15px;
    font-weight: 500;
}

.content dl.movie-list dd .ticket1 {
    padding-left: 15px;
    color: #ffb400;
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
}

.content dl.movie-list dd .movie-intro img :hover {
    cursor: pointer;
}

.content dl.movie-list dd .movie-intro .booking {
    margin-top: 10px;
}

.content dl.movie-list dd .movie-intro .booking .reserve1 {
    width: 35%;
    border: 1px solid #efefef;
    padding: 11px;
    text-align: center;
    color: #9e999a;
    font-size: 16px;
    float: left;
}

.content dl.movie-list dd .movie-intro .booking .reserve2 {
    width: 35%;
    border-top: 1px solid #efefef;
    border-right: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    padding: 11px;
    text-align: center;
    color: #2d98f3;
    font-size: 16px;
    float: left;
}

.content dl.movie-list dd .movie-intro .data {
    height: 25px;
    clear: both;
    color: #9e999a;
    text-align: center;
    padding-top: 10px;
    padding-left: 15px;
}

.content .all img, .all_another img {
    margin-left: 3px;
    vertical-align: baseline;
}

.content span.text1_1 {
    color: #ef4238;
    margin-top: 50px;
    float: left;
}

.content ul.movie-type {
    margin-top: 60px;
    margin-left: 15px;
    float: left;
}

.content ul.movie-type li {
    list-style: none;
    font-size: 14px;
    color: #000000;
    padding: 0 8px;
    float: left;
}

.content dl.movie-list {
    clear: both;
    width: 775px;
    height: 578px;
    cursor: pointer;
}

.content dl.movie-list dd {
    margin-left: 29px;
    margin-top: 20px;
    float: left;
}

.content dl.movie-list dd .movie-intro_1 {
    margin-right: 29px;
    width: 320px;
}

.content dl.movie-list dd .ticket {
    width: 160px;
    height: 40px;
    line-height: 35px;
    text-align: center;
    color: #ef4238;
}

.content span.text2 {
    color: #2d98f3;
    margin-top: 50px;
    float: left;
}

.content .dr {
    width: 361px;
    height: 800px;
    float: right;
}

.content .dr .panel1 {
    width: 360px;
    height: 360px;
    margin-top: 50px;
    margin-bottom: 30px;
}

.content .dr .panel1 h2.text3 {
    font-size: 26px;
    font-weight: 500;
    color: #ef4238;
    margin-left: 0;
}

.content .dr .ranking-box {
    clear: both;
    list-style: none;
}

.content .dr .ranking-box .ranking-top {
    width: 363px;
    height: 80px;
    margin-top: 18px;
    margin-bottom: 10px;
}

.content .dr .ranking-box .ranking-top .ranking-top-left {
    width: 120px;
    height: 80px;
    float: left;
}

.content .dr .ranking-box .ranking-top .ranking-top-right {
    border-top: 1px solid #efefef;
    border-right: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    width: 242px;
    height: 80px;
    float: right;
}

.content .dr .ranking-box .ranking-top .ranking-top-right:hover {
    background-color: #f7f7f7;
    cursor: pointer;
}

.content .dr .ranking-box .ranking-top .ranking-top-right span.text4 {
    font-size: 18px;
    font-weight: 500;
    margin-left: 10px;
}

.content .dr .ranking-box .ranking-top .ranking-top-right .text5 {
    margin-top: 12px;
}

.content .dr .ranking-box .ranking-next {
    padding: 15px 0 15px 0;
}

.content .dr .ranking-box .ranking-next:hover {
    background-color: #f7f7f7;
    cursor: pointer;
}

.content .dr .ranking-box .ranking-index {
    color: #a39999;
    font-size: 18px;
}

.content .dr .ranking-box .ranking-index1 {
    color: #ef4238;
    font-size: 18px;
}

.content .dr .ranking-box .ranking-index2 {
    color: #ffb400;
    font-size: 18px;
}

.content .dr .ranking-box .ranking-name {
    font-size: 16px;
    margin-left: 10px;
}

.content .dr .ranking-box .ranking-top-num {
    color: #ef4238;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 10px;
}

.content .dr .ranking-box .ranking-num {
    color: #ef4238;
    font-size: 16px;
    float: right;
}

.content .dr .panel2 {
    width: 360px;
    height: 121px;
    border: 1px solid #f7f7f7;
    background-color: #fdfdfd;
}

.content .dr .panel2 .banner {
    width: 45px;
    height: 120px;
    background-color: #ef4238;
    float: left;
}

.content .dr .panel2 .banner p {
    padding: 13px;
    color: #fefff9;
    font-size: 18px;
}

.content .dr .panel2 .data {
    width: 315px;
    height: 121px;
    float: left;
}

.content .dr .panel2 .data .box-office {
    width: 110px;
    height: 33px;
    color: #ef4238;
    margin-top: 35px;
    margin-left: 15px;
    font-size: 15px;
    float: left;
}

.content .dr .panel2 .data .box-office b {
    font-size: 28px;
    font-weight: 800;
}

.content .dr .panel2 .data .more {
    font-size: 14px;
    color: #ef4238;
    margin-top: 45px;
    margin-right: 10px;
    float: right;
}

.content .dr .panel2 .data span.more img {
    margin-left: 3px;
}

.content .dr .panel2 .data .notes {
    clear: both;
    width: 290px;
    font-size: 15px;
    padding: 15px;
    color: #a5a1a5;
}

.content .dr .panel3 h2.text3, .panel4 h2.text3 {
    font-size: 26px;
    font-weight: 500;
    color: #ffb400;
    margin-top: 68px;
    margin-bottom: 20px;
    margin-left: 0;
    float: left;
}

.content .dr .panel3 .all, .panel4 .all {
    color: #ffb400;
    padding-right: 0;
    margin-top: 80px;
}

.content .dr .panel3 .ranking-box {
    width: 370px;
}

.content .dr .panel3 .ranking-box .ranking-top img {
    float: left;
}

.content .dr .panel3 .ranking-box .ranking-top .top-intro {
    width: 218px;
    height: 148px;
    border: 1px solid #f4f4f4;
    padding-top: 45px;
    float: left;
}

.content .dr .panel3 .ranking-box .ranking-top .top-intro span.intro1 {
    font-size: 18px;
    line-height: 35px;
}

.content .dr .panel3 .ranking-box .ranking-top .top-intro span.intro2 {
    font-size: 15px;
    color: #a699b3;
    line-height: 30px;
}

.content .dr .panel3 .ranking-box .ranking-top .top-intro span.intro3 {
    font-size: 14px;
    color: #ffb400;
}

.content .dr .panel3 .ranking-box .ranking-second {
    padding-bottom: 13px;
    float: left;
}

.content .dr .panel3 .ranking-box .next-intro {
    width: 173px;
    height: 180px;
    border: 1px solid #f4f4f4;
}

.content .dr .panel3 .ranking-box .ranking-second .next-intro span.intro1 {
    font-size: 18px;
    line-height: 35px;
}

.content .dr .panel3 .ranking-box .ranking-second .next-intro span.intro3 {
    font-size: 14px;
    color: #ffb400;
}

.content .dr .panel3 .ranking-box .ranking-second .next-intro, .ranking-third {
    margin-top: 30px;
}

.content .dr .panel3 .ranking-box .ranking-third {
    width: 178px;
    height: 152px;
    margin-left: 7px;
    padding-bottom: 13px;
    float: right;
}

.content .dr .panel3 .ranking-box .ranking-third .next-intro span.intro1 {
    font-size: 18px;
    line-height: 35px;
}

.content .dr .panel3 .ranking-box .ranking-third .next-intro span.intro3 {
    font-size: 14px;
    color: #ffb400;
}

.content .dr .panel3 .ranking-box li {
    clear: both;
}

.content .dr .panel4 .ranking-box .ranking-num {
    color: #ffb400;
}

.content .dr .panel3 .ranking-box .ranking-num {
    color: #ffb400;
}

footer {
    width: 100%;
    height: 374px;
    margin-top: 1300px;
    margin-bottom: 0;
    background-color: #242222;
}

footer p {
    color: #b7b7bd;
    font-size: 14px;
    line-height: 25px;
    padding-top: 50px;
    text-align: center;
}

footer span {
    color: #ef4238;
    padding: 0 5px;
}

footer .img {
    margin: 0 auto;
    margin-top: 25px;
    width: 400px;
    height: 43px;
}

footer a {
    text-align: center;
}

footer a img {
    margin-left: 15px;
    float: left;
}