網頁設計好好玩(10502)

1. 網頁設計環境

一、關於本課程

  1. 上課時間為週一 15:20~17:00,為期一學年
  2. 上課歡迎拍照、錄音、錄影,能和同學分享更好。
  3. 座位基本上沒有強制性,但也不建議每次都換來換去。
  4. 電腦C磁碟會還原,可在D磁碟安裝常用的可攜式軟體

二、開發工具

  1. sublime text(文字編輯器)
  2. 下載

三、網頁伺服器

申請 GitHub

  1. 沒有gmail信箱的同學:https://www.google.com.tw
  2. 官網:https://github.com/
  3. 申請

安裝  GitHub DeskTop

  1. 官網:https://help.github.com/desktop/guides/getting-started/
  2. 下載 GitHub DeskTop:https://desktop.github.com/

建立 Repository

設定 Repository

使用  GitHub DeskTop 更新網站資料

四、FB:https://www.facebook.com/groups/287603814955733/

五、學員網站:https://www.ugm.com.tw/modules/ugm_student/?sn=5

網頁設計好好玩(10502)

2. Git 環境安裝

一、Git官網  

  1. 下載 portable版本
  2. 安裝
    「PortableGit-2.12.0-64-bit.7z.exe/右鍵/7-zip/解壓縮檔案.....」
  3.  執行 Git
    雙按「git-bash.exe」
    輸入「git version」檢查是否安裝成功

二、設定Git

  1. 設定作者的訊息
    git config --global user.name "tawan158"
    git config --global user.email "tawan158@ugm.com.tw"

    --global 代表全域設定

  2. 查看訊息
    git config --list

     

  3. 輸出時加上顏色
    git config --global color.ui true

     

三、Windows 提示字元操作

  1. cd:改變目錄
  2. mkdir:建立一個目錄
  3. ls:顯示目錄下的檔案
  4. touch:建立新檔案
  5. 「.」 :代表本層
  6.  「..」 :代表上層
  7. 目錄 「/」

網頁設計好好玩(10502)

3. Git操作流程

一、資料夾架構

二、Git操作

  1. 建立一個新的 Repository(數據庫)
    請先建立一個資料夾,再切換至資料夾

    git init
  2. 查詢 Git 的狀態
    git status
  3. 操作流程
  4.  

網頁設計好好玩(10502)

3-1 Github操作

  1. 新增數據庫
  2. 設定為Github Pages
  3. 得到網址
  4. 刪除數據庫
  5.  
    …or create a new repository on the command line
    
    echo "# test" >> README.md
    git init
    git add README.md
    git commit -m "first commit"
    git remote add origin https://github.com/tawan158/test.git
    git push -u origin master
    …or push an existing repository from the command line
    
    git remote add origin https://github.com/tawan158/test.git
    git push -u origin master

     

  6. git add .
    
    git commit -m "1"
    
    git push origin master

     

 

網頁設計好好玩(10502)

4. 註冊網址

一、DNS服務:

  1. DNS的全稱是Domain Name System(或Service)
  2. 領域名稱(Domain name)與位址(IP address)相互之間的轉換
  3. 當您連上一個網址,在URL打上﹕www.ugm.com.tw的時候,DNS會幫我們查出所對應的IP(96.44.187.69), 然後到達這個網址
  4. DNS的作用就是『讓有意義的,人類較容易記憶的主機名稱(英文字母),轉譯成為電腦所熟悉的 IP 位址!』,而免除了強記號碼的痛苦。

一、免費網址:

  1. 自由網域:
  2. 步驟1
     
  3. 步驟2
     
  4. 步驟3
     
  5. 步驟4
     
  6. 步驟5
     
  7. 步驟6
     
  8. 步驟7
     
  9. 步驟8
     
  10. 步驟9
     
  11.  

二、設定網址:

網頁設計好好玩(10502)

5. 建置網站流程

一、Github操作

  1. Github新增一個數據庫
    請建立一個「site」數據庫 
  2. 啟動Github Pages服務
  3. 取得網址
  4. 註冊「學員網站」

二、Git操作

  1. 啟動Git bash
  2. 切換目錄至「github」目錄 
  3. git clone xxx
  4. 切換目錄至「github/site」
  5. 用「sublime text3」建立 「index.html」
  6. 上傳步驟
    「git add .」
    「git commit -m 'xxx'」
    「git push origin master」

 


