4/23/2016

font awsome 是icon的使用

使用font awsome是icon的library, 可加icon進來豐富網頁

在網頁前要先引用此URL link:

就可以直接使用library內定義好的icon

一般用法可nest在button element裏頭，像下方 element button 後面又nest element i

結果

4/12/2016

什麼是bootstrap? row 和column的用法

bootstrap 是人家寫好的CSS套件，放在網路上open source 給人家include.
就是一種CDN (content delivery network)

其好處有

引用別人寫好的，可以比較快來發展你的WEB
bootstrap 包含HTML、CSS的範本
包含responsive design 就是讓HTML可以fit 到各種平台像是手機、筆電、平板

bootstrap 的button class 有，直接套用，不用在style 裏面先定義(好用耶:p)

btn :a button calss, will form a button like box

btn-block: a entire horizon button to your page width

預先定義好的顏色

btn-primary: button will highlighting to blue color.

btn-info: button will highlighting to light blue color.

btn-danger: button is highlighting to light red color for warning.

bootstrap Grid system
可以把畫面1 row 分為12 column
並可以回應視窗大小，自動調整column 寬度來符合screen size
依大小可分成四個class

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

bootstrap grid system 的規則

必需建在 .container(fix width) 或 .container-fluid(full width) 底下
使用rows來建立水平的column 群組
內容會放進column裏，每一個column可以變成rows的children
可預先定義好.row 或 .col-sm-4 產生grid的輸出
grid可以指定用幾個column來組成，如三等分，就可用平均4個column來組成

一般使用grid的手順為

from http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

範例:

先把同一個群組的element, ex:indoor;outdoor 用div分成同一組，並給予row class
接著給予每一個element 對應的column class,例中 col-xs-6
就是說若在同一個row裏面會把12份分成兩個部分，所以每一個就會佔6個單位，所以是col-xs-6.
若是分成三個部分就會是col-xs-4了

如此一來，所指定的elements就會在同一row裏面了

4/05/2016

自動調適對應視窗大小 responsive design

每個前台的視窗大小不一，有手機，平板，筆電

可用responsive design 來自動對應平台

如此html內容就可以適應各種平台了

首先要在html程式最前端include

就可以使用

container-fluid 這支class來優化html內容

refer:

http://www.minwt.com/webdesign-dev/html/9966.html

six digit xxxxxx可代換出一種顏色, 每兩位數一組，依序各代表red green blue
00代表愈暗, FF代表愈亮
red #FF0000
green #00FF00
blue #0000FF
orange #FFA500
gray #808080
dark gray #111111

縮寫把六位數縮寫成三位數
red #F00

函數呈現
rgb(0,0,0)~(255,255,255)
因為16x16剛好是256

green rgb(0,255,0)
blue rgb(0,0,255)
orange rgb(255,165,00)

4/04/2016

style Body & inherit & priority & override

一般html裏常見的內容區塊有H1.2.3...和body

可以在sytle裏預先定義好body的屬性

如此一來內容就會以定義好的clas來呈現

此外，若還有H1, H2...若沒有特別定義，也都會繼承body的style

當然若H1,H2...沒有要繼承body的property的話，就要特別指定給該行

像上圖，特別指pink-text 給h1，就不會繼承body的class了

若同時指定兩種color給h1,會以style裏面最後定義的class給h1
跟在h1裏 class="style1 style2"的順序沒有關係

一個elements 會有多個 class attribute
但可以用id的方式指定給該elements

Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and in-line styles.

override的優先度
!important>inline style>id>subsequent class

3/21/2016

前端工程師之路

今天趁著補休上freecodecamp練了一下CSS，過了幾個章節後突然想到-別人是怎麼學JS的呢？
所以就上網參考了一下別入成功的過程和心得。
其中看到了一篇很完整的文章
裏面大致的內容是

要很扎實的學習
要從中找到樂趣
要能夠分享-定期寫部落格把心得寫出來
今天的心得

div
division的意思，程式裏面把段落區隔開來好額外進行一些style
是non-self-closing

class
預先定義好在style裏面，然後給每個element 呼叫

element
網頁容的實體，像是

;之類的

padding
rectangler長方型class的屬性，表示此方型內容面積大小
可以定義其上下左右的大小
.red-box {
background-color: red;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;

margine
也是用來定義長方型的屬性，表示此方型距離邊框的長短
.green-box {
background-color: green;
padding: 20px;
margin: 10px;

靠自學就能成功!!

3/16/2016

broad band FAE interview

1. STP
2.IGMP snooping
3.VLAN

東訊
enterprise
總機+電話

broad band
GPON
home GW

home
目口機+室內機+handheld
IP camera
分享器

宅sell
3 year CSO(post sale)
教育訓練
加州+阿姆斯特丹+天津

問題分析及解決
線上 tracking system

現場
大陸西安合頤酒店杭州象緣hotel
丹麥中小學

2 year AE(pre sale)
專案支援

泰國中小學
50 controller x 6K access points
server farm->ISP-(fiber,satilite, winet)school
config keep and mesh

大陸中山中小學
智慧教室，提供WLAN建置方案
quick load balancing +

荷蘭Sbit hotel WLAN upgrade to 11AC

起風33℃