使用各种CSS美化网页

实验目的

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>                        &nbsp; &nbsp;&nbsp; &nbsp;许凯，1995年3月5日出生于广东省，中国内地男演员、模特。2013年，许凯获得中国（广州）国际模特大赛全国总决赛平面组冠军 。<br><br>&nbsp; &nbsp;&nbsp;&nbsp;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>&nbsp; &nbsp;&nbsp; &nbsp;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>&nbsp; &nbsp;&nbsp; &nbsp;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>&nbsp; &nbsp;&nbsp; &nbsp;此后许凯出演的作品风格依旧多样。<br><br>&nbsp; &nbsp;&nbsp; &nbsp;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>&nbsp; &nbsp;&nbsp; &nbsp;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>&nbsp; &nbsp;&nbsp; &nbsp;近年来，他还参演了<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>&nbsp; &nbsp;&nbsp; &nbsp;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>