web期末作业设计网页：学校网站设计——我的学校(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品网页设计作业 web网页设计与开发 html实训大作业

最新推荐文章于 2024-06-22 15:23:28 发布

深巷积木青春

最新推荐文章于 2024-06-22 15:23:28 发布

阅读量1.5k

点赞数 5

文章标签：前端 html css

本文链接： https://blog.csdn.net/m0_62153875/article/details/134830777

版权

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。

作品目录

一、📚网站介绍

二、 🔗网站效果

🧩1.图片演示

三、 💒网站代码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中：
(1)📜html文件包含：其中index.html是首页、其他html为二级页面；
(2)📑 css文件包含：css全部页面样式；
(3)📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

三、🔗网站效果

四、💒代码展示

代码说明：以下仅展示部分代码供参考~

🧱HTML结构部分代码

<!DOCTYPE html
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset="utf-8" />
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
    <style type="text/css">

    </style>
</head>
<body>
    <div class="ff">
        <h1 class="fl">我的学校</h1>
        <p class="clear"></p>
    </div>
    <div class="menu">
        <ul class="center">
            <li class="se1"><a href="index.html">首页</a></li>
            <li class="se2"><a href="index01.html">网站说明</a></li>
            <li class="se3"><a href="index02.html">周年校庆</a></li>
            <li class="se5"><a href="index03.html">学校简介</a></li>
            <li class="se4"><a href="index04.html">联系我们</a></li>
        </ul>
    </div>

    <div class="content" style="padding-top: 150px;">
        <div class="bar2">
            <h3>我的学校</h3>
        </div>
        <div class="pad">
            我的学校基本简介
            （截止2022年10月14日）
            我的学校成立于2000年10月，由原莱芜师范学校、莱芜市第二职业中专和莱芜广播电视大学组建而成。2012年，莱芜市卫生职工中等专业学校整建制并入学校。办学历史可追溯到1952年建校的莱芜师范学校。
            经过70年的积淀，学校始终坚持为党育人、为国育才，始终坚持特色立校、质量强校、文化兴校，以“服务济南、辐射周边，工科为主、多科并举，培养高素质技术技能型人才，建设省内一流、国内知名的高职院校”为办学定位，以“人人成才、人人就业、人人出彩”为人才培养目标，紧紧围绕立德树人根本任务，以服务学生成长成才为中心，以服务经济社会发展为己任，深化改革、传承创新，为国家、为社会培养了一大批优秀的高素质的技术技能人才、能工巧匠和大国工匠，育人质量和办学实力得到社会各界的广泛好评。
        </div>
        <div class="bar2">
            <h3>校园风光</h3>
        </div>
        <div class="scrollleft">
            <ul>
                <li>
                    <img src="images/1.jfif" width="230" height="160" />
                    <p>校园风光</p>
                </li>
                <li>
                    <img src="images/5.jpg" width="230" height="160" />
                    <p>校园风光</p>
                </li>
                <li>
                    <img src="images/3.jfif" width="230" height="160" />
                    <p>校园风光</p>
                </li>
                <li>
                    <img src="images/4.jpg" width="230" height="160" />
                    <p>校园风光</p>
                </li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
    <div class="end">
        <p>深巷积木青春 © 版权所有</p>
    </div>
</body>
</html>

🏠CSS样式部分代码

ul,
li,
h1,
h2,
h3,
p {
    padding: 0;
    margin: 0;
    list-style: none
}

a {
    text-decoration: none;
    color: #000
}

body {
    width: 1000px;
    margin: 0 auto;
    line-height: 21px
}

.clear {
    clear: both
}

.ff {
    margin: 0;
    padding: 40px 0 40px 20px;
    color: #215a8b;
    background-color: #f7f7f7;
}

.menu li {
    list-style: none
}

.menu {
    position: relative;
    z-index: 555
}

.banner {
    position: relative;
    height: 500px
}

.menu {
    width: 100%;
    text-align: center;
    clear: both;
}

    .menu li a {
        color: #fff
    }

    .menu li {
        float: left;
        margin: 2px;
        background: #215a8b;
        padding: 25px 0px;
        width: 194px
    }

.content {
    background: #f7f7f7;
    padding-bottom: 20px;
    font-size: 14px;
    display: inline-block;
    width: 100%;
}

.menu ul li ul {
    position: absolute;
    display: none;
    left: 794px;
}

    .menu ul li ul li {
        margin-top: 30px;
        float: none;
        line-height: 30px;
        text-align: left;
        padding: 5px;
        width: 183px;
        text-align: center;
    }

.menu ul li:hover ul {
    display: block
}

.menu li.se1 {
    background: #0094ff
}

.menu li.se2 {
    background: #8b7121
}

.menu li.se3 {
    background: #218b8a
}

.menu li.se4 {
    background: #8b2153
}

.menu li.se5 {
    background: #7d8b21
}

.menu li.se6 {
    background: #8b4421
}

.menu li.se7 {
    background: #513c75
}

.menu li.se8 {
    background: #812f2f
}

.end {
    clear: both;
    background: #215a8b;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.pad {
    padding: 20px;
    display: block
}

.scrollleft,
.cc {
    margin: 0 10px
}

.scrollleft {
    padding-top: 30px
}

    .scrollleft li {
        width: 225px;
        margin: 10px;
        float: left
    }

.cc {
    padding-top: 20px
}

    .cc li {
        width: 306px;
        padding: 0px;
        background: #eee;
        margin: 10px;
        float: left
    }

        .cc li img {
            width: 100%;
            height: 200px
        }

        .cc li p {
            padding: 15px;
        }

.fl {
    float: left
}

.fr {
    float: right
}

.bar {
    margin: 10px 20px;
    clear: both;
    border-bottom: #666 solid 1px;
    font-weight: bold;
    padding: 15px;
    font-size: 24px
}

.bar2 {
    margin: 10px 20px;
    clear: both;
    border-bottom: #666 solid 1px;
    text-align: center;
    font-weight: bold;
    padding: 15px;
    margin-top: 0;
    font-size: 18px
}

    .bar2 h3 {
        position: relative;
        z-index: 1;
        background: #fff;
        padding: 0 20px;
        top: 25px;
        display: inline-block
    }

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥

深巷积木青春

关注关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
2
评论
web期末作业设计网页：学校网站设计——我的学校(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品网页设计作业 web网页设计与开发 html实训大作业

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
复制链接

扫一扫