仿哔哩哔哩 | 奇遇少年

JSP篇

发布日期: 2020-11-03

作者: 少年

文章字数: 5.1k

阅读时长: 29 分

阅读次数:

bilibili是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。以下是B站主页静态代码下载地址及页面展示。

网盘源码链接：链接：https://pan.baidu.com/s/1grMOgivIQJgw5sgztfE3pg

提取码：itbo

Navi.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="fix">
            <ul>
                <li><a href="https://live.bilibili.com/?spm_id_from=333.851.b_7072696d617279467269656e64736869704c696e6b.2">直播</a></li>
                <li><a href="https://www.bilibili.com/v/douga/?spm_id_from=333.851.b_7072696d6172794368616e6e656c4d656e75.1">动画</a></li>
                <li><a href="https://www.bilibili.com/anime/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.8">番剧</a></li>
                <li><a href="https://www.bilibili.com/guochuang/?spm_id_from=666.4.b_7072696d6172794368616e6e656c4d656e75.26">国创</a></li>
                <li><a href="https://manga.bilibili.com/?from=bili_main_rank_more&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.16">漫画</a></li>
                <li><a href="https://www.bilibili.com/v/popular/rank/music?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.39">音乐</a></li>
                <li><a href="https://www.bilibili.com/v/popular/rank/dance?spm_id_from=333.851.b_62696c695f7265706f72745f64616e6365.39">舞蹈</a></li>
                <li><a href="https://www.bilibili.com/v/popular/rank/game?spm_id_from=333.851.b_62696c695f7265706f72745f67616d65.39">游戏</a></li>
                <li><a href="https://www.bilibili.com/v/popular/rank/technology?spm_id_from=333.851.b_62696c695f7265706f72745f746563686e6f6c6f6779.39">知识</a></li>
                <li><a href="https://www.bilibili.com/cheese?spm_id_from=333.851.b_6368656573655f64657461696c5f6d6f7265.1">课堂</a></li>
                <li><a href="https://www.bilibili.com/v/popular/rank/digital?spm_id_from=333.851.b_62696c695f7265706f72745f6469676974616c.39">数码</a></li>
                <li><a href="https://www.bilibili.com/v/popular/rank/life?spm_id_from=333.851.b_62696c695f7265706f72745f6c696665.39">生活</a></li>
                <li><a href="https://www.bilibili.com/v/popular/rank/kichiku?spm_id_from=333.851.b_62696c695f7265706f72745f6b696368696b75.39">鬼畜</a></li>
                <li><a href="https://www.bilibili.com/v/popular/rank/fashion?spm_id_from=333.851.b_62696c695f7265706f72745f66617368696f6e.39">时尚</a></li>
                <li><a href="https://www.bilibili.com/v/information?spm_id_from=333.851.b_62696c695f7265706f72745f696e666f726d6174696f6e.2">资讯</a></li>
                <li><a href="https://www.bilibili.com/v/popular/rank/ent?spm_id_from=333.851.b_62696c695f7265706f72745f656e74.39">娱乐</a></li>
                <li><a href="https://www.bilibili.com/read/home?spm_id_from=333.851.b_62696c695f7265706f72745f72656164.2">专栏</a></li>
                <li><a href="https://www.bilibili.com/movie/?spm_id_from=333.851.b_62696c695f7265706f72745f6d6f766965.2">电影</a></li>
                <li><a href="https://www.bilibili.com/tv/?spm_id_from=333.851.b_62696c695f7265706f72745f74656c65706c6179.2">TV剧</a></li>
                <li><a href="https://www.bilibili.com/v/cinephile?spm_id_from=333.851.b_62696c695f7265706f72745f63696e657068696c65.2">影视</a></li>
                <li><a href="https://www.bilibili.com/documentary/?spm_id_from=333.851.b_62696c695f7265706f72745f646f63756d656e74617279.2">纪录片TV剧</a></li>
                <li><a href="https://www.bilibili.com/list/recommend/1.html?spm_id_from=333.851.b_62696c695f7265706f72745f7370655f726563.1">影视纪录片</a></li>
            </ul>
        </div>
