?

當我們使用HTML5， CSS3，甚至Bootstrap設(shè)計網(wǎng)站的時候，有些方面是必須考慮的，比如字體大小，標題大小，行間距，每行字數(shù)，字體，顏色，背景圖片和文字的搭配，圖標，留白和布局......所有的這些，都不是隨隨便便的，講究一定的原則。本篇收集了使用HTML5和CSS3設(shè)計網(wǎng)站的一些片段。

HTML5和CSS3常用參考網(wǎng)站？

?

● 瀏覽器渲染符合HTML5標準：http://necolas.github.io/normalize.css/
● Google字體：ttps://www.google.com/fonts
● 柵格：http://www.responsivegridsystem.com/
● 扁平顏色：http://flatuicolors.com/
● 選擇顏色值：http://www.0to255.com/
● icon圖標:http://ionicons.com/
● css: https://css-tricks.com/
● js的CDN:http://www.jsdelivr.com/
● 一個CSS屬性在各個瀏覽器的兼容性: http://caniuse.com/
● 創(chuàng)建favicon: http://realfavicongenerator.net/
● 壓縮圖片尺寸：http://optimizilla.com/
● CSS文件最小化：www.minifycss.com
● JS文件最小化：hTp://www.minifyjavascript.com/
● 檢測html代碼：http://validator.w3.org/

?

Typography排版？

?

● 正文字體大?。嚎刂圃?5px-25px之間
● 標題大?。赫龢祟}60px、90px, 副標題32px
● 行間距：120%-150%
● 每行字數(shù)：40個左右漢字，80個左右英文
● 字體：自然、簡潔、現(xiàn)代

?

顏色？

?

● 使用一種主色調(diào)
● 使用顏色工具
● 搭配使用引人注意的顏色
● 不使用純黑
● 紅色：力量，熱情，興奮，能量；橙色：積極，引人注意，快樂的，創(chuàng)新，友好，自信，勇氣；黃色：幸福，好奇，光亮；綠色：融洽，自然，生命，健康；藍色：耐心，平和，穩(wěn)定，可信賴，職業(yè)；紫色：自由，能量，財富，忠誠，神秘，高貴；粉紅：關(guān)心，平和，女性；褐色：自信，放松，舒適，可靠。
● 列出網(wǎng)站項目所使用的顏色列表

?

背景圖片和文字？

?

● 文字放圖片上
● 灰色黑色色調(diào)的背景圖配白色文字
● 文字放圖片中的一個矩形背景區(qū)域內(nèi)
● 模糊背景圖片
● 背景圖片底部漸趨褐色，底部再配白色字體

?

icon圖標？

?

● 描述功能或步驟的時候使用icon
● 在菜單和Link中使用icon
● icon只能頁面中的配角，不能是主角
● 使用icon fonts，因為相比圖片分辨率更高

?

留白和布局？

?

● 留白就是呼吸
● 需要留白，但不能丟失頁面元素的關(guān)聯(lián)性
● 留白能體現(xiàn)頁面元素的關(guān)系
● 用戶瀏覽的起點，內(nèi)容流向符合內(nèi)容本身，留白能引導(dǎo)流向

?

用戶體驗？

?

● 頁面內(nèi)容不僅僅是展示，更是感覺
● 取用戶體驗和業(yè)務(wù)邏輯間的交集

?

靈感？

● 收集靈感
● 理解
● 多問為什么？
● 好設(shè)計的共同點是什么？
● 怎樣設(shè)計HTML和CSS？

?

構(gòu)建網(wǎng)站的7個步驟？

?

1、定義自己的網(wǎng)站項目

?

● 明確目的，是賣產(chǎn)品，受眾
● 了解受眾
● 設(shè)計，始終考慮目的和受眾

?

2、準備資料素材

● 文字信息，圖片，視頻，icon，等等
● 內(nèi)容為先
● 考慮如何導(dǎo)航
● 考慮網(wǎng)站文件結(jié)構(gòu)，站點地圖

?

3、原型設(shè)計

?

4、設(shè)計階段

?

5、優(yōu)化

?

性能、SEO優(yōu)化等

?

6、宿主

?

7、網(wǎng)站維護

