發表文章

RWD響應設計--要點介紹

圖片
viewport ： 在head裡面設定viewport，讓字體不會隨著裝置而改變大小。 html： width=device-width：寬度隨裝置而改變 initial-scale：初始狀態是一倍 user-scalable=1：0為不能拖拉；1為可以拖拉 maximum-scale=1.5：最大拖拉大小為1.5倍 minimum-scale=1.5：最小拖拉大小為1.5倍 media-query： 在樣式表（ css ）中於不同裝置尺寸中，設定不同的格線寬度。 當物件到達某個裝置大小時，內容物會隨之改變大小或者換行。 Queries 有四種使用方式，分別是  or 、 and 、 not  和  only ，除了 or 使用逗號「,」表現，其他的就直接寫出英文字。 OR 例子如下：螢幕尺寸大於等於 400px 「或」裝置橫放時，字體會變成藍色 50px，反之就是黑色 30px。 h1{ font-size:30px; } @media (min-width:400px), (orientation: portrait){ h1{ font-size:50px; color:red; } } And 使用 AND 必須要所有條件皆滿足，例子如下 h1{ font-size:30px; } @media screen and (min-width:400px) and (max-width:600px){ h1{ font-size:50px; color:blue; } } Only ONLY 可以指定「只有」某種裝置媒體才能套用某些樣式，會寫在 media query 的字首， 目前這種撰寫方式越來越少見，最主要是因為使用舊版裝置媒體的人越來越少，因此直接採用 AND 或 OR 的寫法就能夠符合絕大多數的需求。 NOT NOT 的目的在於排除一些裝置媒體，會寫在 media query 的字首，。 ＊NOT 和 O...
張貼留言
閱讀完整內容

sketch--landing page

圖片
重點摘要 1. 點選主要物件，再按alt，可以看到主要物件與周遭物件的距離 2. 再artbora以外，拖拉出幾個該檔案會用的色塊，並儲存在填色中 3. 將物件做成symbol，以供該物件可以重複利用，並編輯裡面內容 練習出自：https://www.youtube.com/watch?v=Q8t4j9xXg5c
張貼留言
閱讀完整內容

sketch基本操作

圖片
Artbord：每個page都要有一個artbord, 代表每個裝置的大小 ＊在左上角 insert--artbord Page：每個page最好只有一個功能或流程 insert：基本上新增任何元件都在 insert 裡面 如：要新增一個矩形，就可以在insert裡面點選矩形(快捷鍵R＊必須在語言為英文的情況下) ＊矩形必須放在artbord裡面 工具列：點選上面的工具列表，可以客製自己的工具列，預設有下面一組工具列，往工具列方向拉即可，可以再另外把自己額外新增的功能往上拉。 格線（control+G）：View - canvas - show layout(layout setting編輯) 網格：View - canvas - show grid(grid setting編輯) 新增參考線：直接在尺標上面點選要的參考線位置，即可拉出一條參考線。刪除同photoshop拉到尺標上級刪除。右鍵案尺標，點選remove all vertical guides即可一次刪除所有參考線。 ＊把command - 縮小到某個程度，grid即會自動隱藏。 左下角的filter可以根據你的命名去搜尋你要的圖層。 **鎖定圖層：command+ shift +L **複製圖層/page:comand+D
張貼留言
閱讀完整內容

sketch-camera實作

圖片
重點注意 1. 將所要用的顏色，先做成同一顏色的色票，再依深淺做成要 用到色票 2. 將所要弄的顏色放進填色的顏色資料夾中 3. 用陰影幫物件打層次，調他的透明度以及濾鏡效果調到mutiply，目前是利用漸層去創造陰影效果，內陰影和陰影調整情況亦同。
張貼留言
閱讀完整內容

垂直置中 table/table-cell

圖片
利用 table 做出垂直置中 html 基本架構： css table必須給予一個寬、高
張貼留言
閱讀完整內容

CSS選擇器（class/ID/後代/群組）

class選擇器 html <body> <div class="primary-box"> <h2>Primary Box</h2> <p>Some text <em>in the box</em>.</p> </div> <div class="secondary-box"> <h2>Secondary Box</h2> <p>Some text <em>in the box</em>.</p> </div> css .primary-box{ } .secondary-box{ } ID 選擇器 html <div id="monkey"> <p>I am. a monkey.</p> </div> CSS #monkey{ } 後代選擇器 CSS .primary-box em { font-style: italic; color: #6fd6f5; } 群組選擇器 CSS .inner-box h3,.inner-box p{ font-size: 24px; color: #b2acac;}
張貼留言
閱讀完整內容

CSS 表單樣式

HTML Form 語法 <form></form> html語法顯示form裡面是一個表格 <fieldset></fieldset>填表範圍 <legend></legend>表格內容大標 <label></label>表格問題名稱 ＊FIELD 主要用在輸入表格（FORM）。LEGEND 只用在 FIELDSET，宣告 FIELDSET 的標題 <form>    <label for="contact_name">Name</label>    <input type="text" id="contact_name"></input>   <labal for="Contact_email">Email</label>   <input type="text" id="Contact_email"></input>                  </form> 表單元素 文字輸入欄位 <input type="text"></input> email輸入欄位 <input type="email"></input> 送出表單按鈕 submit <input type="submit" value-"send messege"></input> 多行的文字輸入欄位 <textarea cols="X" rows="Y"> </textarea>  <textarea style="width:200px;height:100px;...
張貼留言
閱讀完整內容