HTML5期末考核大作业、HTML个人主页界面设计源码
生活随笔
收集整理的這篇文章主要介紹了
HTML5期末考核大作业、HTML个人主页界面设计源码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
🎉精彩專欄推薦👇🏻👇🏻👇🏻
?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
💂 作者主頁: 【主頁——🚀獲取更多優(yōu)質(zhì)源碼】
🎓 web前端期末大作業(yè)： 【📚畢設項目精品實戰(zhàn)案例 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到高級學習視頻教程 120G干貨分享】
🥇 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術(shù)的探索和追求從未停歇。 💪堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨?🎓網(wǎng)站題目
- 二、??網(wǎng)站描述
- 三、📚網(wǎng)站介紹
- 四、🌐網(wǎng)站演示
- 五、🔧 網(wǎng)站代碼
- 🧱HTML結(jié)構(gòu)代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多干貨
一、👨?🎓網(wǎng)站題目
🧑個人網(wǎng)頁設計、🙋?♂?個人簡歷制作、👨?💼簡單靜態(tài)HTML個人網(wǎng)頁作品、👨?🏭個人介紹網(wǎng)站模板 、等網(wǎng)站的設計與制作。
二、??網(wǎng)站描述
?個人網(wǎng)頁設計網(wǎng)站模板采用DIV CSS布局制作，網(wǎng)頁作品有多個頁面，如 :個人介紹（文字頁面）、我的作品（圖片列表）、個人技能（圖文頁面）、在線留言（表單頁面）CSS樣式方面網(wǎng)頁整體采用左右布局結(jié)構(gòu)，制作了網(wǎng)頁背景圖片，導航區(qū)域每個導航背景色不同，導航背景色與頁面背景呼應。
🏅 一套A+的網(wǎng)頁應該包含 (具體可根據(jù)個人要求而定)
三、📚網(wǎng)站介紹
📔網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
📓網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。
📘網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎng)頁風格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
📒網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
📙網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）📄 js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到js代碼）。
四、🌐網(wǎng)站演示
五、🔧 網(wǎng)站代碼
🧱HTML結(jié)構(gòu)代碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head><title></title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/style.css"><style>*{margin: 0;padding: 0;font-size: 12px;}body{background: url("img/3.jpg") no-repeat;background-size: 100%;}@font-face {font-family: 'iconfont'; src: url('font/iconfont.eot'); /* IE9*/src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('font/iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */ }[data-icon]:before {font-family: iconfont;content: attr(data-icon);speak: none;}#stage {width: 100%;height: 100%;-webkit-transition: -webkit-transform 2s;-webkit-transform-style: preserve-3d;-moz-transition: -webkit-transform 2s;-moz-transform-style: preserve-3d;}#shape {position: relative;top: 160px;margin: 0 auto;height: 200px;width: 200px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}.plane {position: absolute;left:0;top:0;height: 200px;width: 200px;border: 1px solid white;-webkit-border-radius: 12px;-webkit-box-sizing: border-box;-moz-border-radius: 12px;border-radius: 12px;-moz-box-sizing: border-box;text-align: center;font-family: Times, serif;font-size: 124pt;color: black;background-color: rgba(67, 181, 180, 0.60);-webkit-transition: -webkit-transform 2s, opacity 2s;-webkit-backface-visibility: hidden;-moz-transition: -webkit-transform 2s, opacity 2s;-moz-backface-visibility: hidden;}#shape.backfaces .plane {-webkit-backface-visibility: visible;-moz-backface-visibility: visible;}#shape {-webkit-animation: spin 7s infinite linear;-moz-animation: spin 7s infinite linear;}@-webkit-keyframes spin {from { -webkit-transform: rotateY(0);-moz-transform: rotateY(0);}to { -webkit-transform: rotateY(-360deg);-moz-transform: rotateY(-360deg);}}/* ---------- cube styles ------------- */.cube > .one {opacity: 0.5;-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);-moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);}.cube > .two {opacity: 0.5;-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);-moz-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);}.cube > .three {opacity: 0.5;-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);}.cube > .four {opacity: 0.5;-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);}.cube > .five {opacity: 0.5;-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);}.cube > .six {opacity: 0.5;-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);-moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);}.cube > .seven {-webkit-transform: scale3d(0.5, 0.5, 0.5) rotateX(90deg) translateZ(100px) rotate(180deg);}.cube > .eight {-webkit-transform: scale3d(0.5, 0.5, 0.5) translateZ(100px);}.cube > .nine {-webkit-transform: scale3d(0.5, 0.5, 0.5) rotateY(90deg) translateZ(100px);}.cube > .ten {-webkit-transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg) translateZ(100px);}.cube > .eleven {-webkit-transform: scale3d(0.5, 0.5, 0.5) rotateY(-90deg) translateZ(100px);}.cube > .twelve {-webkit-transform: scale3d(0.5, 0.5, 0.5) rotateX(-90deg) translateZ(100px);}#shape img{width:200px;height: 200px;}</style> </head> <body> <div id="main"><div id="topDiv"><ul class="ul_top"><li><span data-icon=""></span>世界并不完美</li><li><a href="#">射手座<span data-icon=""></span></a></li><li><a href="#">喜歡的<span data-icon=""></span></a></li><li><a href="#">討厭的<span data-icon=""></span></a></li><li><a href="#">M日記<span data-icon=""></span></a></li><li><a href="#">關(guān)于我<span data-icon=""></span></a></li></ul></div><div id="leftDiv"><div id="stage"><div id="shape" class="cube backfaces"><div class="plane one"><img src="img/2.jpg"></div><div class="plane two"><img src="img/2.jpg"></div><div class="plane three"><img src="img/2.jpg"></div><div class="plane four"><img src="img/2.jpg"></div><div class="plane five"><img src="img/2.jpg"></div><div class="plane six"><img src="img/2.jpg"></div><!--<div class="plane seven"><img src="img/1.jpg"></div>--><!--<div class="plane eight"><img src="img/1.jpg"></div>--><!--<div class="plane nine"><img src="img/1.jpg"></div>--><!--<div class="plane ten"><img src="img/1.jpg"></div>--><!--<div class="plane eleven"><img src="img/1.jpg"></div>--><!--<div class="plane twelve"><img src="img/1.jpg"></div>--></div><div id="meDiv"><label class="lableMiss">I MISS YOU</label><br><input class="input_in" type="text"><div id="in_ease" onclick="login()"><span data-icon="İ"></span></div></div></div></div><div id="rightDiv"><header><p>始終相信這段話</p></header><div id="text_Div"><p class="p_1"> 故不能學者：遇師則不中，用心則不專，好之則不</br></br>深，就業(yè)則不疾，辯論則不審，教人則不精；於師慍，懷</br></br>於俗，羈神於世，矜勢好尤，故湛於巧智，昏於小利，惑</br></br>於嗜欲；問事則前後相悖，以章則有異心，以簡則有</br></br>相反；離則不能合，合則弗能離，事至則不能受。此不能</br></br>學者之患也!!!</p></div></div><div id="right_1"><ul><li><a href="#"><span data-icon=""></span></a></li><li><a href="#"><span data-icon="9"></span></a></li><li><a href="#"><span data-icon="Ũ"></span></a></li><li><a href="#"><span data-icon="ũ"></span></a></li><li><a href="#"><span data-icon="Ū"></span></a></li><li><a href="#"><span data-icon="Ʋ"></span></a></li></ul></div> </div> <div id="cava"><canvas id="myCanvas" width="230"height="230"></canvas></div> <div id="missyou"><label>珍惜每一秒</label></div> <div id="login"> </div> </body> <script type="text/javascript"src="js/main.js"></script> </html>💒CSS樣式代碼
#main{width: 100%;height:500px;} #topDiv{width: 100%;height: 60px;background: rgba(100, 136, 232, 0.48);position:fixed;top:0;z-index: 1000; } .ul_top{margin: 0;padding: 0;list-style-type: none;width:70%;height: 60px;/*background: #ff0000;*/float: left;margin-left: 10%; } .ul_top li{float: left; } .ul_top li a{text-decoration: none; } .ul_top li span{font-size: 30px; } .ul_top li:nth-child(1){width: 220px;height: 50px; .p_1{font-size: 28px;color: white;font-family: "楷體";} #cava{width: 230px;height: 230px;position: absolute;top: 80px;right: 50px;-webkit-border-radius: 400px;-moz-border-radius: 400px;border-radius: 230px;border: 20px solid white;-webkit-box-shadow:0 5px 5px 2px #8c8c8c;-moz-box-shadow:0 5px 5px 2px #8c8c8c;-webkit-box-shadow: inset 0 0px 10px 5px #36373a;-moz-box-shadow: inset 0 0px 10px 5px #36373a;background:#C68140; } #missyou{width: 120px;height: 38px;position: absolute;top: 135px;right: 120px; } #missyou label{font-size: 20px;font-family: "楷體";font-weight: bold;color: white; } #login{width: 100%;height: 100%;background:white;position: fixed;top: 60px;left: 137px;/*-webkit-transition:all 1s;*/visibility: hidden; } @-moz-keyframes myanimation{from{top:-680px;}to{top:60px;} } @-webkit-keyframes myanimation{/*from{*//*top:-680px;*//*opacity: 0;*//*}*//*to{*//*top:60px;*//*opacity: 1;*//*}*/0%{opacity: 0;}20%{opacity: 0.2;}50%{opacity: 0.5;}80%{opacity: 0.7;}100%{opacity: 1;} } #login:hover{/*top: 0;*/cursor: pointer; }六、🥇 如何讓學習不再盲目
很多剛?cè)腴T編程的小白學習了基礎語法，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網(wǎng)上的編程初學者入門訓練。該專題為編程入門級別，適合剛學完語法的小白練習，題目涉及編程基礎語法，基本結(jié)構(gòu)等，每道題帶有練習模式和考試模式，可還原考試模式進行模擬，也可通過練習模式進行練習 。
七、🎁更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！
3.
以上內(nèi)容技術(shù)相關(guān)問題💌歡迎一起交流學習👇🏻👇🏻👇🏻🔥總結(jié)
以上是生活随笔為你收集整理的HTML5期末考核大作业、HTML个人主页界面设计源码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Selenium 原理
- 下一篇： 最新百变鹏仔导航网静态HTML源码+非常