當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Web大学生网页作业成品基于HTML+CSS+JavaScript个人简历介绍学生个人网站作业设计代做学生个人网页设计作品

發布時間：2023/12/14 javascript 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web大学生网页作业成品基于HTML+CSS+JavaScript个人简历介绍学生个人网站作业设计代做学生个人网页设计作品小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

📂文章目錄

一、👨?🎓網站題目
二、??網站描述
三、📚網站介紹
四、🌐網站演示
五、🔧 網站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
六、🥇 如何讓學習不再盲目
七、🎁更多干貨

一、👨?🎓網站題目

🧑個人網頁設計、🙋?♂?個人簡歷制作、👨?💼簡單靜態HTML個人網頁作品、👨?🏭個人介紹網站模板、等網站的設計與制作。

二、??網站描述

?個人網頁設計網站模板采用DIV CSS布局制作，網頁作品有多個頁面，如 :個人介紹（文字頁面）、我的作品（圖片列表）、個人技能（圖文頁面）、在線留言（表單頁面）CSS樣式方面網頁整體采用左右布局結構，制作了網頁背景圖片，導航區域每個導航背景色不同，導航背景色與頁面背景呼應。

🏅 一套A+的網頁應該包含 (具體可根據個人要求而定)

頁面分為頁頭、菜單導航欄（最好可下拉）、中間內容板塊、頁腳四大部分。

所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成。

頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。

菜單美觀、醒目，二級菜單可正常彈出與跳轉。

要有JS特效，如定時切換和手動切換圖片輪播。

頁面中有多媒體元素，如gif、視頻、音樂，表單技術的使用。。

頁面清爽、美觀、大方，不雷同。。

不僅要能夠把用戶要求的內容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

三、📚網站介紹

📔網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。

📓網站程序方面：計劃采用最新的網頁編程語言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 知識，互相學習」！

以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻🔥

總結

以上是生活随笔為你收集整理的Web大学生网页作业成品基于HTML+CSS+JavaScript个人简历介绍学生个人网站作业设计代做学生个人网页设计作品的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： x550网卡linux驱动,intel_
下一篇： 004-集成maven和Spring b