實驗目的
1.理解CSS的概念，掌握CSS定義樣式的方法，具備使用CSS和相關庫進行界面樣式設計的能力。
2.掌握Bootstrap 5的基本使用方法。
3.Bootstrap框架練習
實驗步驟
1. 實驗準備
創建一個HTML文件（如 index.html）。
引入Bootstrap5的CSS文件（見附件 bootstrap.min.css）。
參考中文官網： http://www.bootcss.com/
2.實驗代碼實現
頁眉（Header）
使用<header>標簽，添加背景色、文字居中樣式。
包含網站標題和副標題。（主題自定義）
主內容區（標簽頁切換）
使用nav-tabs創建標簽頁導航（至少3個標簽頁，主題自定義）。
使用tab-content和tab-pane實現內容切換。
每個標簽頁包含不同內容（如卡片、表單、圖片等）。
使用響應式柵格布局
頁腳（Footer）
底部添加版權信息
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>許凱個人簡介</title><link rel="stylesheet" href="./Bootstrap/bootstrap.min.css"><link rel="stylesheet" href="./iconfont.css"><script src="./bootstrap.min.js"></script><style>div>header{background-color: beige;text-align: center;height: 200px;padding: 30px;border-style: dashed;border-color: rgb(229, 243, 165);border-width: 5;border-radius: 7%;opacity: 0.85;font-family: 華文仿宋;}div h3{background-color: rgb(243, 232, 218);height: 50px;width: 300px;padding: 5px;margin: auto;text-align: center;border-radius: 7%;}.box{display: flex;justify-content: space-between;width: 300px;margin: auto;}div span:nth-child(2n){color: rgb(202, 196, 255);}div span:nth-child(2n+1){color: rgb(255, 211, 196);}.qiehuan{background-color: rgb(240, 245, 246);height: 400px;}#nav-tabContent{height: 350px;overflow: scroll;position: relative;border: 2px solid rgb(216, 233, 248);}p{font: 20px 華文中宋;}p>a{font: italic 16px 華文仿宋;color: #7831eb;transition: all 1s;}p>a:hover{color: rgb(43, 73, 226);font: 20px 華文中宋;}.box1{display: flex;justify-content: space-between;align-items: self-start;height: 400px;padding: 20px;margin: 10px;}#tu{height: 300px;width: 225px;transition: all 1s;}#tu:hover{color: rgb(245, 217, 173);height: 320pz;width: 240px;}#wenben{font-family:華文仿宋;color: rgb(206, 172, 237);font-size: 16px;font-weight: 700;text-align: center;transition: all 1s;}#wenben:hover{color: rgb(234, 201, 149);font-size: 20px;font-weight: 900;}div a{text-decoration: none;}#biao{color: rgb(21, 108, 248);transition: all 1s;font-size: small;}#biao:hover{color: rgb(247, 8, 8);font-size: larger;}#biao1{font-size: small;display: flex;justify-content:flex-end;transition: all 1s;}#biao1:hover{color: rgb(80, 8, 247);font-size: larger;}#nav-profile::after{content: "*************************************************************************************************謝謝喜歡*************************************************************************************************";color: rgb(175, 175, 246);text-align: center;}#nav-contact::after{content: "*************************************************************************************************敬請期待*************************************************************************************************";color: rgb(175, 175, 246);text-align: center;}div>footer{background-color: rgb(243, 253, 238);text-align: center;height: 200px;padding: 30px;border-style: dashed;border-color: rgb(181, 240, 187);border-width: 5;border-radius: 7%;opacity: 0.85;font-family: 華文仿宋;}#b{height: 310px;width: 400px;background-color: rgb(244, 250, 248);overflow: scroll;align-self: center;justify-self: center;}#box3{display: flex;justify-content: space-between;}</style>
</head>
<body><div><header><h1>許凱個人簡介</h1><div class="box"><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span></div><h3>關于許凱的那些事</h3></header></div><div class="qiehuan"><nav><div class="nav nav-tabs" id="nav-tab" role="tablist"><button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">個人簡介</button><button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">主要作品</button><button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">待播作品</button><button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>許凱soso</button></div></nav><div class="tab-content" id="nav-tabContent"><div class="tab-pane fade show active jianjie" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0"> <div id="box3"><video src="./合成 1_2025-03-22_19-52.mp4" controls muted autoplay width="400" alt="許凱陽華" id="b"></video><video src="./合成 1_2025-04-04_22-09.mp4" controls muted autoplay width="400" alt="許凱墨青" id="b"></video><video src="./WeChat_20250405100822.mp4" controls muted autoplay width="400" alt="許凱" id="b"></video></div><p> ? ? ? ? ? ? ? ? ? ? ? ? 許凱，1995年3月5日出生于廣東省，中國內地男演員、模特。2013年，許凱獲得中國（廣州）國際模特大賽全國總決賽平面組冠軍 。<br><br> 2016年8月，簽約成為歡娛影視旗下藝人 ；同年，出演個人首部電視劇 <a href="https://baike.baidu.com/item/%E6%A2%A6%E5%9B%9E%E6%9C%9D%E6%AD%8C/19893580?fromtitle=%E6%9C%9D%E6%AD%8C&fromid=19952443" target="_blank">《朝歌》</a>，從而正式進入演藝圈 。<br><br> 2018年7月19日，許凱與秦嵐、吳謹言等合作主演的古裝劇 <a href="https://baike.baidu.com/item/%E5%BB%B6%E7%A6%A7%E6%94%BB%E7%95%A5/20481391?fromModule=lemma_inlink" target="_blank">《延禧攻略》</a>開播 ， 他因飾演富察傅恒而獲得廣泛關注 ，并于當年獲得 <a href="https://baike.baidu.com/item/2019%E7%88%B1%E5%A5%87%E8%89%BA%E5%B0%96%E5%8F%AB%E4%B9%8B%E5%A4%9C/23187259?fromModule=lemma_inlink" target="_blank">2019愛奇藝尖叫之夜</a> 年度戲劇潛力藝人獎 。<br><br> 2019年1月，仙俠劇 <a href="https://baike.baidu.com/item/%E6%8B%9B%E6%91%87/21393434?fromModule=lemma_inlink" target="_blank" rel="noopener noreferrer">《招搖》</a> 開播 ，許凱憑借劇中墨青一角登頂微博明星勢力榜新星榜一位 。次月，在個人首部電影《藍色生死戀》中飾演韓泰 ；同年8月，他在軍旅題材電視劇<a href="https://baike.baidu.com/item/%E7%83%88%E7%81%AB%E5%86%9B%E6%A0%A1/22382277?fromModule=lemma_inlink" target="_blank" rel="noopener noreferrer">《烈火軍校》</a>中飾演了富家子顧燕幀一角 ，并憑此獲得<a href="https://baike.baidu.com/item/2020%E7%88%B1%E5%A5%87%E8%89%BA%E5%B0%96%E5%8F%AB%E4%B9%8B%E5%A4%9C/24181440?fromModule=lemma_inlink" target="_blank">2020愛奇藝尖叫之夜</a>年度戲劇人氣男藝人獎和第六屆文榮獎最佳男主角獎 。<br><br> 此后許凱出演的作品風格依舊多樣。<br><br> 2021年4月，在愛情輕喜劇<a href="https://baike.baidu.com/item/%E9%AA%8A%E6%AD%8C%E8%A1%8C/14021088?fromModule=lemma_inlink" target="_blank">《驪歌行》</a>中飾演大將軍盛驍靖之子盛楚慕；在6月23日播出的電競題材電視劇<a href="https://baike.baidu.com/item/%E4%BD%A0%E5%BE%AE%E7%AC%91%E6%97%B6%E5%BE%88%E7%BE%8E/49988031?fromModule=lemma_inlink" target="_blank">《你微笑時很美》</a>中飾演電競圈男神陸思誠。<br><br> 2022年，與吳謹言二搭，出演美食題材的古裝劇<a href="https://baike.baidu.com/item/%E5%B0%9A%E9%A3%9F/23239668?fromModule=lemma_inlink" target="_blank">《尚食》</a>并和楊冪在都市情感劇<a href="https://baike.baidu.com/item/%E7%88%B1%E7%9A%84%E4%BA%8C%E5%85%AB%E5%AE%9A%E5%BE%8B/23664662?fromModule=lemma_inlink" target="_blank">《愛的二八定律》</a>里飾演了一對陰差陽錯“被結婚”的夫妻。<br><br> 近年來，他還參演了<a href="https://baike.baidu.com/item/%E9%9B%AA%E9%B9%B0%E9%A2%86%E4%B8%BB/20103870?fromModule=lemma_inlink" target="_blank">《雪鷹領主》</a><a href="https://baike.baidu.com/item/%E4%B9%90%E6%B8%B8%E5%8E%9F/59821059?fromModule=lemma_inlink" target="_blank">《樂游原》</a><a href="https://baike.baidu.com/item/%E7%A5%88%E4%BB%8A%E6%9C%9D/58511004?fromModule=lemma_inlink" target="_blank">《祈今朝》</a>等影視作品，并以中國綠化基金會林草碳匯行動公益推廣大使的身份為“保護生物多樣性”“保護古樹名木”等環保公益活動進行了宣傳。<br> 2025年1月，參加《2024年度慈善盛典》。1月28日，參加《2025年春節聯歡晚會》并演唱歌曲《斗柄指東天下春》。</p></div><div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0"><div class="box1"><div><img src="./屏幕截圖 2025-04-03 232056.png" alt="你比星光美麗" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜歡</span><a href="https://baike.baidu.com/item/%E4%BD%A0%E6%AF%94%E6%98%9F%E5%85%89%E7%BE%8E%E4%B8%BD/60756186" target="_blank"> ? ?<p id="wenben">你比星光美麗</p></a><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./屏幕截圖 2025-04-03 235210.png" alt="承歡記" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜歡</span><a href="https://baike.baidu.com/item/%E6%89%BF%E6%AC%A2%E8%AE%B0/62142543" target="_blank"><p id="wenben">承歡記</p></a><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./屏幕截圖 2025-04-03 235840.png" alt="樂游原" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜歡</span><a href="https://baike.baidu.com/item/%E4%B9%90%E6%B8%B8%E5%8E%9F/6194723" target="_blank"><p id="wenben">樂游原</p></a><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./屏幕截圖 2025-04-03 235949.png" alt="天舞紀" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜歡</span><a href="https://baike.baidu.com/item/%E5%A4%A9%E8%88%9E%E7%BA%AA/20461446" target="_blank"><p id="wenben">天舞紀</p></a><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./屏幕截圖 2025-04-04 000051.png" alt="烈火軍校" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜歡</span><a href="https://baike.baidu.com/item/%E7%83%88%E7%81%AB%E5%86%9B%E6%A0%A1/22382277" target="_blank"><p id="wenben">烈火軍校</p></a><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./屏幕截圖 2025-04-04 000156.png" alt="你微笑時很美" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜歡</span><a href="https://baike.baidu.com/item/%E4%BD%A0%E5%BE%AE%E7%AC%91%E6%97%B6%E5%BE%88%E7%BE%8E/1248355" target="_blank"><p id="wenben">你微笑時很美</p></a><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div></div></div><div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0"><div class="box1"><div><img src="./屏幕截圖 2025-04-04 100459.png" ?alt="火場追兇" id="tu"><br><span class="iconfont icon-xihuan" id="biao">預約</span><a href="https://weibo.com/u/7919884401" target="_blank"> ? ?<p id="wenben">火場追兇</p></a><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./微信圖片_20250404103017.jpg" alt="方圓八百米" id="tu"><br><span class="iconfont icon-xihuan" id="biao">預約</span><a href="https://weibo.com/u/7960074587" target="_blank"><p id="wenben">方圓八百米</p></a><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./屏幕截圖 2025-04-04 100757.png" alt="子夜歸" id="tu"><br><span class="iconfont icon-xihuan" id="biao">預約</span><a href="https://weibo.com/u/7887696453" target="_blank"><p id="wenben">子夜歸</p></a><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./微信圖片_20250404103008.jpg" alt="一甌春" id="tu"><br><span class="iconfont icon-xihuan" id="biao">預約</span><a href="https://www.weibo.com/u/7990364191" target="_blank"><p id="wenben">一甌春</p></a><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div></div></div><div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div></div></div><div><footer><div><h4>版權所有@秋向晚</h4></div><div><h5>圖源微博、百度、秋向晚</h5><h5>鏈接感謝微博、百度</h5></div><div class="box"><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span></div></footer></div>
</body>
</html>效果如下：
個人簡介
主要作品?
?
待播作品?
實驗總結
1.加深了對HTML基本元素的理解
2.學會了如何組織和展示內容：在選擇主題和準備圖片及介紹內容的過程中，學會了如何圍繞一個主題進行內容的組織和展示。
3.通過本次實驗，，學習了HTML頁面制作的技巧，包括頁面布局，表單設計等方面的知識，也遇到了一些問題，邊框線的設置等。
4.了解并熟悉了bootstrap框架的使用，有效的美化了界面
存在的問題及改進措施
1. 問題：部分圖片在不同設備上顯示效果不佳。
改進措施：需要進一步美化
2. 問題：介紹頁面的文字內容較為簡單，信息量不足。
改進措施：進一步豐富介紹頁面的內容，增加圖片、視頻等多種媒體元素，提升頁面的吸引力。
3. 問題：框架使用不熟練
?
)
![第2章，[標簽 Win32] ：匈牙利標記法](http://pic.xiahunao.cn/第2章，[標簽 Win32] ：匈牙利標記法)
