目录

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;            }            p.a{                float:left;                position:relative;                left:50%;            }            p.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;            }            p.a{                float:left;                position:relative;                left:50%;            }            p.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;            }            p.a{                float:left;                position:relative;                left:50%;            }            p.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 收藏夹