Web大学生网页作业成品——个人班级网站设计与实现(HTML+CSS)

最新推荐文章于 2024-06-20 14:50:33 发布

web学生网页设计

最新推荐文章于 2024-06-20 14:50:33 发布

阅读量1.3k

点赞数 3

分类专栏： web前端文章标签：网页设计与制作 html网页模版 web前端网页作业 html静态网页

本文链接：https://blog.csdn.net/m0_73081085/article/details/127237687

版权

web前端专栏收录该内容

2220 篇文章 139 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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代码）。

三、🔗网站效果

▶️1.视频演示

I57JP- 我们的班级(7页)HTML+CSS+JS

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>我的班级</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Place your description here" /> 
<meta name="keywords" content="put, your, keyword, here" /> 
<meta name="author" content="Templates.com - website templates provider" /> 
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body id="page1">



<!-- header -->
<div id="header">
	<div class="container">
		<div class="wrapper">

			<div class="logo">
				<h1><a href="home.html">我的班级</a><span>明之尚美，馨德亦缘</span></h1>
			</div>
		</div>
		<ul class="nav">
			<li><a href="index-2.html" class="first current">首页</a></li>
			<li><a href="about.html">关于我们</a></li>
			<li><a href="photo.html">相册</a></li>
			<li><a href="lianxi.html">留言板</a></li>
			<li><a href="houyu.html">后语</a></li>
		</ul>
	</div>
</div>
<!-- content -->
<div id="content"><div class="inner_copy"><div class="inner_copy"> Need a website? <a href="http://www.websitetemplatesonline.com/">Free website templates</a> by professional designers at WTO.</div></div>
	<div class="container">
		<div class="inside">
<!-- box begin -->
			<div class="box alt">
				<div class="left-top-corner">
					<div class="right-top-corner">
						<div class="border-top"></div>
					</div>
				</div>
				<div class="border-left">
					<div class="border-right">
						<div class="inner">
							<div class="wrapper">
					      <h2><strong><br />
				          有缘我们相聚<br />
					      </strong></h2>
							  <p style="line-height:24px;"><br />
  2011年9月，一群朝气蓬勃怀揣梦想与喜悦，来自五湖四海的青年来到了北海职业学院，组建了我们软件1班这个大家庭。从此快乐充实的生活开始了！</p>
<p> 这是一个团结奋进、朝气蓬勃、温暖和谐的集体。在辅导员及各位班干的带领下，团结勤奋。刻苦努力，取得了很大的成绩。截至目前，全班35位同学中，共青团员29人、党员2人、预备党员6人、入党积极分子9人。 班级同学学习勤奋刻苦，在大家的共同努力下，也获得了不少的成绩。<br />
                              </p>
                              <p> 学习之余，班级也强抓宿舍卫生建设。在学校、院系的带领下，在每个同学的努力下，班级宿舍卫生在院系乃至学校的卫生评比中也名列前茅。 课余生活丰富多彩也是我们班级的一大特色。大家积极参与学校院系组织的各项活动，在校庆晚会、运动会、院系篮球赛当中，都能看到我们班级同学活跃的身影。<br />
                              </p>
                              <p> 我们一步步走来，我们成长成了一个互帮互助奋、发向上的集体；一个博学务实、拼搏不殆的集体；一个自强自信的集体。这三年里，我们有欢笑，也有泪水；有成功，也有失败；有无悔，也有些许无奈。一年半的历练，我们多了一份淡定与从容，少了一份稚嫩与青涩：多了一份关爱，少了一份自私；多了一份坚强，少了一份懦弱。虽然我们的大学生涯还有许多未知的路要走，还有太多的不能承受需要我们去承受，但我们全体支部成员会以如既往的走下去，建设好我们的班级，承担我们的责任，追逐我们的梦想，寻找属于我们的天空！<br />
                              </p>
                              <p> “信心无畏，青春无悔”是我们的写照！</p>
                              <p> 我坚信，我们的未来一定会更美好！</p>
                              <p style="line-height:24px;"><br />
                                今天是：
                                <script src="Scripts/clock.js" language="javascript"></script>
                              </p>
							</div>
						</div>
					</div>
				</div>
				<div class="left-bot-corner">
					<div class="right-bot-corner">
						<div class="border-bot"></div>
					</div>
				</div>
			</div>
            
<!-- box end -->
<!-- box begin --><!-- box end -->
		</div>
	</div>
</div>
<!-- footer -->
<div id="footer">
	<div class="container">
    </div>
</div>
</body>
</html>

五、🎁更多源码

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

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

web学生网页设计

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
1
评论
Web大学生网页作业成品——个人班级网站设计与实现(HTML+CSS)

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

扫一扫