iT邦幫忙

0

2019/3/28 問題小記

重要的一天,記錄一些筆記:

HTML

  • ::after 解釋
    在原本的元件後面增加內容。

  • []的運用
style{
.img img[alt]{
  width: 200px;
  height: 200px;
}
<img src="img1.jpg" alt="im img1">
<div class="img">
    <img src="img2.jpg" alt="im img2">
    <img src="img3.jpg" >
</div> 

這樣如此就只有img2會被設定為固定大小


  • 設定4行5列的表格
<table>
    <thead>
        <tr>
            <th></th>
            <th>名字</th>
            <th>物品</th>
            <th>費用</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1月</th>
            <td>A</td>
            <td>海報紙</td>
            <td>$250</td>
        </tr>
        <tr>
            <th>2月</th>
            <td>B</td>
            <td>影印費</td>
            <td>$100</td>
        </tr>
        <tr>
            <th>3月</th>
            <td>C</td>
            <td>拖把</td>
            <td>$250</td>
        </tr>
        <tr>
            <th>4月</th>
            <td>D</td>
            <td>網路線</td>
            <td>$550</td>
        </tr>
    </tbody>
</table>

  • contenteditable="true" 解釋
    可以讓這個元件成為可編輯狀態。

  • checkbox 的 disabled 屬性
    disabled 属性可設計或返回是否禁用 checkbox。

  • 偽類的順序及解釋
:link    向未被訪問的連結添加樣式。
:visited 向已被訪問的連結添加樣式。
:hover   當鼠標移到元素上方時,向元素添加樣式。
:active  滑鼠按下的樣式
:focus   選擇具有焦點的元素 (接受鍵盤事件或其他用戶輸入的元素)

  • 偽類選取器
    :nth-child(odd) 選取順序為奇數的元素
    :nth-child(an+b)
    選取順序為 an+b, 則n從0開始 故選取結果依序為b, n+b, 2n+b ...

  • 利用CSS做到點擊顯示選單功能
    首先在父層元素使用:active 讓子元素display:block;
    在讓子元素:hover, display:block;

  • ~ & + 選取器的用法
<div>
    <p>One</p>
    <div>Two</div>
    <p>Three</p>
</div>

<div>
    <div>Four</div>
    <div><p>Five</p></div>
    <p>Six</p>
    <p>Seven</p>
</div>

若是 div + p{} 則影響到的範圍是 three, six
若是 div ~ p{} 則影響到的範圍是 three, six, seven


尚未有邦友留言

立即登入留言