動畫選片-XML(P3)

強片介紹及選電影

 

一、選電影

範例結果

(一)頁面結構及美化

S1:html結構

  <h2>動畫精選</h2>
  <h3>選電影【xml】</h3>
  <ul class="tag">
    <li><a href="#all" class="isactive">全部</a></li>
    <li><a href="#new">最新影片</a></li>
    <li><a href="#hot">熱門強片</a></li>
    <li><a href="#dvd">DVD同步</a></li>
    <li><a href="#theme">主題介紹</a></li>
  </ul>
  <div class="movieAn">

    <div data-tag="new,hot,dvd,theme" class="list">
      <img src="../images/p3/movie01.jpg" alt="">
      <div class="imgContent" data-score="5.5">
        <h4>瓦力<span>發人深省的機器人故事</span></h4>
        <div class="rating"></div>
      </div>
    </div>

  </div>

S2:SCSS美化

// 上方 .tag 美化
.tag{
  text-align: center;
  li{
    display: inline-block;  margin: 15px;
    a{
      color:#00acc1;
      &.isactive {
        color:#A00002; font-weight:bold; background:#f8bbd0;
        padding:10px 20px; border-radius:10px;
        border-bottom: 3px solid #ff5893;
      }
    }
  }
} //.tag end

// 下方 圖片美化
.movieAn{
  margin: 1%; margin: auto;
  .list{
    display: inline-block;
    width: 14.666%; margin: 1%;
    box-sizing: border-box;

    box-shadow: 2px 2px 10px #000000;
    transition:all .2s; cursor:pointer;

    // opacity: 0;
    img{
      width: 100%; display: block;
    } // img end
    .imgContent{
      // background: #fc9a9a;
      height: 70px; padding: 5px;

      position: relative;

      
      h4{
        font-size:.9em; color:#333; line-height:25px;
        //文字超出範圍 顯示...
          // width: 90%; overflow: hidden;
          // white-space: nowrap; 
          // text-overflow: ellipsis;
      }
      span{
        display:block;
        line-height:1.5em; font-size:.8em; font-weight:normal;
      }
      &:after{
        content:attr(data-score); /*display:block;*/ 
        color:#860000; 
        position:absolute; top:5px; right:5px;}
      .rating{
        position: absolute; right: 5px; bottom: 5px;
        color: #d17a00;
      }
    } // .imgContent end
    &:hover {
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5); transform:scale(1.05);

      .rating{
        text-shadow: 0 0 1px #000;
      }
    }
  }// .list end
} // .movieAn

S3:h4標題超出範圍顯示【…】

// 下方 圖片美化
.movieAn{
  .list{
    .imgContent{
      h4{
        //文字超出範圍 顯示...
          width: 90%; overflow: hidden;
          white-space: nowrap; 
          text-overflow: ellipsis;
      }
    } //.imgContent end
  }// .list end
} // .movieAn