大学生HTML期末大作业——HTML+CSS+JavaScript学校网站

最新推荐文章于 2024-05-24 13:51:02 发布
最新推荐文章于 2024-05-24 13:51:02 发布
阅读量1k 收藏 15
点赞数 31
分类专栏： Web前端期末大作业 文章标签： html 课程设计 css 前端 大作业 javascript 大学生网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58648235/article/details/135153916
版权

HTML+CSS+JS【学校网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

💥 文章目录

一、🏁 网站题目

💪💪💪 学校网站 5页

二、🚩 网站描述

🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）

🥇 一套A+的网页应该包含 (具体可根据个人要求而定)

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

三、🎌 网站介绍

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

📃网站程序方面：计划采用最新的网页编程语言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实现动态轮播特效, 表单提交, 点击事件等等。

四、🏴 网站效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、🏳️ 网站代码

<!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 href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="content">
<div class="head">
  <div class="head_1">
    <div class="top">
      <div class="top_logo"><img src="img/logo.jpg" /></div>
      <div class="top_zixun">
        <ul>
          <li><a href="#">加入收藏</a></li>
          <li>|</li>
          <li><a href="#">设为首页</a></li>
        </ul>
        <div class="tel">
          <div class="dianh"><span>0531—58057258</span></div>
        </div>
      </div>
    </div>
    <div class="nav">
      <ul>
        <li><a href="index.html">首&nbsp;页</a></li>
        <li>|</li>
        <li><a href="jianjie.html">学校简介</a></li>
        <li>|</li>
        <li><a href="zhanshi.html">校园风光</a></li>
        <li>|</li>
        <li><a href="dongtai.html">招生动态</a></li>
        <li>|</li>
        <li><a href="dongtai.html">专业设置</a></li>
        <li>|</li>
        <li><a href="#">招生简章</a></li>
        <li>|</li>
        <li><a href="baoming.html">网上报名</a></li>
      </ul>
    </div>
    <div id="win">
      <ul id="picChange">
        <li><img src="img/banner.jpg"  width="990" height="310"/></li>
        <li><img src="img/banner2.jpg"  width="990" height="310"/></li>
        <li><img src="img/banner3.jpg"  width="990" height="310"/></li>
      </ul>
    </div>
  </div>
  <script type="text/javascript" src="js/picChange-0.3.2.js"></script> 
  <script type="text/javascript">
//直接切换效果
//$pic("picChange").picChange();
//淡出效果
$pic("picChange").picChange({changeStyle:"fade",time:250,interTime:5000});
//向上移出效果
//$pic("picChange").picChange({changeStyle:"move",time:250,direction:"up"});
//向上联动效果
//$pic("picChange").picChange({changeStyle:"wheel",time:250,direction:"up"});
//以下为页面测试函数，并非picChange的使用方法，使用方法如上
function func(){
	//恢复html代码原状
	var my_time = document.getElementById("time").value;
	var my_changeStyle = document.getElementById("changeStyle").value;
	var my_direction = document.getElementById("direction").value;
	var my_isClick = document.getElementById("isclick").checked;
	var my_intertime = document.getElementById("intertime").value;
	//alert(my_time+" "+my_changeStyle+" "+my_direction+" "+my_isClick);
	$pic("picChange").picChange({
		changeStyle:my_changeStyle,
		time:my_time,
		direction:my_direction,
		isClick:my_isClick,
		interTime:my_intertime
	});
	var tmpImg = document.getElementById("picChange").getElementsByTagName("img");
	var tmpLength = tmpImg.length;
	for(var n=0;n<tmpLength;n++)
	{
		tmpImg[n].style.top = "";
		tmpImg[n].style.left = "";
		setAlpha(tmpImg[n],100);
		if(n==0)
			tmpImg[n].style.display = "block";
		else
			tmpImg[n].style.display = "";
	}
	var showText = "改变成功！当前模式：";
	if(my_changeStyle == "move" || my_changeStyle == "wheel")
	{
		showText += "向"+document.getElementById("direction").options[document.getElementById("direction").selectedIndex].text+document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;
		showText += "，"+my_time+"毫秒，每隔"+my_intertime/1000+"秒切换。";
	}
	else if(my_changeStyle == "fade")
	{
		showText += document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;
		showText += "，"+my_time+"毫秒，每隔"+my_intertime/1000+"秒切换。";
	}
	else
	{
		showText += document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;
	}
	document.getElementById("show").innerHTML = showText;
}
</script> 
</div>
<div class="main">
  <div class="main_1">
    <div class="box">
      <div class="box_lm">
        <div class="box_lm_1"><span>最新公告</span><a href="#"><img src="img/m.jpg" /></a></div>
        <div class="box_lm_2">
          <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>
        </div>
      </div>
      <!--
!--> 
      <!--

