大作业及复习CSS中的各种功能

<template>
  <div id="app">
    <el-container>
      <el-header>
    <br>
    <img id="logo" style="display: inline-block; position: relative; left: 110px;top: 20px;" src="./网页设计素材/logo_yuan.png"><br>
    <div id="daohang">
      <p class="equal-spacing"> &nbsp;首页 剧情 人物 地图 玩法 总览 编辑</p>
    </div>

  </el-header>
  <br>
  <br>
  <br>
  <br>
  <br>


  <el-main>
    
      <div class="flex-container">
        <div class="left-column">
          <img  id="left" src="./网页设计素材/150px-角色分析.png" ><br>
          <img  id="left" src="./网页设计素材/150px-据点事件.png" ><br>
          <img  id="left" src="./网页设计素材/150px-密探名册.png" ><br>
          <img  id="left" src="./网页设计素材/150px-男主鸢记.png" ><br>
        </div>
        <div class="middle-column">
          <div class="block">  
            <span class="demonstration"></span>
            <el-carousel >
              <el-carousel-item v-for="item in 5" :key="item">
                <img v-if="item==1"   :style="{ maxWidth: '100%', height: '100%' }" src="./网页设计素材/5zx0kwm0g0cppzm1615beeucign5bjl.jpg">
                <img v-if="item==2"   :style="{ maxWidth: '100%', height: '100%' }" src="./网页设计素材/bpzq0p1rdgwpa0uh5gp6xs4hommcmbk.jpg">
                <img v-if="item==3"   :style="{ maxWidth: '100%', height: '100%' }" src="./网页设计素材/ha4bixnclency1p8awglyfjy4755x3d.jpg">
                <img v-if="item==4"   :style="{ maxWidth: '100%', height: '100%' }" src="./网页设计素材/hwxdlhb9v6v8lq0dfdqsjhsmu2b7c7w.jpg">
                <img v-if="item==5"   :style="{ maxWidth: '100%', height: '100%' }"  src="./网页设计素材/hxt3u83fxhxb2tfj8wjqzhvefuk0mtf.jpg">
              </el-carousel-item>
            </el-carousel>
          </div><br>
          <img id="main"  src="./网页设计素材/挑灯.png" ><br>
          <img id="main"  src="./网页设计素材/成长.png" ><br>
          <img id="main"  src="./网页设计素材/每日.png" ><br>
          
        </div>
        <div class="right-column">
          <div id="xiaobiaoti">
            <p id="gongjv">工 具</p>
          </div>
          <img  style="height: 120px;max-width: 95%;margin-top: 20px;" src="./网页设计素材/385px-抽卡模拟器（招人版.png" ><br>
          <img  style="height: 120px;max-width: 95%;margin-top: 20px;" src="./网页设计素材/密探计算.gif" ><br>
          
          <div id="xiaobiaoti">
              <p id="wangqikachi">往 期 卡 池</p>
          </div>

          <img id="right" src="./网页设计素材/300px-活动banner-出奇无穷.png" ><br>
          <img id="right" src="./网页设计素材/300px-活动banner-度势攻心.png" ><br>
          <img id="right" src="./网页设计素材/300px-活动banner-绝艳惊鸿.png" ><br>
          <img id="right" src="./网页设计素材/300px-活动banner-诗画同律.png" ><br>
          <img id="right" src="./网页设计素材/300px-活动banner-扬矢摧锋.png" ><br>
          <img id="right" src="./网页设计素材/300px-活动banner-争光日月.png" ><br>
        </div>
      </div>
    
  </el-main>  

 
  <div class="background-overlay"></div>


  <router-link to="./"></router-link>

  
 
  <router-view/>
    </el-container> 
  </div>
 
</template>

<style>
  


body {
    background: url("./网页设计素材/b9rcx83fr19ncml10ojwmqu5ohp3b34.png") no-repeat fixed 50% 0;
    background-size: cover;
    background-blend-mode:multiply;
    z-index: -2;
}

.el-main {
  margin-top: 75px; /* 根据你需要下移的距离调整这个数值 */
}

.equal-spacing {
    word-spacing: 50px; /* 根据需要调整这个数值 */ 
  }/*词语间距*/


  #daohang {
   background-color:rgba(15, 4, 39, 0.804);
   margin-left:150px ;
   margin-right: 150px;
   margin-top: 50px;
   color: rgb(255, 239, 133);
   height: 35px;
   display: flex; /* 将#daohang设置为弹性布局 */
   align-items: center; /* 在垂直方向上居中对齐 */
}

.flex-container {
  display: flex;
}

.left-column{
  position: relative;
  display: flex; /* 将.right-column设置为弹性布局 */
  flex-direction: column; /* 设置主轴方向为垂直方向 */
 
  align-items: center; /* 在交叉轴方向（这里指垂直方向）上居中对齐元素 */
  margin-left: 150px;
  
  width: 20%;
  background-color: rgba(255, 255, 255, 0.575); /* 示例：添加背景颜色 */
}
.right-column {
  position: relative;
  display: flex; /* 将.right-column设置为弹性布局 */
  flex-direction: column; /* 设置主轴方向为垂直方向 */
 
  align-items: center; /* 在交叉轴方向（这里指垂直方向）上居中对齐元素 */
  margin-right: 150px;
  margin-left: 20px;
  width: 25%;
  background-color: rgba(255, 255, 255, 0.721); /* 示例：添加背景颜色 */
}

.flex-container {
  display: flex;
  justify-content: center; /* 添加这一行，使内容在主轴（这里是水平方向）上居中 */
}


.middle-column {
  flex: 50%; /* 中间栏占3份 */
  align-items: center;
}


.block {
  position: relative;
  width: 100%;
}

.el-carousel {
 margin-left: 30px;
  max-width: 95%;
}



#left{
  position: relative; 
  top: 20px;
  max-width: 65%;
  height: 50px;
}



.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% - 160px); 
  height: 100%;
  background-color: rgb(255, 255, 255);
  opacity: 0.75;
  z-index: -1; /* 确保这个图层在其他内容之下 */
  margin-left: 80px;
  margin-right: 80px;
}

#main{
  max-width: 95%;
  margin-left: 30px;
  margin-top: 20px;
}

#right{
  max-width: 95%;
  margin-top: 15px;
  height: 80px;
}

#xiaobiaoti{
  color: rgb(255, 239, 133);
  background-color:rgba(15, 4, 39, 0.795);
  height: 30px; /* 或者根据需要设置一个合适的高度 */
  width: 100%;
  margin-right: 150px;
  margin-left: 150px;
}

#wangqikachi{
  margin-left:125px;
  margin-top: 5px;
  word-spacing: 8px; 
}

#gongjv{
  margin-left:150px;
  margin-top: 5px;
  word-spacing: 12px; 
}

</style>


<script>

</script>