HTML+CSS+JavaScript网页设计与制作实例 -我的学校网页（6个页面）

最新推荐文章于 2025-03-24 18:14:01 发布

WebDesign_Mu

最新推荐文章于 2025-03-24 18:14:01 发布

阅读量1.8k

点赞数 16

文章标签： html css javascript

本文链接：https://blog.csdn.net/WebDesign_Mu/article/details/144122692

版权

一、网站描述

“我的学校” 网页是一个以介绍学校为主题的静态网站，通过精心的设计和制作，该网站能够全面展示学校的风貌和成就，为用户提供良好的浏览体验。

同时，该网站也体现了 HTML、CSS 和 JavaScript 等技术的综合应用，对于提高网页设计和开发能力具有一定的参考价值。该网站包含六个静态页面，分别是首页、关于学校、学校新闻、校园风光、详情页和联系我们。

二、作品介绍

首页：以简洁大气的设计风格呈现学校的标志性建筑和校训，设置导航栏方便用户快速访问各个页面。展示学校的最新动态和重要通知，吸引用户的注意力。
关于学校页面：详细介绍学校的历史沿革、办学理念、学科设置、师资队伍等方面的内容，让用户对学校有更深入的了解。
学校新闻页面：发布学校的最新新闻动态，包括教学科研成果、校园活动、师生风采等，展现学校的活力和创新精神。
校园风光页面：通过精美的图片展示学校的校园环境、教学设施、图书馆、体育馆等，让用户领略学校的美丽和现代化。
详情页：针对特定的新闻事件、活动或校园景点进行详细介绍，提供更多的图片和文字信息，满足用户的深入了解需求。
联系我们页面：提供学校的联系方式，包括地址、电话、邮箱等，方便用户与学校进行沟通和交流。同时设置输入表单，用户可以提交咨询、建议或反馈信息。

三、设计说明

在设计过程中，我注重用户体验和视觉效果的结合，采用了简洁明快的色彩搭配和清晰的布局结构。页面色彩以学校的标准色为主色调，辅以柔和的背景色和对比色，确保信息的可读性和视觉的舒适性。

色彩搭配：采用学校的标准色作为主色调，搭配白色和浅灰色作为背景色，营造专业且不失活力的视觉效果。
字体选择：使用清晰易读的字体，如Arial或Helvetica，确保文字信息的可读性。
图标和图片：精心挑选高质量的图标和图片，增强页面的视觉吸引力和信息的传达效果。

四、DIV+CSS 布局

本网站采用DIV+CSS布局技术，实现了页面的结构化和样式的分离。通过DIV元素定义页面的基本结构和布局，使用CSS进行样式设计和页面美化。

头部区域：包含网站的标志、导航菜单和搜索框，采用固定布局，确保在不同页面间的一致性。
主体内容区域：根据页面内容的不同，采用两栏或三栏布局，左侧或顶部为导航栏，中间为主内容区，右侧为辅助信息或广告位。
底部区域：包含版权信息、联系方式和社交媒体链接，采用固定布局，确保页面的完整性。

五、页面结构

头部：包含学校的 logo、导航栏和搜索框等元素。
主体内容：根据不同的页面展示不同的内容，如首页的学校简介和最新动态、关于学校页面的详细介绍、学校新闻页面的新闻列表等。
底部：包含版权信息、联系方式和友情链接等元素。

六、网页作品技术

HTML：用于构建网页的结构和内容，通过标签和属性来定义页面的各个部分。
CSS：用于美化网页的外观和布局，通过选择器和属性来设置页面的样式。
JavaScript：用于实现网页的交互效果和动态功能，如表单验证、菜单展开等。
图片处理：使用图片处理软件对图片进行优化和处理，以提高图片的质量和加载速度。可以调整图片的大小、格式、色彩等参数，使其更适合在网页上显示。
多媒体元素：使用HTML5的video技术进行播放学校宣传片视频。

