前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >青岛理工大学官网仿制Demo

青岛理工大学官网仿制Demo

作者头像
CaesarChang张旭
发布2021-01-26 15:50:31
5470
发布2021-01-26 15:50:31
举报
文章被收录于专栏:悟道

话不多说 先上图

效果图点我观看
效果图点我观看

标题

布局哈:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青岛理工大学官网Demo ByCaesarChang</title>
    <style>
        .head {
            width: auto;
            height: 80px;
        }
        
        * {
            padding: 0;
            margin: 0px;
        }
        
        .menu {
            width: 1350px;
            height: 0px;
            margin: 50px auto;
        }
        
        .menu ul {
            list-style: none;
        }
        
        .menu ul li {
            float: left;
            position: relative;
        }
        
        .menu ul li a,
        .menu ul li a:visited {
            display: block;
            text-align: center;
            text-decoration: none;
            width: 144px;
            height: 40px;
            color: white;
            font-weight: bold;
            border: 1px solid #000;
            border-width: 1px 1px 0 0;
            background: #91000C;
            line-height: 30px;
            font-size: 14px;
        }
        
        .menu ul li ul {
            display: none;
        }
        
        .menu ul li:hover a {
            color: #fff;
            background: #91000C;
        }
        
        .priority {
            width: 113.15%;
            background-color: #91000C;
            height: 40px;
        }
        
        .menu ul li:hover ul {
            display: block;
            position: absolute;
            top: 30px;
            left: 0;
            width: 105px;
        }
        
        .menu ul li:hover ul li a {
            display: block;
            background: #91000C;
            color: white;
        }
        
        .menu ul li:hover ul li a:hover {
            background: #91000c;
            color: #000;
        }
        
        .banner {
            height: 30px;
        }
        
        #parent1 {
            border: 0px solid #91000c;
            width: 113.15%;
            height: 60px;
            float: left;
            margin-left: 20px;
        }
        
        #parent1 a {
            text-decoration: none;
            float: right;
            line-height: 70px;
            color: grey;
            font-size: 20px;
        }
        
        #parent2 {
            margin-left: 14px;
            list-style: none;
            position: relative;
            border: 0px solid red;
        }
        
        #parent8 {
            position: static;
            border: 0px solid white;
            width: 424px;
            height: 30px;
            margin-top: 144px;
        }
        
        #son1 {
            height: 430px;
            margin-top: 60px;
            position: absolute;
            border: 1px solid white;
            width: 500px;
            margin-right: 10px;
            text-decoration: underline;
            font-size: 23px;
            list-style: none;
        }
        
        #son1 li {
            margin-top: 9px;
        }
        
        #son2 {
            margin-top: 60px;
            height: 430px;
            position: absolute;
            border: 1px solid white;
            margin-left: 520px;
            width: 500px;
            margin-right: 10px;
            text-decoration: underline;
            font-size: 20px;
            list-style: none;
        }
        
        #son2 p {
            margin: 10px auto;
        }
        
        #son3 {
            margin-top: 60px;
            height: 430px;
            position: absolute;
            border: 1px solid white;
            width: 500px;
            margin-left: 1040px;
        }
        
        #son3 img {
            width: 500px;
            height: 430px;
        }
        /* -------------------------------------- */
        
        #parent3 a {
            text-decoration: none;
            float: right;
            line-height: 70px;
            color: grey;
            font-size: 20px;
        }
        
        #parent4 {
            margin-left: 14px;
            list-style: none;
            position: relative;
            border: 0px solid white;
        }
        
        #son6 {
            margin-top: 560px;
            height: 470px;
            position: absolute;
            border: 1px solid purple;
            width: 500px;
        }
        
        #son6 img {
            width: 500px;
            height: 470px;
        }
        
        #son4 {
            height: 470px;
            margin-top: 560px;
            position: absolute;
            border: 1px solid white;
            width: 500px;
            margin-left: 520px;
            text-decoration: underline;
            font-size: 16px;
            color: grey;
            list-style: none;
            overflow: hidden;
        }
        
        #son4 p {
            font-size: 28px;
            color: black;
            font-weight: bold;
        }
        
        #son5 {
            margin-top: 560px;
            height: 470px;
            position: absolute;
            margin-left: 1040px;
            width: 500px;
            margin-right: 10px;
            list-style: none;
        }
        
        #son5 .title {
            background-color: #91000c;
            padding: 30px;
            position: relative;
            height: 15px;
            color: aliceblue;
            font-size: 36px;
            font-weight: bold;
        }
        
        .list_1 {
            width: 200px;
            height: 70px;
            margin-left: 10px;
            margin-top: 5px;
        }
        
        .list_2 {
            width: 200px;
            height: 70px;
            float: right;
            margin-right: 10px;
            margin-top: 5px;
        }
        
        .list_3 {
            width: 200px;
            height: 70px;
            margin-left: 10px;
            margin-top: 5px;
        }
        
        .list_4 {
            width: 200px;
            height: 70px;
            float: right;
            margin-right: 10px;
            margin-top: 5px;
        }
        
        .list_5 {
            width: 200px;
            height: 70px;
            margin-left: 10px;
            margin-top: 5px;
        }
        
        .list_6 {
            width: 200px;
            height: 70px;
            margin-top: 5px;
            float: right;
            margin-right: 10px;
        }
        
        .list_7 {
            width: 200px;
            height: 70px;
            margin-left: 10px;
            margin-top: 5px;
        }
        
        .list_8 {
            width: 200px;
            height: 70px;
            margin-top: 5px;
            float: right;
            margin-right: 10px;
        }
        
        .list_9 {
            width: 200px;
            height: 70px;
            margin-left: 10px;
            margin-top: 5px;
        }
        
        .list_10 {
            width: 200px;
            height: 70px;
            margin-top: 5px;
            float: right;
            margin-right: 10px;
        }
        
        .link {
            background-color: grey;
            margin-top: 1035px;
            width: 1546px;
            height: 50px;
            margin-left: 12px;
            position: relative;
        }
        
        .link .link_text {
            text-shadow: 4px 3px 1px pink;
            position: absolute;
            margin-left: 50px;
            line-height: 40px;
            font-size: 30px;
            font-weight: bold;
        }
        
        .link .link_1 {
            position: absolute;
            margin-left: 230px;
            line-height: 40px;
        }
        
        .link .link_2 {
            position: absolute;
            margin-left: 380px;
            line-height: 40px;
        }
        
        .link .link_3 {
            line-height: 40px;
            position: absolute;
            margin-left: 650px;
        }
    </style>


    <body>
        <div class="head">
            <img src="./head_img.png">
        </div>
        <div class="priority">
            <div class="menu">
                <ul>
                    <li><a href="#">首页</a>
                        <ul>
                            <li><a href="#">组织机构图</a></li>
                            <li><a href="#">办公电话</a></li>
                            <li><a href="#">学院标识</a></li>
                        </ul>
                    </li>
                    <li><a href="#">校情纵览</a>
                        <ul>
                            <li><a href="#">学校概况</a></li>
                            <li><a href="#">历史改革</a></li>
                            <li><a href="#">历任辅导</a></li>
                            <li><a href="#">学校标识</a></li>
                            <li><a href="#">临沂校区</a></li>

                        </ul>
                    </li>
                    <li><a href="#">组织机构</a>
                        <ul>
                            <li><a href="#">学院办公室</a></li>
                            <li><a href="#">人事处</a></li>
                            <li><a href="#">教务处</a></li>
                            <li><a href="#">学生处</a></li>
                        </ul>
                    </li>
                    <li><a href="#">院系设置</a>
                        <ul>
                            <li><a href="#">实训中心</a></li>
                            <li><a href="#">图书馆</a></li>
                            <li><a href="#">交流中心</a></li>
                        </ul>
                    </li>
                    <li><a href="#">教学单位</a>
                        <ul>
                            <li><a href="#">会计学院</a></li>
                            <li><a href="#">计算机信息工程学院</a></li>
                            <li><a href="#">商学院</a></li>
                        </ul>
                    </li>
                    <li><a href="#">师资队伍</a>
                        <ul>
                            <li><a href="#">师资概况</a></li>
                            <li><a href="#">名师辅导</a></li>
                        </ul>
                    </li>
                    <li><a href="#">招生就业</a>
                        <ul>
                            <li><a href="#">研究生招生</a></li>
                            <li><a href="#">本科招生</a></li>
                            <li><a href="#">专科招生</a></li>
                            <li><a href="#">创新创业</a></li>

                        </ul>
                    </li>
                    <li><a href="#">公共服务</a>

                    </li>
                    <li><a href="#">理工新闻</a>

                    </li>
                </ul>
                <div class="clear"> </div>
            </div>
        </div>
        <div>
            <img src="./banner2.png" alt="">
        </div>


        <div id="parent1">
            <font style="font-size: 50px; color: #91000c;margin-left: 60px;text-decoration: underline; ">理工要闻</font>
            <a href="#">更多>></a>
        </div>
        <div id="parent2">

            <div id="son1">

                <ul>
                    <li>青岛理工大学与国家航天局等单位签约共建联合实验室</li>
                    <li>学校召开新校区二期工程搬迁启用工作决战决胜部署动员大会</li>
                    <li>我校第七届教职工代表大会第二次会议胜利召开</li>
                    <li>VR直播”青岛理工大学2020年毕业典礼隆重举行</li>
                    <li>机械与汽车工程学院春田方程式车队两名大学生收到受助车主锦旗</li>
                    <li>学校召开2020年第三十三次党委常委会</li>
                    <li>云南省社科联一行来校调研</li>
                    <li>王汉忠教授应邀来校区作专题报告</li>
                </ul>

            </div>
            <div id="son2">
                <p>青岛理工大学与国家航天局等单位签约共建联合实验室</p>
                <p>学校召开新校区二期工程搬迁启用工作决战决胜部署动员大会</p>
                <p>我校第七届教职工代表大会第二次会议胜利召开</p>
                <p>VR直播”青岛理工大学2020年毕业典礼隆重举行</p>
                <p>机械与汽车工程学院春田方程式车队两名大学生收到受助车主锦旗</p>
                <p>学校召开2020年第三十三次党委常委会</p>
                <p>云南省社科联一行来校调研</p>
                <p>王汉忠教授应邀来校区作专题报告</p>
            </div>
            <div id="son3">
                <img src="./insert_img.png" alt="">
            </div>
        </div>
        <div id="parent9">

        </div>
        <!-- ----------------------------- -->
        <div id="parent3">

        </div>

        <div id="parent4">

            <div id="son6">
                <img src="./end_img.png" alt="">
            </div>
            <div id="son4">
                <p>
                    大众网:晚上车辆坏了怎么办?青岛理工大学俩学生学以致用帮大忙!

                </p>
                “这两个学生不仅品德好,技术也很高,真是太感谢他们了”,9月24日下午,三名受助车主手捧一面写有“乐于助人, 学以致用”的锦旗,来到青岛理工大学机械与汽车工程学院,一定要找到王子鹏、陈凯这两名大学生,当面表达对他们助人为乐的感激之情和对较高专业素养的赞赏之情。 机械与汽车工程学院党总支书记岳丽宏,院长郭峰,车队指导教师牟瑞涛、李龙,辅导员代莉热情接待了他们。
                <p>结构振动控制创新团队发表国际TOP期刊封面论文
                </p>
                日前,我校张春巍教授带领的“结构振动控制创新团队”在结构振动控制与健康监测领域国际顶尖期刊 《Structural Control & Health Monitoring》(Online ISSN:1545-2263)再次发文。本次发表的文章题目为“Swing V ibration Control of Suspended Structures using the Active Rotary Inertia Driver System: Theoretical Modeling and Experimental
                Verification”, 介绍了Active Rotary Inertia Driver(ARID)控制系统的最新研究成果,文中ARID系统原理示意图相关公式等被选登在该刊当期封面。

            </div>
            <div id="son5">
                <div class="title">
                    专题专栏
                </div>

                <div>
                    <img class="list_1" src="./list_1.png" alt="">
                    <img class="list_2" src="./list_2.png" alt="">
                </div>
                <div>
                    <img class="list_3" src="./list_3.png" alt="">
                    <img class="list_4" src="./list_4.png" alt="">
                </div>
                <div>
                    <img class="list_5" src="./list_5.png" alt="">
                    <img class="list_6" src="./list_6.png" alt="">
                </div>
                <div>
                    <img class="list_7" src="./list_7.png" alt="">
                    <img class="list_8" src="./list_8.png" alt="">
                </div>
                <div>
                    <img class="list_9" src="./list_9.png" alt="">
                    <img class="list_10" src="./list_10.png" alt="">
                </div>
            </div>

        </div>
        <div class="link">
            <div class="link_text">相关链接</div>
            <div class="link_1">
                <select> 
                    <option value="">微信 root121toor</option>
                    <option >微信 root121toor</option>
                    <option >微信 root121toor</option>
                    <option >微信 root121toor</option>
                    <option >微信 root121toor</option>
                </select>
            </div>
            <div class="link_2"> <select> 
                <option >邮箱 root121toor@gmail.com</option>
                <option >邮箱 root121toor@gmail.com</option>
                <option >邮箱 root121toor@gmail.com</option>
                <option >邮箱 root121toor@gmail.com</option>
                <option >邮箱 root121toor@gmail.com</option>
            </select></div>
            <div class="link_3">
                <select> 
                    <option >BY CaesarChang</option>
                    <option > BY CaesarChang</option>
                    <option > BY CaesarChang</option>
                    <option >BY CaesarChang</option>
                    <option >BY CaesarChang</option>
                </select>
            </div>
        </div>

    </body>

</html>

里面的图片以及源代码 都在 QQ群文件里面哈 QQ群号: 1153132260

差不多了 点个赞呗么么哒

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/10/03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云直播
云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档