学成在线页面制作
1. 學(xué)成在線頁(yè)面制作
目標(biāo)
- 理解
- 能夠說(shuō)寫單頁(yè)面我們基本的流程
- 能說(shuō)出常見(jiàn)的css初始化語(yǔ)句
- 能說(shuō)出我們CSS屬性書(shū)寫順序
- 應(yīng)用
- 能利用ps切圖
- 能引入外部樣式表
- 能把psd文件轉(zhuǎn)換為html頁(yè)面
學(xué)成在線的目的就是為了串聯(lián)前面的所有知識(shí)。來(lái)一個(gè)春晚大聯(lián)歡。
pink老師：
取義學(xué)有所成，為師之期望，君等成才者也，故曰學(xué)成網(wǎng)是也~~
1.1 前期準(zhǔn)備素材
- 學(xué)成在線PSD源文件
- 開(kāi)發(fā)工具 = PS（切圖） + sublime（代碼） + chrome（測(cè)試）
1.2 前期準(zhǔn)備工作
欲先善其事，必先利其器。 先把我們的前期準(zhǔn)備工作做好， 我們本次采取結(jié)構(gòu)與樣式相分離思想。
1.2 CSS屬性書(shū)寫順序(重點(diǎn))
建議遵循以下順序：
1.3 布局流程
為了提高網(wǎng)頁(yè)制作的效率，布局時(shí)通常有以下的布局流程，具體如下：
1、必須確定頁(yè)面的版心（可視區(qū)）， 我們測(cè)量可得知。
2、分析頁(yè)面中的行模塊，以及每個(gè)行模塊中的列模塊。其實(shí)頁(yè)面布局，就是一行行羅列而成
3、制作HTML結(jié)構(gòu)。我們還是遵循，先有結(jié)構(gòu)，后有樣式的原則。結(jié)構(gòu)永遠(yuǎn)最重要。
4、然后開(kāi)始運(yùn)用盒子模型的原理，通過(guò)DIV+CSS布局來(lái)控制網(wǎng)頁(yè)的各個(gè)模塊。
1.4 頁(yè)面制作
這個(gè)頁(yè)面的版心是 1200像素 每個(gè)版心都要水平居中對(duì)齊，所以，我們干脆把版心定義為：
.w {width: 1200px;margin: auto; }1) 頭部制作
結(jié)構(gòu)圖如下：
- 1號(hào)是版心盒子header 1200 * 42 的盒子水平居中對(duì)齊, 上下給一個(gè)margin值就好了。
- 版心盒子 里面包含 2號(hào)盒子 logo
- 版心盒子 里面包含 3號(hào)盒子 nav導(dǎo)航欄
- 版心盒子 里面包含 4號(hào)盒子 search搜索框
- 版心盒子 里面包含 5號(hào)盒子 user個(gè)人信息
- 注意，要求里面的 4個(gè)盒子 必須都浮動(dòng)
2）banner制作
結(jié)構(gòu)圖如下：
- 1號(hào)盒子是通欄的大盒子banner， 不給寬度，給高度，給一個(gè)藍(lán)色背景。
- 2號(hào)盒子是版心， 要水平居中對(duì)齊。
- 3號(hào)盒子版心內(nèi)，左對(duì)齊 subnav側(cè)導(dǎo)航欄。
- 4號(hào)盒子版心內(nèi)，右對(duì)齊 course 課程。
3）課程表模塊
結(jié)構(gòu)圖如下：
- 1號(hào)盒子 是 228 * 300 的盒子 右浮動(dòng) 注意 浮動(dòng)的元素 不會(huì)有外邊距塌陷的問(wèn)題
- 1號(hào)盒子內(nèi) 分為 上下 兩個(gè) 子盒子
- 2號(hào)子盒子是 上部分 我們命名為 course-hd (hd 是 head 的簡(jiǎn)寫 頭部的意思，我們經(jīng)常用)
- 3號(hào)子盒子是 下部分 我們命名為 course-bd (bd 是 body 的簡(jiǎn)寫 主體的意思，我們經(jīng)常用)
4）精品推薦小模塊
結(jié)構(gòu)圖如下：
- 復(fù)習(xí)點(diǎn)： 因?yàn)槔锩嫒齻€(gè)盒子都要垂直居中，我們利用 繼承性，給 最大的盒子 一個(gè)垂直居中的代碼就好了，還記得 那些 樣式可以繼承嗎？？？ font- line- text- color
- 大盒子水平居中 goods 精品 ，注意此處有個(gè)盒子陰影
- 1號(hào)盒子是標(biāo)題 H3 左側(cè)浮動(dòng)
- 2號(hào)盒子 里面放鏈接 左側(cè)浮動(dòng) goods-item 距離可以控制鏈接的 左右外邊距（注意行內(nèi)元素只給左右內(nèi)外邊距）
- 3號(hào)盒子 右浮動(dòng) mod 修改
5）精品推薦大模塊
結(jié)構(gòu)圖如下：
- 1號(hào)盒子為最大的盒子 box 版心水平居中對(duì)齊
- 2號(hào)盒子為上面部分 box-hd – 里面 左側(cè)標(biāo)題H3 左浮動(dòng) 右側(cè) 鏈接 a 右浮動(dòng)
- 3號(hào)盒子為底下部分 box-bd — 里面是無(wú)序列表 有 10個(gè) 小li 組成
- 小li 外邊距的問(wèn)題， 這里有個(gè)小技巧。 給box-hd 寬度為 1215 就可以一行裝開(kāi)5個(gè) li了
- 復(fù)習(xí)點(diǎn)： 我們用到清除浮動(dòng) 因?yàn)?box-hd 里面的盒子個(gè)數(shù)不一定多少，我們就不給高度了，但是里面的盒子浮動(dòng)了， 影響下面的布局，此時(shí)需要浮動(dòng)
6） 底部模塊制作
結(jié)構(gòu)圖如下：
- 1號(hào)盒子通欄大盒子 底部 footer 給高度 底色是白色
- 2號(hào)盒子版心水平居中
- 3號(hào)盒子版權(quán) copyright 左對(duì)齊
- 4號(hào)盒子 鏈接組 links 右對(duì)齊
2. chrome調(diào)試工具
“工欲善其事，必先利其器”
Chrome瀏覽器不僅可以調(diào)試頁(yè)面、JS、請(qǐng)求、資源、cookie，還可以模擬手機(jī)進(jìn)行調(diào)試。我們現(xiàn)在只是使用html和css，我們先講一下現(xiàn)在常用的調(diào)試。
2.1 怎樣打開(kāi)Chrome的開(kāi)發(fā)者工具？
直接在頁(yè)面上點(diǎn)擊右鍵，然后選擇 “檢查” 快捷鍵 F12 或者 ctrl+shift+i
基本的結(jié)構(gòu)布局是左邊html 右邊是 css
chrome調(diào)試數(shù)值
可以鼠標(biāo)點(diǎn)擊后面的數(shù)值， 按下鍵盤 上箭頭 是 調(diào)大 數(shù)值， 下箭頭是 調(diào)小數(shù)值
快速定位css所在行數(shù)
2.2 Chrome提示的常見(jiàn)布局錯(cuò)誤
1). css單詞書(shū)寫錯(cuò)誤提示
用下圖所示的黑色箭頭，點(diǎn)擊我們需要的 html 元素。
2). css無(wú)顯示
聲明類名和html調(diào)用名不一致 或者 css文件引入不對(duì) 或者 這個(gè)樣式的前面 多余了一些符號(hào)影響的
3). html 結(jié)構(gòu)不匹配(重要)
左側(cè) 展開(kāi)可以看到html 標(biāo)簽是否匹配
4). 通過(guò)顏色判斷盒子
藍(lán)色是 盒子的 寬度高度 青色是 內(nèi)邊距 橙色 是外邊距 通過(guò)這個(gè)很方便的看到盒子給的范圍
5）看看你有如下錯(cuò)誤嗎
總結(jié)
- 上一篇： Linux设备驱动开发基础
- 下一篇： P2P信贷平台业务数据分析