QDLG H5

其他 2019-01-14 09:10:59 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013589137/article/details/80658380 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>青岛理工大学</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-size: 12px;
            font-family: 微软雅黑;
            color: black;
        }
        li{
            list-style: none;
        }
        #head_H{
            height: 40px;
            width: 100%;
            background-color: black;
        }
        .contant{
            width: 1200px;
            height: 100%;
            color: white;
            /*background-color: #f7f7f7;*/
            margin: 0 auto;
        }
        .contant li{
            color: white;
        }
        #head_F .contant div:hover{
            background-color: #90000a;
        }
        #H_right{
            font-size: 14px;
            line-height: 40px;
            color: #fff;
            float: left;
        }
        #H_left{
            font-size: 14px;
            line-height: 40px;
            color: #fff;
            float: right;
        }
        #head_B{
            width: 100%;
            height: 128px;
            background-color: #90000a;
        }
        #head_B_img1{
            width: 358px;
            height: 82px;
            float: left;
            background-image: url("img/qd_06.jpg");
            margin-top: 22px;

        }
        #head_B_img2{
            width: 800px;
            height: 128px;
            background-image: url("img/qd_03.jpg");
            float: right;
        }
        #head_F{
            width: 100%;
            height: 43px;
            background-color: #6F020a;
        }
        #head_F .contant div{
            width: 99px;
            height: 100%;
            line-height: 43px;
            text-align: center;
            font-size: 15px;
            float: left;
            color: white;
            /*border:  solid black;*/
        }
        #B_head_img{
            width: 1200px;
            height: 465px;
            /*background-color: #f7f7f7;*/
            background: url("img/mm01.jpg") #f7f7f7;
            background-size: 100% 100%;
            animation: banner 80s infinite;
        }
        @keyframes banner {
            11%{
                background-image: url("img/1200x464---1.JPG");
            }
            23%{
                background-image: url("img/1200x464---2.JPG");
            }
            34%{
                background-image: url("img/mm03.jpg");
            }
            45%{
                background-image: url("img/gg7_07.jpg");
            }
            56%{
                background-image: url("img/1.jpg");
            }
            67%{
                background-image: url("img/ggjjll.jpg");
            }
            78%{
                background-image: url("img/mm02.jpg");
            }
            89%{
                background-image: url("img/z03.jpg");
            }
        }
        #body{
            background-color: #f7f7f7;
        }
        #B_block{
            height: 1778px;
            width: 100%;
            margin: 0 auto;
            background: url("img/bb11_11.jpg") no-repeat #f7f7f7 50% 0;
            /*background-position: 50% 0%;*/
            /*background-repeat: no-repeat;*/
            /*background-color: #f7f7f7;*/
        }
        #B_part1{
            height: 766px;
            width: 1200px;
            margin: 0 auto;
        }
        #B_inform{
            width: 340px;
            height: 100%;
            float: left;
        }
        #B_F_head{
            height: 46px;
            width: 100%;
            background-color: #90000a;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        #B_F_H_1{
            font-size: 24px;
            line-height: 46px;
            font-weight: bold;
            float: left;
            color: #ffffff;
            text-indent: 25px;
        }
        #B_F_H_2{
            font-size: 14px;
            line-height: 40px;
            float: right;
            color: #ffffff;
            padding-left: 20px;
            margin-right: 15px;
        }
        .B_F_part1{
            height: 77px;
            background: url("img/qd_16.jpg") 63px 0 no-repeat;
        }
        .B_F_part1 .part1{
            color: red;
            width: 47px;
            height: 51px;
            float: left;
            padding: 10px 0;
        }
        .B_F_part1 .part1 h3{
            font-size: 14px;
            color: #96010c;
            line-height: 25px;
            text-align: center;
            font-weight: normal;
        }
        .B_F_part1 .part1 p{
            color: #96010c;
            line-height: 25px;
            text-align: center;
        }
        .B_F_part1 .part2{
            width: 260px;
            height: 51px;
            line-height: 25px;
            font-size: 14px;
            float: right;
            border-bottom: 1px solid #e5e3e3;
            padding: 10px 0;
        }
        #B_part1 #B_new{
            width: 790px;
            height: 100%;
            float: right;
            background-color: #ffffff;
            padding: 0 25px;
        }
        #B_N_head{
            height: 42px;
            background: url("img/lcdx_017.png") bottom repeat-x;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        #B_N_H_head{
            font-size: 24px;
            line-height: 40px;
            font-weight: bold;
            color: #96010c;
            float: left;
            border-bottom: 1px solid #96010c;
        }
        #tag{
            float: right;
            line-height: 40px;
            font-size: 14px;
        }
        #B_N_img{
            width: 100%;
            height: 208px;
        }
        #B_N_img1{
            width: 356px;
            height: 208px;
            float: left;
            background-image: url("img/EBB19DC300EC62E05BBEDB8FB5F_4B13B356_4EE0.jpg");
            background-size: 100% 100%;
            position: relative;
        }
        #B_N_img2{
            width: 356px;
            height: 208px;
            float: right;
            background-image: url("img/CA87C1F3D9E3419745DB94199F3_3675BE4A_18AD7.jpg");
            background-size: 100% 100%;
            position: relative;
        }
        #B_N_text{
            width: 100%;
            height: 440px;
            margin-top: 20px;
            /*background-color: #00A000;*/
        }
        #B_N_text .B_N_text{
            width: 360px;
            float: left;
            height: 42px;
            border-bottom: 1px solid #ededed;
            font-size: 14px;
            line-height: 42px;
            font-weight: normal;
            margin-left: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }
        #B_N_text .B_N_text1{
            width: 360px;
            float: right;
            height: 42px;
            border-bottom: 1px solid #ededed;
            font-size: 14px;
            line-height: 42px;
            font-weight: normal;
            margin-left: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #B_part2{
            width: 1200px;
            height: 336px;
            margin: 0 auto;
        }
        #B_part2 img{
            height: 100%;
            width: 360px;
            float: left;
        }
        #B_scroll{
            width: 840px;
            height: 100%;
        }
        #B_part3{
            width: 1200px;
            height: 298px;
            margin: 0 auto;
        }
        #B3_text{
            width: 524px;
            height: 230px;
            padding: 40px 30px 28px 40px;
            background-color: #e9eaea;
            float: left;
        }
        #B3_text li{
            line-height: 40px;
            text-align: right;
            background: url("img/17E012FBJMR1X%5D3%[email protected]") left center no-repeat;
            font-size: 14px;
            text-indent: 10px;

        }
        #B3_text a{
            font-size: 14px;
            float: left;
            text-align: left;
        }
        #B3_img{
            width: 605px;
            height: 298px;
            float: left;
            background-image: url("img/28.jpg");
        }
        #B_part3 .B3_tag{
            width: 264px;
            height: 298px;
            background: url("img/hh.png") no-repeat;
            background-size: 100% 100%;
            float: right;
            position: relative;
            right: 0;
        }
        .B3_tag h3{
            font-size: 28px;
            border-bottom: 1px solid #fff;
            margin: 0 auto;
            text-align: center;
            height: 45px;
            color: #fff;
            width: 150px;
            padding-top: 120px;
        }
        .B3_tag p{
            width: 150px;
            padding-top: 20px;
            text-align: right;
            margin: 0 auto;
            color: #fff;
            font-size: 14px;
        }
        #B_part4{
            width: 1200px;
            height: 308px;
            margin: 0 auto;
            background-color: #0000FF;
        }
        #B4_part1{
            background: #90000a;
            width: 285px;
            height: 308px;
            float: left;
        }
        #B4_part2{
            background-image: url("img/CDEBA8F0DA4B2B5A1060AA17686_54E84D73_11CC9.jpg");
            width: 305px;
            height: 308px;
            background-size: 100% 100%;
            float: left;
        }
        #B4_part3{
            background-image: url("img/4AA0BF19F3E115143163E25D6FE_F07B9B75_3CDDE.jpg");
            width: 305px;
            height: 308px;
            background-size: 100% 100%;
            float: left;
        }
        #B4_part4{
            background-image: url("img/42860AFBD7BCF7E267DBD5C323E_0F036894_1719B.jpg");
            width: 305px;
            height: 308px;
            background-size: 100% 100%;
            float: left;
        }
        #B4_part1_head{
            width: 80%;
            margin: 0 auto;
            height: 40px;
            padding-top: 20px;
        }
        #B4_part1_head .B4_part1_head1{
            width: 120px;
            float: left;
            line-height: 40px;
            font-size: 28px;
            font-weight: bold;
            color: white;
        }
        #B4_part1_head .B4_part1_head2{
            font-size: 14px;
            float: right;
            border-bottom: 1px solid #fff;
            line-height: 35px;
            color: white;
        }
        #B4_part1_text{
            width: 85%;
            margin: 0 auto;
            height: auto;
            padding-top: 20px;
            font-size: 14px;
            line-height: 30px;
            color: #fff;
        }
        #Relate_Links{
            height: 70px;
            width: 1200px;
            margin: 0 auto;
        }
        #link{
            width: 125px;
            background: url("img/kk11_43.jpg") right center no-repeat;
            height: 70px;
            color: #90000a;
            font-size: 24px;
            line-height: 70px;
            font-weight: bold;
            float: left;
        }
        .link{
            width: 140px;
            padding-left: 60px;
            height: 40px;
            float: left;
            padding-top: 25px;
        }
        #foot{
            height: 80px;
            background: #640008;
            width: 100%;
        }
        #F_contant{
            width: 1200px;
            height: 80px;
            margin: 0 auto;
            background: url("img/qd_41.jpg") 0 10px no-repeat;
        }
        #F_text{
            width: 780px;
            float: left;
            line-height: 30px;
            padding-left: 70px;
            padding-top: 10px;
        }
        #F_text p{
            color: white;
        }
        #F_contant img{
            float: left;
        }
        #F_ph{
            padding-top: 35px;
            float: left;
            color: white;
            padding-left: 30px;
        }
        #F_img{
            width: 80px;
            height: 80px;
            float: right;
        }
        #img{
            width: 30px;
            height: 30px;
            background: url("img/qd_44.jpg") no-repeat;
            /*background-repeat: no-repeat;*/
            margin-top: 25px;
        }
        #B_part6{
            width: 100%;
            height: 273px;
            background: url("img/bb1_50.jpg") center repeat-x;
        }
        #B6_contant{
            width: 1200px;
            margin: 0 auto;
            height: 150px;
            padding-top: 40px;
        }
        #B6_img{
            width: 700px;
            float: left;
            height: 118px;
            padding-top: 40px;
        }
        #B6_img img{
            min-width: 100px;
            float: left;
            padding-right: 6px;
        }
        #B6_small{
            width: 495px;
            float: right;
            height: 80px;
            padding-top: 50px;
        }
        #small01{
            width: 70px;
            height: 30px;
            text-align: center;
            float: left;
            background: url("img/d01.png") center top no-repeat;
            padding-top: 50px;
            padding-left: 10px;
            line-height: 30px;
            color: #d7b8b9;
        }
        #small02{
            width: 70px;
            height: 30px;
            text-align: center;
            float: left;
            background: url("img/d02.png") center top no-repeat;
            padding-top: 50px;
            padding-left: 10px;
            line-height: 30px;
            color: #d7b8b9;
        }
        #small03{
            width: 70px;
            height: 30px;
            text-align: center;
            float: left;
            background: url("img/d03.png") center top no-repeat;
            padding-top: 50px;
            padding-left: 10px;
            line-height: 30px;
            color: #d7b8b9;
        }
        #small04{
            width: 70px;
            height: 30px;
            text-align: center;
            float: left;
            background: url("img/d04.png") center top no-repeat;
            padding-top: 50px;
            padding-left: 10px;
            line-height: 30px;
            color: #d7b8b9;
        }
        #small05{
            width: 70px;
            height: 30px;
            text-align: center;
            float: left;
            background: url("img/d05.png") center top no-repeat;
            padding-top: 50px;
            padding-left: 10px;
            line-height: 30px;
            color: #d7b8b9;
        }
        #small06{
            width: 70px;
            height: 30px;
            text-align: center;
            float: left;
            background: url("img/d06.png") center top no-repeat;
            padding-top: 50px;
            padding-left: 10px;
            line-height: 30px;
            color: #d7b8b9;
        }
        #head_F .contant div ul{
            height: 0;
            overflow: hidden;
            transition: all 0.5s;
            background-color: #90000a;
        }
        #head_F .contant div:hover ul {
            height: 210px;
        }
    </style>
