♦ 头部区域
◆ 标题3
- 【视频】，铺满【内容头部区域】
- 【文字描述】，放在【内容头部区域】中间
- 【内容菜单】，放在【内容头部区域】底部。
.top-image {
object-fit: cover;
display: block;
width:100%;
height: auto;
max-height: 720px;
min-height: 420px;
}
#top-inner {
width: 100%;
/* background: linear-gradient(135deg, rgba(23, 70, 85, 1) 0%, rgba(4, 86, 84, 1) 100%);*/
background: #f2f2f2;
font-size: 0;
position: relative;
}
/* 【文字描述】，放在【内容头部区域】中间 */
#top-inner-nav .site,
.top-inner-txt .site {
/* 最大宽度设置为1640像素。这意味着无论元素内容多少，其宽度最大只能达到1640像素，
如果内容较少，元素宽度会根据内容自适应，但不会超过1640像素 */
max-width: 1640px;
/* 元素的高度设置为其父元素高度的100%，即元素会和父元素高度保持一致 */
height: 100%;
/* 将元素的显示模式设置为弹性布局（Flexbox）。弹性布局是一种一维布局模型，
可以方便地控制子元素的排列、对齐和空间分配 */
display: flex;
/* 设置弹性容器内子元素的排列方向为垂直方向，即子元素会从上到下依次排列 */
flex-direction: column;
/* 在弹性容器的主轴（这里主轴是垂直方向）上居中对齐子元素。
由于设置了 flex-direction: column，所以子元素会在垂直方向上居中 */
justify-content: center;
/* 在弹性容器的交叉轴（这里交叉轴是水平方向）上居中对齐子元素。
因此子元素会在水平方向上居中 */
align-items: center;
}
/*放置父元素底部*/
.top-inner-archors-outter.pain{
bottom: 0;
}
.top-inner-archors-outter{
position: absolute;
z-index: 2;
left: 0;
width: 100%;
/* bottom: -30px; */
}
.site {
box-sizing: border-box;
padding: 0 20px;
width: 100%;
}
/* Minimum width of 768 pixels. */
@media screen and (min-width: 768px) {
.site {
margin: 0 auto;
/* max-width: 1600px;*/
max-width: 1440px;
}
.top-inner-archors{
box-sizing: border-box;
padding: 10px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content:space-evenly;
overflow-x: auto;
}
.pain .top-inner-archors{
background-color: transparent;
color: #fff;
box-shadow: none;
}
@media screen and (min-width:1200px){
.top-inner-archors{
padding:60px ;
}
.pain .top-inner-archors{
padding:30px ;
}
.top-inner-archor{
text-align: center;
font-size: 11px;
min-width: 68px;
line-height: 1.35;
}
@media screen and (min-width:768px){
.top-inner-archor{
font-size: 14px;
}
/*text color*/
.txt-red{color:#ff534e!important}
.txt-blue{color:#5b9bd5!important}
.txt-gray{color:#999!important}
.txt-green{color:green!important}
.txt-orange{color:#ffa836!important}
.txt-white{color:#fff!important;}
.txt-black{color:#000!important}
<div id="top-inner">
<video muted="" preload="metadata" loop="" playsinline="" autoplay="" poster="<?php echo get_template_directory_uri().'/assets/src/img/about-fanhua.jpg' ?>" class="top-image" src="<?php echo get_template_directory_uri().'/assets/src/video/402960969.mp4' ?>">
</video>
<div class="top-inner-txt">
<div class="site txt-center">
<h1 class="page-title leter-space">不响最大</h1>
<p>【不响】不代表沉默 它是一种留白 凡事我不想讲的 不能讲的 讲了为难自己 为难别人的【不响】</p>
</div>
</div>
<div class="top-inner-archors-outter pain">
<div class="site">
<div class="top-inner-archors">
<a class="top-inner-archor" href="###" data-archor="s1"><span class="txt-white">导演寄言</span></a>
<a class="top-inner-archor" href="###" data-archor="s2"><span class="txt-white">繁花今朝</span></a>
<a class="top-inner-archor" href="###" data-archor="s3"><span class="txt-white">创作纪实</span></a>
<a class="top-inner-archor" href="###" data-archor="s4"><span class="txt-white">绽放历程</span></a>
</div>
</div>
</div>
</div>
♦ 内容区域1
#block-about-1{
padding: 0;
}
#block-about-1 h2{
font-weight: 600;
color: #ccc;
}
#block-about-1 h2 b{
color: #000;
}
.site {
box-sizing: border-box;
padding: 0 20px;
width: 100%;
}
@media screen and (min-width: 768px) {
.site {
margin: 0 auto;
/* max-width: 1600px;*/
max-width: 1440px;
}
@media screen and (min-width:768px){
#block-about-1 .site{
position: relative;
z-index: 2;
}
@media screen and (min-width: 1600px){
.site-block .site{
margin:90px auto;
}
hr.gap.x2{
height: 30px;
}
@media screen and (min-width:1024px){
hr.gap.x2{
height: 40px;
}
@media screen and (min-width: 1600px){
.site-block .site{
margin:90px auto;
}
.site-block h2{
font-size: 32px;
}
.site-block h3{
font-size: 23px;
}
.site-block h4{
font-size: 18px;
}
.investor-report-item{
padding: 30px;
}
@media screen and (min-width:1200px){
.about-boss-img{
object-fit: cover;
display: block;
width: 200px;
height: 250px;
/* 设置图片从顶部开始显示 */
object-position: top;
}
<div class="site-block wrapper" id="block-about-1">
<div class="site">
<hr class="gap x2">
<h2> <b>繁花</b> 这本书一共有<b>三十一章</b> <br>没有连贯的故事<br> 表面是<b>饮食男女</b> 里面是<b>山河岁月 时代变迁</b></h2>
<hr class="gap x2">
<hr class="black">
<hr class="gap x2">
<div class="col-raw col-flex">
<div class="col-n col-6 col-n-tb col-6-tb">
<h3>从繁花到繁花</h3>
<p class="txt-gray">
“不响”是金老师创作的密码，这也是我改编这本书的密码，文字有文字的优势，影像有影像的优势。作为一个剧来说，最有起伏、最有代表性的人物，应该是阿宝。在原著里面阿宝有两个身份，一个是六十年代的工人阿宝，还有一个是九十年代，百花丛中过、片叶不沾身的宝总。是什么让阿宝成为宝总，一夜之间成为时代弄潮儿，书里面没有提过，原著不响，我们可以补白，相辅相成。我们没有能力还原足本的《繁花》，但是我们肯定可以给出一个你在原著里看不到的上海阿宝。
</p>
<hr class="gap x2">
<h3>读者寄言</h3>
<p class="txt-gray">
对于书迷我的建议是：带着《繁花》看《繁花》，每个人心里边，都有自己的《繁花》，我跟你们一样，只是一个读者，我的解读只是我的一家之言。对于没看过原著的观众，这个剧集只是蛋糕中的一块，看完之后意犹未尽，我建议你们去看原著。
</p>
</div>
<div class="col-n col-2 col-n-tb col-1-tb">
<hr class="gap x2">
</div>
<div class="col-n col-4 col-n-tb col-5-tb" style="display:flex;align-items:center;justify-content:space-between;">
<p>王家卫 ｜ 繁花监制 导演</p>
<img src="<?php echo get_template_directory_uri().'/assets/src/img/wangjiawei.webp' ?>" loading="lazy" class="about-boss-img">
</div>
</div>
</div>
</div>
♦ 内容区域3
#about-box-1 .line-flex{
width: 350px;
max-width: 100%;
}
@media screen and (min-width:1600px){
#about-box-1 .line-flex{
transform: translate(-60px, 0px);
}
#block-about-3 h2.indent,
#about-box-1{
padding-left: 140px;
}
#about-box-1 .line-flex > div{
width: calc(100% - 60px);
line-height: 1.6;
}
.line-flex{
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="contact-box" id="about-box-1">
<div>
<h3>2023-2024年度</h3>
<hr class="gap">
<div class="line-flex">
<i class="fa fa-bullseye fa-3x" style="color: red"></i>
<div>
<span class="num">3,289,5000小时</span>
<br>
年度总播放量
</div>
</div>
</div>
</div>
