javascript
Web大学生网页作业成品 基于HTML+CSS+JavaScript个人简历介绍 学生个人网站作业设计代做 学生个人网页设计作品
📂文章目錄
- 一、👨?🎓網站題目
- 二、??網站描述
- 三、📚網站介紹
- 四、🌐網站演示
- 五、🔧 網站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多干貨
一、👨?🎓網站題目
🧑個人網頁設計、🙋?♂?個人簡歷制作、👨?💼簡單靜態HTML個人網頁作品、👨?🏭個人介紹網站模板 、等網站的設計與制作。
二、??網站描述
?個人網頁設計網站模板采用DIV CSS布局制作,網頁作品有多個頁面,如 :個人介紹(文字頁面)、我的作品(圖片列表)、個人技能(圖文頁面)、在線留言(表單頁面)CSS樣式方面網頁整體采用左右布局結構,制作了網頁背景圖片,導航區域每個導航背景色不同,導航背景色與頁面背景呼應。
🏅 一套A+的網頁應該包含 (具體可根據個人要求而定)
三、📚網站介紹
📔網站布局方面:計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程序方面:計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器,已達到打開后就能即時看到網站的效果。
📘網站素材方面:計劃收集各大平臺好看的圖片素材,并精挑細選適合網頁風格的圖片,然后使用PS做出適合網頁尺寸的圖片。
📒網站文件方面:網站系統文件種類包含:html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件;
📙網頁編輯方面:網頁作品代碼簡單,可使用任意HTML編輯軟件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。
其中:
(1)📜html文件包含:其中index.html是首頁、其他html為二級頁面;
(2)📑 css文件包含:css全部頁面樣式,文字滾動, 圖片放大等;
(3)📄 js文件包含:js實現動態輪播特效, 表單提交, 點擊事件等等(個別網頁中運用到js代碼)。
四、🌐網站演示
五、🔧 網站代碼
🧱HTML結構代碼
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>XXX的個人簡歷</title><meta name="theme-color" content="#ffc91d"/><link rel="icon" href="static/img/32.png" sizes="32x32"/><link rel="icon" href="static/img/192.png" sizes="192x192"/><link href="css/kico.css" rel="stylesheet" type="text/css"/><link href="css/moreduo.css" rel="stylesheet" type="text/css"/><link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/><meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/> </head> <body> <aside class="sidebar"><div class="avatar"><img src="picture/avatar.jpg" title="保羅醬"/></div><nav class="nav"><a href="#info">資料</a><a href="#skills">技能</a><a href="#works">作品</a><a href="#story">經歷</a><a href="#team">團隊</a></nav> </aside> <main><section id="info"><div class="wrap"><h2 class="title">個人資料</h2><div class="row"><div class="col-l-4"><p>姓名:XXX</p><p>性別:男</p><p>年齡:48</p><p>英文名:Moreduo</p><p>學歷:博士后</p></div><div class="col-l-4"><p>QQ:XXX</p><p>GitHub:<a href="/">Moreduo</a></p><p>博客:<a href="XXX">XXX</a></p><p>郵箱:<a href="mailto:XXX@qq.com">XXX@qq.com</a></p></div><div class="col-l-4"><p>我是一個熱愛鉆研計算機技術的青少年,從小開始對計算機有極大的興趣。目前我專注網站開發領域。我還自己發起建立了一個制作游戲的團隊,希望能和大家合作,一同創造出屬于我們自己的原創作品。</p></div></div></div></section><section id="skills"><div class="wrap"><h2 class="title">掌握的技能</h2><div class="row scrollable"><div class="col-s-6 col-m-4 center-fixed"><div class="skills-icon"><i class="fa fa-html5"></i></div><div class="skills-title"><h3>HTML 5</h3><p>熟悉 HTML5 網站的架構和開發</p></div></div><div class="col-s-6 col-m-4 center-fixed"><div class="skills-icon"><i class="fa fa-css3"></i></div><div class="skills-title"><h3>CSS3</h3><p>熟悉使用 CSS3 寫響應式網站、動畫等</p></div></div><div class="col-s-6 col-m-4 center-fixed"><div class="skills-icon"><i class="fa fa-code"></i></div><div class="skills-title"><h3>JavaScript</h3><p>能使用 JS 制作簡單的程序、交互與特效</p></div></div></div></div></section><section id="works"><div class="wrap"><h2 class="title">個人作品</h2><div class="row"><div class="col-s-6"><div class="works-item"><img src="picture/binkic-2017.jpg"/><p>繽奇團隊 2017 官網</p></div></div><div class="col-s-6"><div class="works-item"><img src="picture/space.jpg"/><p>個人博客</p></div></div><div class="col-s-6"><div class="works-item"><img src="picture/dream.jpg"/><p>夢想主題班會</p></div></div><div class="col-s-6"><div class="works-item"><img src="picture/kico-style.jpg"/><p>Kico Style 響應式框架</p></div></div><div class="col-s-6"><div class="works-item"><img src="picture/robots.jpg"/><p>小繽機器人</p></div></div><div class="col-s-6"><div class="works-item"><img src="picture/single.jpg"/><p>Single 博客主題</p></div></div><div class="col-s-6"><div class="works-item"><img src="picture/kico-player.jpg"/><p>Kico Player 播放器</p></div></div><div class="col-s-6"><div class="works-item"><img src="picture/sweet.jpg"/><p>個人主頁 Sweet</p></div></div><div class="col-s-6"><div class="works-item"><img src="picture/binkic-2018.jpg"/><p>繽奇團隊 2018 官網</p></div></div></div></div></section><section id="story"><div class="wrap"><h2 class="title">個人經歷</h2><div class="row"><div class="col-m-8"><ul class="timeline"><li>2016.07.03:創立繽奇(Binkic)團隊</li><li>2016.12.20:仿照某動漫官網編寫模板,并搭建運營了一個動漫型社區</li><li>2017.05.30:帶領團隊進行招新,并發起了首個游戲項目:<a>色塊沖刺</a></li><li>2017.08.17:為團隊制作了首部宣傳片:<a href="javascript:;" target="_blank">創意可以改變什么</a></li><li>2017.12.08:個人編寫的前端響應式框架 <a href="javascript:;" target="_blank">Kico Style</a> 初現雛形</li><li>2018.03.01:基于 Kico Style 的第一個原創 <a href="javascript:;" target="_blank">繽奇團隊官網</a> 正式上線</li><li>2018.04.27:使用前端技術編寫的 <a href="javascript:;" target="_blank">夢想晨會</a> 制作完成</li><li>2018.06.07:參加“眾創杯”創業大賽校園選拔賽,團隊項目榮獲三等獎</li><li>2018.06.17:動漫門戶網站制作完成,內含一個自己設計的簡單音樂播放器</li><li>2018.06.25:參加全國中職信息技術技能大賽微網站項目,榮獲一等獎</li><li>2018.08.03:原創博客主題 <a href="javascript:;" target="_blank">Single</a> 發布,截至 2 月共有 66 Stars</li><li>2018.09.19:個人編寫的播放器 <a href="javascript:;" target="_blank">Kico Player</a> 發布測試版</li><li>2018.12.12:基于 ES6 的時鐘小工具 <a href="javascript:;" target="_blank">Kico Tools</a> 發布測試版</li><li>2018.12.18:第一個基于 PHP 的個人首頁 <a href="javascript:;" target="_blank">Sweet</a> 發布正式版</li><li>2019.01.01:繽奇團隊新<a href="javascript:;" target="_blank">官網</a>正式上線,后端采用 Typecho 驅動</li><li>2019.02.16:結合前后端制作了一個春節的<a href="javascript:;" target="_blank">問答紅包</a>,使用正則判斷答案</li></ul></div><div class="col-m-4 center-fixed"><img src="picture/story.png"/></div></div></div></section><section class="content-d" id="team"><div class="wrap"><h2 class="title">我的團隊</h2><div class="row"><div class="col-m-6"><p>我的團隊 - 繽奇團隊由一群熱愛科技創新的年輕人所組成,做到了“實際”與“創新”的結合。奇思妙想不乏真正落實。集思廣益,生動有趣的創意,盡在繽奇。繽奇團隊如今有超過30名成員,各個部門互幫互助,同為一個目標而努力進取著。</p><p>繽奇團隊致力于開發原創游戲、動漫等項目。目前我們已完成項目有手機游戲“色塊沖刺”、聊天娛樂項目“小繽機器人”等。正在創作項目有解密游戲“月亮湖的秘密”、VR 項目“夢想碼頭”等。繽奇官網 & 社區已陸續開放。網站采用團隊成員自主編寫的 CSS3 自適應框架,針對移動設備有布局優化,繽奇團隊有著豐富的網站建設技術能力、有獨立的畫師以及文編。</p><p>團隊官網:<a href="XXX">XXX</a></p></div><div class="col-m-6 center"><img src="picture/team.png"/></div></div></div></section><footer><p>? 2020.</p></footer> </main><script src="js/kico.js"></script> <script src="js/moreduo.js"></script></body> </html>💒CSS樣式代碼
@charset "UTF-8";/* 0 - 全局 -------------------------------- */ html, body, dl, dt, dd, ol, ul, h1, h2, h3, h4, h5, h6, pre, code, form, p, fieldset, legend, figure{margin: 0;padding: 0; }body{color: #353535;font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif; }@media screen and (max-width: 500px){html[resize] body{font-size: 14px;} }@media screen and (min-width: 1930px){html[resize] body{font-size: 18px;} }*, *:before, *:after{box-sizing: border-box; }/* - 部分老式瀏覽器的更正 */ article, aside, header, footer, nav, section, main{display: block; }/* - 選擇內容 */ ::-moz-selection{color: #fff;background-color: rgba(0, 0, 0, .66); }::selection{color: #fff;background-color: rgba(0, 0, 0, .66); }/* - 滾動條 */ ::-webkit-scrollbar{width: 10px;height: 10px; }::-webkit-scrollbar-thumb{background: #ccc;border-radius: 5px; }::-webkit-scrollbar-track:hover{border-radius: 5px;background: rgba(0, 0, 0, .05); }body::-webkit-scrollbar-thumb{box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07); }六、🥇 如何讓學習不再盲目
很多剛入門編程的小白學習了基礎語法,卻不知道語法的用途,不知道如何加深映像,不知道如何提升自己,這個時候每天刷自主刷一些題就非常重要(百煉成神),可以去牛客網上的編程初學者入門訓練。該專題為編程入門級別,適合剛學完語法的小白練習,題目涉及編程基礎語法,基本結構等,每道題帶有練習模式和考試模式,可還原考試模式進行模擬,也可通過練習模式進行練習 。
七、🎁更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容,請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦!
2.💗【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者,一起探討 前端 Node 知識,互相學習」!
3.
以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻🔥總結
以上是生活随笔為你收集整理的Web大学生网页作业成品 基于HTML+CSS+JavaScript个人简历介绍 学生个人网站作业设计代做 学生个人网页设计作品的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: x550网卡linux驱动,intel_
- 下一篇: 星巴克推出含萃取后咖啡粉制作的渣渣管;麦