!-->
      
      <div class="box_lm_3">
        <div class="box_lm_3_1"><span>新闻资讯</span><a href="#"><img src="img/m.jpg" /></a></div>
        <div class="box_lm_3_2">
          <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>
        </div>
      </div>
      <div class="box_lm_5">
        <div class="box_lm_5_1"><span>录取查询</span><a href="#"><img src="img/m.jpg" /></a></div>
        <div class="box_lm_5_2"><span>请输入查询编号</span>
          <input type="text" name="" id="kuang" value="">
          <input name="" type="submit" value="提交"  id="an"/>
          <a href="#"><img src="img/baoming.jpg" /></a> </div>
      </div>
    </div>
    <div class="box_2">
    <div class="lieb">
    <ul>
    <li><a href="#">首页</a></li>
    <li>>></li>
    <li><a href="#">列表页</a></li>
    </ul>
    </div>
     <div class="lieb_1">
     <ul>
     <li><span class="time">2014-6-4</span><a href="#">动态动态动态动态动态</a></li>
     <li><span class="time">2014-6-4</span><a href="#">动态动态动态动态动态</a></li>
     <li><span class="time">2014-6-4</span><a href="#">动态动态动态动态动态</a></li>
     <li><span class="time">2014-6-4</span><a href="#">动态动态动态动态动态</a></li>
     <li><span class="time">2014-6-4</span><a href="#">动态动态动态动态动态</a></li>
     <li><span class="time">2014-6-4</span><a href="#">动态动态动态动态动态</a></li>
     <li><span class="time">2014-6-4</span><a href="#">动态动态动态动态动态</a></li>
     <li><span class="time">2014-6-4</span><a href="#">动态动态动态动态动态</a></li>
     </ul>
     </div>
    </div>
    </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer_1">
      <div class="xian"></div>
      <div class="foot">
        <div class="yq">
          <ul>
            <li><a href="#">友情链接：</a></li>
            <li><a href="#">财经大学</a></li>
            <li>|</li>
            <li><a href="#">微畅信息</a></li>
            <li>|</li>
            <li><a href="#">财经大学</a></li>
            <li>|</li>
            <li><a href="#">微畅信息</a></li>
          </ul>
        </div>
        <div class="bq"><img src="img/foot_logo.png" />
          <ul>
            <li>版权所有：山东财经大学</li>
            <li>电话：0531—58057258 &nbsp;13589024680 </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

六、🏳️‍🌈 如何学习进步

  1. 看书、看博客、学课程或者看视频等
  2. 模仿着书上或者博客的代码，进行复现，复现不重要，思考才是关键
  3. 思考学习别人思路后，脱离书本和博客，完全自己实现功能
  4. 自己实现一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
  5. 在别人的框架和要求下，写代码实现业务
  6. 自己负责别人设计的模块的实现
  7. 独立设计业务模块并开发实现
  8. 负责大项目框架设计和拆分，带领别人进行开发
  9. 其他高阶的架构和管理工作，已经不仅仅是代码能力了

七、🏴‍☠️ 更多干货

🌝 关注我 学习更多知识~

🌝 支持我，请 点赞 + 好评 + 收藏 三连，带来更多文章~

🌝 有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~

🌝 更多主题网页设计模板

无·糖
关注
  • 31
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
大二学生HTML期末大作业——HTML+CSS+JavaScript食品网上超市购物商城网页与制作
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
html期末大作业
12-18
html期末大作业,可以供选修了html网页的课的同学应付老师……
HTML期末作业课程设计大作业~环境保护学生网页设计作业源码(HTML+CSS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-24 2万+
HTML期末大作业~基于HTML+CSS环境保护学生网页设计 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页 新闻中心 专题回顾 里约热内卢 奥运回顾 等5个页面! 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学
【HTML5期末大作业】制作一个简单HTML我的班级网页（HTML+CSS+JS）
HTML网页设计
08-05 5878
🏫 校园班级网页设计 、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站......
学生HTML个人网页作业作品~蛋糕甜品店铺共11个页面(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-01 3万+
学生HTML个人网页作业作品~ 个人主页博客网页设计制作~ 大学生个人网站作业模板~简单个人网页制作 ~面包店铺电商网站模板html 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 红色的蛋糕甜品在线预订，面包店铺电
web前端期末大作业——基于html+css+javascript学生宿舍管理系统网站
08-10
都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、...
HTML期末学生大作业——基于html+css+javascript+jquery+bootstrap响应式音乐酒吧网站
08-10
都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、...
web网页大作业——基于HTML+CSS+JavaScript制作摄影之家网站
08-10
都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、...
Web前端大作业——基于HTML+CSS+JavaScript仿英雄联盟LOL游戏网站
08-10
都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、...
期末大作业+html+css网页制作
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，虽然不是非要把网站做的效果很好，但是代码的工整和文件夹的放置还是需要把这种表面功夫做好，这样你才能得到更好的分数而且不会被怀疑是代做的。适合学生的html5响应式网站 成品可以让你们修改吗？ 学生网页成品坚持每周更新 学生网站一定不能太专业，否则老师会发现的！ DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
web前端期末大作业——基于HTML+CSS+JavaScript仿蘑菇街时尚服装购物商城
08-10
都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、...
HTML5期末考核大作业网站——卫生与健康HTML+CSS+JavaScript
08-10
都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、...
web前端期末大作业——基于HTML+CSS+JavaScript实现中国茶文化(30页)
08-10
都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、...
大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站
最新发布
...
05-24 1082
HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
web期末大作业网页设计-个人介绍-纯html+css
@MIKE小助手
06-18 4218
web期末大作业网页设计-个人介绍-纯html+css
大学生HTML期末大作业——HTML+CSS+JavaScript广东传统文化
...
03-27 2266
大学生HTML期末大作业——HTML+CSS+JavaScript广东传统文化
1000套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作【建议收藏】
热门推荐
HTML网页设计
07-27 4万+
1.网页作品简介方面HTML期末学生结课大作业作品(HTML+CSS+JS)，响应式布局网站源码！兼容pc以及移动端，内涵js交互，ui交互，页面质量高非常适合，2.网页作品编辑方面此作品为学生个人主页网页设计题材，代码为A+学生水平所有编辑器均可使用）3.网页作品布局方面网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。4.网页作品技术方面。...
HTML+CSS+JS网页设计期末课程大作业 HTML+CSS+JavaScript
06-01
恭喜你完成了这个大作业！HTML、CSS和JavaScript是现代网页设计的三个基本技术，它们可以帮助你创建出美观、交互性强、功能丰富的网页。下面是一些关于HTML、CSS和JavaScript的常见知识点： HTML（超文本标记语言）...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值