HTML、CSS_0420

2021/04/20 HTML&CSS 筆記

CSS基礎屬性

  • 背景(background)
  • 邊界
  • 邊框(border)
  • 文字(text)
  • 列表(list)
  • 並排
  • Display(基礎排版)
  • 定位(postion)
  • 溢位 (overflow)
  • BoxM

Background(背景):
    







background-color(背景顏色)
            {background-color : transparent︱( color ) } ;
background-image(背景圖片)
            {background-image : none︱URL ( url ) } ;
background-repeat(背景重複)
            {background-repeat- : repeat︱repeat-x︱repeat-y︱no-repeat } ;
background-position(背景位置)
            { background-position:top︱bottom︱left︱center︱right︱( length )︱( position ) } ;
background-attachment(背景附著 )
            {background-attachment : scroll︱fixed } ;


下面為縮寫寫法
               background: color image repeat position attachment

邊界:
margin(邊界)
            margin:{上邊界值 右邊界值 下邊界值 左邊界值}
                         (順時鐘)
padding(留白)
            padding:{上內邊界值 右內邊界值 下內邊界值 左內邊界值}
                         (順時鐘)


border(邊框) :

border簡寫
            border:{border寬度 border樣式 border顏色};

border-radius:邊界曲度
            border-radius{value};


text(文字):

font-family:字型
font-weight:字體粗細
font-style:字型類型
font-size:字型大小
1em=16px
rem:相對值
letter-spacing:文字字距
line-height:行高
text-align:文字水平對齊
text-ident:文字縮排
vertical-align:文字垂直對齊
        在div區塊沒有作用，只能用於儲存格
text-decoration:文字修飾
text-transform:文字大小轉換
color:文字色彩(跟background-color不一樣)

position(定位):
           position：absolute|relative|static(預設值)|fixed
            top:
            right:
            bottom:
            left:
            z-index：auto|<integer>
            值越大越上層，常用在購物網站的「往上捲」

boxModel:
            .wrap>header+section+aside+footer
            
















2021/04/20

















留言

張貼留言

這個網誌中的熱門文章

jQuery_06/15-06/16

事件處理(event)：           Mouse event(滑鼠事件)                click()-點擊                dblclick()-連點          //快速點擊兩次，實際上會觸發兩次 click以及一次 dblclick          $ ( '.btn' ). click ( function  () {              console . log ( 'click' );              //單純的執行命令，沒辦法再呼叫一次              //如果想重複執行，麻煩包在一個function裡面         })          $ ( '.btn' ). dblclick ( function  () {              console . log ( 'dblclick1 ' );         })                contentmenu()-右鍵                mousedown()-滑鼠按下左鍵               mouseup()-滑鼠放開左鍵               mouseenter()-滑鼠移進選擇器               mouseleave()-滑鼠離開          $ ( '.btn' ). mousedown ( function  () {              console . log ( 'mousedown' );         })          $ ( '.btn' ). mouseup ( function  () {              console . log ( 'mouseup' );         })          $ ( '.btn' ). mouseenter ( function  () {              console . log ( 'mousenter' );         })               hover()-移進與離開
閱讀完整內容

jQuery_06/09-06/11

圖片
  事件驅動：透過針對某個 DOM 節點做一個 addEventListener 監視事件，當事件被觸發的時候執行某個 function 產生資料變化或畫面改變。 資料驅動：直接將畫面與資料綁定關連性，未來只要資料變動，自動重新渲染畫面更新，不再需要選取 DOM 節點。  DOM(document  object model)：瀏覽器物件模型  BOM(browser object model)：文件物件模型 java script：      放在body之前的原因                    1. 因為執行順序，dom一定是ready的，輕重緩急                    2. 因為現在越來越複雜了，希望使用者一進來越快有畫面越好          $ ( document ). ready ( function (){         });          $ ( function (){                      })               正常寫法               簡寫寫法 jQuery slim：更小， 拿掉 ajax 跟 effect 的部份。 fetch js：新世代原生的技術 jquery的基本用法：     $(selector)+動作語法    $ ( 'h1' ). css ( 'color' ,  'blue' )          selector        哪個       做甚麼     form selector表單選擇器：         checked：先被選擇          disable：不能存取     basic filter:基本過濾           ●:eq() - 選取第 n 個(從0開始計算)           ●:even - 選取第偶數個(從0開始計算)           ●:odd - 選取第奇數個(從0開始計算)           ●:first - 選取第一個           ●:last - 選取最後一個           ●:gt() - 選取大於第 n 個的(也可以給負數)           ●:lt() - 選取小於第 n 個的(也可以給負數)          
閱讀完整內容

Vue學習筆記（一）

 Vue基礎語法          v-bind 回應及更新ＤＯＭ特性          ex.                v-bind:href               v-bind:class               v-bind:title          v-model 資料雙向綁定          ex.               input select text checkbox radio          <input v-model=""message>          v-for 迴圈指令 多次繪製元素或模組          ex.               <li v-for="(item,index) in todos"></li>          v-on 用於監聽DOM事件           ex.               v-on:click v-on:keycap          v-html 更新元素的innerHTML    但不建議使用，容易遭受ＸＳＳ攻擊          v-text 更新元素的textContent           ex.               <span v-text="msg"></span>               <span> {{msg}} </span>          v-cloak 不需要運算式，指令保持在元素上          ＊Cloak 和 CSS規則一起用時可以隱藏未編譯的<mustache>直到準備完畢          <mustache>為. {{雙下班}}          v-pre 不需要運算式，用於跳過元素及子元素的編譯過程，加快編譯速度          ＊＊也可以用來顯示原始<mustache>標籤          v-once 不需要運算式，只繪製元素或元件一次，繪製後元件 元素 子元素都會變成是靜態的          
閱讀完整內容