html-插入圖片路徑<img>

html-插入圖片路徑`<img>`

在html中的圖片標籤為img，而其一的屬性src則要放入圖片檔案的位置，位置分為兩種

絕對路徑：放上圖片的url位置
相對路徑：相較於目前檔案的位置，找到圖片檔案的儲存位置
1
<img src="" alt="">

方法一：絕對路徑

取得圖片的url位置：在圖片上方，點右鍵選取「複製圖片位址」
將url貼在src屬性中，並儲存
重新整理瀏覽器，網頁成功顯示出圖片

方法二：相對路徑

在專案中，先建立「img」資料夾，並在其中放入圖片檔案
在src屬性中，輸入圖片檔案的相對位置，並儲存
重新整理瀏覽器，網頁成功顯示出圖片

Sketch to CSS

Posted on March 28, 2019

Sketch to CSS

學習來源

youtube影片：從 Sketch 設計到 CSS 切版
codepen案例：0913 demo

使用工具

Sketch：UI 設計軟體
(補充youtube影片：六角學院 - Sketch 介紹)
Codepen：線上編譯器

編譯器初始化設定(Pen Settings)

step1.CSS設定為SCSS

step2.載入icon服務

可以手動直接將下方CDN貼到基本設定欄位中。或是透過畫面中內建的搜尋功能，搜尋：Font-Awesome，CDN將自動被加入欄位中。

1	https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

step3.設定完成(Save&Close)

正式開始切版

切版呈現目標

背景色設定

step1.(SCSS語法)將顏色命名為一個變數

1 2	$bg-color1: #FCF4ED; $bg-color2: #F0C7B2;

step2.設計漸層背景

body{
  height:100vh;/*body設定為裝置高度的100%*/
  background-image:linear-gradient(175deg,$bg-color1,$bg-color1 50%,$bg-color2 50%)
  /*角度175度,開始色,開始色比例,結束色比例*/
}

中間卡片基本設定

step1.先在html中給他一個命名，名為card

1	<div class="card"></div>

step2.在css中定義card的基本樣式

.card{
  background-color:#fff;
  padding:15px;
  height:60vh;
  width:600px;
}

step3.加入：box-sizing屬性

==當你設定一個元素樣式為 box-sizing: border-box;，這個元素的內距和邊框將不會增加元素本身的寬度。==

1
2
3

.card{
  box-sizing:border-box;
}

或者可以用*{}，代表對所有元素統一做設定

1
2
3

*{
  box-sizing:border-box;;
}

step4.為card添加陰影

1	$card-box-shadow: 0 4px 30px #979797;

1
2
3

.card{
  box-shadow:$card-box-shadow;
}

step5.如何讓card置中整個畫面呢？在body中加入對齊的設定！

body{
  display:flex;/*彈性布局*/
  justify-content:center;/*//水平置中*/
  align-items:center;/*垂直置中*/
}

卡片內圖片

step1.先在html中給予一個畫面空間

<div class="card">
    <div class="brand-bg"></div><!--新增這個div作為圖片空間 -->
    <h1>About JENDES</h1>
</div>

step2.先將父元素card定位

1
2
3

.card{
  position:relative;
}

step3.再將子元素brand-bg(遮色片)定位

.brand-bg{
  position:absolute;/*相較於父元素的定位方式 */
  left:0;
  top:0;
  bottom:0;
  width:445px;
 
}

step4.載入圖片url，並相較於遮色片做定位

