个人博客 HTML个人介绍网页 学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计

news2024/9/26 3:25:11

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

📂文章目录

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

一、👨‍🎓网站题目

👩‍🔬个人博客网站、👨‍🔬个人主页介绍、个人简介、个人博客设计制作 、等网站的设计与制作。

二、✍️网站描述

🏷️ 大学生个人HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。

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

  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 HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<!-- 导入首页轮播图css和js脚本 -->
<link type="text/css" href="css/autoplay.css" rel="stylesheet">
<script type="text/javascript" src="js/autoplay.js"></script>

</head>
<body class="main">
	<!-- 1.网上书城顶部 start -->
<div id="divhead">
	<table cellspacing="0" class="headtable">
		<tr>
			<td>
				<a href="#">
					<img src="picture/logo.png" width="200" height="60" border="0"> 
				</a>
			</td>
			<td style="text-align:right">
				<img src="picture/cart.gif" width="26" height="23" style="margin-bottom:-4px">&nbsp;<a href="#">购物车</a> 
				| <a href="#">帮助中心</a> 
				| <a href="#">我的帐户</a>
				| <a href="register.html">新用户注册</a>
				| <a href="login.html">用户登录</a>

			 
			</td>		
		</tr>
	</table>
</div>
	<!-- 网上书城顶部  end -->

	<!--2. 网上书城菜单列表  start -->
<div id="divmenu">
		<a href="#">文学</a> 
		<a href="#">生活</a> 
		<a href="#">计算机</a> 
		<a href="#">外语</a> 
		<a href="#">经管</a>
		<a href="#">励志</a> 
		<a href="#">社科</a> 
		<a href="#">学术</a> 
		<a href="#">少儿</a>
		<a href="#">艺术</a> 
		<a href="#">原版</a> 
		<a href="#">科技</a> 
		<a href="#">考试</a> 
		<a href="#">生活百科</a> 
		<a href="#" style="color:#FFFF00">全部商品目录</a>		
</div>
<div id="divsearch">
<form action="#" id="searchform">
	<table width="100%" border="0" cellspacing="0">
		<tr>
			<td style="text-align:right; padding-right:220px">
				Search 
				<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名" onmouseover="this.focus();" onclick="my_click(this, 'textfield');" onblur="my_blur(this, 'textfield');"> 
				<a href="#">
					<img src="picture/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"> 
				</a>
			</td>
		</tr>
	</table>
</form>
</div>
<!-- 网上书城菜单列表  end -->

<!-- 3.网上书城首页轮播图  start -->
	<div id="box_autoplay">
    	<div class="list">
        	<ul>
            	<li><img src="picture/index_ad1.jpg" width="900" height="335"></li>
            	<li><img src="picture/index_ad2.jpg" width="900" height="335"></li>
            	<li><img src="picture/index_ad3.jpg" width="900" height="335"></li>
            	<li><img src="picture/index_ad4.jpg" width="900" height="335"></li>
            	<li><img src="picture/index_ad5.jpg" width="900" height="335"></li>
        	</ul>
    	</div>
	</div>
	<!-- 网上书城首页轮播图  end -->
	<!--4. 公告板和本周热卖  start -->
    <div id="divcontent">
		<table width="900px" border="0" cellspacing="0">
			<tr>
				<td width="497">
				
					<img src="picture/billboard.gif" width="497" height="38">
					<table cellspacing="0" class="ctl">
						<tr>
							<td width="485" height="29">
                            尊敬的网上书城用户， 　　<br>
　　为了让大家有更好的购物体验，3月25日起，当日达业务关小黑屋回炉升级！<br>具体开放时间请留意公告，感谢大家的支持与理解，祝大家购物愉快！<br>
        3月23日<br>
        传智播客 网上书城系统管理部<br>
                            </td>
						</tr>
					</table>
				</td>
				<td style="padding:5px 15px 10px 40px">
					<table width="100%" border="0" cellspacing="0">
						<tr>
							<td>
								<img src="picture/hottitle.gif" width="126" height="29">
							</td>
						</tr>
					</table>
					<table width="100%" border="0" cellspacing="0">
						<tr>						
							<td style="width:80; text-align:center">
								<a href="#">
								<img src="picture/105.jpg" width="102" height="130" border="0">
								</a>
								<br> 
							</td>		
							<td style="width:80; text-align:center">
								<a href="#">
								<img src="picture/106.jpg" width="102" height="130" border="0">
								</a>
								<br> 
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
<!-- 公告板和本周热卖  end -->	

<!--5. 网上书城底部 start -->
<div id="divfoot">
		<table width="100%" border="0" cellspacing="0">
			<tr>
				<td rowspan="2" style="width:10%">
					<img src="picture/logo.png" width="195" height="50" style="margin-left:175px">
				</td>
				<td style="padding-top:5px; padding-left:50px">
					<a href="#">
						<font color="#747556"><b>CONTACT US</b></font> 
					</a>
				</td>
			</tr>
			<tr>
				<td style="padding-left:50px">
					<font color="#CCCCCC">
						<b>COPYRIGHT 2015 &copy; BookStore All Rights RESERVED.</b> 
					</font>
				</td>
			</tr>
		</table>
	</div>
	<!-- 网上书城底部  end -->