</body>
</html>

Main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css.css">
</head>
<body>

        <div class="center_list">
            <div class="center_list_left">
                <ul>
                    <li><a href="https://www.bilibili.com/"><img src="images/首页.png"/><p>首页</p></a></li>
                    <li><a href="https://t.bilibili.com/?spm_id_from=333.851.b_7072696d61727950616765546162.2"><img src="images/动态.png"/><p>动态</p></a></li>
                    <li><a href="https://www.bilibili.com/v/popular/rank/all?spm_id_from=333.851.b_7072696d61727950616765546162.3"><img src="images/排行榜.png"/><p >排行榜</p></a></li>
                    <li><a href="https://www.bilibili.com/v/channel?spm_id_from=333.851.b_7072696d61727950616765546162.4"><img src="images/频道.png"/><p>频道</p></a></li>
                    <li><span></span></li>
                </ul>
            </div>
            <div class="center_list_right">
                <ul>
                    <li><a href="https://www.bilibili.com/v/douga/?spm_id_from=333.851.b_7072696d6172794368616e6e656c4d656e75.1">动画</a><em>999+</em></li>
                    <li><a href="https://www.bilibili.com/v/music/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.15">音乐</a><em>999+</em></li>
                    <li><a href="https://www.bilibili.com/v/dance/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.34">舞蹈</a><em>999+</em></li>
                    <li><a href="https://www.bilibili.com/v/technology/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.35">知识</a><em>999+</em></li>
                    <li><a href="https://www.bilibili.com/v/life/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.63">生活</a><em>999+</em></li>
                    <li><a href="https://www.bilibili.com/v/fashion/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.69">时尚</a><em>999+</em></li>
                    <li><a href="https://www.bilibili.com/v/ent/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.83">娱乐</a><em>999+</em></li>
                    <li><a href="https://www.bilibili.com/cinema/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.96">放映厅</a><em>89+</em></li>
                    <li><a href="https://www.bilibili.com/anime/?spm_id_from=666.5.b_7072696d6172794368616e6e656c4d656e75.8">番剧</a><em>66+</em></li>
                    <li><a href="https://www.bilibili.com/guochuang/?spm_id_from=666.4.b_7072696d6172794368616e6e656c4d656e75.26">国创</a><em>27+</em></li>
                    <li><a href="https://www.bilibili.com/v/game/?spm_id_from=666.5.b_7072696d6172794368616e6e656c4d656e75.41">游戏</a><em>999+</em></li>
                    <li><a href="https://www.bilibili.com/v/digital/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.49">数码</a><em>950+</em></li>
                    <li><a href="https://www.bilibili.com/v/kichiku/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.62">鬼畜</a><em>76+</em></li>
                    <li><a href="https://www.bilibili.com/v/information/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.75">资讯</a><em>423+</em></li>
                    <li><a href="https://www.bilibili.com/v/cinephile/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.91">影视</a><em>999+</em></li>
                    <li><a href="https://www.bilibili.com/v/life/funny#/">更多</a></li>
                    <li><span></span></li>
                </ul>
            </div>
           <div class="center_list_right_r">
               <ul>
                   <li><a href="https://www.bilibili.com/read/home?spm_id_from=333.6.b_7072696d617279467269656e64736869704c696e6b.1"><img src="images/专栏.png"/ style="vertical-align: middle;">专题</a></li>
                   <li><a href="https://www.bilibili.com/blackboard/x/act_list/"><img src="images/活动.png"/style="vertical-align: middle;">活动</a></li>
                   <li><a href="https://www.bilibili.com/blackroom/ban?spm_id_from=333.6.b_7072696d617279467269656e64736869704c696e6b.14"><img src="images/小黑屋.png"/style="vertical-align: middle;">小黑屋</a></li>
                   <li><a href="https://live.bilibili.com/?spm_id_from=333.6.b_7072696d617279467269656e64736869704c696e6b.2"><img src="images/直播.png"/style="vertical-align: middle;">直播</a></li>
                   <li><a href="https://www.bilibili.com/cheese/?spm_id_from=333.6.b_7072696d617279467269656e64736869704c696e6b.4"><img src="images/课堂.png"/style="vertical-align: middle;">课堂</a></li>
                   <li><a href="https://www.bilibili.com/v/musicplus/?spm_id_from=333.6.b_7072696d617279467269656e64736869704c696e6b.6"><img src="images/音乐plus.png"/style="vertical-align: middle;">音乐PLUS</a></li>
               </ul>
            <div>
        </div>
    </div>
