青岛理工大学官网仿制Demo

CaesarChang张旭
发布于 2021-01-26 15:50:31
5480
发布于 2021-01-26 15:50:31
文章被收录于专栏：悟道
话不多说先上图
标题
布局哈：
<!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 条评论
热度
青岛理工大学官网仿制Demo

青岛理工大学官网仿制Demo

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐
