?

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

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

?

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

?

Typography排版？

?

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

?

顏色？

?

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

?

背景圖片和文字？

?

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

?

icon圖標(biāo)？

?

● 描述功能或步驟的時(shí)候使用icon
● 在菜單和Link中使用icon
● icon只能頁(yè)面中的配角，不能是主角
● 使用icon fonts，因?yàn)橄啾葓D片分辨率更高

?

留白和布局？

?

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

?

用戶體驗(yàn)？

?

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

?

靈感？

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

?

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

?

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

?

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

?

2、準(zhǔn)備資料素材

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

?

3、原型設(shè)計(jì)

?

4、設(shè)計(jì)階段

?

5、優(yōu)化

?

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

?

6、宿主

?

7、網(wǎng)站維護(hù)

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

?

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

?

Web Fonts?

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

?

柵格？

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

?

flat ui color?

?

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

?

相似顏色的顏色值？

?

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

?

icons?

?

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

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

?

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

?

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

?

div{
??? width:100px;
}

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

?

如果想在div的原始狀態(tài)和hover狀態(tài)間加一個(gè)過(guò)渡效果，應(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;
}

?

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

?

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

?

對(duì)一個(gè)元素設(shè)置的CSS無(wú)效？

?

有時(shí)候會(huì)碰上對(duì)一個(gè)元素設(shè)置CSS怎么設(shè)置都無(wú)效，有一種可能是元素標(biāo)簽的名字寫(xiě)錯(cuò)了。比如把section,寫(xiě)成sectioin。

?

再次，一個(gè)大的背景圖片如何完整呈現(xiàn)在某個(gè)區(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表示頁(yè)面視圖高度

?

讓一個(gè)塊級(jí)元素成圓形？

?

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

?

讓一個(gè)元素絕對(duì)定位？

?

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

position: relative;

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

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

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

?

0, 480px, 768px, 1024px, 1200px，按照由大到小的寬度考慮設(shè)計(jì)，在每一個(gè)寬度區(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è)置字體大小或百分比
● 考慮是否隱藏圖片
● 考慮是否改變圖片的大小
● 考慮某個(gè)元素是否可見(jiàn)

解決chrome下顯示繁體不顯示簡(jiǎn)體漢字？

?

更多工具→編碼→自動(dòng)檢測(cè)

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

?

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

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

?

哪些瀏覽器們以及前綴？

?

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

?

舉例來(lái)說(shuō)：

?

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

?

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

?

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

?

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

創(chuàng)建favicon?

?

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

?

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

?

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

一些基本的SEO技巧？

?

● meta中的content

?

在每一個(gè)頁(yè)面表頭加？

?

?

常識(shí)？

?

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

?

● 塊級(jí)元素才可以float, display:block,默認(rèn)自動(dòng)占100%的寬度

?

● header 頁(yè)頭部分

?

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

?

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

?

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

?

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

?

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

?

● 當(dāng)給元素絕對(duì)定位，常規(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);

?

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

?

● 字母間距 letter-spacing

?

● 單詞間距 word-spacing

?

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

?

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

?

● nav導(dǎo)航條

?

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

?

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

?

● display: block，另起一行，默認(rèn)寬度100%

?

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

?

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

?

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

?

● background-attachment: fixed;背景圖像不會(huì)隨著頁(yè)面其余部分移動(dòng)；默認(rèn)值scroll，表示背景圖片會(huì)隨著頁(yè)面其余部分滾動(dòng)而移動(dòng)

?

● blockquote配合cite標(biāo)簽一同使用

?

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