WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-13. 全球賽事: 交叉縱橫的收合面板

原外掛：jquery plugin InfoGrid，按右鍵選「檢視網頁原始碼」。

需要的 HTML 部份

<div id="page-wrap">
  <!-- 第 1 直欄 ============================================= -->
  <div class="info-col">
    <h2>一級方程式</h2>
    <a class="image image1" href="javascript:;">View Image</a>
    <dl>
      <dt>Super Power</dt>
      <dd>...........</dd>
      <dt>Costume</dt>
      <dd>...........</dd>
      <dt>Morality</dt>
      <dd>...........</dd>
    </dl>
  </div>

  <!-- 第 2 直欄 ============================================= -->
  <div class="info-col">
    <h2>二級方程式</h2>
    <a class="image image1" href="javascript:;">View Image</a>
    <dl>
      <dt>Super Power</dt>
      <dd>...........</dd>
      <dt>Costume</dt>
      <dd>...........</dd>
      <dt>Morality</dt>
      <dd>...........</dd>
    </dl>
  </div>

  <!-- 第 3 直欄 ============================================= -->
  <div class="info-col">
    <h2>三級方程式</h2>
    <a class="image image1" href="javascript:;">View Image</a>
    <dl>
      <dt id="starter">Super Power</dt>
      <dd>...........</dd>
      <dt>Costume</dt>
      <dd>...........</dd>
      <dt>Morality</dt>
      <dd>...........</dd>
    </dl>
  </div>

  <!-- 第 4 直欄 ============================================= -->
  <div class="info-col">
    <h2>房車錦標賽</h2>
    <a class="image image1" href="javascript:;">View Image</a>
    <dl>
      <dt>Super Power</dt>
      <dd>...........</dd>
      <dt>Costume</dt>
      <dd>...........</dd>
      <dt>Morality</dt>
      <dd>...........</dd>
    </dl>
  </div>

  <!-- 第 5 直欄 ============================================= -->
  <div class="info-col">
    <h2>拉力賽</h2>
    <a class="image image1" href="javascript:;">View Image</a>
    <dl>
      <dt>Super Power</dt>
      <dd>...........</dd>
      <dt>Costume</dt>
      <dd>...........</dd>
      <dt>Morality</dt>
      <dd>...........</dd>
    </dl>
  </div>

</div>

需要的 CSS 檔案：style.css，進行修改

/* ========== 刪除不需要的部份 ========== */
#page-wrap { padding: 0 10px; margin: 0 auto; }

.info-col { float: left; width: 100px; }

.info-col h2 { text-align: center; font-weight: normal; padding-bottom: 1rem; font-size: 1.3rem; }

.image {  height: 250px; text-indent: -9999px;  display: block;  
  border-right: 1px solid #000; 
  background-size: cover; background: center center no-repeat; }

.image1 {  background-image: url(../../images/racing/racing1.jpg) }
.image2 {  background-image: url(../../images/racing/racing2.jpg) }
.image3 {  background-image: url(../../images/racing/racing3.jpg) }
.image4 {  background-image: url(../../images/racing/racing4.jpg) }
.image5 {  background-image: url(../../images/racing/racing5.jpg) }

.image5 { border-right: none; }
.info-col:last-child dt { border-right: none; }
.info-col:last-child dd { border-right: none; }


dt { padding: 6px; color: #fff; cursor: pointer;
  border-bottom: 1px solid #000; border-right: 1px solid #000 }

dd { padding: 10px;  color: #fff;  border-right: 1px solid #000; 
  position: relative; top: -1px; left: 0; display: none }

dt:nth-of-type(1) {  background: #9b3726}
dd:nth-of-type(1) {  background: #b44835}
dt:nth-of-type(2) {  background: #dd662c}
dd:nth-of-type(2) {  background: #ff7d3e}
dt:nth-of-type(3) {  background: #d8922a}
dd:nth-of-type(3) {  background: #ffb03b}
dt:nth-of-type(4) {  background: #c2a25c}
dd:nth-of-type(4) {  background: #c2a25c}
dt:nth-of-type(5) {  background: #4c443c}
dd:nth-of-type(5) {  background: #4c443c}
dt:nth-of-type(6) {  background: #656b60}
dd:nth-of-type(6) {  background: #656b60}

.curCol {
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 1);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 1);
  z-index: 1;  position: relative;
}

@media( max-width: 900px ){
  .info-col { float: none; width: 100%; }
}

需要的 JS 檔案：infogrid.js，建議加強認識加以調整修改

 

 

go TOP