实验目的
1.理解CSS的概念,掌握CSS定义样式的方法,具备使用CSS和相关库进行界面样式设计的能力。
2.掌握Bootstrap 5的基本使用方法。
3.Bootstrap框架练习
实验步骤
- 实验准备
创建一个HTML文件(如 index.html)。
引入Bootstrap5的CSS文件(见附件 bootstrap.min.css)。
参考中文官网: http://www.bootcss.com/
2.实验代码实现
页眉(Header)
-
使用<header>标签,添加背景色、文字居中样式。
-
包含网站标题和副标题。(主题自定义)
-
主内容区(标签页切换)
-
使用nav-tabs创建标签页导航(至少3个标签页,主题自定义)。
-
使用tab-content和tab-pane实现内容切换。
-
每个标签页包含不同内容(如卡片、表单、图片等)。
-
使用响应式栅格布局
-
页脚(Footer)
-
底部添加版权信息
具体代码如下:
html
<!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框架的使用,有效的美化了界面
存在的问题及改进措施
- 问题:部分图片在不同设备上显示效果不佳。
改进措施:需要进一步美化
- 问题:介绍页面的文字内容较为简单,信息量不足。
改进措施:进一步丰富介绍页面的内容,增加图片、视频等多种媒体元素,提升页面的吸引力。
- 问题:框架使用不熟练