<div class="clear"></div>
        <div class="main">
            <table cellspacing="12">
                <tr>
                    <td rowspan=2><img src="images/d0bae294b4f2fb5b5f742054194ae6e5e0a5f1b6.jpg" class="img1"/></td>
                    <td><img src="images/a46a8c387cdcf5bf3bb77dc66a7941021e41e0ce.jpg@412w_232h_1c_100q.jpg" class="img2"/></td>
                    <td><img src="images/174ee7dd9d768bc422b6075e9abb3aeee6f96fc6.jpg@412w_232h_1c_100q.jpg" class="img2"/></td>
                    <td><img src="images/b889898be50c1636e7613dbf29ac70b35f263b4b.jpg@412w_232h_1c_100q.jpg" class="img2"/></td>
                </tr>
                <tr>
                    <td><img src="images/ceb9792f920dc7366c640cbee4c1337918ef18f0.jpg@412w_232h_1c_100q.jpg" class="img2"/></td>
                    <td><img src="images/c3aa454de18234d032a5b41b0a7b8bdff00193d7.jpg@412w_232h_1c_100q.jpg" class="img2"/></td>
                    <td><img src="images/78d33fcc7caf44c2ccca184dfa7df7ca27f15905.jpg@412w_232h_1c_100q.jpg" class="img2"/></td>

                </tr>
            </table>
        </div>
        <div class="banner_text">
            <ul>
                <li><img src="images/推广.png" /></li>
                <li><h3>推广</h3></li>
            </ul>
            <ul>
                <li><img src="images/火.png" class="ic" valign="middle"/></li>
                <li>玩转数码区的正确方法</li>
            </ul>
            <ul>
                <li><img src="images/火.png" class="ic" valign="middle"/></li>
                <li>这部十月新番太强了！</li>
            </ul>
        </div>
        <div class="clear"></div>
        <div class="tuix">
            <ul>
                <li><img src="images/6da201443b2d878d0bc42c322d7158ee.jpg" /><p>每天建模一小时，<br/>接单赚外快</p></li>
                <li><img src="images/ef20f2b84b4d78632ea4f6f1eda79c41b1cbb026.jpg" /><p>摇了我吧，我不会</p></li>
                <li><img src="images/9b17778fc5463ad885f3790ba9221ad8.jpg" /><p>学影视后期，抓住<br/>电影特效红利期，挑战...</p></li>
                <li><img src="images/cf50c0b753bef71cb017ce108f0a7ce6b93315be.jpg" /><p>让貂蝉用不断2！一个让<br/>人快乐的组合！</p></li>
                <li><img src="images/5c1eaefcde49b50f09e69337633b77aeb93c2505.jpg" class="tuix_img"/></li>
            </ul>
        </div>
        <div class="clear"></div>
        <div class="banner_text2">
            <ul>
                <li><img src="images/407204bf2edce4be7d30ce12d1911ea5737fde6f.png" /></li>
                <li><h3>2020英雄联盟全球总决赛</h3></li>
            </ul>
        </div>
        <div class="clear"></div>
        <div class="tuix2">
            <ul>
                <li><img src="images/97191aee016852d65befdd47b23bc1fb915446af.jpg@206w_116h_1c_100q.jpg" /><p>[2020全球总决赛]10月17<br/>日八强赛 TES vs FNC</p></li>
                <li><img src="images/486d539de90472569677d419199baf4e25917b17.jpg@206w_116h_1c_100q.jpg" /><p>[2020全球总决赛]10月16<br/>日八强赛 SN vs JDG</p></li>
                <li><img src="images/d50f5594c09dcffbbfe3dc05f0548895e79dcbc9.jpg@206w_116h_1c_100q.jpg" /><p>[2020全球总决赛]10月18<br/>日八强赛 GEN vs G2</p></li>
                <li><img src="images/919527ab856321962c679ca8a1ab30ca6630e010.jpg@206w_116h_1c_100q.jpg" /><p>[2020全球总决赛]10月17<br/>日八强赛 DWG vs DRX</p></li>
                <li><img src="images/111059c6280d2610128d0de2b26252ff25e7057d.png@320w_184h_1c_100q.png" class="tuix_img2"/></li>
            </ul>
        </div>
        <div class="clear"></div>