</body>
</html>

💒CSS样式代码



body, div, ul, li {
	margin:0;
	padding:0;
}
ul {
	list-style-type:none;
}
body {
	background:#000;
	text-align:center;
	font:12px/20px Arial;
}
#box_autoplay {
	position:relative;
	width:900px;
	height:335px;
	background:#fff;
	border-radius:5px;
	border:8px solid #fff;
	margin:10px auto;
	cursor:pointer;
}
#box_autoplay .list {
	position:relative;
	width:900px;
	height:335px;
	overflow:hidden;
}
#box_autoplay .list ul {
	position:absolute;
	top:0;
	left:0;
}
#box_autoplay .list li {
	width:900px;
	height:335px;
	overflow:hidden;
}
#box_autoplay .count {
	position:absolute;
	right:0;
	bottom:5px;
}
#box_autoplay .count li {
	color:#fff;
	float:left;
	width:20px;
	height:20px;
	cursor:pointer;
	margin-right:5px;
	overflow:hidden;
	background:#F90;
	opacity:0.7;
	filter:alpha(opacity=70);
	border-radius:20px;
}
#box_autoplay .count li.current {
	color:#fff;
	opacity:1;
	filter:alpha(opacity=100);
	font-weight:700;
	background:#f60;
}
#tmp {
	width:100px;
	height:100px;
	background:red;
	position:absolute;
}

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

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

七、🎁更多干货

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

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

3.

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

在这里插入图片描述

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

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

相关文章

LeetCode刷题日记之栈与队列II

LeetCode刷题日记之栈与队列II

1.有效的括号 题目描述 解题思路 1.定义一个辅助栈stack来存放字符串&#xff0c;再定义一个以符号最为键、值的对象obj 2.循环遍历字符串&#xff0c;判断栈顶元素对应的key在obj中的值是否等于当前遍历值s[i]&#xff0c;如果等于则直接弹栈&#xff0c;不等于则将s[i]值推…
阅读更多...
数据结构---判断链表是否有环

数据结构---判断链表是否有环

判断链表是否有环判断链表是否有环方法1方法2JAVA实现问题扩展1问题扩展2判断链表是否有环 有一个单向链表&#xff0c;链表中有可能出现“环”&#xff0c;就像下图这样。那么&#xff0c;如何用程序来判断该链表是否为有环链表呢&#xff1f; 方法1 创建一个以节点ID为Ke…
阅读更多...
大数据Kudu（九）：Spark操作Kudu

大数据Kudu（九）：Spark操作Kudu

文章目录 Spark操作Kudu 一、​​​​​​​​​​​​​​添加Maven依赖
阅读更多...
【DELM回归预测】基于灰狼算法改进深度学习极限学习机GWO-DELM实现数据回归预测附matlab代码

【DELM回归预测】基于灰狼算法改进深度学习极限学习机GWO-DELM实现数据回归预测附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …
阅读更多...
网络请求与数据提取-urllib库

网络请求与数据提取-urllib库

关于网络爬虫&#xff0c;其实就是模拟浏览器向网站服务器发送请求&#xff0c;然后从响应的结果中提取出需要的数据。那么&#xff0c;该如何实现这一流程了&#xff1f;对于初学者来说&#xff0c;可能都不知道该如何入手&#xff0c;学习爬虫时需不需要了解HTTP、TCP、IP 层…
阅读更多...
入门：环境安装与部署

入门：环境安装与部署

容器技术入门 随着时代的发展&#xff0c;Docker也逐渐走上了历史舞台&#xff0c;曾经我们想要安装一套环境&#xff0c;需要花费一下午甚至一整天来配置和安装各个部分&#xff08;比如运行我们自己的SpringBoot应用程序&#xff0c;可能需要安装数据库、安装Redis、安装MQ等…
阅读更多...
springboot常用语法库

springboot常用语法库

今天与大家分享springboot常用语法库的基本语法。如果有问题&#xff0c;望大家指教。 目录 1. freemarker是什么 1.1 优点 2. springboot整合freemarker 2.1 pom.xml 2.2 项目配置文件 2.3 Controller 2.4 index.ftl 2.5 常用功能演示 1. freemarker是什么 FreeMarke…
阅读更多...
OPENGL ES 2.0 知识串讲 (3)——SHADER的功能GLSL语法(I)

OPENGL ES 2.0 知识串讲 (3)——SHADER的功能GLSL语法(I)

更多图形知识请关注我的公众号&#xff1a; 在第一节中,我们介绍过 OpenGL ES 与 GLSL 的主要功能,就是往绘制 buffer 上绘制图片。其中虽然 GLSL 制作的 shader 是穿插在 OpenGL ES 中使用,但是我们在流程中可以看出来,两大 shader(vertex shader 和 fragment shader)相对于 O…
阅读更多...
大学毕业生就业信息管理平台

大学毕业生就业信息管理平台