</head>
<body>
<div id="head">
    <div id="head_H">
        <div class="contant">
            <p id="H_right">今日时间:</p>
            <p id="H_left">加入收藏 | 设为首页 | English Version | 在校生 | 教职工</p>
        </div>
    </div>
    <div id="head_B">
        <div class="contant">
            <div id="head_B_img1"></div>
            <div id="head_B_img2"></div>
        </div>
    </div>
    <div id="head_F">
        <div class="contant">
            <div>首页</div>
            <div>校情总览
                <ul>
                    <li>校情总览</li>
                    <li>校情总览</li>
                    <li>校情总览</li>
                    <li>校情总览</li>
                </ul>
            </div>
            <div>组织机构
                <ul>
                    <li>校情总览</li>
                    <li>校情总览</li>
                    <li>校情总览</li>
                    <li>校情总览</li>
                </ul>
            </div>
            <div>院部设置
                <ul>
                    <li>校情总览</li>
                    <li>校情总览</li>
                    <li>校情总览</li>
                    <li>校情总览</li>
                </ul></div>
            <div>师资队伍
                <ul>
                    <li>校情总览</li>
                    <li>校情总览</li>
                    <li>校情总览</li>
                    <li>校情总览</li>
                </ul></div>
            <div>教育教学</div>
            <div>科学研究</div>
            <div>招生就业</div>
            <div>合作交流</div>
            <div>公共服务</div>
            <div>校园生活</div>
            <div>理工新闻</div>
        </div>
    </div>