三、sublime text3操作

  1. 「檔案/新建檔案 ctrl+N」
  2. 更改副檔名為「HTML」
  3. 「ctrl+!」
  4. 設定網站名稱
  5. 增加一個標題及一個段落
    <h1><p>  lorem
  6. 存為「index.html」並上傳

網頁設計好好玩(10502)

6. 綜合練習

一、建立網頁檔案,上傳至github

  1. 檔案管理:這裡有二個部份,分為「本地端」「伺服端」
  2. git bash:幫我們將網頁檔案傳至「伺服端」
    git add .
    git commit -m '1'
    git push origin master
  3. sublime text3:用它來建立網頁檔案,
  4. 常用標籤:
    <h1>~<h6>標題
    <p>段落</p>
    <div>區域</div>
    <pre>程式碼</pre>
    <ol>有序清單</ol><ul>無序清單</ul>
    <table></table>
    --------------------------------------------------
    <a>連結</a>
    <br />換行
    <img />圖片
    <span>區域</span>
    

    5-1.html
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>練習5-1</title>
    </head>
    <body>
    <h1>練習5-1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>	
    </body>
    </html>
    


    5-2.html
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>練習5-2</title>
    </head>
    <body>
    <h1>練習5-2</h1>
    <h2>練習5-2</h2>
    <h3>練習5-2</h3>
    <h4>練習5-2</h4>
    <h5>練習5-2</h5>
    <h6>練習5-2</h6>
    練習5-2
    <p>練習5-2</p>
    <div>練習5-2</div><div>練習5-2</div>	
    <span>練習5-2</span><span>練習5-2</span>
    </body>
    </html>
    

    5-3.html :請自行至 tw.yahoo.com 複制一段標題與段落
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>練習5-3</title>
    </head>
    <body>
    <h1>MLB/為了這一分 他受盡了苦難</h1>
    <p>紅雀隊今天以1比2輸給小熊隊,不過紅雀隊攻下的唯一1分,可是Stephen Piscotty歷經各種苦難之後拿下來的。</p>
    <p>紅雀隊今天遭到小熊隊強投Jake Arrieta的全力封鎖,打擊無法發揮。5局下Piscotty被Arrieta投出的球擊中右手肘上一壘,接著Arrieta暴投,Piscotty衝上二壘時,又被捕手Willson Contreras的傳球打到另一隻手的手肘。</p>	
    </body>
    </html>
    



    index.html
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>首頁</title>
    </head>
    <body>
    <h1>首頁</h1>
    <ul>
    <li><a href="5-1.html">練習5-1</a></li>
    <li><a href="5-2.html">練習5-2</a></li>
    <li><a href="5-3.html" target="_blank">練習5-3</a></li>
    </ul>
    </body>
    </html>
    


    5-4.html :練習插入圖片,請先將上面圖片下載至專案 img/ex5.png
    這裡需了解「圖片放置位置」「網頁檔案位置」之間的關係
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>練習5-4</title>
    </head>
    <body>
    <h1>插入圖片</h1>
    <div><img src="img/ex5.png"></div>
    </body>
    </html>
    

     

 

網頁設計好好玩(10502)

7. CSS盒子模式

  1. 內容 content
  2. 內邊距 padding
    padding、padding-top、padding-right、padding-bottom、padding-left
  3. 框線 border
    border-style border-width border-color
    border樣式
  4. 外邊距 margin
  5. 7-1.html
    「檢視/佈局/列:2」左邊->html 右邊->css
    引入css檔
    ctrl + / :註解
    p100 
    m50
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    	<title>7-1</title>
    </head>
    <body>
    	<table border="1">
    		<tr>
    			<td>
    				留白 padding
    			</td>
    		</tr>
    	</table>
    	
    </body>
    </html>

    style.css
     

    td{
    	/*註解*/
    	/*padding: 30px 160px;*/
    /*	padding-top:10px;
    	padding-right:20px;
    	padding-bottom:30px;
    	padding-left:40px;*/
    	padding: 10px 20px 30px 40px;
    	/*border:solid 10px #1a3f70;*/
    	border-width:10px;
    	border-color: #000;
    	border-top-style: dotted;
    	border-left-style: double;
    
    }

     

  6. 7-2.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    	<title>7-2</title>
    </head>
    <body>
    	<table>
    		<tr>
    			<td>
    				<!-- 註解 -->
    				留白 padding
    			</td>
    		</tr>
    	</table>
    	<div class="d1">
    		
    	</div>
    	<div id="d2">
    		
    	</div>
    	
    </body>
    </html>

    style.css
     

    td{
    	/*註解*/
    	/*padding: 30px 160px;*/
    /*	padding-top:10px;
    	padding-right:20px;
    	padding-bottom:30px;
    	padding-left:40px;*/
    	padding: 10px 20px 30px 40px;
    	/*border:solid 10px #1a3f70;*/
    	border-width:10px;
    	border-color: #000;
    	border-top-style: dotted;
    	border-left-style: double;
    
    }
    
    .d1{
    	width: 100px;
    	height: 100px;
    	background-color: #34701a;
    	margin: 20px;
    
    }
    
    #d2{
    	width: 500px;
    	height: 500px;
    	background-color: #af7de0;
    
    }

     

