划分 12个格子，第一栏为：人物简介；其他栏为人物名称；

使用float: left将格子左浮动。

设置格子背景颜色，字体颜色，鼠标放上去后的字体颜色和背景颜色。

 <style>.title {width: 100%;overflow: hidden;}.title-topic a {     /*以下元素应用于topic*/float: left;     /*左浮动，让12个格子在一行*/width: 8.33%;    /* 每个格子宽度为总宽度的 1/12 */box-sizing: border-box;text-align: center;    /*居中对齐*/background-color: #fea721;    /*背景颜色*/padding: 20px;display: block;       /*将元素显示为块级元素*/color: aqua;    /*文本颜色*/}.title-figure a {    /*以下元素应用于figure*/float: left;width: 8.33%; box-sizing: border-box;text-align: center;background-color: #fe722171;padding: 20px;display: block;color: rgb(15, 12, 13);}.title-figure a:hover{     /*悬停，鼠标移到格子时改变字体和背景颜色*/color: red;background-color: aqua;}.title-topic a:hover{color: red;background-color: aqua;}</style><div class="title"> /*#--#表示该链接的目标URL为当前页面本身，不会跳转到其他页面<div class="title-topic"><a href="#">人物简介</a></div><div class="title-figure"><a href="#">路飞</a></div><div class="title-figure"><a href="#">索隆</a></div><div class="title-figure"><a href="#">娜美</a></div><div class="title-figure"><a href="#">罗宾</a></div><div class="title-figure"><a href="#">乌索普</a></div><div class="title-figure"><a href="#">山治</a></div><div class="title-figure"><a href="#">甚平</a></div><div class="title-figure"><a href="#">乔巴</a></div><div class="title-figure"><a href="#">弗兰奇</a></div><div class="title-figure"><a href="#">布鲁克</a></div><div class="title-figure"><a href="#">大和</a></div></div>

下面是在bootcss上找的轮播组件，换上自己的图片 

/*在bootcss上找的轮播组件，加入自己的图片
<div id="carouselExampleIndicators" class="carousel slide"><div class="carousel-indicators"><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button></div><div class="carousel-inner"><div class="carousel-item active"><img src="./static/img/The country of Wa.jpg" class="d-block w-100" alt="no"></div><div class="carousel-item"><img src="./static/img/home.jpg" class="d-block w-100" alt="no"></div><div class="carousel-item"><img src="./static/img/Ace.jpg" class="d-block w-100" alt="no"></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div>

 展示：