Web大学生个人网页作业成品——学生个人爱好展示网站设计与实现(HTML+CSS+JS)

news2024/12/23 19:17:05

🎉精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!


📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、🔧 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货


一、👨‍🎓网站题目

🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。


二、✍️网站描述

⭐个人网页设计网站模板采用DIV CSS布局制作,网页作品有多个页面,如 :个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页面)、在线留言(表单页面)CSS样式方面网页整体采用左右布局结构,制作了网页背景图片,导航区域每个导航背景色不同,导航背景色与页面背景呼应。

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

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

三、📚网站介绍

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

📓网站程序方面:计划采用最新的网页编程语言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=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="stylesheets/index.css">
</head>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'images/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(){
					$('.caption').animate({
						bottom:-35
					},100);
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log(current);
					};
				}
			});
		});
</script>
<body bgcolor="#000000">



<div id="page">
<div id="top">
<img src="images/logo.jpg" width="169" height="100" align="left" />
<img src="images/logo2.jpg" />

</div>

<div id="nav"><p><a href="index.html" >首页</a> <a href="pages/share.html">作品展示</a> <a href="pages/supplies.html">服装展示</a> <a href="pages/com.html">外景展示</a> <a href="pages/news.html">新闻动态</a> <a href="pages/about.html">关于我们</a></p></div>


<div class="main" align="center">
<div id="container">
		<div id="example">
		  <div id="slides">
				<div class="slides_container">
					<div>
						<img src="images/1.jpg" width="570" height="270" alt="Slide 1">					</div>
					<div>
						<img src="images/2.jpg" width="570" height="270" alt="Slide 2">					</div>
				  <div>
				  <img src="images/3.jpg" width="570" height="270" alt="Slide 3">					</div>
                  	  <div>
				  <img src="images/4.jpg" width="570" height="270" alt="Slide 3">					</div>
		  </div>
				<a href="#" class="prev"><img src="images/arrow-prev.png" width="24" height="43" alt="prev"></a>
				<a href="#" class="next"><img src="images/arrow-next.png" width="24" height="43" alt="next"></a>			</div>
	</div>
  </div>
</div>




</div>
</body>
</html>



💒CSS样式代码



/* CSS Document */
body{
	background:url(../images/bg.jpg) no-repeat center top;
}
#page{ 
	width:970px; 
	margin:0 auto;
}
#top{
	width:970px; 
	height:100px; 
	margin:0 auto; 
	background:#fff
}
#nav{
	width:970px; 
	height:60px; 
	margin:10px auto; 
	background:url(../images/top_bg.gif);
}
#nav p{
	height:30px; 
	line-height:30px; 
	padding:15px 0 15px 20px; 
}
#nav p a{
	color:#FFFFFF; 
	font-size:14px; 
	font-weight:bold;
	line-height:30px; 
	padding:0 35px;
}
#nav p a:hover{
	color:#CCCCCC; 
	font-size:16px;
}
#foot{
	width:970px;
	padding:20px 0;
	color:#FFFFFF;
	text-align:center;
}

#container {
	width:970px;
	padding:10px;
	margin:0 auto;
	position:relative;
	z-index:0;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}

#example {
	width:600px;
	height:350px;
	position:relative;
}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{
	margin:0;
	padding:0;
	border:0;
}
*{
	margin:0;
	padding:0;
	border:0;}
body {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#000000;
	line-height: 20px;
	text-align:left;
}
td,th {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
a {
	color: #000000;
}
A:link {
	TEXT-DECORATION: none;
}
A:visited {
	text-decoration: none;
}
A:hover{
	text-decoration:underline;
}

ul,li{
	list-style-type:none;
}

li a:hover{
	text-decoration:underline;
}

#ribbon {
	position:absolute;
	top:-3px;
	left:-15px;
	z-index:500;
}

#frame {
	position:absolute;
	z-index:0;
	width:600px;
	height:341px;
	top:-3px;
	left:-80px;
}

#slides {
	position:absolute;
	top:15px;
	left:4px;
	z-index:100;
}

#slides .next,#slides .prev {
	position:absolute;
	top:112px;
	left:-145px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

.slides_container {
	width:570px;
	height:270px;
	overflow:hidden;
	position:relative;
}

#slides .next {
	left:722px;
}
.cont{
	width:970px; 
	margin:0 auto;
}
.cont ul li{ float:left; margin-right:10px;}
.cont ul{ width:760px; margin:0 auto;}
.new {padding-left:10px; 
	padding-top:20px; 
	padding-bottom:20px; 
	width:960px; 
	overflow:hidden;
}
.new img{width:260px; 
	height:130px; 
	float:left;
}
.new_p{
	width:600px; 
	float:left; 
	padding-left:10px;
}
.new_p a{
	font-size:26px;
	font-weight:bold;
	color:#fff;
}
.new_p p{
	color:#fff;
}