开发工具(eclipse/idea/vscode等)&#xff1a; 数据库(sqlite/mysql/sqlserver等)&#xff1a; 功能模块(请用文字描述&#xff0c;至少200字)&#xff1a; 系统在功能设计充分利用信息化技术和互联网的优势&#xff0c;建立一个以浏览器为用户工作界面&#xff0c;实现跨 平台…
阅读更多...
Hive电子商务消费行为分析项目

Hive电子商务消费行为分析项目

文章目录数据说明环境准备项目代码上传数据文件并创建数据表数据清洗数据可视化客户分析交易分析门店分析评价分析数据说明 某零售企业的门店最近一年收集的数据 customer_details.csv:客户信息 transaction_details.csv:交易信息 store_details.csv:门店信息 store_review.c…
阅读更多...
第1章 基础知识简介

第1章 基础知识简介

&#x1f31e;欢迎来到C语言的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; &#x1f320;本阶段属于练气阶段&#xff0c;希望各位仙友顺利完成…
阅读更多...
【机器码】原码、反码、补码的学习

【机器码】原码、反码、补码的学习

目录 让我们看看这三个码是什么 原码、反码、补码各自的范围 补码的加减运算 根据自己学习做的笔记来记录一下 原码、反码、补码&#xff0c;巩固自己的学习成果。 有符号数是由机器数和真值组合而成 真值&#xff1a;数值数据的实际值&#xff0c;带有-符号 …
阅读更多...
RL 实践（3）—— 悬崖漫步【QLearning Sarsa 各种变体】

RL 实践（3）—— 悬崖漫步【QLearning Sarsa 各种变体】

本文介绍如何用 QLeaning 系列和 Sarsa 系列表格方法解经典的悬崖漫步 (Cliff Walking) 问题完整代码下载&#xff1a;4_[Gym Custom] Cliff Walking (Q-Learning series and Sarsa series) 文章目录1. 悬崖漫步环境 (Cliff Walking)2. 使用 TD 方法求解2.1 Sarsa2.1.1 Sarsa 原…
阅读更多...
kali 安装AWVS [赠附件]

kali 安装AWVS [赠附件]

前言 1.AWVS简介 AWVS&#xff08;Acunetix Web Vulnerability Scanner&#xff09;是一款知名的网络漏洞扫描工具&#xff0c;通过网络爬虫测试网站安全&#xff0c;检测流行的Web应用攻击&#xff0c;如跨站脚本、sql 注入等。据统计&#xff0c;75% 的互联网攻击目标是基于…
阅读更多...
项目中遇到的错误

项目中遇到的错误

项目中遇到的错误swagger2 和 swagger3swagger 文档的注解springboot 版本问题SQL 关键字异常Apifox 的使用集中版本管理swagger2 和 swagger3 swagger2和 swagger3 需要导入的依赖 <dependency><groupId>io.springfox</groupId><artifactId>springfo…
阅读更多...
LabVIEW FPGA中可重入和非可重入子VI的区别

LabVIEW FPGA中可重入和非可重入子VI的区别

LabVIEW FPGA中可重入和非可重入子VI的区别 LabVIEW FPGAVI默认是可重入的。如果多次调用重入VI&#xff0c;则每个实例会占用FPGA器件的单独硬件资源。如果使用非重入VI&#xff0c;无论是并行多次调用还是仅调用一次&#xff0c;都只会创建一个硬件实例并将其用于该VI。 ​…
阅读更多...
最常用的 9 个JavaScript 函数与示例

最常用的 9 个JavaScript 函数与示例

输出内容才能更好的理解输入的知识 前言&#x1f380; 如果你想深入图形、可视化等领域&#xff0c;那么肯定离不开 canvas、webgl、three.js 等一系列技术。在这众多技术中&#xff0c;选择canvas2d为基础来入门是一个不错的选择。 canvas在动画、可视化、图片处理等领域有着…
阅读更多...
物联网通信技术原理 第5章

物联网通信技术原理 第5章

目录 5.1 移动通信的基本概念及发展历史 5.1.1 移动通信的基本概念 5.1.2 移动通信的发展历史&#xff08;理解&#xff09; 1.第一代移动通信系统(1G) 2.第二代移动通信系统(2G) 3.第三代移动通信系统(3G) 5.1.3 移动通信的发展趋势与展望 5.2 无线传播与移动信道 5.2…
阅读更多...
哈希的应用：布隆过滤器（C++实现）

哈希的应用：布隆过滤器（C++实现）

文章目录1. 布隆过滤器1.1 背景1.2 概念1.3 控制误判率2. 实现布隆过滤器2.1 布隆过滤器类2.2 Set2.3 Test2.4 删除3. 优点4. 缺陷4. 缺陷1. 布隆过滤器 1.1 背景 位图&#xff08;bitmap算法&#xff09;告诉我们&#xff0c;想判断一个元素是否存在于某个集合中&#xff0c…
阅读更多...
c语言指针 字符 字符串

c语言指针 字符 字符串

1、sizeof 某个类型或者某个变量在内存中占用字节数。 例如&#xff1a;sizeof(int) ; sizeof(i)&#xff1b;都可以使用 2、运算符& 获取变量的地址。 int i; scanf("%d",&i); 输入变量时&#xff0c;必须使用&运算符。 &操作符只能应…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023