使用各种CSS美化网页

到底起什么网名才能不重名2025-07-08 19:01

实验目的

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）

  • 底部添加版权信息

具体代码如下：

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>                        
                &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>
效果如下：

个人简介

主要作品

待播作品

实验总结

1.加深了对HTML基本元素的理解

2.学会了如何组织和展示内容：在选择主题和准备图片及介绍内容的过程中，学会了如何围绕一个主题进行内容的组织和展示。

3.通过本次实验，，学习了HTML页面制作的技巧，包括页面布局，表单设计等方面的知识，也遇到了一些问题，边框线的设置等。

4.了解并熟悉了bootstrap框架的使用，有效的美化了界面

存在的问题及改进措施

  1. 问题：部分图片在不同设备上显示效果不佳。

改进措施：需要进一步美化

  1. 问题：介绍页面的文字内容较为简单，信息量不足。

改进措施：进一步丰富介绍页面的内容，增加图片、视频等多种媒体元素，提升页面的吸引力。

  1. 问题：框架使用不熟练
相关推荐
天生我材必有用_吴用17 分钟前
vue3实战九、vue3+vue-cropper实现头像修改
前端
Sobeit26 分钟前
ES2025 颠覆性 JS 黑科技新特性详解
前端
new_abc32 分钟前
net-snmp添加自定义mib树
服务器·前端·javascript
前端梭哈攻城狮39 分钟前
dify二开示例
前端·后端·python
该用户已不存在41 分钟前
Node.js 真的取代了PHP吗？
前端·后端·node.js
ze_juejin1 小时前
JavaScript 的事件循环（Event Loop）机制
前端
前端缘梦1 小时前
从源码到dist：拆解Webpack如何完成前端工程的"基因编译"
前端·webpack
热爱运维的小七1 小时前
中型企业如何用 RUM 技术破解地理分布式用户体验难题？从指标监测到优化实操
前端·网站响应速度·地域访问
程序猿阿伟1 小时前
《从点击到共鸣：论坛前端如何用交互细节编织用户体验》
前端·ux
樱花开了几轉1 小时前
React中的合成事件解释和理解
前端·javascript·react.js
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02Coze 开源了，送上保姆级私有化部署方案【建议收藏】03全球最强模型Grok4，国内已可免费使用！（附教程）04扣子开源本地部署教程 丨Coze智能体小白喂饭级指南05腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）06KGG转MP3工具|非KGM文件|解密音频07干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！0801-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验09ChatGPT Agent 完全使用指南：2025年7月最新功能详解10Claude Code 最新版已经支持 Windows 安装使用！