</div>
<div id="body">
    <div class="contant">
        <div id="B_head_img"></div>
    </div>
    <div id="B_block">
        <!--766+336+298+308+70-->
        <div id="B_part1">
            <div id="B_inform">
                <div id="B_F_head">
                    <div id="B_F_H_1">通知公告</div>
                    <div id="B_F_H_2">更多>></div>
                </div>
                <ul>
                    <li class="B_F_part1">
                        <div class="part1">
                            <h3>2018</h3>
                            <p>06-05</p>
                        </div>
                        <div class="part2">
                            <p>关于缴费平台暂停使用的通知</p>
                        </div>
                    </li>
                    <li class="B_F_part1">
                        <div class="part1">
                            <h3>2018</h3>
                            <p>06-05</p>
                        </div>
                        <div class="part2">
                            <p>关于建立我校2019-2021年上级教育专项项目库的通知</p>
                        </div>
                    </li>
                    <li class="B_F_part1">
                        <div class="part1">
                            <h3>2018</h3>
                            <p>06-04</p>
                        </div>
                        <div class="part2">
                            <p>关于认真组织学习《习近平新时代中国特色社会主义思想三十讲》的通知</p>
                        </div>
                    </li>
                    <li class="B_F_part1">
                        <div class="part1">
                            <h3>2018</h3>
                            <p>06-01</p>
                        </div>
                        <div class="part2">
                            <p>青岛理工大学关于开展“2018齐鲁最美教师”评选活动的通知</p>
                        </div>
                    </li>
                    <li class="B_F_part1">
                        <div class="part1">
                            <h3>2018</h3>
                            <p>06-01</p>
                        </div>
                        <div class="part2">
                            <p>关于加强VPN使用的通知</p>
                        </div>
                    </li>
                    <li class="B_F_part1">
                        <div class="part1">
                            <h3>2018</h3>
                            <p>06-01</p>
                        </div>
                        <div class="part2">
                            <p>关于申报教育部2018年度高等学校科学研究优秀成果奖（科学技术）的通知</p>
                        </div>
                    </li>
                    <li class="B_F_part1">
                        <div class="part1">
                            <h3>2018</h3>
                            <p>05-30</p>
                        </div>
                        <div class="part2">
                            <p>招标：2018秋季-2019春季教材采购公开招标</p>
                        </div>
                    </li>
                    <li class="B_F_part1">
                        <div class="part1">
                            <h3>2018</h3>
                            <p>05-29</p>
                        </div>
                        <div class="part2">
                            <p>关于报送各单位档案工作人员信息的通知</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="B_new">
                <div id="B_N_head">
                    <div id="B_N_H_head">理工新闻</div>
                    <div id="tag">更多>></div>
                </div>
                <div id="B_N_img">
                    <div id="B_N_img1"></div>
                    <div id="B_N_img2"></div>
                </div>
                <div id="B_N_text">
                    <div class="B_N_text">青岛市人大常委会来校调研</div>
                    <div class="B_N_text1">中共青岛理工大学产业总支委员会召开党员大会</div>
                    <div class="B_N_text">我校特聘院士Wittmann教授接受中央电视台英文频道直播专访</div>
                    <div class="B_N_text1">青岛市公安局国保支队突击检查学校安保工作</div>
                    <div class="B_N_text">我校12名教师入选国家青年骨干教师出国研修项目</div>
                    <div class="B_N_text1">我校学生在2018年山东省“学创杯”大赛中取得佳绩</div>
                    <div class="B_N_text">我校获评山东省“创新创业典型经验高校”</div>
                    <div class="B_N_text1">我校学子在省大学生科技节创新创业沙盘模拟经营大赛总决赛中获佳绩</div>
                    <div class="B_N_text">中共青岛理工大学后勤一总支委员会召开党员大会</div>
                    <div class="B_N_text1">艺术与设计学院召开总支部委员会党员大会</div>
                    <div class="B_N_text">我校获批两个青岛市发改委工程研究中心</div>
                    <div class="B_N_text1">建筑与城乡规划学院召开总支部委员会党员大会</div>
                    <div class="B_N_text">中共青岛理工大学临沂校区委员会党员大会召开</div>
                    <div class="B_N_text1">中共青岛理工大学后勤二总支部委员会召开党员大会</div>
                    <div class="B_N_text">理学院召开总支委员会党员大会</div>
                    <div class="B_N_text1">我校获2018年青岛高校田径运动会甲组团体总分第二名</div>
                    <div class="B_N_text">2018“感动理工”人物评选活动正式启动</div>
                    <div class="B_N_text1">山东省新旧动能转换下的创新创业学术会议在我校召开</div>
                </div>
            </div>
        </div>
        <div id="B_part2">
            <img src="img/00000.jpg"/>
            <div id="B_scroll"></div>
        </div>
        <!-- 298-->
        <div id="B_part3">
            <div id="B3_text">
                <ul>
                    <li><a>中央电视台英语新闻频道:特聘院士Wittmann教授接受直播专访</a>2018-06-06</li>
                    <li><a>中央电视台英语新闻频道:特聘院士Wittmann教授接受直播专访</a>2018-06-06</li>
                    <li><a>中央电视台英语新闻频道:特聘院士Wittmann教授接受直播专访</a>2018-06-06</li>
                    <li><a>中央电视台英语新闻频道:特聘院士Wittmann教授接受直播专访</a>2018-06-06</li>
                    <li><a>中央电视台英语新闻频道:特聘院士Wittmann教授接受直播专访</a>2018-06-06</li>
                    <li><a>中央电视台英语新闻频道:特聘院士Wittmann教授接受直播专访</a>2018-06-06</li>

                </ul>
            </div>
            <div id="B3_img">
                <div class="B3_tag">
                    <h3>媒体理工</h3>
                    <p>更多>></p>
                </div>
            </div>

        </div>
        <div id="B_part4">
            <div id="B4_part1">
                <div id="B4_part1_head">
                    <div class="B4_part1_head1">理工文化</div>
                    <div class="B4_part1_head2">更多>></div>
                </div>
                <div id="B4_part1_text">青岛理工大学是一所以工为主，理工结合，土木建筑、机械制造、环境能源学科特色鲜明，理、工、经、管、文、法、艺多学科协调发展，科学教育与人文教育相结合的多科性大学。学校是山东省重点建设的应用基础型人才培养特色名校。</div>
            </div>
            <div id="B4_part2"></div>
            <div id="B4_part3"></div>
            <div id="B4_part4"></div>
        </div>
        <div id="Relate_Links">
            <div id="link">相关链接</div>
            <div class="link">
                <select><option>——相关链接——</option></select>
            </div>
            <div class="link">
                <select><option>——相关链接——</option></select>
            </div>
            <div class="link">
                <select><option>——相关链接——</option></select>
            </div>
            <div class="link">
                <select><option>——相关链接——</option></select>
            </div>
        </div>
    </div>
    <div id="B_part6">
        <div id="B6_contant">
            <div id="B6_img">
                <img src="img/qd_32.jpg"/>
                <img src="img/hh11_15.jpg"/>
                <img src="img/hh02.jpg" />
                <img src="img/hh03.jpg"/>
            </div>
            <div id="B6_small">
                <div id="small01">电子邮箱</div>
                <div id="small02">办公系统</div>
                <div id="small03">信息公开</div>
                <div id="small04">图书馆</div>
                <div id="small05">校友总会</div>
                <div id="small06">大事表</div>
            </div>
        </div>
    </div>
</div>

<div id="foot">
    <div id="F_contant">
        <div id="F_text">
            <p>市北校区地址:青岛市抚顺路11号 邮编:266033  长江路校区地址：青岛经济技术开发区长江中路2号 邮编：266520</p>
            <p>嘉陵江路校区地址:青岛经济技术开发区嘉陵江路777号 邮编:266520 临沂校区地址:临沂市费县县城东外环1号 邮编:273400</p>
        </div>
        <img src="img/blue.png"/>
        <div id="F_ph">手机版</div>
        <div id="F_img">
            <div id="img"></div>
        </div>
    </div>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/u013589137/article/details/80658380
H5
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022