HTML静态网页作业制作北京黎红学院学校网站

情介绍

文章目录

二、网站描述
网站介绍
四、网站演示
TML结构代码
如何让学习不再盲目
七、更多干货

题目

HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度

一套优质的网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

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

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

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

网站文件方面：网站系统文件种类包含：网页结构文件、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结构代码

<!--
* @Author: your name
* @Date: 2022-02-16 22:58:33
* @LastEditTime: 2022-02-16 22:58:54
* @LastEditors: your name
* @Description: 打开koroFileHeader查看配置进行设置:
* @FilePath: 北京黎红学院网页成品4页面\index.html

CSS样式代码

@charset "utf-8";body{ background:#fff;}.head{ width:100%; height:200px; margin:auto; background: url(../images/head_bj.png) top repeat-x #5d644a;}.head_in{ width:930px; height:200px; margin:auto; background: url(../images/head.png) top repeat-x #5d644a;}.head h1{ font-size:56px; line-height:158px; color:#900; text-align:center;}.nav{width:930px; height:40px; border:1px solid #646a52; margin:auto; background:#4c4d3d; }.nav ul{margin:auto;}.nav li{ height:30PX; float:left; padding:5px 20px;}.nav li a{ font-size:24px; color:#ccc; line-height:30px;}.nav li a:hover{ color:#362f2d;}.nav li:hover{ background:#fff}.nav li:hover a{ color:#362f2d;}.center{ text-align:center}.main{ width:100%; height:auto; min-height:500px; margin:auto;}.main_nav{width:940px; height:auto; margin:10px auto;}.main_nav li{ float:left; margin:10px; }.main_con{ width:100%; height:auto; min-height:300px; margin:auto;padding-top:20px; background:#006699;}.main_ad{ width:920px; height:260px; margin:auto; }.main_news{width:900px; height:auto; margin:auto; margin-top:10px; padding-bottom:20px;}.main_news h2{ font-size:26px; line-height:38px; color:#fff;}.main_news p{ font-size:14px; line-height:22px; color:#fff;}.main_news ul{padding-left:20px; }.main_news li{ padding-left:20px;}.main_news li a{ font-size:18px; line-height:32px; color:#fff; }.main_news li a:hover{ font-size:18px; line-height:32px; color:#ffd9b4; }.main_des{width:900px; height:auto; margin:auto; padding-bottom:50px; }.main_des h1{ font-size:28px; line-height:68px; color:#362f2d; text-align:center;}.main_des p{ font-size:16px; line-height:28px; color:#333; text-indent:2em;}.main_zhanshi{width:920px; height:auto; margin:auto;}.main_zhanshi li{ float:left; margin:10px;}.main_zhanshi img{ width:280px; height:200px;}.foot{ width:100%; height:90px; background:#600; margin:auto;text-align:center;}.foot_in{ width:960px; height:90px; padding-top:15px;margin:auto;text-align:center;}.foot_in p{ font-size:16px; line-height:26px; color:#fff; }*{ margin:0; padding:0; font-family:黑体; }.clear{ clear:both;}.fl{ float:left;}.fr{ float:right;}img{ border:none;}a{ text-decoration:none;}a:hover{ text-decoration:none;}li{ list-style-type:none;}.p10{ padding:10px;}.main .main_con .main_news h2 a {color: #FFF;}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<h

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

、作品介绍

HTML+CSS+JS网页设计与制作，我的学校网页设计与制作实例，本实例适合于初学HTML+CSS+JS的同学。该案例里面有div+css的样式布局设置，这个实例比较全面，有一级页、二级页、详情页、输入表单等，共6个页面。本文将介绍如何通过从零开始设计我的学校网站，并将其转换为代码的过程来实现设计与制作。（网页设计与制作分享。源码分享。）

1.网页作品简介方面：青绿色简约风格，div+css布局。主要有：首页、关于暨大、学校新闻、新闻详情页、校园风光、联系我们等总共6个页面html下载。

2.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果等。首页制作了搜索表单。

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，图片居中布局，文本描述对齐方式设置了左对齐。

4.网页作品编辑方面：此作品为我的学校网页设计题材，代码为 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用）

二、作品效果

视频演示：

截图演示：

首页

关于暨大

学校新闻

新闻详情页

校园风光

联系我们

三、作品代码

文件目录：

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>

也适用于：大学生网页作业制作 (HTML+CSS)、大学生HTML期末大作业、web前端期末大作业、web课程设计网页规划与设计、我的学校网页设计作业成品、HTML+CSS+JS网页设计期末课程大作业等。

css样式：

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

1.网页作品简介：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

<h <!DOCTYPE html><head> <meta charset="utf-8" /> <title>宠物网</title> <link href="css/css.css" rel="external nofollow" rel="stylesheet"/></head><body><div class="logo"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/logo.jpg" /></a></div><div class="nav"><ul> <li><a href="index.html" rel="external nofollow" ><img src="images/nav1.jpg"/>首页</a></li> <li><a href="zhidao.html" rel="external nofollow" ><img src="images/nav2.jpg"/>养狗知道</a></li> <li><a href="jieshao.html" rel="external nofollow" ><img src="images/nav3.jpg"/>狗狗介绍</a></li> <li><a href="tuji.html" rel="external nofollow" ><img src="images/nav4.jpg"/>宠物图集</a></li> <li><a href="lingyang.html" rel="external nofollow" ><img src="images/nav5.jpg"/>领养宠物</a></li> <li><a href="liuyan.html" rel="external nofollow" ><img src="images/nav6.jpg"/>在线留言</a></li> </ul></div><div class="topsite"><div class="sear" > <input type="text" class="text"/> <input type="button" class="btn" value="搜索"> </div> <div class="link"> <span>热门搜索：</span><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >泰迪</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >金毛</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >博美</a> </div></div><div class="zhidao"><h2>养狗知道</h2> <p>养狗之前你必须要知道的6件事，看完你再决定要不要养狗！</p> <p>经常听周围朋友说，“啊，一个人好辛苦啊，不如养条狗吧。”，“哇，狗狗好可爱，好想养一只哦！”结果往往是第一天朋友圈还在晒着狗狗的萌照，一星期后就变成“求领走”了。</p> <p>因为种种原因，导致心血来潮买了狗的人没能把狗继续养下去。由此可见，养狗之前必须做足功课，不然到最后无论是狗还是人，都会很不开心。</p> <p>好，恐吓完毕，接下来小编分类概述一下养狗须知。新手奶爸如果不想重蹈覆辙的话，那养狗之前就一定要知道这6件事。</p> <img src="images/zhidao.jpg"> <p>首先，那就是狗的寿命平均在10-20岁之间，如果你的梦想是与它白头偕老，那恐怕很难实现。</p> <p>第二件事就是狗狗的繁殖情况，狗狗在7-12个月之间即可达到性成熟，每年可繁殖1-3胎，每胎可生1-6只。掐指一算……嗯，想养母狗的恐怕要提前做好替狗狗节育的思想觉悟了。</p> <p>第三件事就是母狗的孕期，幼犬在犬妈妈的肚子里的时间大概在58-65天之间，开眼时间大约在出生后10-16天。想当年，在刚放暑假的时候我家母狗怀上了仔仔，到了我开学的时候，幼仔都还没见过我！一整个暑假都白期待了好吗！</p> <p>第四件事就是要明白笼子对于狗狗的意义，没养过狗的萌新们一听到“笼子”两个字就满脸写着拒绝，说绝对不愿意把自己的狗关在笼子里。事实上，狗只是不愿意一直待在笼子里，但这并不代表它不爱笼子。<p> <p>第五件事就是对狗狗的吠叫有耐心，无论你有没有养狗的经验，我们平时都能看到一只狗见到另一只陌生的狗时会全身紧绷，发出低吼，仿佛随时都可能进入战斗模式。</p> <p>最后一件事，就是正视我们养狗的心态。现在很多人养狗，都不是买狗，而是直接领养流浪狗。一些流浪狗受过冷落，可能会有一些心灵创伤，显得比较怂。这时候，你就要出杀招，让它克服心理障碍。这个杀招说难也难，说简单也简单，那就是——每天坚持遛它。就像人独自待久了会变得敏感孤僻一样，狗狗只有充分社交，多见见世面，以后见到其他狗才能抬头挺胸有气势。</p></div><div class="footer"><p>宠物网</p></div></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354<h

在线咨询

上一篇：如何解决HTML页面白屏问题
下一篇：html网页基本组成结构（DOM节点、元素、属性和文本）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商