大作业“抽屉页面”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 邮箱：[email protected]</a></div>
        <div class="b5">版权所有：北京格致璞科技有限公司</div>
    </div>
</div>
</body>
</html>

*{margin: 0 auto;}
a{text-decoration: none;}
.left{width: 166.5px;background-color: #ededed;height: 900px;position: fixed;top:44px;}
.right{width: 166.5px;background-color: #ededed;height: 900px;position: fixed;top:44px;right: 0;}
.header{width: 1349px;height: 44px;position: fixed;background-color: #2459a2;}
    .header .headercontent{}
    .hearw{margin-left: 166.5px;margin-right: 166.5px;width: 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{width:53px;height:44px;text-align: center;float: left;}
    #q42{width: 54.11px;}
    #at{width: 79.2px;}
    #nw{width: 77px;}
    .header img{margin-top: 11px;}
    .header .login{float: right;margin-right: 0;}
    .login a{color: white}
    .log{width: 64px;text-align: center;margin-left: 10px;}
    .log:hover{background-color: #396bb3;}
    #inp{width: 91px;height: 25px;padding: 2px 2px 2px 5px;border: 1px solid #e0e0e0;background-color: rgb(244, 244, 244);}
    #btn{width: 31px;height: 29px;border: 1px solid #e0e0e0;background-color: #f4f4f4;padding:0;line-height: 44px;
        margin-top: 7px;}
    #win{width: 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;width: 1016px;float: left;height: 1024px;}
    .bl{margin-left: 28px;margin-right: 28px;margin-top: 11px;float: left;}
    .contenthead{margin-left: 0;width: 630px;height: 43px;font-size: 12px;font-weight: 700;text-align: center;line-height: 26px;}
    .lefthead{float: left;}
    .lefthead .head{float: left;width: 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;width: 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{width: 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{width: 630px;margin-left: 0;font-size: 14px;margin-top: 11px;}
    .incontent .in1{width: 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{width: 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{width: 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{width: 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{width: 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;width: 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;width: 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;width: 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;width: 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;width: 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;width: 100%;float: left;}
    .page a{text-decoration: none;color: black;}
    .page .p{width: 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{width: 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{width: 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;width: 300px;}
    .rightcontent .h1 .r1{display: inline-block;}
    .rightcontent .h1 .r2{margin-left: 8px;}
    .rightcontent .s1{margin-left:0;width: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{width: 300px;height: 35px;background-color: #4767b2;color: #f4f4f4;font-size: 12px;text-align: center;line-height: 35px;margin-top: 10px;}
.top{height: 38px;width: 38px;position: fixed;top: 500px;left: 1200px;background: url("images/Back-to-the-top_38_78.png") no-repeat 0 0;}
.Tbom{width: 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

时间： 2024-08-29 00:05:25

大作业“抽屉页面”html+css的相关文章

页面定制CSS代码初探：页面变宽 文本自动换行 图片按比缩放

一.初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱了,设置里找了下,->博客侧边栏公告 <-,在这里,放了张宽200px的图,好看多了马上,还是有图才不会那么单调~ 二.认识CSS 过了几天,打算写篇博,发现了一个重大的问题,怎么默认的宽度这么窄?那我放图片怎么办,而且,2边留那么多空白不浪费吗,留个5%就够了吧.于是乎,开始了2天的全折腾.

HTML页面和CSS文件

HTML页面和CSS文件,如男人和女人. 每个HTML都希望自己能呈现给别人亲和的引入注目的感觉,CSS可以帮助HTML实现这样的目的. 虽然没有CSS,HTML也可以自己完成同样的修饰,但是可能会一片混乱,不像有CSS的HTML那样,让内容和修饰分开.而仅有CSS,很多想要的效果却也无法看出. 有一些呈现的布局效果是HTML自身不能实现的,比如CSS里的伪类.组合.就想男人没有女人,也不会体现出他对家的责任,对爱人的关怀. 当HTML页面和CSS文件在一起久了,HTML页面里会不断的增加新的东

[现代信息检索]搜索引擎大作业

[现代信息检索]搜索引擎大作业 一.题目要求: 新闻搜索:定向采集3-4个体育新闻网站,实现这些网站信息的抽取.索引和检索.网页数目不少于10万条.能按相关度.时间.热度(需要自己定义)等属性进行排序,能实现相似新闻的自动聚类. 二.题目分析 题目分析:我们将任务分解为四个部分:新闻数据的爬取.倒排索引的构建.向量空间模型的实现 和 前端界面. 主要分为四个模块:网络爬虫.构建索引.文档评分.排序显示.其中模块与模块之间又包含一些子模块,包括:网页信息抽取.数据存储.文本分析.tf-idf 权重

编译原理大作业(用java编写小型GCC 编译器)

以前只用编译器编译程序,现在学完编译原理这门课以后,通过编译大作业,我对编译器的工作原理有了比较清晰的认识 编译器的工作原理 编译器 (Compiler) 是一种将由一种语言编写的程序转换为另一种编程语言的可执行程序. 现代软件对于编译器的需求远甚从前, 究其原因很简单: 作为中间层, 编译器是构建更高层抽象的基础设施. 编译器意欲将人类可阅读的高阶代码, 翻译为机器能运行的低阶代码. 现代编译器的主要工作流程为: 源代码(source code)→ 预处理器(preprocessor)→ 编译

XML大作业

XML大作业 共两题,均于实验上机完成 第一题:在xml文档中使用DTD 第二题:掌握使用xsl显示xml文件的基本方法 第一题: 一.实验目的 (1)通过本实验,使学生能够了解并掌握XML DTD的定义方法及其用途 (2)了解并掌握DTD元素申明的基本语法 (3)了解并掌握DTD属性申明的基本语法 (4)了解并掌握DTD实体申明的基本语法 (5)了解并掌握DTD标记申明的基本语法 (6)了解并掌握XMLSpy中基于DTD的XML文件输入 二.实验条件 配置有windows记事本.写字板或XML

爬虫大作业~以爬取hao123漫画为例

一.准备过程 首先打开hao123漫画筛选区,网址是https://www.hao123.com/manhua/list/?finish=&audience=&area=&cate=&order=1 在这里可以通过审查模式看到第一页的详细信息,而目的则是通过爬取漫画筛选页面的每部漫画的人气与题材来分析最近漫画迷的观漫需求 环境如下: python3.6.2 PyCharm Windows8.1 第三方库(jieba,wordcloud,bs4,Requests,re,wor

《Java语言程序设计》大作业报告 九宫格游戏

    <Java语言程序设计>大作业报告     中国石油大学(北京)2015 - 2016 学年第二学期     班级:_____计算机14-1_______ 姓名:_____  许 恺_________________ 学号:______2014011329___________     题意分析 程序首先需要九个可以移动的格子,大小相等,有字符串标示,其次要可以相应鼠标和键盘方向键的控制,可以自由移动,并且与此同时记录步数,最后在满足条件时弹出对话框并显示步数以及是否打破记录,关于打破

数据库大作业--由python+flask

这个是项目一来是数据库大作业,另一方面也算是再对falsk和python熟悉下,好久不用会忘很快. 界面相比上一个项目好看很多,不过因为时间紧加上只有我一个人写,所以有很多地方逻辑写的比较繁琐,如果是想学习flask还是推荐之前的项目,地址:http://www.cnblogs.com/INnoVationv2/p/5837495.html 寒假回去我会重构下代码,然后再po出来. 不知道怎么做数据库大作业的也可以参考: 所有功能: 三类用户模式: 一.管理员 1.查看所有档案 2.修改档案信息

博客园页面定制CSS代码

博客园页面定制CSS代码 1 #home { 2 margin: 0 auto; 3 width: 80%;/*原始65*/ 4 min-width: 980px;/*页面顶部的宽度*/ 5 background-color: rgba(245, 245, 245, 0.7); 6 padding: 30px; 7 margin-top: 50px; 8 margin-bottom: 50px; 9 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);