<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .top-nav{
                width: 1000px;
                height: 0px;
                background-color: gainsboro;
            }
            .container{
                width: 1349px;
                height: 973px;
            }
            .content{
                width: 960px;
                height: 112px;
                margin: 0px auto;
            }
            .logo-banner{
                width: 100%;
                height: 101px;
            }
            .q1{
                width: 80px;
                float: left;
                height: 36px;
            }
            .q1:hover{
                background-color: #FF8C00;
            }
            .logo-right{
                width: 564px;
                height: 101px;
                float: right;
            }
            .join{
                width: 564px;
                height: 36px;
                text-align: right;
            }
            .tdcq{
                 width: 564px;
                 height 76px;
            }
            .content-nav{
                width: 100%;
                height: 36px;
                background-color: chartreuse;
            }
            .content-1{
                width: 960px;
                height: 360px;
            }
            .content-2{
                width: 960px;
                height: 256px;
            }
            .content-2-1{
                width: 245px;
                height: 206px;
                background-color: chartreuse;
                float: left;
            }
            .content-2-2{
                width: 395px;
                height: 211px;
                float: left;
            }
            .content-2-2-top{
                width: 395px;
                height: 33px;
                
            }
            .content-2-2-top-1{
                width: 276px;
                height: 32px;
                float: left;
            }
            .w1{
                width: 92px;
                height: 32px;
                float: left;
            }
            .content-2-2-top-2{
                width: 60px;
                height: 32px;
                float: right;
            }
            .content-2-2-top-3{
                width: 395px;
                height: 170px;
                float: left;
                background-color: #F4F4F4;
            }
            ul{
                list-style: none;
            }
            .content-2-3{
                width: 250px;
                height: 207px;
                float: right;
            }
            .content-2-3-top{
                width: 250px;
                height: 32px;
                background-color: darkorange;
            }
            .content-2-3-1{
                width: 250px;
                height: 175px;
            }
            .footer{
                width: 960px;
                height: 209px;
            }
            .footer-1{
                width: 940px;
                height: 168px;
            }
            .footer-1-1,
            .footer-1-2,
            .footer-1-3,
            .footer-1-4{
                width: 940px;
                height: 30px;
            }
            .footer-2{
                width: 940px;
                height: 17px;
            }
        </style>
    </head>
    <body>
        <div class="top-nav"></div>
        <div class="container">
            <div class="content">
                <img src="img/logo.jpg" />
            <div class="logo-right">
                <div class="join">
                    <span>|</span>
                    <a href="山东现代学院">设为首页</a>
                    <span>|</span>
                    <a href="#">加为收藏</a>
                    <span>|</span>
                       <a href="##">院长信箱</a>
                    <span>|</span>
                    <a href="###"> English</a>
                </div>
                <div class="tdcq">
                    <img src="img/tdcq.jpg" />
                </div>
            </div>
            <div class="content-nav">
                    <a href="#"><div class="q1">首页</div></a>
                    <a href="#"><div class="q1">学校概况</div></a>
                    <a href="#"><div class="q1">二级学院</div></a>
                    <a href="#"><div class="q1">教学网</div></a>
                    <a href="#"><div class="q1">学生工作网</div></a>
                    <a href="#"><div class="q1">招进网</div></a>
                    <a href="#"><div class="q1">就业网</div></a>
                    <a href="#"><div class="q1">现代党建</div></a>
                    <a href="#"><div class="q1">共青团委</div></a>
                    <a href="#"><div class="q1">图书馆</div></a>
                    <a href="#"><div class="q1">人力资源</div></a>
                    <a href="#"><div class="q1">海外交流</div></a>
                </div>
                <div class="content-1">
                    <img src="img/20160505142800280.jpg" />
                </div>
                <div class="content-2">
                    <div class="content-2-1">
                        <ul>
                                    <li>
                                        <a href="##" class="e1">图说现代</a>
                                    </li>
                                    <li>
                                        <a href="##" class="e1">视频看现代</a>
                                    </li>
                                    <li>
                                        <a href="##" class="e1">2017增设本科专业</a>
                                    </li>
                                </ul>
                    </div>
                    <div class="content-2-2">
                        <div class="content-2-2-top">
                            <div class="content-2-2-top-1">
                                <ul>
                                    <li>
                                        <a href="##" class="w1">学院新闻</a>
                                    </li>
                                    <li>
                                        <a href="##" class="w1">通知公告</a>
                                    </li>
                                    <li>
                                        <a href="##" class="w1">学院文化</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="content-2-2-top-2">
                                <a href="#">+MORE</a>
                            </div>
                            <div class="content-2-2-top-3">
                                <div class="content-2-2-top-3">
                                    <ul>
                                        <li>
                                            <a href="##" class="a1">我院隆重举办2017届学生毕业典礼</a><span>[07/20]</span></li>
                                        <li>
                                            <a href="##" class="a1">我院成功举办2017年毕业生就业双选会</a><span>[07/20]</span></li>
                                        <li>
                                            <a href="##" class="a1">我院与齐鲁安替制药有限公司合作成立订单班</a><span>[07/20]</span></li>
                                        <li>
                                            <a href="##" class="a1">我院8名学生第十三届中国青少年艺术展演大赛中获奖</a><span>[07/20]</span></li>
                                        <li>
                                            <a href="##" class="a1">我院又成立"宏济堂班"、"中维班"两个订单班</a><span>[07/20]</span></li>
                                        <li>
                                            <a href="##" class="a1">我院赴山东宏济堂制药集团参观考察</a><span>[07/20]</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-2-3">
                        <div class="content-2-3-top">
                            <div class="s1">校园报道</div>
                        </div>
                        <div class="content-2-3-1">
                            <img src="img/201310231043484348.jpg" />
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <center>
                        <div class="footer-1">
                                <div class="footer-1-1">
                                <a href="#">部门设置</a>
                                <span>|</span>
                                <a href="#">精品课程</a>
                                <span>|</span>
                                <a href="#">信息公开</a>
                                <span>|</span>
                                <a href="#">网上报名</a>
                                <span>|</span>
                                <a href="#">在线咨询</a>
                                <span>|</span>
                                <a href="#">校庆专题</a>
                                <span>|</span>
                                <a href="#">教务平台(校内)</a>
                                <span>|</span>
                                <a href="#">教务平台(校外)</a>
                            </div>
                            <div class="footer-1-2">
                                <a href="#">OA办公系统(校内)</a>
                                <span>|</span>
                                <a href="#">OA办公系统(校外)</a>
                            </div>
                            <div class="footer-1-3">
                                <a href="#">山东现代学院VR全景校园展示720yun.com/t/cd4jkrsfzw5</a>
                            </div>
                            <div class="footer-1-4">
                                <img src="img/备案图标 (1)_看图王(1).png" />鲁公网安备 37011202000499号
                            </div>
                            <div class="footer-2">
                                <a href="#">鲁ICP备13013327号-2</a>
                            </div>
                    </center>
            </div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

posted on 2017-07-19 10:45  唯懿  阅读(239)  评论(0编辑  收藏  举报