</body>
</html>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css.css">
<link rel="shortcut icon" href="favicon.ico" />
<title>哔哩哔哩</title>
</head>
<body>
<div id="Header"><%@ include file="Header.jsp" %>
<div id="Main"><%@ include file="Main.jsp" %>
<div id="Footer"><%@ include file="Footer.jsp" %>
<div id="Navi"><%@ include file="Navi.jsp" %>
</div>

</body>
</html>

Header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header class="header">
            <div class="list_left">
                <ul>
                    <li><a href="https://www.bilibili.com/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.1">主站</a></li>
                    <li><a href="https://www.bilibili.com/anime/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.2">番剧</a></li>
                    <li><a href="https://game.bilibili.com/platform/">游戏中心</a></li>
                    <li><a href="https://live.bilibili.com/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.4">直播</a></li>
                    <li><a href="https://show.bilibili.com/platform/home.html?msource=pc_web&spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.5">会员购</a></li>
                    <li><a href="https://manga.bilibili.com/?from=bill_top_mnav&spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.6">漫画</a></li>
                    <li><a href="https://www.bilibili.com/v/game/match/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.7">赛事</a></li>
                    <li><a href="https://live.bilibili.com/6?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.8#/"><img src=images/3915dcb81c248ed689d361b9244a9ac70c38a944.png></a></li>
                    <li><a href="https://app.bilibili.com/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.9">下载APP</a></li>
                </ul>
            </div>
            <div class="search">
                <input type="text" value="输入关键词" style="outline: none;">
                <button ></button>
            </div>
            <div class="user">
                <img src="images/user.png" style="vertical-align: middle;" >
                尼古拉斯~宇
            </div>
            <div class="list_right">
                <ul>
                    <li><a href="https://account.bilibili.com/account/big">大会员</a></li>
                    <li><a href="https://message.bilibili.com/#/reply">消息</a></li>
                    <li><a href="https://t.bilibili.com/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.28">动态</a></li>
                    <li><a href="https://space.bilibili.com/474536635/favlist">收藏</a></li>
                    <li><a href="https://www.bilibili.com/account/history">历史</a></li>
                    <li><a href="https://member.bilibili.com/platform/home">创作中心</a></li>
                </ul>
            </div>
            <button class="btn">投稿</button>
        </header>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="footer">
            <div class="footer_i">
                <dl>
                    <dt>bilibili</dt>
                    <dd>关于我们</dd>
                    <dd>联系我们</dd>
                    <dd>用户协议</dd>
                    <dd>加入我们</dd>
                </dl>
                <dl>
                    <dt> &nbsp;</dt>
                    <dd>友情链接</dd>
                    <dd>隐私政策</dd>
                    <dd>bilibili认证</dd>
                    <dd>Investor Relations</dd>
                </dl>
                <dl>
                    <dt>传送门</dt>
                    <dd>帮助中心</dd>
                    <dd>高级弹幕</dd>
                    <dd>活动专题页</dd>
                    <dd>侵权申诉</dd>
                </dl>
                <dl>
                    <dt>&nbsp; </dt>
                    <dd>活动中心</dd>
                    <dd>用户反馈论坛</dd>
                    <dd>壁纸站</dd>
                    <dd>广告合作</dd>
                </dl>
                <dl>
                    <dt>&nbsp; </dt>
                    <dd>名人堂</dd>
                    <dd>MCN管理中心</dd>
                </dl>
                <div class="footer_right">
                    <ul>
                        <li><a href="https://app.bilibili.com/"><img src="images/下载APP.png"/><p>下载APP</p></a></li>
                        <li><a href="https://weibo.com/login.php"><img src="images/新浪微博.png"/><p>新浪微博</p></a></li>
                        <li><a href="https://weixin.qq.com/"><img src="images/官方微信.png"/><p >官方微信</p></a></li>
                        <li><span></span></li>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
            <div class="bot">
                <div class="bot_i">
                    <img src="images/partner.png"/>
                    <img src="images/pic962110.png"/>
                    <img src="images/confirm.png"/>
                </div>
                <div class="p">
                    <p>
                                        <span>营业执照</span>
                                        <span>信息网络传播视听节目许可证：0910417 </span>
                                        <span>网络文化经营许可证 沪网文【2019】3804-274号</span>
                                        <span>广播电视节目制作经营许可证：（沪）字第01248号 </span><br/>
                                        <span>增值电信业务经营许可证 沪B2-20100043</span>
                                        <span>互联网ICP备案：沪ICP备13002172号-3</span>
                                        <span>出版物经营许可证 沪批字第U6699 号 </span>
                                        <span>互联网药品信息服务资格证 沪-非经营性-2016-0143</span><br/>
                                        <span>营业性演出许可证 沪市文演（经）00-2253</span><br/>
                                        <span>违法不良信息举报邮箱：help@bilibili.com</span>
                                        <span>违法不良信息举报电话：4000233233转3|</span><br/>
                                        <span>上海互联网举报中心 |</span>
                                        <span>12318全国文化市场举报网站 |</span>
                                        <span>沪公网安备31011002002436号 |</span>
                                        <span>儿童色情信息举报专区 |</span>
                                        <span>扫黄打非举报</span><br/>
                                        <span>网上有害信息举报专区：中国互联网违法和不良信息举报中心</span><br/>
                                        <span>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。
                    </span><br/>
                                        <span>公司名称：上海宽娱数码科技有限公司|公司地址：上海市杨浦区政立路485号|电话：021-25099888</span>
                                    </p>
                </div>
            </div>
        </div>
