目錄
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 主頁
<!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 個人簡介
<!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>家鄉：xxxx/p></td></tr><tr><td style="width: 350px"><p>博客：https://blog.csdn.net/qq_63306482</p></td><td style="width: 250px"><p>郵箱：2761646008@qq.com</p></td><td style="width: 150px"><p>專業：物聯網工程</p></td></tr><tr><td><p>高中：xxxxx中學</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">  本科在讀小學生，來自xxxxxxx地。一般程度愛好學習，平時上課的時候比較積極，一般不是坐在第一排，至少也是坐在前幾排，注意力集中，喜歡積極和老師互動，回答老師的問題，但是在課后的時候一般就沒怎么去復習或者學習了，導致臨近考試時經常要花很多時間去復習。<br />  大一的時候除了學習了課本的內容，并沒有涉及過其他的知識，是一個啥也不會的小學生，所以大二這一年決定去多涉及一點課外的知識，剛好也加入了學院微科基地的工作室，可以有一些機會和小組成員去做一些項目，鍛煉一下自己，提升一下自己的動手能力。<br />  平常放松的方式有：籃球、羽毛球、乒乓球和聽歌，沒事的時候喜歡去操場跑跑步，騎單車去學校周圍的公園、景點或者湘江邊轉轉。這些方式都可以讓自己在一天的忙碌中得到短暫的享受，也可以減輕自己的心理壓力。<br />  另外性格方面：屬于xxxx，xxx，xxx，隨便寫點。</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 個人愛好
<!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 個人成績（根據自己的情況添加）
<!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 收藏夾
<!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 可能要用的圖片，其他根據自己情況選或者全部自己找新的
4.1 主頁
4.2 個人簡介
?
?4.3 收藏夾
?
的覺醒)
 深入探索Python-Pandas庫的核心數據結構：Series詳解)