七、作品演示

动态演示

八、代码目录

九、代码演示

首页html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div class="top-box">
        <!-- logo -->
        <img src="./images/logo2.svg" class="logo" alt="" />
        <div class="right-box">
            <a href="#">新门户</a>
            <a href="#">邮件</a>
            <a href="#">网上服务大厅</a> | 
            <a href="#">图书馆</a>
            <div class="in-row">
                <input type="text" placeholder="请输入您的关键词">
                <button class="button">搜索</button>
            </div>
        </div>
    </div>
    <div class="header">
        <!-- logo -->
        <img src="./images/hw_zxdj.png" class="logo" alt="" />
        <!-- 导航栏 -->
        <div class="nav">
            <ul>
                <li>
                    <a class="active" href="./index.html" target="_self">
                        <span title="首页">首页</span>
                    </a>
                </li>
                <li>
                    <a href="./about.html" target="_self">
                        <span title="关于暨大">关于暨大</span>
                    </a>
                </li>
                <li>
                    <a href="./news.html" target="_self">
                        <span title="学校新闻">学校新闻</span>
                    </a>
                </li>
                <li>
                    <a href="./scenery.html" target="_self">
                        <span title="校园风光">校园风光</span>
                    </a>
                </li>                
                <li>
                    <a href="./contact.html" target="_self">
                        <span title="联系我们">联系我们</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主内容 -->
    <div class="main-content">
        <div class="banner">
            <img src="./images/banner.jpg" alt="" />
        </div>
        <div class="project-content">
            <p class="content-title">暨南大学</p>
            <div class="detail-content">
                <div class="detail-pic">
                    <img src="./images/dasdasda.jpg" alt="" />
                </div>
                <div class="detail-desc">
                    <p>暨南大学是中国第一所由政府创办的华侨学府。</p>
                    <p>“暨南”二字出自《尚书·禹贡》：“东渐于海，西被于流沙，朔南暨，声教讫于四海。”意即面向南洋，将中华文化远播到五洲四海。
                        </p>
                    <p>学校目前是中央统战部、教育部、广东省人民政府共建的国家“双一流”建设高校，直属中央统战部管理。</p>
                    <p> 暨南大学是中国历史最悠久的大学之一。学校的前身是1906年清政府创立于南京的暨南学堂，后迁至上海，1927年更名为国立暨南大学。</p>
                </div>
            </div>
            <p class="content-title">校园风光</p>
            <div class="content-list content-list2">
                <ul>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy6.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy7.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy8.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy9.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy10.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy11.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy12.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy13.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                </ul>
            </div>

            <p class="content-title">媒体暨大</p>
            <div class="content-list content-list2">
                <video src="https://osvc-mediaxbase.jnu.edu.cn/media/mediax/media/202312/25/51c2c04451825398f8c8b734.mp4" class="video" controls></video>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="contact-container">
            <div class="contact-title">
                <p>联系</p>
                <p>Contact</p>
            </div>
            <div class="contact-content">
                <p class="c-name">木番薯科技</p>
                <div class="c-addr">
                    <p>地 点：广州市天河区花城大道666号</p>
                    <p>邮编：510000</p>
                </div>
                <div class="c-addr">
                    <p>公众号名称：木番薯科技</p>
                    <p>公众号号码：mengchatchat91</p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

首页css

/* 头部样式 */
.top-box {
    padding: 10px 0 10px 50px;
}
.right-box {
    float: right;
    padding: 5px 20px;
    color: #005d6c;
}
.right-box a {
    color: #005d6c;
    font-size: 14px;
}
.top-box .in-row {
    padding: 15px 0 0;
}
.top-box .in-row input {
    float: left;
    width: 160px;
    height: 28.5px;
    line-height: 28.5px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    outline: none;
    padding: 0 15px;
    margin-right: 5px;
    font-size: 12px;
}
.top-box .button {
    background-color: #ff9d00;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
}
.top-box .logo {
    width: 290px;
}
.header {
    background-color: #005d6c;
    overflow: hidden;
    padding: 0 0 0 50px;
}

