HTML、CSS_0426-0427

 安裝vscode

CSS(30hrs)+bootstrap4(18hrs)


CSS語法：

顏色(Color)

            常見預設:green、red。

            16進位：0-F

            rgba(0,0,0,0)\

            HSLA(H:色相 S:飽和度 L:亮度 A:透明度)

            CMYK(illustrator)

邊界(Border)：
            border-radius(圓角)















順序：左上、右上、右下、左下

缺的值會拿對面的來補


實際範例




















border-image(邊框圖片)：

○  border-image: url(border-image.png) 20 round; 

○  數字代表在圖片何處切割，可以用數字或百分比 

○  文字代表重複方式，可用 repeat, round 及 stretch space

○  repeat 為重複, round 為圖形重複, stretch 為圖形延展

○ repeat 與 round 的區別：round 除了能平鋪外還能通過伸縮使背景完整顯示。

○ round 與 space 的區別：雖然都使背景完整顯示，但是 space 在小方塊之間有一定的空隙。
















Outline：

Outline跟border的差別

            ○  border 會佔寬度(排版時須注意計算)， outline 不佔寬度。

            ○  border 可以僅設定某一邊，outline 不行。

            ○  border 距離靠 padding調整，outline 則是 outline-offset

            ○  outline 可以拿來看別人如何切版（小技巧）
















Shadow：

            有box shadow跟text shadow兩種
           

     box-shadow: 10px 10px 10px #000;

            ○  第一個 值為水平(x軸)偏移
            ○  第二個 值為垂直(y軸)偏移 
            ○  第三個 值為模糊程度 
            ○  第四個 值為顏色 
            ○  顏色使用通用名稱或 rgba / hsla 用法
            ○   加上 :hover 效果\

box-shadow: 2px 3px 10px 10px rgb(82, 52, 52,0.2) inset;

         水平位移 垂直位移 模糊程度 擴散 顏色 是否為內陰影

            多重陰影：可使用 ,分隔


      text-shadow:10px 10px 10px #000

text-shadow: 1px 1px 10px #afa;

沒有  spread, 跟 inset














Background的全部寫法

body {

  background:

     url(sweettexture.jpg)    /* image */ 圖片

     top center / 200px 200px /* position / size */ 位置尺寸

     no-repeat                /* repeat */ 是否重複

     fixed                    /* attachment */ 是否要做視差捲動

     padding-box              /* origin */預設位置

     content-box              /* clip */ 裁切

     red;                     /* color */ 顏色

}


background-size:

            auto | length | cover | contain | initial | inherit ;

            ○ contain: 顯示圖片內容為主 
            ○ cover: 填滿整個區塊




















無使用





使用contain後的表現




使用cover後的表現




background origin:

            設定圖片起始位置
            border box：從圖片左上方開始填滿
            padding box：預設
            content  box：從左上角的box-model內容開始填滿























background-clip:

            設定圖片的裁切位置
























設定文字顏色為圖片填滿

























CSS前綴(prefix)：

            各瀏覽器在新技術尚未通過標準化之前，為了讓瀏覽器能提前讓使用者正常使用此技術，而在該技術名稱前額外加前綴字達到一樣的顯示效果。

background-attachment(視差滾動)：

            
































            fixed前後要有東西!!!

gradient(漸層)：

            有兩種線性漸層跟放射狀漸層
            background:linear-gradient(postion,color)
            background:radial-gradient(postion,color)
            這兩種也可以寫成重複漸層repaat-lineat/radial-gradient


        



























           實際操作
            









radial-gradient
            












































background-clip+radail-gradient的應用-->漸層文字













留言

張貼留言

這個網誌中的熱門文章

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