讓瀏覽器渲染元素符合現(xiàn)代標準？

?

→http://necolas.github.io/normalize.css/

?

Web Fonts?

→https://www.google.com/fonts

?

柵格？

→參考：http://www.responsivegridsystem.com/

?

flat ui color?

?

→ 參考：http://flatuicolors.com/
→ 選擇格式
→ 點擊某個背景相當于復(fù)制了對應(yīng)的顏色值

?

相似顏色的顏色值？

?

→ 參考：http://www.0to255.com/
→ 點擊 Pick a color
→ 輸入值，再點擊pick color
→ 在列出的相似值列表中選擇顏色

?

icons?

?

→ 參考：http://ionicons.com/
→ 把下載下的ionicons.css文件拷到當前項目，把下載下的fonts文件夾內(nèi)的所有文件拷貝到當前項目的fonts文件夾內(nèi)
→ 在頁面中引用ionicons.css文件

響應(yīng)式設(shè)計？

?

● Fluid grid:所有的頁面元素都是相對單位，比如百分比
● Flexible images:圖片尺寸單位也是相對黨委，比如百分比
● Media queries:針對不同的終端設(shè)置不同的CSS

?

元素狀態(tài)變化的過渡效果？

?

div{
??? width:100px;
}

div:hover{
??? width:300px;
}

?

如果想在div的原始狀態(tài)和hover狀態(tài)間加一個過渡效果，應(yīng)該這樣設(shè)置：

?

div{
??? width:100%;
??? transition:width 2s;
}

div可以是圓形嗎？

?

--可以的，真服了。

?

.someclassname div{
??? color: #e67e22;
??? border: 2px solid #e67e22;
??? display: inline-block;
??? border-radius: 50%;
??? height: 55px;
??? width: 55px;
??? text-align: center;
??? padding: 5px;
??? float: left;
??? font-size: 150%;
??? margin-right: 25px;
}

?

讓一個行內(nèi)元素居中？

?

span li{
??? display:inline-block;
??? width:50px;
??? text-align:center;
??? vertical-align:middle;
??? line-height:120%;
??? margin-top:-5px; //負數(shù)表示拿掉一些空間
}

?

對一個元素設(shè)置的CSS無效？

?

有時候會碰上對一個元素設(shè)置CSS怎么設(shè)置都無效，有一種可能是元素標簽的名字寫錯了。比如把section,寫成sectioin。

?

再次，一個大的背景圖片如何完整呈現(xiàn)在某個區(qū)域，比如section, div中？

?

background-image:linear-radient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url();
background-size:cover;
background-position:center;
height:100vh;//vh表示頁面視圖高度

?

讓一個塊級元素成圓形？

?

height: 50px;
width: 50px;
border-radius: 50%;

?

讓一個元素絕對定位？

?

首先要保證其父類元素設(shè)置為相對定位。

position: relative;

然后再設(shè)置元素為絕對定位。

position: absolute;
top: -5px;
left: -5px;

自適應(yīng)考慮寬度的幾個節(jié)點？

?

0, 480px, 768px, 1024px, 1200px，按照由大到小的寬度考慮設(shè)計，在每一個寬度區(qū)間，看有不順眼的就修理。

?

/*big tablet to 1200px, width smaller thn the 1140px*/
@media only screen and (max-width:1200px){

}

/*small tablet to big tblet from 768px to 1023px*/
@media only screen and (max-width:1023px){

}

/*small phones to small tablets from 481px to 767px*/
@media only screen and (max-width:767px){

}

/*small phones from 0 to 480px*/
@media only screen and (max-width:480px){

}

?

也不要忘了在head部分添加如下：

?

?

哪些方面需要考慮自適應(yīng)？

?

● 重新設(shè)置寬度高度的百分比或大小
● 重新設(shè)置padding的百分比或大小
● 重新設(shè)置margin的百分比或大小
● 重新設(shè)置字體大小或百分比
● 考慮是否隱藏圖片
● 考慮是否改變圖片的大小
● 考慮某個元素是否可見

解決chrome下顯示繁體不顯示簡體漢字？

?

更多工具→編碼→自動檢測

調(diào)整chrome瀏覽器大小的同時查看其寬高？

?