網頁設計好好玩(10502)

7-1 練習

  1. 7-1.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>練習5-5</title>
    </head>
    <body>
    <h1>padding</h1>
    <table border=1>
    <tr>
    <td>內邊距</td>
    </tr>
    </table>
    <div class="d1">
    </div>
    <div class="d2">
    </div>
    </body>
    </html>
    

     

  2. css/style.css
    td{
    /*padding: 100px;*/
    padding-left: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    }
    .d1{
    background-color: red;
    border: solid black 2px;
    margin: 30px;
    padding: 20px;
    width: 50%;
    height: 300px;
    }
    .d2{
    background-color: #188417;
    border: solid #2112CD 10px;
    margin: 60px;
    padding: 20px;
    width: 50%;
    height: 100px;
    }
    

     

網頁設計好好玩(10502)

8. 網站佈局

  1. 自定義盒子模形:內容(content)->留白(padding)->框線(border)->邊距(margin)
    7-1.html
    這個網頁引入一個外部的樣式表 css/style7.css
    因此我們必須在 7-1.html 這個檔案位置底下的「css」資料夾 建立一個外部樣式表檔案 style7.css (相對路徑)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style7.css">
    <title>練習7-1 自定義盒子模式</title>
    </head>
    <body>
    <div class="container">
    <div class="bd">
    <div class="pd">
    <div class="content">
    練習7-1 自定義盒子模式
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    

    css/style7.css
     

    body{
    margin: 0;	
    }
    .container{
    width: 500px;
    height: 200px;
    background-color: #1E0CB9;
    padding: 20px;
    }
    .bd{
    border: solid 20px #D82323;
    background-color: #15DF27;
    }
    .pd{
    background-color: #EFE41B;
    padding: 20px;
    }
    .content{
    background-color: #fff;
    height: 100px;
    padding: 10px;
    }
    

     

  2. 盒子模形的應用

    7-2.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style7-2.css">
    <title>7-2.html</title>
    </head>
    <body>
    <div class="head">
    <div class="nav"></div>
    </div>
    <div class="body">
    <div class="slider">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    <div class="footer-content"></div>
    <div class="footer-nav"></div>
    </div>
    </div>
    </body>
    </html>
    
    style7-2.css
    *{
    margin: 0;
    padding: 0;
    }
    .head{
    height: 50px;
    background-color: #000;
    }
    .nav{
    width: 75%;
    height: 50px;
    margin: 0 auto;
    background-color: #0000FF;
    }
    .body{
    /*background-color: #82EED9;*/
    }
    .slider{
    width: 75%;
    margin: 0 auto;
    height: 300px;
    background-color: #FFFF00;
    }
    

     

  3. 上圖是根據本網站,所建立的html架構,請用網頁表現出來
    7-2.html
    style-72.css

網頁設計好好玩(10502)

9. bootstrap

一、佈署bootstrap 免費樣板

  1. 下載網址:https://startbootstrap.com/template-categories/all/
  2. 請將檔案下載至「github/site」底下
  3. 解壓縮,並修改目錄為「new-age

二、上傳至github

  1. 啟動git
  2. 設定
    git config --global user.name "xxx"
    git config --global user.email "xxx@gmail.com"
  3. 查看訊息
    git config --list
  4. 請在自己目錄下,建立「github
  5. 將github 的 site 數據庫複製回本地端
    cd c:\xxx\github
    git clone xxx
  6. 完成後,請執行(一)
    cd site
    git add .
    git commit -m "20170501"
    git push origin master
  7. 請至學員網站,點自己網址,後面加「/new-age」
    範例

