1. 學成在線頁面制作

目標

• 理解
  • 能夠說寫單頁面我們基本的流程
  • 能說出常見的css初始化語句
  • 能說出我們CSS屬性書寫順序
• 應用
  • 能利用ps切圖
  • 能引入外部樣式表
  • 能把psd文件轉換為html頁面

學成在線的目的就是為了串聯前面的所有知識。來一個春晚大聯歡。

pink老師：

取義學有所成，為師之期望，君等成才者也，故曰學成網是也~~

1.1 前期準備素材

• 學成在線PSD源文件
• 開發工具 = PS（切圖） + sublime（代碼） + chrome（測試）

1.2 前期準備工作

欲先善其事，必先利其器。 先把我們的前期準備工作做好， 我們本次采取結構與樣式相分離思想。

創建 study 目錄文件夾 (用于存放我們這個頁面的相關內容)

study目錄內新建images 文件夾 用于保存圖片。

新建index.html 首頁html 文件（以后我們的網站首頁統一規定為index.html)

新建style.css 樣式文件。 我們本次采用外鏈樣式表。

將樣式引入到我們HTML頁面文件中。

樣式表寫入 清除內外邊距樣式，來檢測樣式表是否引入成功。

1.2 CSS屬性書寫順序(重點)

建議遵循以下順序：

布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關系到模式）

自身屬性：width / height / margin / padding / border / background

文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px; }

1.3 布局流程

為了提高網頁制作的效率，布局時通常有以下的布局流程，具體如下：

1、必須確定頁面的版心（可視區）， 我們測量可得知。

2、分析頁面中的行模塊，以及每個行模塊中的列模塊。其實頁面布局，就是一行行羅列而成

3、制作HTML結構。我們還是遵循，先有結構，后有樣式的原則。結構永遠最重要。

4、然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊。

1.4 頁面制作

這個頁面的版心是 1200像素 每個版心都要水平居中對齊，所以，我們干脆把版心定義為：

.w {width: 1200px;margin: auto; }

1) 頭部制作

結構圖如下：

• 1號是版心盒子header 1200 * 42 的盒子水平居中對齊, 上下給一個margin值就好了。
• 版心盒子 里面包含 2號盒子 logo
• 版心盒子 里面包含 3號盒子 nav導航欄
• 版心盒子 里面包含 4號盒子 search搜索框
• 版心盒子 里面包含 5號盒子 user個人信息
• 注意，要求里面的 4個盒子 必須都浮動

2）banner制作

結構圖如下：

• 1號盒子是通欄的大盒子banner， 不給寬度，給高度，給一個藍色背景。
• 2號盒子是版心， 要水平居中對齊。
• 3號盒子版心內，左對齊 subnav側導航欄。
• 4號盒子版心內，右對齊 course 課程。

3）課程表模塊

結構圖如下：

• 1號盒子 是 228 * 300 的盒子 右浮動 注意 浮動的元素 不會有外邊距塌陷的問題
• 1號盒子內 分為 上下 兩個 子盒子
• 2號子盒子是 上部分 我們命名為 course-hd (hd 是 head 的簡寫 頭部的意思，我們經常用)
• 3號子盒子是 下部分 我們命名為 course-bd (bd 是 body 的簡寫 主體的意思，我們經常用)

4）精品推薦小模塊

結構圖如下：

• 復習點： 因為里面三個盒子都要垂直居中，我們利用 繼承性，給 最大的盒子 一個垂直居中的代碼就好了，還記得 那些 樣式可以繼承嗎？？？ font- line- text- color
• 大盒子水平居中 goods 精品 ，注意此處有個盒子陰影
• 1號盒子是標題 H3 左側浮動
• 2號盒子 里面放鏈接 左側浮動 goods-item 距離可以控制鏈接的 左右外邊距（注意行內元素只給左右內外邊距）
• 3號盒子 右浮動 mod 修改

5）精品推薦大模塊

結構圖如下：

• 1號盒子為最大的盒子 box 版心水平居中對齊
• 2號盒子為上面部分 box-hd – 里面 左側標題H3 左浮動 右側 鏈接 a 右浮動
• 3號盒子為底下部分 box-bd — 里面是無序列表 有 10個 小li 組成
• 小li 外邊距的問題， 這里有個小技巧。 給box-hd 寬度為 1215 就可以一行裝開5個 li了
• 復習點： 我們用到清除浮動 因為 box-hd 里面的盒子個數不一定多少，我們就不給高度了，但是里面的盒子浮動了， 影響下面的布局，此時需要浮動

6） 底部模塊制作

結構圖如下：

• 1號盒子通欄大盒子 底部 footer 給高度 底色是白色
• 2號盒子版心水平居中
• 3號盒子版權 copyright 左對齊
• 4號盒子 鏈接組 links 右對齊

2. chrome調試工具

“工欲善其事，必先利其器”

Chrome瀏覽器不僅可以調試頁面、JS、請求、資源、cookie，還可以模擬手機進行調試。我們現在只是使用html和css，我們先講一下現在常用的調試。

2.1 怎樣打開Chrome的開發者工具？

直接在頁面上點擊右鍵，然后選擇 “檢查” 快捷鍵 F12 或者 ctrl+shift+i

基本的結構布局是左邊html 右邊是 css

chrome調試數值

可以鼠標點擊后面的數值， 按下鍵盤 上箭頭 是 調大 數值， 下箭頭是 調小數值

快速定位css所在行數

2.2 Chrome提示的常見布局錯誤

1). css單詞書寫錯誤提示

用下圖所示的黑色箭頭，點擊我們需要的 html 元素。

2). css無顯示

聲明類名和html調用名不一致 或者 css文件引入不對 或者 這個樣式的前面 多余了一些符號影響的

3). html 結構不匹配(重要)

左側 展開可以看到html 標簽是否匹配

4). 通過顏色判斷盒子

藍色是 盒子的 寬度高度 青色是 內邊距 橙色 是外邊距 通過這個很方便的看到盒子給的范圍

5）看看你有如下錯誤嗎

總結

以上是生活随笔為你收集整理的学成在线页面制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。