→ 打開開發(fā)者工具
→ 點擊"向下還原"窗口
→ 拖動chrome瀏覽器的任意邊界，在右上角位置顯示當前瀏覽器的大小

通過這個，可以方便地觀察某個元素在寬度發(fā)生改變時對應(yīng)的樣式。(前提時針對該元素設(shè)置了不同寬度下的樣式)

?

哪些瀏覽器們以及前綴？

?

● Android: -webkit-
● Chrome： -webkit-
● IE：-ms-
● Firefox： -moz-
● Safari： -webkit-
● Opera: -o-

?

舉例來說：

?

-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;

?

這樣是不是很麻煩呢？是的，Brackets有一個插件叫"Autoprefixer"幫我們解決這個問題。

?

→ 選擇某頁所有的css文件
→ 編輯--Auto Prefix Selection
→ 可以看到所有的css加上了前綴

?

可以看到，Autoprefixer足夠智能，只有需要前綴的，才加上前綴。

創(chuàng)建favicon?

?

→ http://realfavicongenerator.net/
→ 上傳圖片文件，輸入保存的相對路徑，比如：resources/favicons
→ 點擊"Favicon package"按鈕
→ 把提供的link放到頁面head部分

?

網(wǎng)站項目提速的措施？

?

● 保證清晰度的情況下，盡可能減少圖片尺寸，可以使用的工具：http://optimizilla.com/
● 最小化CSS和JS文件，可以使用的工具：www.minifycss.com 和 hTp://www.minifyjavascript.com/

一些基本的SEO技巧？

?

● meta中的content

?

在每一個頁面表頭加？

?

?

常識？

?

● text-rendering: optimizeLegibility 告訴瀏覽器如何渲染文本，它并沒有作為CSS3的一個標準，而且不同的瀏覽器有不同的渲染默認設(shè)置，嚴格意義上來說，text-rendering并不能完全保證在用戶瀏覽器上按預(yù)想的方式渲染文本。

?

● 塊級元素才可以float, display:block,默認自動占100%的寬度

?

● header 頁頭部分

?

● height: 100vh; 意思是100% viewport height

?

● background-size: cover; 背景圖片覆蓋整個區(qū)域，比如一個div， 一個section

?

● background-position: center;背景圖片居中

?

● 大的背景圖片大概有多大？寬度在2700px-3000px之間，高度在1500px-2000px之間

?

● transform,用來操控元素，傾斜skewing，旋轉(zhuǎn)rotating,移動translating,縮放scaling。比如transform: translate(-50%,-50%);向左移動元素自身寬度的50%，向上移動元素自身高度的50%

?

● 當給元素絕對定位，常規(guī)套路是：position:absolute;width:1000px;top:50%;left:50%;

?

● 在背景圖片上加上一層顏色，比如漸變色：background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(img/h.jpg);

?

● 字體大小和字體粗細的相對性。當字體變大，就要相應(yīng)降低font-weight的值。

?

● 字母間距 letter-spacing

?

● 單詞間距 word-spacing

?

● 鏈接a的幾個狀態(tài)：.classname:link, .classname:visited, .classname:hover, .classname:active

?

● transition，給元素狀態(tài)變化的過渡效果

?

● nav導(dǎo)航條

?

● 圖片縮放：可以讓寬和高的某個值固定，另外一個值設(shè)置為auto，比如：height:100px;width:auto;

?

● :after，在元素后面追加內(nèi)容

?

● display: block，另起一行，默認寬度100%

?

● figure, html5元素標簽，代表一個內(nèi)容單元，里面放圖表、圖片、展示、代碼段等，可以被移除而不影響整個頁面元素

?

● 設(shè)置不透明度，opacity: 0.7;注意：這個背景顏色相關(guān)

?

● .someclassname:first-child 第一個someclass; .someclassname:last-child 最后一個someclass,也可以用.someclassname:last-of-type

?

● background-attachment: fixed;背景圖像不會隨著頁面其余部分移動；默認值scroll，表示背景圖片會隨著頁面其余部分滾動而移動

?

● blockquote配合cite標簽一同使用

?

● 以CSS的方式為元素前面或后面添加一些簡單內(nèi)容：.someclassname:before, someclassname:after