三、設定跳轉至「/new-age」

  1. index.html 頁面轉向
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="refresh" content="0;url=new-age/index.html" />
    </head>
    </html>
    
  2. 當我們連至網站,打開index.html,會馬上轉至「/new-age/index.html」

四、佈署完成,接下來,請將「github/site/new-age」在「sublime text」開一個專案,準備修改網頁

 

網頁設計好好玩(10502)

10. 網站架構

一、整體架構

二、修改index.html

  1. 加入註解
  2. 修改文字

三、複製index.html

  1. 將index.html 複製成 news.html 與 prod.html

四、嵌入google 表單

  1. 登入google雲端硬碟
  2. 確定檔案儲存位置
  3. 新增/google 表單
  4. 問卷:姓名、電話、email、主旨、聯絡事項
  5. 改變外觀(調色盤)、設定(是否登入gmail)、傳送(得到嵌入碼)
  6. 可以先預覽(產生新的試算表)
  7. CSS: style="width:100%;height:1300px;"

 

 

 

 

網頁設計好好玩(10502)

11. 最新消息

一、查出圖片大小

  1. new-age/img/demo-screen-1.jpg   621x1104 px
  2. 請利用影像編輯軟體,做出一樣解析度圖片,然後置換

二、處理「最新消息」的說明

三、處理「最新消息」的首頁「摘要新聞」

  1. 請至google或yahoo上搜尋新聞,4則新聞
  2. 請更換適合圖示
  3. 加上連結
  4. 更新「css/new-age.css」

四、設計獨立新聞頁面

網頁設計好好玩(10502)

12. FastStone Image Viewer

  1. 官網:http://www.faststone.org
  2. 下載:http://www.faststone.org/FSViewerDownload.htm
  3. 請下載「portable」版,解壓縮就可以使用
  4. 點兩下圖片,滑鼠往左,選「裁剪板」即可裁切圖片。

網頁設計好好玩(10502)

13. CSS背景

參考網站:https://www.w3schools.com/cssref/css3_pr_background.asp

codepen:https://codepen.io/pen/

一、背景顏色:background-color

  1. 有效的顏色名稱 :「red」
  2. 16進制值:「#fff」
  3. rgb值:「rgb(255,0,0)」
  4. rgba值:「rgb(255,0,0.5)」:最後一個是透明度 0:完全透明 1:完全不透明
  5. 例:
      background-color: red;
      background-color: #000;
      background-color: rgb(0,0,255);
      background-color: rgba(0,0,255,0.1);

二、背景圖:background-image

  1. background-image: url("http://bootstrap.ugm.com.tw/img/bg/paper.gif");
    
  2. 預設水平、垂直重覆

三、背景重複:background-repeat

  1. 背景圖案不重複
     background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
     background-repeat: no-repeat;
    
  2. 背景圖案在 x-方向重複
      background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
      background-repeat: repeat-x;
    
  3. 背景圖案在 y-方向重複
      background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
      background-repeat: repeat-y;
  4. 背景圖案在 x- 及 y-方向重複
      background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
      background-repeat: repeat;

     

四、背景位置:background-position

  1. background-position 屬性是用來指定背景圖案的位置。它的值可以是:

  2. 兩個字:第一個字為 [top,center,bottom] 中三選一,而第二個字由 [left,center,right] 中三選一。
  3. 兩個百分比:第一個百分比為 x-軸的百分比,第二個為 y-軸的百分比。
  4. 兩個數目:第一個數目為 x-軸的位置,第二個數目為 y-軸的位置。

五、背景附件:background-attachment

  1. background-attachment 屬性是用來指定背景圖案是否在螢幕上固定。這個屬性可能的值為 "fixed" (當網頁捲動時,背景圖案固定不動) 以及 "scroll" (當網頁捲動時,背景圖案會跟著移動)。
  2. 例:https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_attachment

六、CSS3背景:https://www.w3schools.com/css/css3_backgrounds.asp

七、漸層的背景產生器:https://testdrive-archive.azurewebsites.net/graphics/cssgradientbackgroundmaker/

網頁設計好好玩(10502)

14. 綜合練習

一、優等網站

  1. 林育詳:https://s1050022.github.io/site