</body>
</html>

css.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
div ul li a:hover{    
       color: #00a4ff;
}
.header{
    height:150px;
    background: url(../images/0b7eef054547750e6bfeff6f36c83e83d2a058fb.png);
    width: 100%;
}
.list_left ul li{
    height: 44px;
    line-height: 44px;
    list-style: none;
    float: left;
    margin: 5px 5px;
    font-size:14px;
    display: inline-block;
}
.list_left ul {
    margin-left: 10px;
}
.list_left ul li a{
    color: #ffffff;
}
a{
    text-decoration: none;

}
.list_left ul li img{
    width: 106px;
    height: 44px;
}
.search input{
    border: 0px;
    width: 400px;
    height: 31px;
    float: left;
    margin-left: 50px;
    margin-top: 10px;
    color: #bfbfbf;
    padding-left: 15px;
}
.search button{
    border: 0px;
    height: 31px;
    width: 50px;
    float: left;
    margin-top: 10px;
    margin-left: -1px;
    background:url(../images/search.png);
}
.user  {
    font-size: 14px;
    color: #666666;
    float: left;
    line-height: 42px;
    margin-right: 30px;
    margin-top: 5px;
    margin-left: 15px;
}
.list_right ul li{
    height: 44px;
    line-height: 44px;
    list-style: none;
    float: left;
    margin: 5px 5px;
    font-size:14px;
    display: inline-block;
}
.list_right ul {
    margin-left: 10px;
}
.list_right ul li a{
    color: #ffffff;
}
.btn{
    float: left;
    height: 30px;
    width: 70px;
    margin-top: 15px;
    background-color: #fb7299;
    border: 0px;
    font-size:16px;
    color: #ffffff;
    line-height: 30px;
}
.center_list{
    width: 1200px;
    height: 90px;
    margin: 30px auto;
}
.center_list_left{
    width: 210px;
    height: 100%;
    float: left;
}
.center_list_left ul li {
    list-style: none;
    float: left;

}
.center_list_left ul li img{
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.center_list_left ul li a p{
    color: #000000;
    padding-left: 2px;
}
.center_list_left ul li span{
    border-right: 1px solid #BFBFBF;
    height: 50px;
    margin-top: 8px;
    float: left;
}
.center_list_right{
    height: 90px;
    width: 750px;
    float: left;
}
.center_list_right  ul li {
    list-style: none;
    float: left;
    padding-left: 15px;
}
.center_list_right ul li a{
    color: #000000;
}
.center_list_right ul li em{
    font-size: 12px;
    display: inline-block;
    background: #73c9e5;
    border-radius: 2px;
    color: #fff;
    margin-left: 1px;
    transform: scale(.85);
    width: 32px;
    text-align: center;
}
em{font-style: normal;} 
.center_list_right{
    border-right: 1px solid #BFBFBF;
    height: 50px;
    margin-top: 8px;
    float: left;
}
.center_list_right_r ul li{
    list-style: none;
    float: left;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    padding-left: 8px;

}
.center_list_right_r ul li a{
    text-decoration: none;
    color: #000000;
}
.center_list_right_r{
    float: left;
    width: 210px;
}
.center_list_right_r ul li img{
    width: 22px;
    height: 25px;
    line-height: 25px;
}
.clear{
    clear: both;
}
.main{
    float: left;
}
.img1{
    width: 550px;
    height: 240px;
}
.img2{
    width:200px ;
    height: 110px;
}
.banner_text{
    width: 1200px;
    background-color: #73C9E5;
    margin: 280px auto;
}
.banner_text img {
    width: 50px;
    height: 50px;
    line-height: 50px;
}
.banner_text ul li {
    list-style: none;
    float: left;
    height: 50px;
    line-height: 50px;
}
.banner_text ul li .ic{
    width: 30px;
    height: 30px;
    line-height: 30px;
}
.tuix ul li{
    list-style: none;
    float: left;
    height: 160px;
    margin-left: 15px;
}
.clear{
    clear: both;
}
.tuix ul li img{
    width:200px ;
    height: 110px;
}
.tuix ul li p{
    font-size: 14px;
    color: #050505;

}
.tuix .tuix_img{
    width:325px ;
    height: 160px;
}

.banner_text2 ul li{
    margin-top: 20px;
    list-style: none;
    float: left;
    height: 50px;
    line-height: 50px;
}
.banner_text2 ul li img{
    width: 50px;
    height: 50px;
}
.tuix2 ul li {
    margin-left: 15px;
    list-style: none;
    float: left;
}

.tuix2 ul li img{
    width:200px ;
    height: 110px;
}
.tuix2 ul li p{
    font-size: 14px;
    color: #050505;

}
.tuix2 .tuix_img2{
    width:325px ;
    height: 160px;
}
.footer {
    height: 420px;
    width: 100%;
    padding: 30px;
}
dl {
    float: left;
}

.footer_i dt {
    font-size: 16px;
    color: #999999;
    margin-bottom: 15px;
}
.footer_i dd {
    font-size: 14px;
    color: #333333;
    padding-bottom: 5px;
}
.footer_i dl {
    margin-right: 85px;
    margin-left: 15px;
}
.footer_right ul li {
    float: left;
    list-style: none;

}
.footer_right ul li img{
    width: 50px;
    height: 50px;
    margin-right: 20px;
}
.footer_right ul li a{
    color: #212121;
}
.bot_i{
    float: left;
}
.bot_i img {
    display: block;
    width: 90px;
    height: 40px;
}
.p span{
    font-size: 12px;
    color: #9fa19f;
}
.p{
    margin-left: 50px;
    display: flex;
    padding-left: 20px;
    color: #999;
    line-height: 24px;
}
.bot{
    margin-top: 20px;
}
.fix ul li{
    list-style:none;
    margin-bottom: 5px;
    font-size: 14px;
}
.fix ul li a{
    color: #000000;
    text-decoration: none;
}
.fix {
    position: fixed;
    top: 180px;
    right: 30px;
}