HTML+CSS+JS【个人网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
💥 文章目录
一、🏁 网站题目
💪💪💪 个人网站 5页 含JQuery
二、🚩 网站描述
🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：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>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/css.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="icon" href="img/icon.png" sizes="32x32" />
<title></title>
</head>
<body>
<!--
配色
#CC3333
#CCCCCC
#003366
-->
<nav>
<div class="list">
<ul>
<li><a href="index.html">主页 / Home</a></li>
<li><a href="Picture.html">照片 / Picture</a></li>
<li><a href="news.html">新闻 / News</a></li>
<li><a href="register.html">注册 / register</a></li>
<li><a href="Team.html"> / XXX</a></li>
</ul>
</div>
<div class="auto">
<ul>
<!-- <li>
<img style="width: 100%" src="img/auto_1.jpg" />
</li> -->
<!-- <li>
<img style="width: 100%" src="img/1403227829.jpg" />
</li> -->
<li>
<img style="width: 100%" src="img/1696165270.jpg" />
</li>
</ul>
</div>
<a class="goDown" href="#Introduce">
<div class="goDown"></div>
</a>
</nav>
<p class="shijian"></p>
<main>
<h2 class="Title1" id="Introduce">
我的介绍<span class="otherColor">XXXCaiRan</span>
</h2>
<ul class="teamIntroduce">
<li>
<h3><span class="otherColor">XXX</span></h3>
<p>
放下你的浮躁，放下你的懒惰，放下你的三分钟热度，放空你禁不住诱惑的大脑，放开你容易被任何事物吸引的眼睛
</p>
<img src="img/img_1.jpg" />
</li>
<li>
<h3><span class="otherColor">XXX</span></h3>
<p>
风雨人生，给自己一个微笑。人生路上，太多的为什么，没有答案;有时我们是在付出的路上，是能够收获的
</p>
<img src="img/img_2.jpg" />
</li>
<li>
<h3><span class="otherColor">XXX</span></h3>
<p>
每天早晨，敲醒自己的不是钟声，而是梦想！不是每个人都注定成功，信念就是即使看不到未来，即使看不到希望，也依然相信自己错不了
</p>
<img src="img/img_3.jpg" />
</li>
<li>
<h3><span class="otherColor">XXX</span></h3>
<p>
人人都忙于自己的欢喜与悲伤，哪有空顾你的孤独。时间是最公平的资源，你浇灌在哪里，哪里就可能长出灿烂的花朵
</p>
<img src="img/img_4.jpg" />
</li>
</ul>
<ul class="TeamHobby">
<h2 class="Title1">
我的兴趣爱好<span class="otherColor">MyHobby</span>
</h2>
<li>
<h3><span class="otherColor">XXX</span></h3>
<div>
<p>1.小口慢饮，别狼吞虎咽。</p>
<p>2.你会好起来的，只是不是今天。</p>
<p>3.人的一切痛苦都是对自己无能</p>
<p>4.不愿意醒来时，台灯投射在墙</p>
</div>
<img src="img/123456.png" />
</li>
<li>
<h3><span class="otherColor">XXX</span></h3>
<div>
<p>1.小口慢饮，别狼吞虎咽。</p>
<p>2.你会好起来的，只是不是今天。</p>
<p>3.人的一切痛苦都是对自己无能</p>
<p>4.不愿意醒来时，台灯投射在墙</p>
</div>
<img src="img/12345.png" />
</li>
<li>
<h3><span class="otherColor">XXX</span></h3>
<div>
<p>1.小口慢饮，别狼吞虎咽。</p>
<p>2.你会好起来的，只是不是今天。</p>
<p>3.人的一切痛苦都是对自己无能</p>
<p>4.不愿意醒来时，台灯投射在墙</p>
</div>
<img src="img/123.png" />
</li>
<li>
<h3><span class="otherColor">XXX</span></h3>
<div>
<p>1.小口慢饮，别狼吞虎咽。</p>
<p>2.你会好起来的，只是不是今天。</p>
<p>3.人的一切痛苦都是对自己无能</p>
<p>4.不愿意醒来时，台灯投射在墙</p>
</div>
<img src="img/1234.png" />
</li>
</ul>
<div class="videoForm">
<h2 class="Title1">
视频和表单信息<span class="otherColor">Video And Form</span>
</h2>
<div class="video">
<div class="videotitle">
<span class="Title1"></span>视频<span></span>
<p>The Team Video</p>
</div>
<video
src="video/e21866def38046277a4cf2fd3c2b4ca6.mp4"
height="500px"
width="500px"
controls="controls"
></video>
</div>
<div class="form">
<div class="videotitle">
<span class="Title1"></span>您的信息<span></span>
<p>Your Information</p>
</div>
<form>
<ul>
<li>
<p>姓名/Name：</p>
<input type="text" />
</li>
<li>
<p>年龄/Age：</p>
<input type="text" type="number" />
</li>
<li>
<p>性别/Sex：</p>
<label
><input type="radio" name="sex" value="男生" />男生</label
>
<label
><input type="radio" name="sex" value="女生" />女生</label
>
</li>
<li>
<p>爱好/Hobby：</p>
<label
><input type="checkbox" name="like" value="0" />音乐</label
>
<label
><input type="checkbox" name="like" value="1" />旅游</label
>
</li>
<li>
<p>电话/Tel：</p>
<input type="tel" />
</li>
<li>
<p>备注信息：</p>
<textarea name="message" rows="10" cols="30">
XXXXXXXXXXXXXXXXXXXXXXXXXX
</textarea
>
</li>
<li><input type="submit" class="indexSubmit" /></li>
</ul>
</form>
</div>
</div>
<div class=""></div>
</main>
<footer>
<ul>
<li><a href="index.html">主页 / Home</a></li>
<li><a href="Picture.html">照片 / Picture</a></li>
<li><a href="news.html">新闻 / News</a></li>
</ul>
<ul>
<li><a href="register.html">注册 / register</a></li>
<li><a href="Team.html"> / XXX</a></li>
</ul>
<h4>版权所有©翻版必究</h4>
</footer>
<div class="cu">
<img src="img/cu.gif" height="50px" width="50px" />
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
var timer = setInterval(function () {
var date = new Date();
$(".shijian").text(
date.getFullYear() +
"-" +
(date.getMonth() + 1) +
"-" +
date.getDate() +
date.toLocaleTimeString()
);
}, 1000);
//时间效果 结束
var cu = $(".cu");
//绑定鼠标移动事件
$("body").mousemove(function () {
//解决兼容问题
//event = event || window.event;
//获取滚动条滚动的距离
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl =
document.body.scrollLeft || document.documentElement.scrollLeft;
//获取到鼠标的坐标
/*
* clientX和clientY
* 用于获取鼠标在当前的可见窗口的坐标
* div的偏移量，是相对于整个页面的
*
* pageX和pageY可以获取鼠标相对于当前页面的坐标
* 但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
*/
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
cu.css("left", left - 50 + "px");
cu.css("top", top - 50 + "px");
});
</script>
</body>
</html>
六、🏳️🌈 如何学习进步
- 看书、看博客、学课程或者看视频等
- 模仿着书上或者博客的代码，进行复现，复现不重要，思考才是关键
- 思考学习别人思路后，脱离书本和博客，完全自己实现功能
- 自己实现一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
- 在别人的框架和要求下，写代码实现业务
- 自己负责别人设计的模块的实现
- 独立设计业务模块并开发实现
- 负责大项目框架设计和拆分，带领别人进行开发
- 其他高阶的架构和管理工作，已经不仅仅是代码能力了
七、🏴☠️ 更多干货
🌝 关注我 学习更多知识~
🌝 支持我，请 点赞 + 好评 + 收藏 三连，带来更多文章~
🌝 有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