.new1{
	padding:20px;
}
.new1 p{
	color:#fff;
}

.com{
	color:#FFFFFF;
	padding:20px;
}
.com p a{ color:#F00;}

.com table tr td{
	color:#FFFFFF;
}
.com ul li{ float:left; height:228px;}
.sup{
	padding:20px;
}

.thumbnail{
	width:200px; 
	float:left; 
	margin-left:30px; 
	display:inline;
	margin-bottom:20px;
}
.thumbnail a{
	color:#FFFFFF;
}




六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习 。


七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

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

3.

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/77480.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

FlinkCDC部署

文章目录Flink安装job部署1、测试代码2、打包插件3、打包4、测试Flink安装 1、解压 wget -b https://archive.apache.org/dist/flink/flink-1.13.6/flink-1.13.6-bin-scala_2.12.tgz tar -zxf flink-1.13.6-bin-scala_2.12.tgz mv flink-1.13.6 /opt/module/flink2、环境变量…

快手某HR吐槽:职位要求写得很清楚,照着写简历不行吗?有的工作经历不相关,有的工作好几年还写学生会奖学金,这种一秒扔垃圾桶!...

求职时&#xff0c;你的简历是什么样的&#xff1f;能否帮你顺利通过初筛&#xff1f;一位快手的面试官吐槽很多求职者的简历“一塌糊涂”&#xff1a;职位要求已经写得很明白了&#xff0c;就把里面罗列的技术和跟业务相关的项目经验贴上来就好了&#xff0c;有人偏写航空公司…

Vue 不重新打包,动态加载全局配置的实现过程

背景 项目前端采用了 Vue.js &#xff0c;跟传统前端 html 技术不同之处在于&#xff0c;每次打包后都重新生成新的 js 文件&#xff0c;而且不可读&#xff0c;必须全量替换。但最近碰到一个漏洞扫描的问题&#xff0c;系统通过单点登录方式访问时&#xff0c;是不能有登录首…

【MySQL基础】数据库操作语言DML相关操作有那些?

目录 一、什么是DML 二、数据插入insert 三、数据的修改update 四、数据的删除delete 五、delete和truncate有什么不同&#xff1f; 六、DML操作知识构图 七、DML操作练习 &#x1f49f; 创作不易&#xff0c;不妨点赞&#x1f49a;评论❤️收藏&#x1f499;一下 一、什…

【Docker学习教程系列】8-如何将本地的Docker镜像发布到私服?

通过前面的学习&#xff0c;我们已经知道&#xff0c;怎么将本地自己制作的镜像发布到阿里云远程镜像仓库中去。但是在实际工作开发中&#xff0c;一般&#xff0c;我们都是将公司的镜像发布到公司自己搭建的私服镜像仓库中&#xff0c;那么一个私服的镜像仓库怎么搭建&#xf…

Android之Service

一、Service简介&#xff1a; Service是一种后台服务机制&#xff0c;允许在没有用户界面的情况下&#xff0c;使程序能够长时间在后台运行。 Service是四大组件之一&#xff0c;适用于开发无UI界面、长时间后台运行、做一些用时比较长的操作。 二、Service创建&#xff1a;…

Frida - App逆向 JavaScript代码注入 基本语法以及数据类型介绍

Frida - App逆向 JavaScript代码注入 常用语法介绍 文章目录Frida - App逆向 JavaScript代码注入 常用语法介绍前言一、逆向步骤二、重载(Overload) / Frida数据类型1.重载函数介绍2.重载函数常用的类型三、Frida Hook常用代码介绍1.基本代码框架四、注入JavaScript代码运行监听…

功能测试的工作流程

测试工作人员接收到项目需求、验收标准和原型图并对需求进行分析以了解项目的需求。 一、测试计划&#xff1a;个人觉得测试计划应在在详细设计确认后&#xff0c;代码开始编写的时候开始编写。测试计划主要给后面的测试工作的一些指南。 其内容包含&#xff1a; 1、测试团队人…

kubernetes学习之路--Pod配置学习

写在前面&#xff1a;上篇文章提供了两种简单搭建一个k8s集群的方法&#xff0c;其中两种方式的区别是&#xff1a;kubeadm是直接在主机上进行k8s搭建&#xff0c;kind是在docker中搭建。本文主要分享新建pod等方法。&#xff08;想了想&#xff0c;对于像我这刚入门的人来说&a…

面试常问的《进程创建—进程终止—进程等待—进程替换》!

送给正在努力前行的你一句话&#xff1a;要努力&#xff0c;但不要着急&#xff0c;繁花锦簇&#xff0c;硕果累累都需要过程&#xff01; 博主主页 目录 1.进程创建 fork函数初识 fork函数返回值 写时拷贝 2.进程终止 进程退出场景 进程如何退出 3.进程等待 进程等待的必要性 …

Java泛型简介

参考博客&#xff1a;https://www.jb51.net/article/192850.htm 泛型&#xff0c;即“参数化类型”。一提到参数&#xff0c;最熟悉的就是定义方法时有形参&#xff0c;然后调用此方法时传递实参。那么参数化类型怎么理解呢&#xff1f;顾名思义&#xff0c;就是将类型由原来的…

vuex持久化

下载&#xff1a; vuex-persistedstate npm install --save vuex-persistedstate 或者&#xff1a; npm install --save vuex-persistedstate --legacy-peer-deps 引入使用&#xff1a;在store文件夹下的index文件中&#xff0c;也就是放vuex的js代码中引入&#xff1a; i…

周末福利 | 21天学通Python完整版,豆瓣评分9.6!

前言 又到了周末啦&#xff0c;小编例行给大家发福利&#xff01; 今天福利的内容是21天学通Python完整版&#xff0c;这是一本豆瓣评分9.6的人工智能入门书籍&#xff01;全面、系统、深入地讲解了Python编程基础语法与高级应用。在讲解过程中&#xff0c;通过大量实际操作的…

mac m1 安装docker docker 安装php 5.6 和 7.2 避坑指南

通过该link可以下载兼容mac m1核心的docker-desktop: Docker Desktop - Docker 所有基于amd64架构核心的都加上--platform linux/amd64来运行,这样就能愉快的玩耍了: docker search centos7 php56 #搜索 docker images #显示所有镜像 docker pull sglim2/centos7 建议使用ln…

如何让青少年在AI时代抢占先机

点击蓝字关注我们AI TIME欢迎每一位AI爱好者的加入&#xff01;11月17日&#xff0c;由智谱AI支持&#xff0c;北京市科委、中关村管委会科普专项经费资助的系列栏目“科普大佬说”很荣幸邀请到国家科技部“新一代人工智能创新发展与应用研究”项目、中小学人工智能教育服务平台…

在VSCode中用Markdown自动生成PPT详细使用指南,支持多种风格和排版,支持ppt转为pdf等

在VSCode中用Markdown自动生成PPT详细使用指南&#xff0c;支持多种风格和排版&#xff0c;支持ppt转为pdf等。 Marp 官网&#xff1a; https://marp.app/ 这款软件也能在 Windows 或 Linux 系统上使用&#xff0c;并不局限于 macOS 系统。 今天要介绍的是 Marp 推出的 VS Cod…

PLC-Recorder实现速度高达0.24ms准确周期采集的方法(带时间戳采集)

目录 1、PLC的发送程序 2、PLC连接配置 3、PLC-Recorder侧的通讯设置 4、PLC-Recorder的通道配置 5、PLC-Recorder的变量配置 6、正常通讯情况的界面 7、记录数据的情况 8、小结 如果要以非常高的速度高速采集各种控制器&#xff08;典型的是PLC&#xff09;的数据&…

【Linux】gcc/g++

目录 Linux编译器-gcc/g使用 No.1 背景知识 No.2 预处理(进行宏替换) No.3 编译&#xff08;生成汇编&#xff09; No.4 汇编&#xff08;生成机器可识别代码&#xff09; No.5 动态链接过程 No.6 gcc选项 Linux编译器-gcc/g使用 No.1 背景知识 预处理&#xff08;进行…

什么是Serverless?

Serverless 无服务器&#xff1b;无主机&#xff1b; Serverless &#xff0c;按中文翻译&#xff0c;称为「无服务器」。被认为是新一代的云计算发展方向。 在某些场景可以解读为一种软件系统架构方法&#xff0c;通常称为 Serverless 架构 关于 Serverless 的定义&#xf…

留学Assignment写作怎么注意论证方法?

Assignment的论证方法&#xff0c;对于一篇Assignment而言&#xff0c;学会如何论证&#xff0c;对Assignment的逻辑和内容&#xff0c;有一定的作用。掌握常用的论证方法&#xff0c;了解Assignment要求&#xff0c;在Assignment写作的过程中&#xff0c;学会加以应用&#xf…