.brand-bg{
  background-image:url(https://images.unsplash.com/photo-1550939810-cb345b2f4ad7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2632&q=80);
  background-size:527px 633px;/*載入圖片的尺寸 */
  background-position:-41px -10px;/*相較於遮色片的定位 */
}

step5.遮色片作梯形切割

.brand-bg{
     clip-path:polygon(0 0, 339.05px 0,445px 100%,0% 100%); 
     /*四個點的位置依序是 左上,右上,右下,左下*/
}

卡片內文字

step1.先在html中給文字一個區塊畫面

<div class="card">
  <div class="brand-bg"></div>
  <div class="card-block">
    <div class="card-header">
      <h1>About JENDES</h1>
    </div>
    <div class="card-body">
      <p>粉橘色，一個溫柔又有個性的顏色。
        <br/>柔和色相的背後蘊含著明亮活潑的橘彩，卻同時調入了冷靜灰階。 
        <br/>有如生活中的我們，一人扮演著多種角色，每個角色充滿著層次、彈性，無法輕易僅以黑白雙色定義。
      </p>
      <p>讓每道顏色都能在這找到適合的穿著，舒服展現每一個自己。
        <br/>由裡到外，穿出自信自在。
      </p>
      <p>When style shines from inside, no one can define you.
        <br/>You are just who you are. 
      </p>
    </div>
    <div class="card-footer">
      <a href="#" class="btn">＋電子報訂閱</a>
    </div>
  </div>

==p標籤代表文字段落==

==br標籤代表斷行==

step2.定位文字區塊相較於card的位置

.card-block{
  width:318px;
  /*設定右方文字在左方圖層上面 */
  position:relative;
  x-index:3; 

  /*設定裡面的物件排列為flex*/
  /* flex預設是由左至右，可以調整flex-direction:column，改為由上到下== */
  display:flex;
  flex-direction:column;
}

==flex跟position是可以一起使用的，兩個沒有關係;float跟display也沒有關係;flex裡面可以再有flex==

step3.設定card-footer定位在區塊的最下方

.card-footer{
  /*使用auto會自動將空間用空白補滿*/
  margin-top:auto;
}

step4.設定btn樣式

$btn-color:#D8D8D8;
.btn{
  background-color:$btn-color;
  color:#000000;
  width:292px;
  
  padding-top:0.5rem;
  padding-bottom:0.5rem;
  display:block;/*設定區塊元素 */
  text-decoration:none;
  text-align:center;
}

==display:block - 區塊元素，元素會以區塊方式呈現。一個區塊元素會讓其內容從新的一行開始顯示，並盡可能的撐滿容器。==

==display:inline - 行內元素，所有文字或圖片均不換行，也就是全部都會是同一行的意思。==

step5.設定btn的動態hover樣式變化

.btn{
  background-color:$btn-color;
  &:hover,&:focus{
    background-color:darken($btn-color,15%);
  }
}

step6.設定內文字體

h1{
  font-size:32px;
  font-weight:bolder;
  }
.card-header{
  color:#AD5E36;
  font-family:cursive;
  font-weight:bold;
}
p{
  font-size:16px;
  margin-top:16px;
  line-height: 20px;
}
.card-body{
  font-family:"STXihei","FangSong",cursive;
  color:#6D7278;
}

參考資料：CSS 常用中文字型 (Traditional Chinese font family)

step7.加上簽名圖片

.sign-image{
    margin-left:203px;
    margin-top:16px;
    width:115px;
    height:39px;
    background-image:url(https://www.jendesstudio.com/front/assets/images/jenwu.png);
    background-size:115px 39px;
  }

結果呈現

CSS-Box-sizing屬性

Posted on March 28, 2019

CSS-Box-sizing屬性

使用情境

在預設的情況box-sizing: content-box，padding的寬高，會被計算到元素的長寬中;
如果希望元素的內距(padding)和外框(margin)不會增加元素本身的寬高，則可以使用box-sizing: content-box

before

瀏覽器預設值，box-sizing屬性，其值為content-box

==content-box：元素的實際寬高會再加上padding 和 border==

定義box1的寬為300px，高為50px，可是右方用瀏覽器查看元素時，發現尺寸變成330*80，是因為預設的情況，瀏覽將padding與border也算進元素中

after

定義所有元素的box-sizing屬性，其值為border-box

1
2
3

*{
    box-sizing: border-box;
}

==border-box：元素的實際寬高不受padding 和 border影響==

padding不會被增加到元素中，而border則算在元素之內，所以元素實際寬高仍保持為300*50

JavaScript-函式特性(Functions)

Posted on March 28, 2019

學習來源:
(Eloquent JavaScript電子書)

提升(Hoisting)

javascript的執行環境分為兩階段，在執行程式碼(exection)之前，會經歷創建階段(creation)，在創建階段中會將函式及變數先設置在記憶體中，而這個動作稱作「提升(hoisting)」。

函式提升
在執行任何程式碼前，JavaScript 會把「函式宣告初始化」放進記憶體裡面，意思是函式{}的內容都會在創建階段放在記憶體中。
變數提升
在創建階段，電腦的記憶體為a空出記憶體，可是他還不知道他的值為何，會先給予一個undefine的值，等到執行階段賦值時，才會將a的值放進記憶體中。也因此下方案例，印出a並不會出錯，只是它的值為undefine。
1
2
3
4
5
6
console.log(a);
b();
var num = 6; //只要 num 有被宣告，就不會有錯誤
function b(){
console.log('b');
}

陳述式與表達式

表達式 (expression)，程式碼「會」產生(回傳)出一個值

var a=3; //瀏覽器console回傳3，這代表這段程式碼是Expression

10+5;//瀏覽器console回傳15，它也是Expression

a === 3;//回傳true(成立)，它也是Expression

陳述式 (statement)，程式碼「不會」回傳出一個值
if()的()，需要放入一個表達式a===3，但if()本身不會有回傳值，也無法將它賦值火指向變數，因此它是一個陳述式
1
2
3
if(a===3){
console.log('good');
}

函式陳述式 (function statement)

程式碼本身不會執行，又稱做函式宣告，在創建階段就先把函式設定進記憶體，等待被呼叫

1
2
3

funtion doIt(){
    console.log('finished');
}

所以即使先程式碼撰寫先後順序是先呼叫do()再定義funtion do()並不會出錯;因為電腦實際運作的順序是

step0.創建階段先將`funtion do()`設定進記憶體
step1.讓所有程式碼開始執行，此時呼叫`do()`不會出錯

doIt();//step1.程式碼執行呼叫

funtion doIt(){//step0.創建階段已經被設定進記憶體
    console.log('finished');
}

函式表達式 (function expression)
當程式碼執行到=運算子右邊的程式碼，才建立這個函式物件，將其指向變數do
1
2
3
var doIt = function(){
console.log('finish');
}

在創建階段，會先將var do宣告在記憶體中，但沒有定義其值，因此程式碼在執行到do()時會出錯;電腦實際運作的順序是
step0.在記憶體中開一個洞命名do
step1.讓程式碼開始執行，由上往下先執行do()，因為do()本身尚未被定義assign值，所以出錯
step2.執行到 = function(){}才將此匿名函式assign給do

doIt();
var doIt = function(){
    console.log('finish');
}

全域與區域

only functions created new scopes

全域 (global)
宣告在function()之外為全域變數，可以在全域被呼叫，所以在function()內、外呼叫x都不會出錯
1
2
3
4
5
6
var x = 'x';
myF();
function myF(){
console.log("in:"+x);//in:x
}
console.log("out:"+x);//out:x

區域 (local)

區域變數只能作用在function()區域中，出了function()則無法被呼叫

myF();
function myF(){
	let y = 'y';
  	var z = 'z';
  	console.log("in:"+y);//in:y
  	console.log("in:"+z);//in:z
}
console.log("out:"+y);//undefine
console.log("out:"+z);//undefine

若在區域中，重新定義assign給全域變數，則該全域變數的值會改變

var x = 'x1';
myF();
function myF(){
    x = 'x2';
    console.log("in:"+x);//"in:x2"
}
console.log("out:"+x);//"in:x2"

若在區域中，新增一個同名的變數，則其與外部的全域變數為兩個不相干的變數

console.clear();
var x = 'x1';
myF();
function myF(){
	let x = 'x2'
  console.log("in:"+x);//"in:x2"
}
console.log("out:"+x);//"in:x1"

區域內的變數，不得與function()中的傳入參數的命名相同

function myF(x){
  let x = 'x2'//x已經被宣告過了
  console.log("in:"+x);
}

引數(argument)與參數(parameter)

引數：用於呼叫函式的傳入「值」

參數：在函式中用來接引數所宣告的「變數」

plus(1,2,5);// 1,2,5為引數
function plus(a,b,c){ //a,b,c為參數
    console.log(arguments)
}

參數預設值（Default Parameters）

直接在參數中建立預設值

var plus = function(a=4,b=5){
    return a*b;
}
console.log(plus(2,3));//6
console.log(plus(2,));//10
console.log(plus());//20

閉包(Closure)

呼叫函式內的函式，將記憶體封存在內層

function initial(newMoney){
	var money = newMoney || 100
	return function(price){// 這裡是一個閉包
    	money = money - price;//變數money封存於此記憶體內
		return money;
	}
};

執行結果：
p1與p2兩個變數分別創造兩個函式，因此也創造個別的兩個閉包，而閉包內的money值會分別存於各自的記憶體內

若直接執行initial()，其回傳值是一個函式，因此會獲得該匿名函式

遞迴(Recursion)

在函式中呼叫自身同名函式，呼叫者(外層函式)會被先放入堆疊記憶體中，等到被呼叫者(內層函式)被執行完之後，再從堆疊記憶體中取出之前被放入的函式繼續執行。==堆疊(stack) 是「先進後出」的資料結構== ，也因此，最先被呼叫的函式，會最後被取出執行。

function fun(num){
  if(num===0){
    return 1;
  }else{
    return num*fun(num-1)
  }
}
fun(3);//6

執行解讀順序，

3*fun(2);
  2*fun(1);
    1*fun(0);
      1;
    1*1;
  2*1;
3*2;

CSS-position定位：absolute＆relative＆fixed

Posted on March 28, 2019

CSS-position定位：absolute＆relative＆fixed

使用時機

當畫面中的元素需要重疊時，建議可以使用position屬性作定位

預設值(static)

在不設定position屬性的情況，瀏覽器的預設值為static
1
2
3
.box{
position:static;
}
該元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上

相對定位(relative)
css語法
- position的值為relative
- 若’ 沒有 ‘設置其他top、right、bottom、left屬性，則其顯現的位置跟static一樣，會依照瀏覽器預設的配置自動排版在頁面上
- 若’ 有 ‘設置top、right、bottom、left屬性，該元素會「相對地」調整其原本該出現的所在位置
  1
  2
  3
  .box{
  position:relative;
  }

絕對定位(absolute)

css語法
- position的值為absolute
- top、bottom、left、right交互搭配使用，數值可以為負值或百分比
  1
  2
  3
  4
  5
  6
  7
  .box{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  }
==若其外層容器沒有「可以被定位的元素(static以外的元素)」，那麼這個子元素的定位就是相對於該網頁（也就是元素），作上、下、左、右位置的絕對定位（即使外層有包一個父元素，例：container）==
==Q: 如何以父元素作為定位空間?==

==A: 定義父元素的position==
1
2
3
.container{
position:relative;
}
==內層absolute的子元素則會被外層父元素受限，並在父元素的空間作絕對定位==

固定定位(fixed)

css語法
- position的值為fixed
- 使用 top、right、bottom、left屬性來定位，可以為負值。
  1
  2
  3
  4
  5
  .inner{
  position:fixed;
  right: 0px;
  bottom: -100px;
  }
該元素會相對於瀏覽器視窗來定位，即便瀏覽頁面捲動，它還是會固定在相同的位置。

補充：上下疊層(z-index)

在未設置z-index屬性的情況之下，疊層會按照程式碼由上而下畫圖，box1畫完才畫box2，所以box2疊在box1之上
若想要自定義疊層前後，則透過z-index屬性，==「數字越大=越後畫=疊在越上層」==

html&CSS-插入(背景)圖片的作法

Posted on March 27, 2019

html&CSS-插入(背景)圖片的作法

方法一：使用html的`img`標籤

html-插入圖片路徑：絕對路徑 or 相對路徑
圖片寬高
- 直接給予匯入圖片的寬高值，有變形的風險
- 分別相較於父元素寬高的百分比
  
  ==如果使用百分比的width，而沒有給予height，瀏覽器會固定將圖片寬高比例，避免變形的風險==
用css加上邊框樣式

方法二：從css選擇器中定義背景

先在html中提供一個空間

1
2
3

<body>
    <div class="box1">box1</div>
</body>

開始透過css選擇器，定義該空間的樣式(為了顯示整個空間，所以先趁一個底色)
1
background-color: antiquewhite;
==定義該空間的寬高(注意：不等同於照片的寬高！)==
1
2
width:1000px;
height:600px;

定義要匯入的圖片

1	background-image: url("https://images.unsplash.com/photo-1553451193-d4d44c036555?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80");

==定義匯入圖片的長寬==
1
background-size:500px 333px;
設定背景圖片不要重複顯示
1
background-repeat: no-repeat;

定義圖片會不會跟著瀏覽器跑動
可以將背景圖視為下層，透過background-attachment屬性的定義，可以定義下層的背景圖是否要跟著上層的瀏覽的畫面連動位移
- background-attachment:scroll
  不論上層的瀏覽頁面如何捲動，其下方的背景圖會牢牢地跟著上下滑動，所以可視的圖片內容都一樣，不會改變
- background-attachment:fixed
  下層的背景圖片會固定在某個位置，當上層的瀏覽頁面捲動，所視畫面會隨位置的不同而看到不同的圖片內容。甚至，當下層的背景圖片不夠長，即看不到圖片了
定義圖片的位置
background-position 屬性是用來指定背景圖案的位置。
語法：
- 兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。
- 兩個百分比：第一個百分比為 x軸的百分比，第二個為 y軸的百分比。
- 兩個數目：第一個數目為 x軸的位置，第二個數目為 y軸的位置。

html&CSS-在html環境中插入css檔案

Posted on March 27, 2019

html&CSS-在html環境中插入css檔案

先建議一個專案

專案本身為一個資料夾，先為其命名，例:test-project
其中有一個index.html檔案
另外新增一個css資料夾，且其中有一個style.css檔案

引入css檔案

先開啟index.html檔案
在head中，加入link標籤，並且指向style.css檔案的位置
成功引入之後，便可以在style.css進行編輯，透過css選擇器定義樣式，去影響index.html的內容
css選擇器(簡易示範)
在style.css定義h1、p的顏色樣式，並存檔
再次刷新瀏覽頁面，可以看到h1、p的樣式確實被改變了

html-建立html環境

Posted on March 27, 2019

html-建立html環境

基本環境架構

定義網頁的格式
因為html的時代悠久，有許多不同的html版本格式，因此若使用html5格式，需在第一行新增一行定義
1
<!DOCTYPE html>

所有撰寫內容，都先用html包起來，裡面有裡面有兩個標籤： head、body

<html>
    <head>

    </head>
    <body>
        
    </body>
</html>

head:

放置網頁的相關資訊，例：網頁名稱、支援中文編碼模式、載入的css版本、載入的JS版本

<!DOCTYPE html>
<html>
    <head>
        <title>My first web</title>//網頁名稱
        <meta charset="UTF-8">//支援中文編碼模式
    </head>
    <body>
        
    </body>
</html>

該網頁的頁籤變更為「My first web」

body:

所有關於html的程式碼(網頁內容)，都放在body中

<!DOCTYPE html>
<html>
    <head>
        <title>My first web</title>
    </head>
    <body>
        <h1>標題</h1>
        <p>這是文字內容...這是文字內容...這是文字內容...這是文字內容...</p>
        <a href="https://www.google.com/">連結</a>
    </body>
</html>

CSS-浮動定位(float)、清除浮動(clear)

Posted on March 26, 2019

CSS-浮動定位(float)、清除浮動(clear)

浮動定位(float)

float使用時機

<div>本身是區塊元素(block)，即使元素本身長度短於頁面行寬，仍會自動換行

1 2	<div class="box1">box1</div> <div class="box2">box2</div>

.box1{
  width:200px;
  background: #F0C7B2;
  height:50px;
}
.box2{
  width:200px;
  background: #F0780D;
  height:50px;
}

若希望<div>元素可以並行排列，則需要使用float屬性

.box1{
  float:left;
}
.box2{
  float:left;
}

css語法解釋

1	float: 浮動方向;

浮動方向可以用的值有

left（靠左浮動）
right（靠右浮動）
none（預設值，也就是不浮動）
inherit（繼承自父層的屬性）

.box1{
  width:200px;
  background: #F0C7B2;
  height:50px;
  float:left;
}
.box2{
  width:200px;
  background: #F0780D;
  height:50px;
  float:right;
}

換行狀況

即使使用float定位，當排列元素的累積寬度已經超過頁面行寬，就會自動換行

.box1{
  width:200px;
  background: #F0C7B2;
  height:50px;
  float:left;
}
.box2{
  width:800px;
  background: #F0780D;
  height:50px;
  float:left;
}

清除浮動(clear)

使用時機

當前面的元素為浮動元素，後續的區塊元素會從父階層容器開始的地方堆疊起

1
2
3

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

.box1{
  width:200px;
  background: #F0780D;
  height:50px;
  float:left;
}
.box2{
  width:300px;
  background: #AEB6B8;
  height:50px;
  float:left;
}
.box3{
  width:100%;
  background: #F0C7B2;
  height:100px;
}

當後面的元素不想要有float的浮動效果時，為了避免重疊狀況，必須在最後一個浮動元素後方，增加一個元素，並使用clear屬性

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="clearFloat"></div>
<div class="box3">box3</div>

1
2
3

.clearFloat{
  clear:both;
}

CSS-區塊元素(block)與行內元素(inline)

Posted on March 26, 2019

CSS-區塊元素(block)與行內元素(inline)

區塊元素(block)

在新的一行開始
若沒有定義該元素長寬，則會100%佔滿所在空間
例：<div>會佔滿整個區塊(整行)
css語法：display:block;

<div class="block-section">
  <h1>title</h1>
  <small>small subtitle</small>
  <p>here is the content</p>
</div>

.block-section h1{
  display:block;
}
.block-section small{
  display:block;
}
.block-section p{
  display:block;
}

行內元素(inline)

不一定會在新的一行開始
該元素佔有的空間為其內容本身(文字或圖片)之長寬
無法重新自定義長寬
可能其他元素並排(視空間寬度而定)
例：<span>會接續前方元素，不會換行

css語法：display:inline;

<div class="inline-section">
  <h1>title</h1>
  <small>small subtitle</small>
  <p>here is the content</p>
</div>

.inline-section h1{
  display:inline;
}
.inline-section small{
  display:inline;
}
.inline-section p{
  display:inline;
}

html-插入圖片路徑<img>

方法一：絕對路徑

方法二：相對路徑

Sketch to CSS

學習來源

使用工具

編譯器初始化設定(Pen Settings)

step1.CSS設定為SCSS

step2.載入icon服務

step3.設定完成(Save&Close)

正式開始切版

切版呈現目標

背景色設定

中間卡片基本設定

卡片內圖片

卡片內文字

結果呈現

CSS-Box-sizing屬性

使用情境

before

after

提升(Hoisting)

函式提升

變數提升

陳述式與表達式

表達式 (expression)，程式碼「會」產生(回傳)出一個值

陳述式 (statement)，程式碼「不會」回傳出一個值

函式陳述式 (function statement)

函式表達式 (function expression)

全域與區域

全域 (global)

區域 (local)

引數(argument)與參數(parameter)

引數：用於呼叫函式的傳入「值」

參數：在函式中用來接引數所宣告的「變數」

參數預設值（Default Parameters）

閉包(Closure)

遞迴(Recursion)

CSS-position定位：absolute＆relative＆fixed

使用時機

預設值(static)

相對定位(relative)

絕對定位(absolute)

固定定位(fixed)

補充：上下疊層(z-index)

html&CSS-插入(背景)圖片的作法

方法一：使用html的img標籤

方法二：從css選擇器中定義背景

html&CSS-在html環境中插入css檔案

先建議一個專案

引入css檔案

css選擇器(簡易示範)

html-建立html環境

基本環境架構

head:

body:

CSS-浮動定位(float)、清除浮動(clear)

浮動定位(float)

float使用時機

css語法解釋

換行狀況

清除浮動(clear)

使用時機

CSS-區塊元素(block)與行內元素(inline)

區塊元素(block)

行內元素(inline)

html-插入圖片路徑`<img>`

方法一：使用html的`img`標籤