PetHouse(2016)練習2

範例結果

三、表格在手機呈現調整

BS:【CSS】>【表格Tables】

確認項目:

1.Html之下設定:在<table>之下 class,如:<table class=”rwd-table”>

2.在各td之下,自定義data-,如下

<div class="table-responsive container">
    <table class="table table-bordered table-hover table-condensed rwd-table">
        <tr>
            <td data-th="中文名稱">台灣土狗</td>
            <td data-th="英文名稱">Formosan</td>
            <td data-th="特 性">聰明且堅毅不屈不撓</td>
            <td data-th="詳 述">台灣犬,是一種台灣高海拔地區原住民飼養的獵犬,屬於一種半野生的品種。他們非常適應台灣崎嶇不平的地形以及茂密的叢林,台灣土狗是相當聰明並且有著堅毅不屈不撓,加上忠貞的天性使它們成為優秀的警衛犬。</td>
        </tr>
        <tr>
            <td data-th="中文名稱">威爾斯柯基犬</td>
            <td data-th="英文名稱">Corgi</td>
            <td data-th="特 性">大力士般的小型犬</td>
            <td data-th="詳 述">柯基可愛度非常高又很聰明,聰明的牠因下盤較低、身軀嬌小,所以可以發揮極佳的速度與耐力敏捷穿梭在牛群中,並鉗住牛下肢,控制牠們的行動,是隻如大力士般的小型犬,但卻因為有雙層毛,所以非常容易掉毛的狗狗,需要常常清理!</td>
        </tr>
        <tr>
            <td data-th="中文名稱">紅貴賓</td>
            <td data-th="英文名稱">Toy-Poodle</td>
            <td data-th="特 性">神秘高貴有氣質</td>
            <td data-th="詳 述">玩具貴賓狗給人神秘高貴有氣質感,大膽、有勇氣、精力充沛、獨立心很強、悠然自得、很黏人也討人喜歡,研究顯示紅貴賓可是小型狗中最~聰明的種類,也是陪伴犬的第一選擇。如果想要養隻可以輕鬆教會牠的狗狗的話,紅貴賓可能是你的選擇之一唷!</td>
        </tr>
        <tr>
            <td data-th="中文名稱">柴犬</td>
            <td data-th="英文名稱">SHIBA-INU</td>
            <td data-th="特 性">性格沉穩、忠於主人、地域觀念強</td>
            <td data-th="詳 述">柴犬能巧妙地穿過雜木幫助打獵,而且紅褐色的毛色與枯萎的柴相似,故名。犬性格沉穩、忠於主人、地域觀念強。主人以外之人不易親近,不隨便吠叫,這是目前在日本飼養最多的犬種。</td>
        </tr>
    </table>
</div>
/*==Tabs Table Start=================================*/
#Table .table  td:nth-child(-n+3){
    white-space:nowrap;
    vertical-align: middle;
}

學習目的:

1.media queries媒體類型查詢應用(連結參考)

2.Bootstrapt媒體查詢情形(連結參考)

3.參考HTML data-* 屬性、CSS content 屬性

@media (max-width:768px) {
    
    
    /*手機轉為表格的格式=====================*/
    #Table .table.rwd-table td {
        display: block;
        white-space: normal;
        text-align: left;
        border: none;
    }
    #Table .rwd-table td:before {
        content: attr(data-th) ":";
    }
    /*改善表格框線格式=====*/
    #Table .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;
    }
}

2.選取器應用(連結參考)(如下練習)

開新檔案練習

<ul>
    <li>台灣土狗(Formosan)</li>
    <li>威爾斯柯基犬(Corgi)</li>
    <li>紅貴賓(Toy-Poodle)</li>
    <li>柴犬(SHIBA-INU)</li>
    <li>臘腸犬(Dachshund)</li>
    <li>博美(Pomeranian)</li>
    <li>雪納瑞(Schnauzer)</li>
    <li>瑪爾濟斯(MALTESE)</li>
    <li>吉娃娃(CHIHUAHUA)</li>
    <li>秋田(Akita-Dog)</li>
    <li>拉不拉多(Labrador-Retriever)</li>
    <li>法國鬥牛犬(French-Bulldog)</li>
    <li>邊境牧羊犬(Border-Collie)</li>
    <li>米格魯(Beagle)</li>
    <li>狐狸犬(Japanese-Spitz)</li>
    <li>鬆獅犬(Chow-Chow)</li>
    <li>黃金獵犬(Golden-Retriever)</li>
    <li>哈士奇(Husky)</li>
    <li>阿比西尼亞貓(Abyssinian-Cat)</li>
    <li>波斯貓(Persians)</li>
</ul>
li{
    list-style-type: none;
    background: url(img/icon01.png) no-repeat;
    background-size: 40px;
    line-height: 40px;
    padding-left:50px;       
}
li:nth-child(-n+5){
    background: url(img/icon02.png) no-repeat;
    background-size: 40px;
}
li:nth-last-child(-n+2){
    background: url(img/icon03.png) no-repeat;
    background-size: 40px;
}