zoukankan      html  css  js  c++  java
  • 大作业“抽屉页面”html+css

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>抽屉新热榜</title>
        <link rel="stylesheet" href="抽屉css.css">
    </head>
    <body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="header">
        <div class="hearw">
        <div class="headercontent">
            <div><a href=""><img src="images/logo.png" alt=""></a></div>
            <div class="headercon">
                <div class="headerin"><a href="">全部</a></div>
                <div class="headerin" id="q42"><a href="">42区</a></div>
                <div class="headerin"><a href="">段子</a></div>
                <div class="headerin"><a href="">图片</a></div>
                <div class="headerin" id="at"><a href="">挨踢1024</a></div>
                <div class="headerin" id="nw"><a href="">你问我答</a></div>
            </div>
        </div>
        <div class="login">
            <div class="log"><a href="">注册</a></div>
            <div class="log"><a href="">登录</a></div>
            <div>
                <form action="">
                    <div><input type="text" id="inp"></div>
                    <div id="btn"><div id="win"></div></div>
                </form>
            </div>
        </div>
        </div>
    
    </div>
    <div class="content">
        <div class="bl">
            <div class="contenthead">
                <div class="lefthead">
                    <div class="head"><a href="">最热</a></div>
                    <div class="head"><a href="">发现</a></div>
                    <div class="head"><a href="">人类发布</a></div>
                </div>
                <div class="righthead">
                    <div class="head" id="fb"><a href="">+发布</a></div>
                    <div class="head"><a href="">3天</a></div>
                    <div class="head"><a href="">24小时</a></div>
                    <div class="head" id="hh"><a href="">即时排序</a></div>
                </div>
            </div>
            <div class="new">
                <div class="innew"><a href="">3条入热榜,点击查看</a></div>
            </div>
    
            <div class="incontent">
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="ud">
                    <div class="in1"><a href="" id="ina">【不顾美国警告 伊朗成功试射新导弹】昨日,在伊朗首都德黑兰的阅兵仪式上,伊朗新型弹道导弹“霍拉姆沙赫尔”号亮相。几个小时后,伊朗官方就公布了成功试射“霍拉姆沙赫尔”号导弹的视频。这已是伊朗第N次无视美国的警告,试射导弹了…</a>
                    <span class="in-text">-tech.ifeng.com</span>
                    <a href="" id="n">你问我答</a>
                    <div class="inner">浙江大学日前出台《浙江大学优秀网络文化成果认定实施办法(试行)》,对优秀网络文化成果提出的若干激励措施,引起大家热议。就优秀网络文化成果具体如何认定、认定优秀网络文化成果和晋升职称的关系等人们关心的问题,浙大相关负责人日前接受记者采访...</div>
                    <div class="click1">
                        <div id="c1"></div>
                        <div id="a1"><b><a href="">6</a></b></div>
                        <div id="c2"></div>
                        <div id="a2"><b><a href="">8</a></b></div>
                        <div id="c3"></div>
                        <div id="a3"><a href="">私藏</a></div>
                        <div id="c4"></div>
                        <div id="a4"><a href="">婊情包</a></div>
                        <div id="c5"><a href="">2小时40分钟前</a>入热榜</div>
                        <div class="mm1">
                            <div class="mt">分享到</div>
                            <div class="m1"><span id="mml"></span></div>
                            <div class="m1"><span id="mmm"></span></div>
                            <div class="m1"><span id="mmn"></span></div>
                            <div class="m1"><span id="mmo"></span></div>
                            <div class="m1"><span id="mmp"></span></div>
    
                        </div>
    
    
                    </div>
                </div>
                <div class="in2"><img src="images/1.gif" alt="" width="64"></div>
                </div>
                <div class="page">
                    <div class="p"><a href="">1</a></div>
                    <div class="p1"><a href="">2</a></div>
                    <div class="p1"><a href="">3</a></div>
                    <div class="p1"><a href="">4</a></div>
                    <div class="p1"><a href="">5</a></div>
                    <div class="p1"><a href="">6</a></div>
                    <div class="p1"><a href="">7</a></div>
                    <div class="p1"><a href="">8</a></div>
                    <div class="p1"><a href="">9</a></div>
                    <div class="p1"><a href="">10</a></div>
                    <div class="p2"><a href="">下一页</a></div>
    
    
                </div>
            </div>
        </div>
        <div class="rightcontent">
            <div class="h1">
                <span class="r1"><a href=""><img src="images/report.png" alt=""></a></span>
                <span class="r1 r2"><a href=""><img src="images/report_children.png" alt=""></a></span>
            </div>
            <div class="s1"></div><span class="r1"><a href="">如何避免自己被封号</a></span>
            <div class="h2"><span class="r1"><a href=""><img src="images/homepage_download.png" alt=""></a></span></div>
            <div class="all">24小时全部<span class="t10"> TOP 10</span></div>
            <div class="hot">最热榜</div>
        </div>
        <div class="top"><a href="" title="回到顶部"></a></div>
        <div class="Tbom">
            <div class="bottom">
                <div class="t1"><a href="">关于我们</a></div>
                <div class="t2">|</div>
                <div class="t1"><a href="">联系我们</a></div>
                <div class="t2">|</div>
                <div class="t1"><a href="">服务条款</a></div>
                <div class="t2">|</div>
                <div class="t1"><a href="">隐私政策</a></div>
                <div class="t2">|</div>
                <div class="t1"><a href="">抽屉新热榜工具</a></div>
                <div class="t2">|</div>
                <div class="t1"><a href="">下载客户端</a></div>
                <div class="t2">|</div>
                <div class="t1"><a href="">意见与反馈</a></div>
                <div class="t2">|</div>
                <div class="t1"><a href="">友情链接</a></div>
                <div class="t2">|</div>
                <div class="t1"><a href="">公告</a></div>
                <div class="t3"><a href=""><img src="images/ct_rss.gif" alt=""></a></div>
            </div>
            <div class="b2"><a href=""><img src="images/gozap-logo-50_15.gif" alt=""></a></div>
            <div class="b1">旗下站点 ©2017 chouti.com</div>
            <div class="b3"><a href="">京ICP备09053974号-3 京公网安备 110102004562</a></div>
            <div class="b4"><a href="">违法和不良信息举报: 电话:010-58302039 邮箱:jubao@chouti.com</a></div>
            <div class="b5">版权所有:北京格致璞科技有限公司</div>
        </div>
    </div>
    </body>
    </html>
    View Code
    *{margin: 0 auto;}
    a{text-decoration: none;}
    .left{ 166.5px;background-color: #ededed;height: 900px;position: fixed;top:44px;}
    .right{ 166.5px;background-color: #ededed;height: 900px;position: fixed;top:44px;right: 0;}
    .header{ 1349px;height: 44px;position: fixed;background-color: #2459a2;}
        .header .headercontent{}
        .hearw{margin-left: 166.5px;margin-right: 166.5px; 1016px;}
        .header div{float: left;line-height: 44px;font-size: 12px;}
        .header a{color: #c0cddf;}
        .headercon{margin-left:17px; }
        .header .headerin:hover{background-color: #396bb3;}
        .headercontent .headerin{53px;height:44px;text-align: center;float: left;}
        #q42{ 54.11px;}
        #at{ 79.2px;}
        #nw{ 77px;}
        .header img{margin-top: 11px;}
        .header .login{float: right;margin-right: 0;}
        .login a{color: white}
        .log{ 64px;text-align: center;margin-left: 10px;}
        .log:hover{background-color: #396bb3;}
        #inp{ 91px;height: 25px;padding: 2px 2px 2px 5px;border: 1px solid #e0e0e0;background-color: rgb(244, 244, 244);}
        #btn{ 31px;height: 29px;border: 1px solid #e0e0e0;background-color: #f4f4f4;padding:0;line-height: 44px;
            margin-top: 7px;}
        #win{ 11px;height: 12px;background: url("images/icon.png") no-repeat 0 -197px;margin-top: 10px;margin-left: 11px;}
    
    .content{margin: 44px;background-color: white;margin-left: 166.5px; 1016px;float: left;height: 1024px;}
        .bl{margin-left: 28px;margin-right: 28px;margin-top: 11px;float: left;}
        .contenthead{margin-left: 0; 630px;height: 43px;font-size: 12px;font-weight: 700;text-align: center;line-height: 26px;}
        .lefthead{float: left;}
        .lefthead .head{float: left; 60px;height: 26px;background: url("images/tip.png") no-repeat 0 -299px;}
        .lefthead .head a{color: #333333;}
        .lefthead .head a:hover{text-decoration: underline;}
        .righthead{float: right;}
        .righthead .head{float: right;line-height: 40px;margin-left: 10px;text-align: center;}
        .righthead #fb{margin-left: 10px; 134px;height: 30px;background-color: #84a42b;border: 1px solid #8aab30;line-height: 30px;font-size: 14px;}
        .righthead #fb a{color: #fff;}
        .righthead #tt{}
        .righthead a{color: #390;font-weight: 400;}
        .righthead #hh a{color: #b4b4b4;}
    .new{ 628px;height: 25px;margin-left: 0;border: 1px solid #fbe9c0;text-align: center;background-color: #fff9e2;font-size: 12px;line-height: 25px;}
        .new .innew a{color: #d47f39;}
        .new .innew a:hover{text-decoration: underline;}
    .ud{border-top: 1px solid;padding: 5px;float: left;}
    .incontent{ 630px;margin-left: 0;font-size: 14px;margin-top: 11px;}
        .incontent .in1{ 550px;float: left;clear: right;}
        .incontent .in1 #n{text-decoration: underline;color: #b4b4b4;font-size: 12px;margin-left: 10px;}
        .incontent .in1 #ina{color: #369;font-size: 14px;font-weight: 700;}
        .incontent .in-text{margin-left: 380px;color: #b4b4b4;font-size: 12px;}
        .incontent .in2{float: right;}
        .incontent #ina:hover{text-decoration: underline;}
        .incontent .inner{font-size: 12px;color: #787878;}
    .click1{margin-top: 11px;}
        .click1 a{font-size: 13px;color: #99aecb;}
        .click1 #c1{ 18px;height: 18px;float: left;}
        .click1 #c1{background: url("images/icon1.png") no-repeat 0 -40px;}
        .click1 #a1{margin-left: 5px;float: left;}
        .click1 #c2{ 18px;height: 18px;float: left;margin-left: 15px;}
        .click1 #c2{background: url("images/icon1.png") no-repeat 0 -100px;}
        .click1 #a2{margin-left: 5px;float: left;}
        .click1 #c3{ 18px;height: 18px;float: left;margin-left: 15px;}
        .click1 #c3{background: url("images/icon1.png") no-repeat 0 -160px;}
        .click1 #a3{margin-left: 5px;float: left;font-size: 15px;}
        .click1 #c4{ 17px;height: 17px;border: 1px solid #ccc;float: left;margin-left: 15px;}
        .click1 #c4{background: url("images/bqb.jpg") no-repeat 0 0;}
        .click1 #a4{margin-left: 5px;float: left;font-size: 15px;}
        .click1 #c5{height: 14px;float: left;margin-left: 15px;color: #ccc;}
        .click1 #c5 a{color: #e59373;}
    .click1 .mm1 {opacity: 0;}
    .click1 .mm1:hover {opacity: 1!important;}
        .click1 .mm1 .mt{margin-left:10px;color: #ccc;font-size: 12px;line-height: 20px;display: inline-block;float: left;}
        .click1 .mm1 .m1 #mml{margin-left:5px; 17px;height:14px;background: url("images/share_icon.png") no-repeat 0 0px;float: left;display: inline-block;}
        .click1 .mm1 .m1 #mmm{margin-left:5px; 17px;height:14px;background: url("images/share_icon.png") no-repeat 0 -15px;float: left;display: inline-block;}
        .click1 .mm1 .m1 #mmn{margin-left:5px; 17px;height:14px;background: url("images/share_icon.png") no-repeat 0 -30px;float: left;display: inline-block;}
        .click1 .mm1 .m1 #mmo{margin-left:5px; 17px;height:14px;background: url("images/share_icon.png") no-repeat 0 -45px;float: left;display: inline-block;}
        .click1 .mm1 .m1 #mmp{margin-left:5px; 17px;height:14px;background: url("images/share_icon.png") no-repeat 0 -60px;float: left;display: inline-block;}
    .page{margin-top: 10px;border-top: 1px solid; 100%;float: left;}
        .page a{text-decoration: none;color: black;}
        .page .p{ 34px;height: 34px;float: left;margin-left: 10px;margin-top: 5px;line-height: 34px;text-align: center;}
        .page .p1:hover{background-color: #369;}
        .page .p2:hover{background-color: #369;}
        .page .p1{ 34px;height: 34px;float: left;margin-left: 10px;margin-top: 5px;border: 1px solid;line-height: 34px;text-align: center;border-radius: 15%;}
        .page .p2{ 77px;height: 34px;float: left;margin-left: 10px;margin-top: 5px;border: 1px solid;line-height: 34px;text-align: center;border-radius: 5px;}
    .rightcontent{float: left;margin-right: 28px;margin-top: 11px; 300px;}
        .rightcontent .h1 .r1{display: inline-block;}
        .rightcontent .h1 .r2{margin-left: 8px;}
        .rightcontent .s1{margin-left:0;27px;height:18px;background: url("images/view.png") no-repeat 0 0;display: inline-block;margin-top: 10px;margin-right: 5px;}
        .rightcontent a{color: #369;font-size: 14px;font-weight: bold;text-decoration: none;}
        .rightcontent .h2{margin-top: 10px;}
        .rightcontent .all{font-size: 17px;font-weight: bold;}
        .rightcontent .all .t10{color: #c30;}
        .rightcontent .hot{ 300px;height: 35px;background-color: #4767b2;color: #f4f4f4;font-size: 12px;text-align: center;line-height: 35px;margin-top: 10px;}
    .top{height: 38px; 38px;position: fixed;top: 500px;left: 1200px;background: url("images/Back-to-the-top_38_78.png") no-repeat 0 0;}
    .Tbom{ 94%;border-top: 1px solid;margin-top: 50px;float: left;text-align: center;margin-left: 28px;margin-right: 28px;}
    .bottom{margin-left: 11%;text-align: center;}
        .bottom a{text-decoration: none;color: #369;font-size: 10px;}
        .bottom .t1{margin-left: 10px;margin-right: 10px;margin-top:15px;float: left;}
        .bottom .t2{float: left;margin-top: 15px;}
        .bottom .t3{float: left;margin-top: 18px;}
        .Tbom .b2{float: left;clear: left;margin-top: 7px;margin-left: 23%;}
        .Tbom .b1{font-size: 12px;margin-top: 7px;float: left;}
        .Tbom .b3{float: left;margin-top: 3px;}
        .b3 a{text-decoration: none;color: #999;font-size: 10px;}
        .Tbom .b4{float: left;clear: left;margin-top: 3px;margin-left: 28%;}
        .b4 a{text-decoration: none;color: #999;font-size: 10px;}
        .Tbom .b5{float: left;clear: left;margin-top: 3px;margin-left: 40%;color: #999;font-size: 10px;}
    抽屉CSS
  • 相关阅读:
    意外发现,VC断点可加在构造函数的左括号上
    C++中的INL
    如何用DELPHI编程修改外部EXE文件的版本信
    j2ee面试宝典翻译(1)
    华为总裁任正非:允许小部分力量去颠覆性创新
    QStringList与QString互转
    QTreeView只显示指定驱动器及其目录,隐藏所有兄弟节点
    Protected Functions 是理解OO的难点和关键
    技术人员的创业陷阱:我能,但不管用户在哪里!
    大陆的创业环境和风气的确产生巨大变化,大众创业“蔚然成风”
  • 原文地址:https://www.cnblogs.com/fenglin0826/p/7592546.html
Copyright © 2011-2022 走看看