Table of contents
3.4 Personal results (add according to your own situation)
1 Preface and Requirements
1.1 Preface
If you don’t understand the css style of some things, you can go to the programming treasure house or the rookie tutorial to find the corresponding knowledge. In addition, as an amateur player, because he is not a professional, the front-end webpage he made has some problems, and the effect must be in full screen. There will be a little problem if the browser size changes.
1.2 Design requirements
(1) Structural requirements: the homepage and secondary pages should be beautiful, at least 2 paragraphs or more of text to introduce yourself, at least 3 secondary pages (accessed by hyperlinks on the homepage), at least 3 pictures, and background music.
(2) Content requirements: personal preface, personal hobbies, personal achievements, favorites (links to good articles or poems on the Internet), etc.
(3) Technical requirements: beautiful web pages, rich content, convenient browsing, friendly interface, HTML tags/styles used and JavaScript special effects.
2 preview
2.1 Home page
2.2 Profile
2.3 Personal hobbies
2.4 There are codes for personal results, but the pictures have been omitted, you can add them according to your own situation
2.5 Favorites
3 code implementation
3.1 Homepage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WX的主页</title>
<style>
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;
}
</style>
</head>
<body>
<audio controls autoplay loop id="vd" style="display: inline">
<source src="music/love.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<h1 style="text-align:center;margin-top:0;">WX的主页</h1>
<div style="border-style: dashed;border-color: #00ccff;clear: both"></div>
<div class="a" style="margin-top: 25px">
<div class="b" style="">
<div style="text-align: center">
<a href="homework8.1.html"><img src="picture/20.jpg" style="border-radius:50%;width: 100px;height: 100px;"></a>
<a href="homework8.2.html"><img src="picture/23.jpg" style="border-radius:50%;width: 100px;height: 100px;margin-left: 50px"></a>
<a href="homework8.3.html"><img src="picture/24.jpg" style="border-radius:50%;width: 100px;height: 100px;margin-left: 50px"></a>
<a href="homework8.4.html"><img src="picture/25.jpg" style="border-radius:50%;width: 100px;height: 100px;margin-left: 50px"></a>
<br />
<p style="display:inline;margin-left: -8px;">个人简介</p>
<p style="display:inline;margin-left: 70px;">个人爱好</p>
<p style="display:inline;margin-left: 70px;">个人成绩</p>
<p style="display:inline;margin-left: 82px;">收藏夹</p>
<p style="color: green;margin-top:5%;font-size: 22px;">点击对应图片即可跳转</p>
<table style="">
<tr>
<td style="width: 400px">
<p style="display:inline;margin-left:-100px;color: red;text-shadow:2px 0px #43798d;font-size: 25px">"梦想与现实之间的距离叫行动"</p>
<p style="font-family:'Times New Roman';margin-left:-100px;color: red;font-style:italic;text-shadow:2px 0px #43798d;font-size: 25px">"The distance between a dream and a reality is called action"</p>
</td>
</tr>
<tr>
<td style="width: 400px">
<p style="display:inline;color: blue;margin-left:-500px;text-shadow:2px 0px #43798d;font-size: 25px">"减少期待，调整心态"</p>
<p style="font-family:'Times New Roman';margin-left:-500px;color: blue;font-style:italic;text-shadow:2px 0px #43798d;font-size: 25px">"Reduce expectations and adjust your mindset"</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>3.2 Profile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>个人自序</title>
<style>
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;
}
</style>
</head>
<body>
<ul style="text-align: center;background-color: #267F88FF">
<li><img src="picture/12.jpg" style="margin:30px 0px 30px;width:55%;border-radius:50%;border:8px solid #210a42;"></li>
<li><a href="homework8.html"><p style="font-size: 18px;color: white">主页</p></a></li>
<li><a href="#info"><p style="font-size: 18px;color: white">基本信息</p></a></li>
<li><a href="#resume"><p style="font-size: 18px;color: white">个人简介</p></a></li>
<li><a href="#skill"><p style="font-size: 18px;color: white">技能</p></a></li>
<li><a href="#dream"><p style="font-size: 18px;color: white">梦想</p></a></li>
</ul>
<div id="info" style="margin-left:15%;padding:1px 16px;">
<a href="javascript:history.back(-1)" style="text-decoration: none;"><p style="font-size: 22px;display: inline">返回上一页</p></a>
<h1 style="text-align: center;">基本信息</h1>
<table style="width: 90%;">
<tr>
<td><p>性别：男</p></td>
<td><p>年龄：19</p></td>
<td><p>家乡：湖南耒阳</p></td>
</tr>
<tr>
<td style="width: 350px"><p>博客：https://blog.csdn.net/qq_63306482</p></td>
<td style="width: 250px"><p>邮箱：[email protected]</p></td>
<td style="width: 150px"><p>专业：物联网工程</p></td>
</tr>
<tr>
<td><p>高中：耒阳市第一中学</p></td>
<td><p>大学：湖南科技大学</p></td>
<td><p>学历：本科在读</p></td>
</tr>
</table>
<img src="picture/19.jpg" style="margin-left: 200px;border-radius:50%;">
</div>
<div id="resume" style="margin-left:15%;">
<br /> <br /> <br /> <br /> <br /><br /><br />
<h1 style="text-align: center;">个人简介</h1>
<div style="margin:0 15% 0 10% ">
<p style="padding: 20px">
  本科在读小学生，来自伟大的发明家--蔡伦的故乡湖南耒阳。一般程度爱好学习，平时上课的时候比较积极，一般不是坐在第一排，至少也是坐在前几排，注意力集中，喜欢积极和老师互动，回答老师的问题，但是在课后的时候一般就没怎么去复习或者学习了，导致临近考试时经常要花很多时间去复习。
