week4.md - Paouser/wp109b GitHub Wiki

  1. 節點
  • 節點以內全包含 div p{ 格式; }
  • 節點以內第一項要符合 div>p{ 格式; }
    • 例:

      格式

      非格式

    • 節點後第一項 div+p{ 格式 }
    • 節點後所有項 div~p{ 格式 }
    • 重複節點 div{ 格式 } .div{ 格式 }
    • 清除空間 .div{ clear: (方向) }
      1. 固定文字位置 div.fixed { position: sixed;(top:(數字);bottom :(數字);right :(數字);left:(數字);border : (規格); }
      • 相對於整個畫面 fixed
      • 畫面移動文字不移動 position : sticky;
      • 超過外框不截文字 overflow: visible;
      • 超出外框截字 overflow: hidden;
      • 限制在外框內 overflow: scroll;
      • 超出才顯示捲軸 overflow: auto;
        • 包覆超過部分 overflow: auto;
      • 可指定X軸或Y軸 overflow-x: overflow-y:
      • 文字外框 display:
        • 符合文字 display:inline;
        • 符合外框大小 display:inline-block;
        • 直接換行 display:block;
        • 隱藏 display:none;
          • 顯示隱藏 div:hover p { display:black;}
      • 指定第一個字 p::first-letter { (格式) }
      • 指定代號 p.代號::first-letter{ (格式) }
      • 指定行數 p::first-line
      • 文字之前 h1::befor
      1. 圖片 img { 格式 }
      • 浮動在 float:(右right,左left,上top,下bottom;)
      • 不浮動 float:none;
      • 透明混合鼠標 img {opacity: (透明度)}
        • img hover{ opacity: (透明度) }
      1. 鼠標
      • 首次點擊 p:first-child { (變化) }
      • 雙重標記 p:first-child 代碼 ;
      1. 按鈕 button { padding(大小)px; background-color(背景顏色); color(文字顏色); border: (邊界)px; border-radius: (角)px; }

      6.功能性

      • 計時器 transition: [width(寬) (秒數)s ; height(高) (秒數)s ; ]
        • 計時器延遲 transition-delay: (秒數)s;
⚠️ **GitHub.com Fallback** ⚠️