二、甲等網站

  1. 陳俊富:https://jake54132000.github.io/site/
  2. 陳威程:https://lanyan2513.github.io/site
  3. 葉冠廷:https://103tim.github.io/site/
  4. 林祐緯:https://ks1036403.github.io/site/
  5. 黃永安:https://omg2016.github.io/site/
  6. 洪章原:https://ab2620189.github.io/site/
  7. 陳伯菖:https://roger153.github.io/site/  上課熱心幫忙教導同學
  8. 林韋勤:https://a753258a.github.io/site/
  9. 張崇佑:https://asdfasdf147852.github.io/site/
  10. 杜庭甫:https://black0523.github.io/site/

三、一般網站

  1. 梁景翔:https://wayne930406.github.io/site/
  2. 陳俊霖:https://zxc98081.github.io/site/
  3. 陳展洲:https://a30161257.github.io/site/
  4. 許其瀚:https://hank3458.github.io/site/
  5. 陳奕璇:https://jojo1050175.github.io/site
  6. 曾怡茹:https://ruby20031113.github.io/site/
  7. 蔡旻寬:https://abc34694196.github.io/site/
  8. 林琨哲:https://5179487.github.io/site/
  9. 林佑勳:https://0926212616.github.io/site/
  10. 吳翊誠:https://zhes25322379.github.io/site/
  11. 吳呈耀:https://a4277611.github.io/site/
  12. 鄭程介:https://edcr3322.github.io/site/

四、其他

  1. 陳竣翊:https://johnny0628.github.io/site/

五、加分題

  1. http://tncomu10601.ugm.com.tw/web/20170619.html
  2. 請用bootstrap 建立一個容器
  3. 背景如網頁
  4. 背景圖:https://blackrockdigital.github.io/startbootstrap-new-age/img/bg-pattern.png
  5. 上邊距:100px、寬:80% 高:300px

網頁設計好好玩(10502)

15. 瀑布流

一、HTML

  1. 空白架構
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>20160626 瀑布流</title>
    	<!-- Latest compiled and minified CSS -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    	<!-- Optional theme -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    	
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    	<!-- Latest compiled and minified JavaScript -->
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
    	<h1>瀑布流</h1>
    
    </body>
    </html>

     

  2. 圖片顯示架構
    
    	
    	<div class="container" >
    	  <div class="row">
    	    <div class="col-md-4">
    	      <h2>Image00001</h2>
    	      <img src="https://unsplash.it/500/333?image=1" alt="" class="img-responsive">
    	    </div>
    	    <div class="col-md-4">
    	      <h2>Image00004</h2>
    	      <img src="https://unsplash.it/500/500?image=2" alt="" class="img-responsive">
    	    </div>
    	    <div class="col-md-4">
    	      <h2>Image00002</h2>
    	      <img src="https://unsplash.it/500/333?image=3" alt="" class="img-responsive">
    	    </div>
    	    <div class="col-md-4">
    	      <h2>Image00003</h2>
    	      <img src="https://unsplash.it/500/333?image=4" alt="" class="img-responsive">
    	    </div>
    	    <div class="col-md-4">
    	      <h2>Image00005</h2>
    	      <img src="https://unsplash.it/500/333?image=5" alt="" class="img-responsive">
    	    </div>
    	    <div class="col-md-4">
    	      <h2>Image00006</h2>
    	      <img src="https://unsplash.it/500/333?image=6" alt="" class="img-responsive">
    	    </div>
    	  </div>
    	</div>

     

二、引入

  1. 
    	<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    	

     

三、調用插件

  1. 調用插件
    
    	<script>
    	  $(function(){
    	    $('.masonry').masonry({
    	      itemSelector: '.item'
    	    });
    	  });
    	</script>
    	

    在 row 增加一個類別: masonry
    在 col-md-4 增加一個類別 item

四、其他

  1. 假圖:https://unsplash.it
  2. 例:https://unsplash.it/500/333?image=6
  3. 實例:https://tawan158.github.io/site/20170626.html

網頁設計好好玩(10502)

16. 線上資源

  1. codepen:以後若是有問題,可將語法傳至這裡
  2. chrome擴充套件:ColorPick Eyedropper 顏色擷取器
  3. 大圖下載:https://unsplash.com/
  4. 線上圖片編輯:https://pixlr.com/editor/
  5. 免費去背:https://burner.bonanza.com/