<br />
  大一的时候除了学习了课本的内容，并没有涉及过其他的知识，是一个啥也不会的小学生，所以大二这一年决定去多涉及一点课外的知识，刚好也加入了学院微科基地的工作室，可以有一些机会和小组成员去做一些项目，锻炼一下自己，提升一下自己的动手能力。
<br />
  平常放松的方式有：篮球、羽毛球、乒乓球和听歌，没事的时候喜欢去操场跑跑步，骑单车去学校周围的公园、景点或者湘江边转转。这些方式都可以让自己在一天的忙碌中得到短暂的享受，也可以减轻自己的心理压力。
<br />
  另外性格方面：属于直男本男，思绪简单，落后于时代潮流，从属于老年人的生活步伐。
</p>
</div>
</div>
<br /> <br /> <br /> <br /> <br /> <br /><br />
<div id="skill" style="margin-left:15%;">
<br />
<h1 style="text-align: center;">技能</h1>
<div style="margin:0 15% 0 10%;">
<h3>课程内所学技能：</h3>
<a href="https://www.runoob.com/cprogramming/c-tutorial.html" target="_blank"><img src="picture/3.png" style="border-radius:50%;width: 200px;height: 150px;margin-left: 50px"></a>
<a href="https://www.runoob.com/java/mysql-tutorial.html" target="_blank"><img src="picture/mysql.jpg" style="border-radius:50%;width: 130px;height: 120px;margin-left: 80px"></a>
<a href="https://www.runoob.com/java/java-tutorial.html" target="_blank"><img src="picture/java.jpg" style="border-radius:50%;width: 130px;height: 120px;margin-left: 130px"></a>
<br /><br />
<p style="display: inline;margin-left: 120px">C语言</p><p style="display: inline;margin-left: 200px">MySQL</p><p style="display: inline;margin-left: 215px">JAVA</p>
<br /><br />
<a href="https://www.runoob.com/html/html-tutorial.html" target="_blank"><img src="picture/htm.png" style="margin-left: 85px"></a>
<a href="https://www.runoob.com/css/css-tutorial.html" target="_blank"><img src="picture/css.png" style="border-radius:50%;width: 130px;height: 120px;margin-left: 120px"></a>
<a href="https://www.runoob.com/js/js-tutorial.html" target="_blank"><img src="picture/js.png" style="border-radius:50%;width: 130px;height: 120px;margin-left: 130px"></a>
<br /><br />
<p style="display: inline;margin-left: 110px">html语言</p><p style="display: inline;margin-left: 182px">CSS样式</p><p style="display: inline;margin-left: 190px">JavaScript</p>
<br /><br />
<h3>课外所学技能：</h3>
<a href="https://www.zhihu.com/tardis/zm/art/549784568?source_id=1005" target="_blank"><p style="display: inline;margin-left: 110px">51单片机</p></a>
<a href="https://blog.csdn.net/fantastic_sky/article/details/110229474" target="_blank"><p style="display: inline;margin-left: 160px">STM32单片机</p></a>
<a href="https://zhuanlan.zhihu.com/p/108050248" target="_blank"><p style="display: inline;margin-left: 158px">ZigBee技术</p></a>
</div>
</div>
<div id="dream" style="margin-left:15%;">
<br /> <br /> <br /> <br /> <br />
<h1 style="text-align: center;">梦想</h1>
<div style="margin:0 15% 0 5%;">
<p style="padding: 20px">
  终极梦想的话是实现财富自由，通俗点来说就是能满足日常生活的开销，想去旅游或者玩的时候不会太受金钱的限制，还有就是如果家人生病需要住院什么的，不会太为了医药的费用而去去发愁。
