左图有文字的一些CSS样式

缺乏、安全感 2021-12-12 15:29 243阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>左图有文字的一些样式</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .box {
          padding: 0 15px;
          height: 70px;
          background: #ccc;
          display: flex;
          position: relative;
        }
        .box .flx {
          position: absolute;
          right: 15px;
          height: 70px;
          line-height: 70px;
        }
        .box .img {
          width: 50px;
          height: 50px;
          margin: 10px 10px 10px 0;
        }
        .box .right {
          flex: 1;
          flex-direction: column;
          display: flex;
          justify-content: center;
        }
        .box .p {
          height: 100%;
          line-height: 35px;
        }
        .box .p2 {
          font-size: 14px;
        }
    
        /* end------------------------------------- */
        .box2 {
          padding: 0 15px;
          height: 70px;
          background: #ccc;
          display: flex;
          margin-top: 20px;
        }
        .box2 .img {
          width: 50px;
          height: 50px;
          margin: 10px 10px 10px 0;
        }
        .box2 .right {
          flex: 1;
          flex-direction: column;
          display: flex;
          justify-content: center;
        }
        .box2 .p {
          height: 100%;
          line-height: 35px;
        }
        .box2 .p2 {
          font-size: 14px;
        }
        .box2 .bottom {
          font-size: 13px;
        }
        .box2 .bottom .time{
          float: right;
        }
        /* end------------------------------------- */
        .box3 {
          padding: 0 15px;
          height: 70px;
          background: #ccc;
          display: flex;
          margin-top: 20px;
          font-size: 15px;
        }
        .box3 .img {
          width: 50px;
          height: 50px;
          margin: 10px 10px 10px 0;
        }
        .box3 .right {
          flex: 1;
          flex-direction: column;
          display: flex;
          justify-content: center;
        }
        .box3 .p2 {
          font-size: 14px;
        }
        .box3 .bottom {
          font-size: 13px;
          color: #333333;
        }
        .box3 .bottom .time{
          float: right;
        }
        .box3 .bottom .price{
          color: red;
        }
        /* end------------------------------------- */
        .box4 {
          padding: 0 15px;
          height: 70px;
          background: #ccc;
          display: flex;
          margin-top: 20px;
          font-size: 15px;
        }
        .box4 .img {
          width: 50px;
          height: 50px;
          margin: 10px 10px 10px 0;
        }
        .box4 .right {
          flex: 1;
          flex-direction: column;
          display: flex;
          justify-content: center;
        }
        .box4 .p2 {
          font-size: 14px;
        }
        .box4 .bottom {
          font-size: 13px;
          color: #333333;
        }
        .box4 .bottom .time{
          float: right;
        }
        .box4 .bottom .price{
          color: red;
        }
      </style>
    </head>
    <body>
      <div class="box">
        <div class="flx">></div>
        <img class="img" src="https://avatars1.githubusercontent.com/u/19720683?s=460&v=4" alt="tu" />
        <div class="right">
          <p class="p">古北-畅游记</p>
          <p class="p p2">这是第二段段文字标题</p>
        </div>
      </div>
      <div class="box2">
        <img class="img" src="https://avatars1.githubusercontent.com/u/19720683?s=460&v=4" alt="tu" />
        <div class="right">
          <p class="p">古北-畅游记</p>
          <div class="p bottom">
            <span class="name">古北水镇</span>
            <span class="time">2019-02-23</span>
          </div>
        </div>
      </div>
      <div class="box3">
        <img class="img" src="https://avatars1.githubusercontent.com/u/19720683?s=460&v=4" alt="tu" />
        <div class="right">
          <p class="p">古北-畅游记</p>
          <div class="p bottom">
            <span>名胜古迹</span>
            <span>4A景区</span>
            <span class="price">￥20</span>
          </div>
          <div class="p bottom">
            <span class="name">古北水镇</span>
            <span class="time">2019-02-23</span>
          </div>
        </div>
      </div>
      <div class="box4">
        <img class="img" src="https://avatars1.githubusercontent.com/u/19720683?s=460&v=4" alt="tu" />
        <div class="right">
          <p class="p">古北-畅游记<span style="float: right">某些文字</span></p>
          <div class="p bottom">
            <span>名胜古迹</span>
            <span>4A景区</span>
            <span class="price">￥20</span>
          </div>
          <div class="p bottom">
            <span class="name">古北水镇</span>
            <span class="time">2019-02-23</span>
          </div>
        </div>
      </div>
    </body>
    </html>

![https://img-blog.csdnimg.cn/20190712132843429.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n,size\_16,color\_FFFFFF,t\_70][https_img-blog.csdnimg.cn_20190712132843429.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]

![20210615160726515.png][]

<div class="cell" v-for="(item, index) in typeWork" :key="index">
        <div class="cell-left">
           <span class="type-name">{
       {item.name}}</span>
           <span class="type-status">{
       {item.status}}</span>
        </div>
        <div class="work-age">相关工作年限：暂无</div>
        <div class="btn">{
       {item.btn}}</div>
         <image class="right" src="icon_next.png" alt=""/>
    </div>
    
    .cell {
            position: relative;
            border-bottom: 1rpx solid #e9e9e9;
            .cell-left {
              padding: 30rpx 0 17rpx 0;
              .type-name {
                font-size: 30rpx;
                font-weight: bold;
                color: #333333;
                font-family: PingFang SC;
                margin-right: 16rpx;
              }
              .type-status {
                background: #F8F8F8;
                border: 1rpx solid #E9E9E9;
                border-radius: 4rpx;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
                padding: 5rpx 8rpx;
              }
              .is-status {
                opacity: 0.5;
                color: $theme-color!important;
                border: 1rpx solid $theme-color!important;
              }
            }
            .work-age {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #999999;
              padding-bottom: 30rpx;
            }
            .btn {
              position: absolute;
              top: 0;
              bottom: 0;
              margin: auto;
              right: 50rpx;
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #333333;
              display: flex;
              align-items: center;
              line-height: 30rpx;
            }
            .right {
              position: absolute;
              top: 0;
              bottom: 0;
              margin: auto;
              right: 0;
              width: 12rpx;
              height: 22rpx;
            }
          }
          .cell:nth-last-child(1) {
            border: none;
          }

[https_img-blog.csdnimg.cn_20190712132843429.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20211210/a4222968b7ec46d9b6a2b48a770d6447.png
[20210615160726515.png]: /images/20211210/bea6e6731fc243f58b6367aed50fb723.png