一.說明
今天博主的web前端選修課結課了，期末大作業(yè)也提交了，今天寫一篇博客把我的大作業(yè)分享給大家。
二.題目
1. 大作業(yè)題目
個人簡歷主頁設計
2. 內容要求
應盡量包含以下內容：
? 包含個人基本信息、教育背景、個人風采、與我聯系四塊內容
? 在頁面組織上，以上內容可以通過主頁鏈接到不同頁面，也可以放在一個頁面的不同區(qū)域
? 主頁中有鏈接到其他各模塊的導航條，以及個人基本信息的介紹
? 教育背景中包含自己的教育經歷（小學、初中、高中、大學）以及大學中所學科目和成績的表格
? 個人風采欄目包含一個自動播放的照片查看器
? 與我聯系頁面設置一個表單，填寫完畢后提交可顯示所填寫的信息
三.分析
1.布局
下面是我對設計思路的分析：
- 首先需要確定整個簡歷主頁的視覺風格和布局?？梢愿鶕穆殬I(yè)特點選擇相應的配色方案，并參考一些優(yōu)秀的個人簡歷主頁模板進行設計。
- 根據要求，將個人基本信息、教育背景、個人風采、與我聯系四塊內容放在頁面上。這四塊內容可以通過不同的區(qū)域或者鏈接到不同的頁面來展示。
- 在頁面上設置導航條，用于鏈接到各個模塊。導航條可以懸浮在頁面頂部，也可以放在頁面?zhèn)冗厵凇?/li>
- 個人基本信息的介紹可以直接放在頁面上，或者設置一個單獨的頁面來展示詳細信息。
- 教育背景中，可以將自己的學歷經歷按時間順序排列，并且在大學階段添加一個成績表格，以便更好地展示自己的能力和水平。
- 個人風采欄目中，可以使用一個自動播放的圖片查看器，將自己的個人照片或者作品展示出來，讓雇主們更好地了解自己。
- 最后，在與我聯系頁面設置一個表單，用于雇主填寫相關信息并提交。提交后可以顯示所填寫的信息，方便雇主與您取得聯系。
2.各部分實現
以下是我對各部分應該使用什么實現方式的建議：
- 視覺風格和布局：您可以通過CSS來設置頁面的樣式和布局，可以采用一些現成的CSS框架或者自己編寫CSS代碼。
- 四塊內容展示：可以使用HTML來創(chuàng)建不同的頁面模塊，并且通過超鏈接或者Javascript來實現頁面跳轉。另外，也可以在一個頁面上使用標簽和樣式來區(qū)分四塊內容的展示。
- 導航條：可以使用HTML和CSS來創(chuàng)建導航欄，并且通過Javascript來實現頁面跳轉。其中，CSS可以用于設置導航欄的樣式和布局，Javascript可以用于實現導航欄的響應功能。
- 個人基本信息：可以使用HTML和CSS來設置個人信息的樣式和布局，并且在頁面上直接展示。另外，也可以設置一個單獨的頁面來展示更詳細的個人信息。
- 教育背景：可以使用HTML和CSS來設置教育背景的樣式和布局，并且使用表格來展示大學階段的科目和成績信息。
- 個人風采欄目：可以使用Javascript和CSS來創(chuàng)建自動播放的圖片查看器，并且將個人照片或者作品嵌入到查看器中。
- 與我聯系頁面：可以使用HTML和CSS來創(chuàng)建一個表單，讓雇主填寫相關信息。表單提交后，可以使用Javascript來處理并且展示所填寫的信息。
四.html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web個人簡歷</title>
<link rel="stylesheet" type="text/css" href="css/back.css">
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
<script src="js/dongtai.js"></script>
<script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
</head>
<body>
<div id="first">
<!-- 導航條 -->
<div class="nav-container">
<select onchange="location = this.value;">
<option value="">請選擇頁面</option>
<option value="#first">簡歷首頁</option>
<option value="#second">基本信息</option>
<option value="#third">教育背景</option>
<option value="#forth">個人風采</option>
<option value="#">與我聯系</option>
</select>
</div>
<!-- 右上角圖片 -->
<div class="circle"></div>
<!-- 首頁寄語 -->
<div class="vertical-text">
<div class="sentence">煙花雖美，只是一瞬。</div>
<div class="sentence">日子再苦，只是一時。</div>
<div class="sentence">相信自己，未來可期。</div>
<div class="signature">
-------- 未來的你</div>
</div>
<!-- 大標題 -->
<h1>我的個人簡歷</h1>
<div class="image-container">
<img src="images/city2.jpg" alt="image1">
<img src="images/city1.jpg" alt="image2">
</div>
<div class="audio-container" style="display: flex; justify-content: flex-end; margin-top: 20px;" autoplay>
<audio controls style="width: 300px; height: 50px; outline: none; background-color: #eee; border-radius: 10px; padding: 10px; margin: 0 10px; text-align: right;">
<source src="music/music1.mp3" type="audio/mp3">
您的瀏覽器不支持音頻元素。
</audio>
</div>
<a href="#" class="arrow">▼</a>
</div>
<div id="second">
<!-- 大標題 -->
<h1>個人信息</h1>
<!-- 表格 -->
<table class="biaoge">
<tr>
<td><img src="images/1.jpg" alt="個人信息"><br>姓名：xxx<br>性別：男</td>
</tr>
<tr>
<td><img src="images/2.jpg" alt="專業(yè)學歷"><br>專業(yè)：物聯網工程<br>學歷：本科</td>
</tr>
<tr>
<td><img src="images/3.jpg" alt="就讀學校"><br>就讀學校：xx理工大學<br>學習課程：web設計與應用</td>
</tr>
<tr>
<td><img src="images/4.jpg" alt="個人愛好"><br>愛好：閱讀、游戲、旅游<br>喜歡體育：乒乓球</td>
</tr>
</table>
</div>
<div id="third">
<!-- 大標題 -->
<h1>教育背景</h1>
<h2>教育經歷：</h2>
<table class="teach">
<tr>
<td>階段</td>
<td>地點</td>
<td>時間</td>
</tr>
<tr>
<td>小學</td>
<td>xxxxxxxxxxxxxxxxxxxx</td>
<td>2008.09~2014.07</td>
</tr>
<tr>
<td>中學</td>
<td>xxxxxxxxxxxxxxxxxxxxxxx</td>
<td>2014.09~2017.07</td>
</tr>
<tr>
<td>高中</td>
<td>xxxxxxxxxxx</td>
<td>2017.09~2020.07</td>
</tr>
<tr>
<td>大學</td>
<td>xx理工大學</td>
<td>2020.09~至今</td>
</tr>
</table>
<h2>成績績點：</h2>
<!-- Add the image tag below this line -->
<img src="images/grade.jpg" alt="grade image">
<p style="font-family: Arial; font-size: 16px; color: yellow; text-align: left;">以上課程成績來源于上學期部分科目成績</p>
</div>
<div id="forth">
<!-- 大標題 -->
<h1>個人風采</h1>
<p style="color:yellow;margin-top: 10px">若可，惟愿人間太平，許你一生，不受離別之苦。守著歲月靜好，日出而作，日落而息，細水流長。</p>
<div class="plyr__video-embed rainbow-border" >
<video controls crossorigin playsinline>
<source src="shipin/mylife.mp4" type="video/mp4" />
</video>
</div>
<h2>照片查看器</h2>
<div class="gallery-container">
<div id="gallery1">
<h2>我的校園</h2>
<div class="slideshow">
<img src="images/kust1.jpg" alt="Image 1">
<img src="images/kust2.jpg" alt="Image 2">
<img src="images/kust3.jpg" alt="Image 3">
<img src="images/kust4.jpg" alt="Image 4">
</div>
<script>
var currentImage1 = 0;
var images1 = document.querySelectorAll("#gallery1 .slideshow img");
function nextSlide1() {
images1[currentImage1].style.display = "none";
currentImage1 = (currentImage1 + 1) % images1.length;
images1[currentImage1].style.display = "block";
}
setInterval(nextSlide1, 3000);
</script>
</div>
<div id="gallery2">
<h2>簡單的我</h2>
<div class="slideshow">
<img src="images/me.jpg" alt="Image 1">
<img src="images/me1.jpg" alt="Image 2">
<img src="images/me2.jpg" alt="Image 3">
<img src="images/me3.jpg" alt="Image 4">
</div>
<script>
var currentImage2 = 0;
var images2 = document.querySelectorAll("#gallery2 .slideshow img");
function nextSlide2() {
images2[currentImage2].style.display = "none";
currentImage2 = (currentImage2 + 1) % images2.length;
images2[currentImage2].style.display = "block";
}
setInterval(nextSlide2, 3000);
</script>
</div>
<div id="gallery3">
<h2>考研日記</h2>
<div class="slideshow">
<img src="images/kaoyan1.jpg" alt="Image 1">
<img src="images/kaoyan2.jpg" alt="Image 2">
<img src="images/kaoyan3.jpg" alt="Image 3">
<img src="images/kaoyan4.jpg" alt="Image 4">
</div>
<script>
var currentImage3 = 0;
var images3 = document.querySelectorAll("#gallery3 .slideshow img");
function nextSlide3() {
images3[currentImage3].style.display = "none";
currentImage3 = (currentImage3 + 1) % images3.length;
images3[currentImage3].style.display = "block";
}
setInterval(nextSlide3, 3000);
</script>
</div>
<div id="gallery4">
<h2>旅游風光</h2>
<div class="slideshow">
<img src="images/travel1.jpg" alt="Image 1">
<img src="images/travel2.jpg" alt="Image 2">
<img src="images/travel3.jpg" alt="Image 3">
<img src="images/travel4.jpg" alt="Image 4">
</div>
<script>
var currentImage4 = 0;
var images4 = document.querySelectorAll("#gallery4 .slideshow img");
function nextSlide4() {
images4[currentImage4].style.display = "none";
currentImage4 = (currentImage4 + 1) % images4.length;
images4[currentImage4].style.display = "block";
}
setInterval(nextSlide4, 3000);
</script>
</div>
</div>
</div>
<h1> </h1>
<div id="fifth">
<div class="container">
<form id="contact-form">
<label for="phone"> </label>
<label for="phone"> </label>
<label for="phone"> </label>
<label for="phone"> </label>
<label for="phone"> </label>
<label for="phone"> </label>
<label for="phone"> </label>
<label for="phone"> </label>
<label for="phone"> </label>
<label for="phone"> </label>
<label for="phone"> </label>
<label for="phone"> </label>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<h1>與我聯系</h1>
<label for="phone">電話：</label>
<input type="text" id="phone" name="phone" required>
<br><br>
<label for="wechat">微信：</label>
<input type="text" id="wechat" name="wechat" required>
<br><br>
<label for="qq">QQ：</label>
<input type="text" id="qq" name="qq" required>
<br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="blog">博客：</label>
<input type="url" id="blog" name="blog" required>
<br><br>
<label for="message">給我留言：</label>
<textarea id="message" name="message" rows="5" required></textarea>
<br><br>
<button type="submit">提交</button>
</form>
<div id="output"></div>
</div>
</div>
<footer>
<p>版權所有 ©2023 CSAN@終究還是散了</p>
</footer>
</body>
</html>
這個只是選取的html代碼，全部代碼在我的資源中，鏈接放在后面供大家獲取。
五.最后結果
運行結果：
這里本來是一個頁面，但由于截屏長度的原因，這里分開展示。文章來源：http://www.zghlxwxcb.cn/news/detail-472832.html
六.留言
歡迎大家閱讀！完整文件的文件夾我已上傳到資源中，下載鏈接在這里。文章來源地址http://www.zghlxwxcb.cn/news/detail-472832.html
到了這里，關于web前端課程作業(yè)設計：個人簡歷的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