<br />
  目前在大学阶段的梦想或者说目标是学好本专业的专业知识，打好基础，争取多去参加一些比赛，锻炼自己的能力，当然更希望拿一些奖，多搞些学术论文，希望能争取到学院推免的名额。
</p>
</div>
<br /> <br /> <br /> <br /> <br />
</div>
</body>
</html>3.3 Personal hobbies
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人爱好</title>
<style>
body{
background-color: #000000;
}
div.a{
float:left;
position:relative;
left:50%;
}
div.b {
position: relative;
left: -50%;
}
.center {
margin: auto;
width: 50%;
}
</style>
</head>
<body>
<div style="background-color: #555555;height: 100%;width:100%;float: left">
<a href="javascript:history.back(-1)" style="text-decoration: none;color: red"><p style="font-size: 22px;display: inline">返回上一页</p></a>
<h1 style="text-align: center;color: white">个人爱好</h1>
<div style="float: left;margin-left: 55px">
<p style="color: white;font-size: 20px">1,跑步：</p>
<img src="picture/跑步.jpg">
</div>
<div style="float: left;margin-left: 55px">
<p style="color: white;font-size: 20px">2,骑行：</p>
<img src="picture/骑行.jpg" style="width: 420px">
</div>
<div style="float: left;margin-left: 55px">
<p style="color: white;font-size: 20px">3,羽毛球：</p>
<img src="picture/羽毛球1.jpg" style="height: 257px;width: 211px">
</div>
<div style="float: left;margin-left: 55px">
<p style="color: white;font-size: 20px;">4,篮球：</p>
<img src="picture/篮球.jpg" style="height: 257px;width: 393px;">
</div>
<div style="float: left;margin-left: 55px">
<p style="color: white;font-size: 20px;">5,音乐：</p>
<img src="picture/音乐.jpg" style="height: 257px;width: 420px">
</div>
<div style="float: left;margin-left: 55px">
<p style="color: white;font-size: 20px;">6,乒乓球：</p>
<img src="picture/乒乓球4.jpg" style="height: 257px;width: 211px">
</div>
</div>
</body>
</html>3.4 Personal results (add according to your own situation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人成绩</title>
<style>
body{
background-color: black;
}
</style>
</head>
<body>
<div style="background-color: #555555">
<a href="javascript:history.back(-1)" style="text-decoration: none;color: red"><p style="font-size: 22px;display: inline">返回上一页</p></a>
<h1 style="text-align: center;color: white">个人成绩</h1>
<!--内容根据自己的情况设置-->
<!-- <h2 style="color: white">大一上：</h2>-->
<img src="picture/11.jpg" style="width: 850px;height:500px">
<!-- <h2 style="color: white">大一下：</h2>-->
<!-- <img src="picture/成绩1.png" style="width: 1250px">-->
<!-- <h2 style="color: white">大二上：</h2>-->
<!-- <img src="picture/成绩2.png" style="width: 1250px;margin-bottom: 40px">-->
</div>
</body>
</html>3.5 Favorites
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收藏夹</title>
<style>
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%;
}
</style>
</head>
<body>
<a href="javascript:history.back(-1)" style="text-decoration: none;color: #ff0000;"><h2 style="font-size: 25px;display: inline;margin-left: 250px">返回上一页</h2></a>
<h1 style="text-align: center;font-size: 35px">收藏夹</h1>
<h2 style="margin-left: 20px;font-size: 28px">短句：</h2>
<div style="float:left;margin-left: 40px;">
<p class="a">1：从来就不存在什么意外</p>
<p class="a">4：一生清贫怎敢如繁华，两袖清风怎敢误佳人</p>
<p class="a">7：人的贪婪就在于你想拥有你不配拥有的东西</p>
</div>
<div style="float:left;margin-left: 40px;">
<p class="a" >2：岂能尽如人意，所以减少期待</p>
<p class="a">5：少说废话多行动，埋头苦干别认怂</p>
<p class="a">8：在这个爱意泛滥的时代，深情反而成了错误</p>
</div>
<div style="float:left;margin-left: 40px;">
<p class="a">3：没有明天，背水一战</p>
<p class="a">6：梦想与现实之间的距离叫行动</p>
<p class="a">9：你要悄悄拔尖，然后惊艳所有人</p>
</div>
<h2 style="margin-top: 250px;margin-left :20px;clear: both;font-size: 28px">图片：</h2>
<img src="picture/39.jpg" style="width: 400px;height: 300px">
<img src="picture/35.jpg" style="width: 400px;height: 300px">
<img src="picture/38.jpg" style="width: 400px;height: 300px">
<img src="picture/51.jpg" style="width: 400px;height: 300px">
<img src="picture/49.jpg" style="width: 400px;height: 300px">
<img src="picture/48.jpg" style="width: 400px;height: 300px">
<img src="picture/28.jpg" style="width: 400px;height: 300px">
<img src="picture/50.jpg" style="width: 400px;height: 300px">
<img src="picture/26.jpg" style="width: 400px;height: 300px">
<img src="picture/34.jpg" style="width: 400px;height: 300px">
<img src="picture/41.jpg" style="width: 400px;height: 300px">
<img src="picture/37.jpg" style="width: 400px;height: 300px">
<img src="picture/44.jpg" style="width: 400px;height: 300px">
<img src="picture/40.jpg" style="width: 400px;height: 300px">
<img src="picture/43.jpg" style="width: 400px;height: 300px">
<img src="picture/47.jpg" style="width: 400px;height: 300px">
<img src="picture/46.jpg" style="width: 400px;height: 300px">
<img src="picture/27.jpg" style="width: 400px;height: 300px">
<img src="picture/33.jpg" style="width: 400px;height: 300px">
<img src="picture/32.jpg" style="width: 400px;height: 300px">
<img src="picture/29.jpg" style="width: 400px;height: 300px">
<img src="picture/36.jpg" style="width: 300px;height: 400px">
<img src="picture/45.jpg" style="width: 300px;height: 400px">
<img src="picture/42.jpg" style="width: 300px;height: 400px">
</body>
</html>4 The pictures that may be used, others can be selected according to your own situation or you can find new ones by yourself
4.1 Home page
4.2 Profile
4.3 Favorites
