S1:預備工作

html結構

  <!-- json 明細載入 -->

  <div class="detail">
    <div class="mvlist">
      <div class="mvImg">
        <a href="#" class="a"> <img src="../image/movie01.jpg" alt=""></a>
      </div>
      <div class="mvItem">
        <div class="title">猩球崛起:終極決戰</div>
        <div class="sub">賣座重量級系列電影《猩球崛起》第三部曲</div>
        <div class="actor">演員:茱蒂葛瑞兒、伍迪哈里遜、安迪席克斯</div>
        <div class="director">導演:麥特李維斯</div>
        <div class="tag">類型:動作冒險/熱門精選/</div>
        <div class="price">原價:230元</div>
        <div class="price">
            <span class="red">79</span>折,
            優惠價:<span class="red">230*0.79</span>元
        </div>
        <div class="score">6.9</div>
      </div>
      <div class="mvDesc">
        <h4>猩球崛起:終極決戰</h4>
        <p>十五年前的一場科學實驗出了錯,一群擁有高度智慧的猩猩就此崛起,而人類因為「猩流感」病毒近乎瀕臨絕種,猩猩們則持續在舊金山的森林裡安全地發展,直到他們發現一群倖存的人類亟欲在此建立新聚落。他們將這批人類視為入侵者,而入侵者與猩猩的共存是一場掙扎,搖搖欲墜的和平在柯巴報復前飼主的行動下就此粉碎。領袖凱撒所領導的猩猩族群,面對著一位冷血殘暴並率領著人類武裝軍團的軍官強烈逼迫,為了生存牠們展開反擊。最終兩方人馬發動所有軍力全面迎戰,兩方物種未來命運為何?</p>
      </div>
    </div>
  </div>

SCSS美化

.detail{
  display: flex;
  flex-direction: column;

  width: 90%;  margin: 30px auto;

  .mvlist{
    display: flex;
    border-bottom: 2px solid #720000;
    &>div{
      padding: 10px;
    }
    .mvDesc{
      background: #f3ffd4;
      flex: 3;
      padding: 10px;
      h4{
        color: #4a148c; padding-bottom: 5px;
        border-bottom: 1px solid #5e5e5e; text-align: center;
        
        &:before{
          content: "\f03d"; font-family: "FontAwesome";
          padding-right: 10px;
        }
      }
      p{
        padding-top: 10px;
        font-size: .8em; text-indent: 2em;
      }
    }
    .mvImg{
      background: #ffe7e7;
      width: 150px;
      flex: 1;
      
      img{
        width: 100%;
      }
    }
    .mvItem{
      background: #d6fff2;
      flex: 1 ;
      div{
        font-size: .8em; line-height: 1.5em;
        &:nth-child(1){color: #c06a23; font-size: 1.2em; font-weight: bold;}
        &:nth-child(2){color: #6b5d52; font-size: .9em;padding: 10px 0;}
      }
      .red{ color:#860000; font-weight: bold;}
    } // .mvItem end
  }//.mvlist end
} //detail end