.header .logo {
    width: 190px;
    float: left;
    padding-top: 2px;
}

.header .nav {
    overflow: hidden;
    float: right;
}

.header .nav ul {
    overflow: hidden;
    float: right;
}

.header .nav ul li {
    float: left;
}

.header .nav ul li a {
    font-size: 14px;
    color: #eee;
    display: block;
    line-height: 3.7;
    width: 150px;
    text-align: center;
}

.header .nav ul li a:hover, .header .nav ul li a.active {
    color: #fff;
    background-color: #01424c;
}

/* 主内容样式 */
.main-content .banner img {
    width: 100%;
}

.main-content .project-content {
    width: 1185px;
    margin: 0 auto 50px;
    padding-left: 14px;
}
.main-content .project-content .content-title {
    font-size: 24px;
    color: #444;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 40px;
}

.main-content .detail-content {
    padding: 0 0 20px;
    overflow: hidden;
}
.main-content .detail-content .detail-pic {
    text-align: center;
    margin-bottom: 10px;
    float: left;
    width: 750px;
}
.main-content .detail-content .detail-pic img {
    width: 100%;
    display: inline-block;
}
.main-content .detail-content .detail-desc {
    float: left;
    width: 395px;
    padding: 30px;
    height: 339px;
    background-color: #333;
    box-sizing: border-box;
}
.main-content .detail-content .detail-desc p {
    color: #fff;
}
.main-content .detail-content p {
    line-height: 24px;
    font-size: 13px;
    color: #fff;
    margin-bottom: 10px;
}

.main-content .project-content .content-list ul {
    overflow: hidden;
}

.main-content .project-content .content-list ul li {
    float: left;
    width: 276px;
    margin-bottom: 25px;
    height: 200px;
    background-color: #333;
}

.main-content .project-content .content-list2 ul li {
    float: left;
    width: 276px;
    margin-bottom: 25px;
    height: 200px;
    background-color: #333;
}

.main-content .project-content .content-list ul li:not(:last-child) {
    margin-right: 15px;
}
.main-content .project-content .content-list ul li .cover-pic {
    font-size: 0;
}
.main-content .project-content .content-list ul li .cover-pic img {
    width: 100%;
    display: block;
}
.main-content .project-content .content-list ul li .title {
    font-size: 15px;
    color: #fff;
    height: 24px;
    line-height: 24px;
    padding: 10px 30px 0px 10px;
    text-align: center;
}
.main-content .project-content .content-list ul li .sub-title {
    font-size: 12px;
    color: #b7b7b7;
    height: 20px;
    line-height: 24px;
    overflow: hidden;
    padding: 0px 10px;
}
.main-content .project-content .content-list .video {
    width: 1150px;
}

/* 底部样式 */
.footer {
    background-color: #005d6c;
}
.contact-container {
    width: 1000px;
    margin: 0 auto;
    padding: 80px 30px 68px;
    overflow: hidden;
}
.footer .contact-title {
    float: left;
    width: 300px;
}
.footer .contact-title p:first-child {
    color: #f1f1f1;
    font-size: 24px;
    margin-bottom: 5px;
}
.footer .contact-title p:last-child {
    color: #c1c1c1;
    font-size: 16px;
}
.footer .contact-content {
    float: left;
    overflow: hidden;
}
.footer .contact-content .c-name {
    font-size: 16px;
    color: #f1f1f1;
    line-height: 24px;
    margin-bottom: 25px;
    font-weight: 100;
}
.footer .contact-content .c-addr {
    float: left;
}
.footer .contact-content .c-addr p {
    padding-right: 60px;
    margin-top: 14px;
    height: auto;
    color: #eee;
    font-size: 12px;
}