菜单 搜索
首页 前端知识 web前端—学校官网制作（部分）

web前端—学校官网制作（部分）

2024-07-24 23:07:42 前端知识 前端哥 684 570 我要收藏

实现效果：

 

 

程序制作：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>官网</title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
 
            body {
                /* background-color: chartreuse; */
            }
 
            .body_1 {
                width: 100%;
                height: 100px;
                padding: 8px 0px 4px;
                background-color: #3d3bb8;
                position: fixed;
                /* border: 1px solid red; */
            }
 
            .content_1 {
                width: 78%;
                height: 100px;
                margin: auto;
                /* border: 1px solid red; */
            }
 
            .logo {
                float: left;
                padding-top: 8px;
                width: 30%;
                /* border: 1px solid red; */
            }
 
            .logo>img {
                width: 100%;
            }
 
            .menu {
                float: left;
                width: 70%;
                height: 100px;
                /* border: 1px solid red; */
            }
 
            .menu_top,
            .menu_bottom {
                float: left;
                width: 100%;
                height: 50%;
            }
 
            .search {
                float: right;
                width: 32%;
                height: 70%;
                border-radius: 18px;
                background-color: #ffffff;
            }
 
            #search_border {
                float: left;
                font-size: 5px;
                width: 72%;
                height: 100%;
                margin: 4% 0% 4% 9%;
                border: none;
            }
 
            #search_button {
                float: left;
                width: 15px;
                height: 15px;
                margin: 4% 0% 4% 3%;
                border: none;
            }
 
            .lab {
                list-style: none;
                margin: 1.5% auto 0%;
            }
 
            .lab>li {
                float: left;
                margin-left: 3.4%;
                padding: 0% 0% 2%;
                position: relative;
            }
            
            [class^="lab_"]>a {
                color: #ffffff;
                font-size: 14px;
                text-decoration: none;
            }
            
            [class^="lab_"]>a:hover {
                opacity: 0.5;
            }
 
            [class^="child"] {
                list-style: none;
                top: 40px;
                left: -40px;
                position: absolute;
                display: none;
            }
            
            [class^="child_2-"] {
                left: 140.5px;
                top: 0px;
            }
            
            .child_2-2 {
                top: 50px;
            }
 
            [class^="child"]>li {
                width: 120px;
                height: 30px;
                padding: 10px 10px;
                line-height: 30px;
                text-align: center;
                background-color: #ffffff;
            }
            
            [class^="child_2-"]>li {
                width: 160px;
            }
            
            [class^="child"] a {
                color: #000;
                font-size: 14px;
                text-decoration: none;
            }
            
            [class^="child"] a:hover {
                color: #3d3bb8;
            }
 
            li:hover>[class^="child"],
            li:hover>[class^="block"] {
                display: block;
            }
 
            .child_4 {
                left: -55px;
            }
 
            .child_4>li {
                width: 150px;
            }
 
            [class^="block"] {
                border-bottom: 10px solid white;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                top: 30px;
                left: 20px;
                position: absolute;
                display: none;
            }
            
            .banner_picture {
                width: 100%;
            }
            
            .news_text {
                float: left;
                width: 100%;
                height: 90px;
                margin-top: 25px;
                text-align: center;
                position: relative;
            }
            
            .news_text>span {
                font-size: 40px;
                color: #E9E9F9;
                left: 165px;
                top: 10px;
                font-weight: bold;
                position: absolute;
                z-index: -1;
            }
            
            .news_title {
                font-size: 23px;
                color: #000000;
                left: 182px;
                top: 32px;
                position: absolute;
            }
 
            .under_line_1 {
                background-color: #3d3bb8;
                border-radius: 3px;
                width: 60px;
                height: 6px;
                left: 195px;
                top: 72px;
                position: absolute;
            }
            
            .under_line_2 {
                background-color: #3d3bb8;
                border-radius: 3px;
                margin: 1% auto 0%;
                width: 60px;
                height: 6px;
            }
            
            .part_2 {
                /* background-color: aqua; */
                float: left;
                padding: 4% 12% 2%;
                background-image: url("./img/home_index1_bg.png");
                background-size: 62%;
                background-repeat: no-repeat;
                background-position: right;
            }
            
            .part_2-left {
                float: left;
                width: 40%;
                height: 100%;
                /* background-color: coral; */
            }
            
            .part_2-left>img {
                width: 100%;
                margin-top: 75px;
            }
            
            .part_2-right {
                float: left;
                width: 60%;
                height: 100%;
                /* background-color: yellow; */
            }
            
            [class^="subject"] {
                float: right;
                height: 35px;
                font-size: 20px;
                color: #999999;
                margin-left: 40px;
                padding-bottom: 40px;
            }
            
            [class^="subject"]:hover {
                color: #000000;
            }
            
            .subject_3 {
                color: #000000;
            }
            
            .subject_2:hover~.subject_3 {
                color: #999999;
            }
            
            .subject_1:hover~.subject_3 {
                color: #999999;
            }
            
            [class^="box"] {
                float: left;
                width: 96%;
                margin-left: 30px;
                display: none;
            }
            
            [class^="box"][name="1_box"] {
                display: block;
            }
            
            .part_2-right>.subject_2:hover~[class^="box"][name="1_box"] {
                display: none;
            }
            
            .part_2-right>.subject_2:hover~[class^="box"][name="2_box"] {
                display: block;
            }
            
            .part_2-right>.subject_1:hover~[class^="box"][name="1_box"] {
                display: none;
            }
            
            .part_2-right>.subject_1:hover~[class^="box"][name="3_box"] {
                display: block;
            }
            
            [class^="new_line"] {
                float: left;
                width: 100%;
                margin-bottom: 18px;
            }
            
            a:hover .line_top {
                color: #3d3bb8;
            }
            
            .line_left {
                float: left;
                width: 51px;
                height: 73px;
                color: #ffffff;
                margin-bottom: 4px;
                background-color: #3d3bb8;
            }
            
            .line_right {
                float: left;
                height: 75px;
                margin-left: 20px;
            }
            
            .day {
                margin: 6px 6px;
                text-align: center;
                font-size: 28px;
            }
            
            .year_month {
                margin: 0px 3px;
                text-align: center;
                font-size: 5px;
            }
            
            .line_top {
                float: left;
                width: 90%;
                height: 20px;
                margin-left: 15px;
                font-size: 15px;
                font-weight: bold;
                color: #000;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            
            .line_bottom {
                float: left;
                width: 90%;
                height: 40;
                font-size: 14px;
                color: #666666;
                margin-top: 17px;
                margin-left: 15px;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            
            .more {
                margin-top: 20px;
                float: right;
            }
            
            .more>a {
                color: #999999;
                font-size: 12px;
                text-decoration: none;
            }
            
            .more>a:hover {
                color: #3d3bb8;
            }
            
            .section_3 {
                float: left;
                width: 100%;
                height: 770px;
                text-align: center;
                background-image: url("./img/home_index2_bg.png");
                background-size: cover;
                background-repeat: no-repeat;
            }
            
            .video_title {
                margin-top: 35px;
                color: #e9e9f9;
                font-size: 25px;
            }
            
            .video_text {
                font-size: 23px;
                color: #000000;
            }
            
            .video_play {
                width: 100%;
                margin: 30px auto 0px;
                padding-bottom: 20px;
            }
            
            .video_play>video {
                width: 70%;
                cursor: pointer;
                object-fit: fill;
            }
            
        </style>
    </head>
    <body>
        <div class="body_1">
            <div class="content_1">
                <div class="logo">
                    <img src="./图片/主页logo.png" alt="logo">
                </div>
                <div class="menu">
                    <div class="menu_top">
                        <div class="search">
                            <form action="">
                                <input type="text" name="" id="search_border" placeholder="请输入搜索内容">
                                <button id="search_button">
                                    <svg t="1679578244033" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="1044">
                                        <path
                                            d="M418.91 93.09c179.66 0 325.82 146.16 325.82 325.82 0 74.59-24.74 144.9-71.53 203.33l-22.66 28.29-28.3 22.66c-58.43 46.8-128.74 71.53-203.33 71.53-179.66 0-325.82-146.16-325.82-325.82 0-179.65 146.16-325.81 325.82-325.81m0-93.09C187.55 0 0 187.55 0 418.91s187.55 418.91 418.91 418.91c99.01 0 189.83-34.54 261.53-91.97 0.34 0.37 0.45 0.86 0.81 1.21l263.3 263.3c9.09 9.09 21 13.63 32.91 13.63s23.82-4.54 32.91-13.63c18.18-18.18 18.18-47.65 0-65.82l-263.3-263.3c-0.36-0.36-0.85-0.46-1.21-0.81 57.43-71.7 91.97-162.52 91.97-261.53C837.82 187.55 650.27 0 418.91 0z"
                                            fill="#2c2c2c" p-id="1045"></path>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="menu_bottom">
                        <ul class="lab">
                            <li class="lab_1"><a href="#">首页</a></li>
                            <li class="lab_2">
                                <a href="#">学校概况</a>
                                <div class="block_1"></div>
                                <ul class="child_1">
                                    <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>
                                    <li><a href="#">华珠大事件</a></li>
                                    <li><a href="#">华珠荣誉</a></li>
                                    <li><a href="#">专业介绍</a></li>
                                </ul>
                            </li>
                            <li class="lab_3"><a href="#">信息公开专栏</a></li>
                            <li class="lab_4">
                                <a href="#">机构设置</a>
                                <div class="block_2"></div>
                                <ul class="child_2">
                                    <li>
                                        <a href="#">行政部门</a>
                                        <ul class="child_2-1">
                                            <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>
                                            <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>
                                            <li><a href="#">体育与艺术中心</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">二级学院</a>
                                        <ul class="child_2-2">
                                            <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>
                                            <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>
                                </ul>
                            </li>
                            <li class="lab_5"><a href="#">党建网</a></li>
                            <li class="lab_6"><a href="#">教务管理</a></li>
                            <li class="lab_7">
                                <a href="#">招生就业</a>
                                <div class="block_3"></div>
                                <ul class="child_3">
                                    <li><a href="#">招生网</a></li>
                                    <li><a href="#">小北就业</a></li>
                                </ul>
                            </li>
                            <li class="lab_8"><a href="#">OA管理</a></li>
                            <li class="lab_9">
                                <a href="#">数字资源</a>
                                <div class="block_4"></div>
                                <ul class="child_4">
                                    <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>
                                    <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>
                                    <li><a href="#">心理测评</a></li>
                                </ul>
                            </li>
                            <li class="lab_10"><a href="#">加入我们</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="section_1">
            <img class="banner_picture" src="./图片/党.jpg" alt="党的二十大">
        </div>
        <div class="part_2">
            <div class="part_2-left">
                <img src="./图片/仪式.jpg" alt="学校大门">
                <div class="news_text">
                    <span>NEWS</span>
                    <div class="news_title">新闻头条</div>
                    <div class="under_line_1"></div>
                </div>
            </div>
            <div class="part_2-right">
                <div class="subject_1">学院通告</div>
                <div class="subject_2">部门动态</div>
                <div class="subject_3">新闻头条</div>
                <div class="box_1" name="1_box">
                    <div class="new_line-1">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">23</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">锐意进取、开拓创新，努力提高服务能力和水平 ——华珠召开行政办公系统培训会</div>
                                <div class="line_bottom">3月22日，华南农业大学珠江学院行政办公系统办公室工作业务培训在行政楼三楼会议室举行。董事长陈香山、校长助理赵 […]</div>
                            </div>
                        </a>
                    </div>
                    <div class="new_line-2">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">21</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">华珠信息工程学院举办“随机建模与联邦学习框架的研究”学术论坛</div>
                                <div class="line_bottom"></div>
                            </div>
                        </a>                        
                    </div>
                    <div class="new_line-3">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">20</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">热土之上，“乡”遇未来 | 华珠第十四届主持人大赛决赛精彩来袭！</div>
                                <div class="line_bottom"></div>
                            </div>
                        </a>                        
                    </div>
                    <div class="new_line-4">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">19</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">资讯速递 | 华珠2023届毕业生春季空中双选会助力就业</div>
                                <div class="line_bottom"></div>
                            </div>
                        </a>                        
                    </div>
                </div>
                <div class="box_2" name="2_box">
                    <div class="new_line-1">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">25</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">喜讯|华珠设计学院学生首次荣获“百利杯”办公家具设计大赛金奖</div>
                                <div class="line_bottom">近期，由广东省家具协会主办的2021和2022年度“华笔奖”系列家具设计大赛颁奖典礼在广州琶洲举行，我校设计学 […]</div>
                            </div>
                        </a>
                    </div>
                    <div class="new_line-2">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">21</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">华珠信息工程学院举办“随机建模与联邦学习框架的研究”学术论坛</div>
                                <div class="line_bottom"></div>
                            </div>
                        </a>                        
                    </div>
                    <div class="new_line-3">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">18</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">设计学院师生赴云南开展采风写生教学实践</div>
                                <div class="line_bottom">近日，我校设计学院组织2022级戏剧影视美术设计、环境设计专业200余名学生赴云南开展采风写生课程。 采风写生 […]</div>
                            </div>
                        </a>                        
                    </div>
                    <div class="new_line-4">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">15</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">华珠举办2023年参军入伍学生欢送座谈会</div>
                                <div class="line_bottom"></div>
                            </div>
                        </a>                        
                    </div>
                </div>
                <div class="box_3" name="3_box">
                    <div class="new_line-1">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">19</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">资讯速递 | 华珠2023届毕业生春季空中双选会助力就业</div>
                                <div class="line_bottom"></div>
                            </div>
                        </a>
                    </div>
                    <div class="new_line-2">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">11</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">2023年研考国家线公布</div>
                                <div class="line_bottom"></div>
                            </div>
                        </a>                        
                    </div>
                    <div class="new_line-3">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">06</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">关于征集第九届中国“互联网＋”大学生创新创业大赛重点培育项目的通知</div>
                                <div class="line_bottom">各二级学院： 为贯彻落实教育部关于举办中国国际“互联网+”大学生创新创业大赛精神，更好地培养大学生就业创业实践 […]</div>
                            </div>
                        </a>                        
                    </div>
                    <div class="new_line-4">
                        <a href="#">
                            <div class="line_left">
                                <div class="day">06</div>
                                <div class="year_month">2023.03</div>
                            </div>
                            <div class="line_rignt">
                                <div class="line_top">2023年“戴希杯”“频蓝杯”华南农业大学珠江学院 数据应用大赛开展通知</div>
                                <div class="line_bottom">2023年“戴希杯”“频蓝杯”华南农业大学珠江学院 数据应用大赛开展通知</div>
                            </div>
                        </a>                        
                    </div>
                </div>
                <div class="more"><a href="#">MORE></a></div>
            </div>
        </div>
        <div class="section_3">
            <div class="video_title">VIDEO SHOW</div>
            <div class="video_text">视频展播</div>
            <div class="under_line_2"></div>
            <div class="video_play">
                <video src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/2022迎新花絮-1.mp4" poster="./图片/视频封面.png" controls></video>
            </div>
        </div>
    </body>
</html>

转载请注明出处或者链接地址：https://www.qianduange.cn//article/14250.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！