Class(2017-1)練習3

套用【網頁前端框架】讓網站設計更快捷3

四、【設計學院】區塊

4-3 表格在手機呈現調整

BS:【CSS】>【表格Tables】

4-3-1 利用BS 加入 表格Table

在<table>之下 class,如:<table  id=”exam”>

<!--    table     -->
<h3 class="text-center text-info">Adobe ACA 國際認證</h3>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="exam">
<tr>
<td>項目</td>
<td>課程名稱</td>
<td>課程內容</td>
</tr>
<tr>
<td><img src="images/logo01.jpg" alt="ps"></td>
<td>JQ12_Photoshop ACA國際認證<br>課程時數:18.00hr</td>
<td>
<ul>
<li>ACA認證考試介紹</li>
<li>影像之取得、影像檔案管理</li>
<li>基礎工具介紹</li>
<li>圖層操作與應用</li>
<li>繪圖工具與文字工具應用</li>
<li>進階影像處理、合成應用</li>
<li>ACA認證模擬試題練習與解說</li>
</ul>
</td>
</tr>
<tr>
<td><img src="images/logo02.jpg" alt="ps"></td>
<td>JQ11_Illustrator ACA國際認證<br>課程時數:18.00hr</td>
<td>
<ul>
<li>設定專案要求</li>
<li>瞭解準備圖形時使用的設計元素</li>
<li>瞭解Illustrator介面</li>
<li>使用Illustrator建立圖形</li>
<li>進行圖形封存、匯出及出版</li>
</ul>
</td>
</tr>
<tr>
<td><img src="images/logo03.jpg" alt="ID"></td>
<td>JQ10_InDesign ACA國際認證<br>課程時數:18.00hr</td>
<td>
<ul>
<li>設定專案要求</li>
<li>瞭解準備頁面佈局時的設計元素</li>
<li>瞭解InDesign介面</li>
<li>使用InDesign建立頁面佈局</li>
<li>出版、匯出及封存頁面佈局</li>
</ul>
</td>
</tr>
<tr>
<td><img src="images/logo04.jpg" alt="dw"></td>
<td>JQ13_Dreamweaver ACA國際認證<br>課程時數:18.00hr</td>
<td>
<ul>
<li>ACA認證考試介紹</li>
<li>認識Dreamweaver操作環境<br>HTML及網頁的圖片與色彩處理</li>
<li>超連結設定與表格的編輯、CSS樣式表</li>
<li>AP元素及網頁之編排、多媒體物件介紹</li>
<li>資源、片段與範本介紹及網站的上傳管理</li>
<li>ACA認證模擬試題練習與解說</li>
</ul>
</td>
</tr>
<tr>
<td><img src="images/logo05.jpg" alt="fl"></td>
<td>JQ14_Flash ACA 國際認證<br>課程時數:18.00hr</td>
<td>
<ul>
<li>ACA認證考試介紹</li>
<li>檔案管理、基礎繪圖、複習繪圖工具介紹</li>
<li>文字工具、時間軸、圖層功能介紹</li>
<li>元件管理與動畫製作、進階動畫設計</li>
<li>音效與播放設定<br>ActionScript 3.0程式設計</li>
<li>ACA認證模擬試題練習與解說</li>
</ul>
</td>
</tr>
</table>
</div>

 

CSS美化

/*設計學院 Table ===============================================================*/
#exam td,#exam tr:first-child td:last-child{
text-align: center;vertical-align: middle;}
#exam td:last-child{text-align: left;}
.table-hover > tbody > tr:hover {
background-color: #ffd9d9; cursor: pointer;
}

4-3-2 表格在手機呈現調整CSS美化

@media (max-width:768px) {
/*手機轉為表格的格式=================*/
#exam  tr:nth-child(1){display: none;}
#exam td:nth-child(2){
     font-size: 16px; color:#790000; }
#exam td {
display: block;
border: none;
}
/*改善表格框線格式=====*/
.table-responsive { border: none;}
#Table {border: none;}
#Table .table.rwd-table td:last-child {
border-bottom: 1px solid #013971;
}
/*表格偶數列加背景色彩=====*/
#Table .rwd-table tr:nth-of-type(2n) {
background: #ffb3b3;
}
}