javaweb个人主页设计(html+css+js)
目录
1 前言和要求
1.1 前言
1.2 设计要求
2 预览
2.1 主页页面
2.2 个人简介
2.3 个人爱好
2.4 个人成绩有代码,但是图片已省略,可以根据自己情况添加
2.5 收藏夹
3 代码实现
3.1 主页
3.2 个人简介
3.3 个人爱好
3.4 个人成绩(根据自己的情况添加)
3.5 收藏夹
4 可能要用的图片,其他根据自己情况选或者全部自己找新的
4.1 主页
4.2 个人简介
4.3 收藏夹
1 前言和要求
1.1 前言
如果有些东西css样式看不懂的话可以去编程宝库或者菜鸟教程查找相应的知识,另外作为业余选手,因为不是专业的,做的前端网页,是有一些毛病的,必须在全屏下效果才好,浏览器大小变化的话会有一点问题。
1.2 设计要求
(1)结构要求:主页和二级页面美观,至少2段以上文字介绍自己,至少3个二级页面(主页超链接进入),至少3张图片,有背景音乐。
(2)内容要求:个人自序、个人爱好、个人成绩、收藏夹(网上好的文章或诗词等的链接)等部分。
(3)技术要求:网页美观,内容丰富,浏览方便,界面友好,使用的HTML标签/样式及其JavaScript特效。
2 预览
2.1 主页页面
2.2 个人简介
2.3 个人爱好
2.4 个人成绩有代码,但是图片已省略,可以根据自己情况添加
2.5 收藏夹
3 代码实现
3.1 主页
WX的主页
body{
/*background-color:#11BBEE;*/
/*background-color: #33d3d3;*/
margin:0px;
background-image:url(picture/15.jpg);
background-size:100% 100%;
background-attachment: fixed;
/*background-image-z-index: -1;*/
background-repeat:no-repeat;
}
h1{
text-align:center;
}
div.a{
float:left;
position:relative;
left:50%;
}
div.b {
position: relative;
left: -50%;
}
.center {
margin: auto;
width: 50%;
}
p{
font-size: 20px;
}
您的浏览器不支持 audio 元素。
WX的主页
个人简介
个人爱好
个人成绩
收藏夹
点击对应图片即可跳转
"梦想与现实之间的距离叫行动"
"The distance between a dream and a reality is called action"
"减少期待,调整心态"
"Reduce expectations and adjust your mindset"
3.2 个人简介
个人自序
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
body{
margin: 0;
background-image:url(picture/17.jpg);
background-size:100% 100%;
background-attachment: fixed;
background-repeat:no-repeat;
}
td
{
padding:10px;
}
p{
font-size: 18px;
}
主页
基本信息
个人简介
技能
梦想
返回上一页
基本信息
性别:男
年龄:19
家乡:xxxx/p>
博客:https://blog.csdn.net/qq_63306482
邮箱:2761646008@qq.com
专业:物联网工程
高中:xxxxx中学
大学:湖南科技大学
学历:本科在读
个人简介
本科在读小学生,来自xxxxxxx地。一般程度爱好学习,平时上课的时候比较积极,一般不是坐在第一排,至少也是坐在前几排,注意力集中,喜欢积极和老师互动,回答老师的问题,但是在课后的时候一般就没怎么去复习或者学习了,导致临近考试时经常要花很多时间去复习。
大一的时候除了学习了课本的内容,并没有涉及过其他的知识,是一个啥也不会的小学生,所以大二这一年决定去多涉及一点课外的知识,刚好也加入了学院微科基地的工作室,可以有一些机会和小组成员去做一些项目,锻炼一下自己,提升一下自己的动手能力。
平常放松的方式有:篮球、羽毛球、乒乓球和听歌,没事的时候喜欢去操场跑跑步,骑单车去学校周围的公园、景点或者湘江边转转。这些方式都可以让自己在一天的忙碌中得到短暂的享受,也可以减轻自己的心理压力。
另外性格方面:属于xxxx,xxx,xxx,随便写点。
技能
课程内所学技能:
C语言
MySQL
JAVA
html语言
CSS样式
JavaScript
课外所学技能:
51单片机
STM32单片机
ZigBee技术
梦想
终极梦想的话是实现财富自由,通俗点来说就是能满足日常生活的开销,想去旅游或者玩的时候不会太受金钱的限制,还有就是如果家人生病需要住院什么的,不会太为了医药的费用而去去发愁。
目前在大学阶段的梦想或者说目标是学好本专业的专业知识,打好基础,争取多去参加一些比赛,锻炼自己的能力,当然更希望拿一些奖,多搞些学术论文,希望能争取到学院推免的名额。
3.3 个人爱好
个人爱好
body{
background-color: #000000;
}
div.a{
float:left;
position:relative;
left:50%;
}
div.b {
position: relative;
left: -50%;
}
.center {
margin: auto;
width: 50%;
}
返回上一页
个人爱好
1,跑步:
2,骑行:
3,羽毛球:
4,篮球:
5,音乐:
6,乒乓球:
3.4 个人成绩(根据自己的情况添加)
个人成绩
body{
background-color: black;
}
返回上一页
个人成绩
<!-- 大一上:
-->
<!-- 大一下:
-->
<!-- -->
<!-- 大二上:
-->
<!-- -->
3.5 收藏夹
收藏夹
body{
background-image:url(picture/16.jpg);
background-size:100% 100%;
background-attachment: fixed;
/*background-image-z-index: -1;*/
background-repeat:no-repeat;
}
div.a{
float:left;
position:relative;
left:50%;
}
div.b {
position: relative;
left: -50%;
}
p.a{
font-size: 18px;
color: #6400fc;
}
img.a{
float:left;
position:relative;
left:50%;
}
返回上一页
收藏夹
短句:
1:从来就不存在什么意外
4:一生清贫怎敢如繁华,两袖清风怎敢误佳人
7:人的贪婪就在于你想拥有你不配拥有的东西
2:岂能尽如人意,所以减少期待
5:少说废话多行动,埋头苦干别认怂
8:在这个爱意泛滥的时代,深情反而成了错误
3:没有明天,背水一战
6:梦想与现实之间的距离叫行动
9:你要悄悄拔尖,然后惊艳所有人
图片:
4 可能要用的图片,其他根据自己情况选或者全部自己找新的
4.1 主页
4.2 个人简介
4.3 收藏夹