HTML、CSS_0428-0429

 text-overflow

           單行顯示：

             純 css 超過容器寬度後自動變...

            Text-overflow : ellipsis; 

             一定要搭配(溫開水)

            ->overflow:hidden+white-space:nowrap

            

            多行顯示：


            display: -webkit-box; 

            -webkit-line-clamp: 4; 

            -webkit-box-orient: vertical;

            















文字斷行方式

            word-break 是決定如何斷行單字

            word-wrap 斷行後，文字仍超過容器寬度時決定如何處理 ，避免單字太長把版面撐破

            word-break：normal/break-all/keep-all
                                正常                  全斷                   標點符號斷行
                                                                               英文不能用            英文沒差、CJK
            Word-wrap：normal/break-word/initial/inherit
                                             切斷詞並換行       

             word-break:keep-all後可以使用word-wrap:break-word來將文字包在容器中    










            




@font-face(設定字型)

        根據每個瀏覽器的支援程度
        有下載後使用下載的字型跟使用Google-font的方法
        























        Icon Font：用字體來表示小圖示

     可以使用font-awesome這個網站(https://fontawesome.com/)
        下載後解壓縮到網頁資料夾內，並改名成 fontawesome
        用 link css 的方式連結到 “fontawesome/css/all.css”


         














       SVG

           調整SVG-->使用height跟width
                更改SVG的顏色-->fill:rgb(只能在路徑改，因為路徑最大)
                SVG對於製作LOGO來說最好用
                

















          可以使用icomoon來尋找SVG的圖片檔
        











Object-fit(區域填滿設定)

           設定包在裡面的元素填滿方式，主要是用在圖片上
                屬性設定在圖片上，圖片也要先設寬高

                ○ fill: 預設，不管圖片長寬比例的填滿 
                ○ contain: 保持比例，以完整顯示內容為主 
                ○ cover: 保持比例，以填滿空間沒有空白為主
                ○ none: 不縮放
































Object-position(物件位置)

        搭配object-fit，可以設定對齊位置
            預設為object-position(center center)
            屬性可以使用px、%、top left.....


CSS3的新增單位

    rem/em
      rem(root-em)：用html的預設字體大小當單位
                                   2rem=32px
         em：字體大小，一路繼承下來
         所有單位都可以用rem！


















    Vh/Vw(viewport height/viewport width)

            1vh/1vw=1/100瀏覽器的高/寬

    Vmax/Vmin

            根據view-port的大小決定
            Ex.1024*˙720
            1vmax=1024/100
            1vmin=720/100

            常用於行動裝置的旋轉，可以使比例不變

    calc()

            使CSS的單位可以計算
            常用在相對單位-絕對單位(計算的時候一定要有空格)
            calc(100% - 100px)

    transform(變形)

        效能比position好得多
            加入hover的話可以做移動的變化

            transform:translateX()：X軸移動
            transform:translateY()：Y軸移動
            -->簡寫寫法  transform:translate(X,Y)

            transform:rotate(deg)：旋轉的角度

            transform:scaleX()：縮放X軸
            transform:scaleY()：縮放Y軸
            -->簡寫寫法 transform:scale(X,Y)

            transform:skew(deg)：平行四邊形的位移
            transform:skewX(deg)
            transform:skewY(deg)
            -->簡寫寫法 transform:skew(X,Ydeg)

            transform-origin(定義變形中心點)

            小技巧：ctrl+shift+p->wrap->輸入名稱 可以直接把div外面套已經取好名字的div
transform: translateX(10px) rotate(60deg);
            假如說要多重屬性的話 只能寫在同一個transform */
            /* 不能按照下面的寫法
            transform:rotate(30deg);
            transform: translateX(30px);

 Transform matrix(a,b,c,d,e,f) 變形矩陣

            matrix(1,0,0,1,e,f) = translate(e,f)
            matrix( aX,0,0,dY,0,0) = scale(a,d)
            matrix(1, 0, tan(a), 1, 0, 0) ->skewX            
            matrix(1, tan(a), 0, 1, 0, 0) ->skewY

Transform-origin(變形中心點)

                    左上角為原點，即為(0,0)
                    ● 也可以使用 n%, left, right, center, top, bottom




transition(漸變)

            ● transition: width 2s; 
            ● transition-property: css 屬性(例如寬度、顏色)
            ● transition-duration: 屬性變化時間，單位為秒
            ● transition-timing-function  動畫變速效果
            ● transition-delay: 2s  動畫延遲時間

            可以製作自訂的動畫時間效果 cubic-bezier()
            http://cubic-bezier.com/
























留言

張貼留言

這個網誌中的熱門文章

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 不需要運算式，只繪製元素或元件一次，繪製後元件 元素 子元素都會變成是靜態的          
閱讀完整內容