一、網頁布局思路
通過盒子模型，知道大部分html標簽是一個盒子；
通過css浮動，定位，可以讓每個盒子排列成網頁；
一個完整的網頁是由標准流、浮動、定位一起完成布局的，每個都有自己專門的用法；
1、網頁布局准則
多個塊級元素縱向排列找標准流；
多個塊級元素橫向排列找浮動；
為了約束浮動元素的位置，網頁布局一般采用：
1、先用標准流的父元素上下排列，之后內部子元素采用浮動左右排列；
2、一個盒子浮動了，他的兄弟元素也浮動；
3、浮動的盒子只會影響浮動盒子后面的標准流，不影響前面的；
1). 標准流
可以讓盒子上下排列 或者 左右排列，垂直的塊級盒子顯示就用標准流布局；
2). 浮動
可以讓多個塊級元素一行顯示 或者 左右對齊盒子， 多個塊級盒子水平顯示就用浮動布局；
3). 定位
定位最大的特點是有層疊的概念，就是可以讓多個盒子 前后 疊壓來顯示。 但是每個盒子需要測量數值。如果元素自由在某個盒子內移動就用定位布局；
2、層級
通過z-index屬性可以用來設置元素的層級，表示盒子擺放的前后次序；
-
-
-
層級越高，越優先顯示；
-
只有元素開啟了定位，z-index屬性才可以使用；
-
如果定位元素層級一樣，則結構上 下面元素會蓋住上面；
-
父元素的層級再高，也不會蓋住子元素；
-
-
3、布局流程
為了提高網頁制作的效率，布局時通常有以下的整體思路：
-
-
-
必須確定頁面的版心（可視區），測量可知；
-
分析頁面中的行模塊，以及每個行模塊中的列模塊，頁面布局的第一准則；
-
一行中的列模塊經常浮動布局，先確定每個列的大小，之后確定列的位置，頁面布局第二准則；
-
制作HTML結構。我們還是遵循，先有結構，后有樣式的原則。結構永遠最重要，所以，先理清布局結構，在寫代碼尤為重要，需要積累；
-
然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊。
-
-
注意：去掉列表默認的樣式
無序和有序列表前面默認的列表樣式，在不同瀏覽器顯示效果不一樣，而且也比較難看，所以，我們一般上來就直接去掉這些列表樣式就行了。 代碼如下
li { list-style: none; }
4、常見布局技巧
巧妙利用一個技術更快更好的布局：
1、margin負值的運用
2、文字圍繞浮動元素
3、行內塊的巧妙運用
4、CSS三角強化
1.讓每個盒子margin 往左側移動 -1px 正好壓住相鄰盒子邊框
2.鼠標經過某個盒子的時候，提高當前盒子的層級即可（如果沒有有定位，則加相對定位（保留位置），如果有定位，則加z-index）
<style>
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
position: relative;
border: 1px solid blue;
/* 如果li有定位，則利用z-index提高層級 */
z-index: 1;
}
</style>
案例：盒子居中
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%
}
</style>
<body>
<div class="box">
<div class="pic">
<img src="" alt="">
</div>
</div>
</style>
二、CSS屬性書寫順序
1、布局定位屬性：display /position /float /clear /visibility /overflow
2、自身屬性：width /height /margin /padding /border /background
3、文本屬性：color /font /text-decoration /text-align /vertical-align /white-space /break-word
4、其他屬性（CSS3）：content cursor /border-radius /box-shawdow /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,san-serif;
color: #333;
background: rgba(0,0,0,.5);
border-radius: 10px;
}
三、CSS高級技巧
3.1、精靈圖
1、由來：
一個網頁中往往會應用很多小的背景圖像作為修飾，當頁面中的圖像過多時，服務器就會頻繁地接收和發送請求圖片，造成服務器請求壓力過大，這將大大的降低頁面的加載速度；
2、目的：為了有效的減少服務器接收和發送請求的次數，提高頁面的加載速度，提高了訪問效率和用戶體驗，出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧圖）
3、核心原理：將網頁中的一些小背景圖像整合到一張大圖中，這樣服務器就只需要請求一次就可以了；
4、使用精靈圖核心：
（1）精靈技術主要針對於背景圖片，就是把多個小背景圖片整合到一張大圖片中，這個大圖片也稱為 sprites 精靈圖 或者 雪碧圖 ；
（2）移動背景圖片位置， 主要借助於背景位置來實現---background-position ；移動的距離就是這個目標圖片的 x 和 y 坐標，注意網頁中的坐標有所不同 ；
（3）一般情況下精靈圖都是負值。（千萬注意網頁中的坐標： x軸右邊走是正值，左邊走是負值， y軸往下是正值，同理。）
5、優點：
-
-
-
將多個圖片整合為一個，瀏覽器只發送一次請求，就可以同時加載多個圖片；提高了訪問效率和用戶體驗；
-
減小了圖片的總大小，提高請求的速度，增加了用戶體驗；
-
-
6、缺點：
-
-
-
圖片文件還是比較大的。
-
圖片本身放大和縮小會失真。
-
一旦圖片制作完畢想要更換非常復雜。
-
-
此時，有一種技術的出現很好的解決了以上問題，就是字體圖標 iconfont。
3.2、字體圖標
1、特點：字體圖標可以為前端工程師提供一種方便高效的圖標使用方式，展示的是圖標，本質屬於字體。
-
-
-
輕量級：一個字體圖標要比一系列的圖像都小，一但字體加載了，圖標就會馬上渲染出來，減少服務器請求；
-
靈活性：本質是文字，可以隨意改變顏色，產生陰影，透明效果，旋轉燈；
-
兼容性：幾乎支持所有的瀏覽器；
-
-
注意：字體圖標不能代替精靈技術，只是對工作中圖標部分技術的提升和優化；
2、使用場景： 主要用於顯示網頁中通用、常用的一些小圖標。
-
-
-
結構和樣式比較簡單的小圖標，就用字體圖標；
-
結構和樣式復雜的小圖片，就用精靈圖；
-
-
3、字體圖標的下載：
（1） icomoon 字庫 http://icomoon.io 國外服務器，打開網速較慢。
（2）阿里 iconfont 字庫 http://www.iconfont.cn/ 包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用 AI 制作圖標上傳生成。 重點是，免費
（3）awesome圖標
4、字體圖標的引入：
（1）icomoon文件解壓后，將fonts文件夾復制到頁面根目錄下；
（2）在 CSS 樣式中全局聲明字體： 把這些字體文件通過css（style.css）引入到我們頁面中。 （注意字體文件路徑的問題 ）
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
（3）html標簽內添加小圖標
span {
content:'';
font-family:"icomoon";/* 這里面的字體需和 @font-face 里面的一致 */
}
原來的文件夾不要刪，可以追加字體圖標，在select.json里，直接生成最新的字體圖標；
四、CSS 初始化
京東初始化，從 * ｛margin:0;padding:0｝開始；
不同瀏覽器對有些標簽的默認值是不同的，為了消除不同瀏覽器對HTML文本呈現的差異，照顧瀏覽器的兼容；
簡單理解： CSS初始化是指重設瀏覽器的樣式。 (也稱為CSS reset）
比如：
黑體 \9ED1\4F53
宋體 \5B8B\4F53
微軟雅黑 \5FAE\8F6F\96C5\9ED1
五、品優購項目規划
假如需要設計一款網頁，工作流程如下：
用戶提需求——美工PS設置原型圖和效果圖——前端 利用代碼鏈接 做成靜態網頁（代碼鏈接）——后台工程師改為動態網頁（JSP動態服務器代碼）；
流程
-
-
-
品優購項目整體介紹 （制作首頁、列表頁、注冊頁三個頁面） 電商類網站
-
品優購項目學習目的 （里面包含技術較多，能極大鍛煉我們布局技術）
-
開發工具以及技術棧 （切圖用ps， 代碼用Vscode，測試用chrome， 大量使用HTML5+CSS3）
-
-
1、品優購項目搭建工作
1、 需要創建如下文件夾：
| 名稱 | 說明 |
|---|---|
| 項目文件夾 | shoping |
| 樣式類圖片文件夾，不經常更換 | images |
| 樣式文件夾 | css |
| 產品類圖片文件夾，經常更換 | upload |
| 字體類文件夾 | fonts |
| 腳本文件夾 | js |
| 名稱 | 說明 |
|---|---|
| 首頁 | index.html |
| css初始化樣式文件 | base.css |
| css公共樣式文件 | common.css |
有些網站初始化的不太提倡 * { margin: 0; padding: 0; }
比如新浪：
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}
2、模塊化開發
所謂的模塊化：將一個項目按照功能划分， 一個功能一個模塊，互不影響 且重復使用；
代碼也如此，有些樣式和結構在很多頁面都會出現，比如頁面頭部和底部，大部分頁面都有。此時，可以把這些結構和樣式單獨作為一個模塊，然后重復使用;
這里最典型的應用就是 common.css 公共樣式。寫好一個樣式，其余的頁面用到這些相同的樣式;
common.css 公共樣式里面包含版心寬度、清除浮動、頁面文字顏色等公共樣式。
3、網站 favicon 圖標
favicon.ico 一般用於作為縮略的網站標志，它顯示在瀏覽器的地址欄或者標簽上。 目前主要的瀏覽器都支持 favicon.ico 圖標。
-
-
-
制作favicon圖標
-
favicon圖標放到網站根目錄下
-
HTML頁面引入favicon圖標
-
-
1、制作favicon圖標
（1）把品優購圖標切成 png 圖片。
（2）把 png 圖片轉換為 ico 圖標，這需要借助於第三方轉換網站，例如比特蟲：http://www.bitbug.net/
2、favicon圖標放到網站根目錄下
3、 HTML頁面引入favicon圖標
（1）在html 頁面里面的 <head> </head>元素之間引入代碼。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
4、網站 TDK 三大標簽SEO優化
SEO（Search Engine Optimization）漢譯為搜索引擎優化，是一種利用搜索引擎的規則提高網站在有關搜索 引擎內自然排名的方式。
SEO 的目的是對網站進行深度的優化，從而幫助網站獲取免費的流量，進而在搜索引擎上提升網站的排名，提 高網站的知名度。 頁面必須有三個標簽用來符合 SEO 優化。
有SEO專門人員，標簽由我們寫；
網站TDK三大標簽SEO優化
1、title 網站標題
title 具有不可替代性，是我們內頁的第一個重要標簽，是搜索引擎了解網頁的入口和對網頁主題歸屬的最佳判 斷點。
建議：網站名（產品名）- 網站的介紹 （盡量不要超過30個漢字）
例如：
l 京東(JD.COM)-綜合網購首選-正品低價、品質保障、配送及時、輕松購物！
l 小米商城 - 小米5s、紅米Note 4、小米MIX、小米筆記本官方網站
2、description 網站說明
簡要說明我們網站主要是做什么的。
我們提倡，description 作為網站的總體業務和主題概括，多采用“我們是…”、“我們提供…”、“×××網 作為…”、“電話：010…”之類語句。
例如：
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、 家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物 體驗!" />
3、keywords 關鍵字
keywords 是頁面關鍵詞，是搜索引擎的關注點之一。
keywords 最好限制為 6～8 個關鍵詞，關鍵詞之間用英文逗號隔開，采用 關鍵詞1,關鍵詞2 的形式。
例如：
<meta name= " keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配 件,手表,存儲卡,京東" />
對於我們前端人員來說，我們只需要准備好這三個標簽，具體里面的內容，有專門的 SEO 人員准備
網站的首頁一般都是使用 index 命名，比如 index.html 或者 index.php 。
我們開始制作首頁的頭部和底部的時候，根據模塊化開發，樣式要寫到common.css里面。
4、LOGO SEO 優化
1、 logo 里面首先放一個 h1 標簽，目的是為了提權，告訴搜索引擎，這個地方很重要。
2、 h1 里面再放一個鏈接，可以返回首頁的，把 logo 的背景圖片給鏈接即可。
3、為了搜索引擎收錄我們，我們鏈接里面要放文字（網站名稱），但是文字不要顯示出來。
l 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘寶的做法。
l 方法2：直接給 font-size: 0; 就看不到文字了，京東的做法。
4、最后給鏈接一個 title 屬性，這樣鼠標放到 logo 上就可以看到提示文字了
5、footer 底部制作
l footer 頁面底部盒子通欄給一個高度和灰色的背景
l footer 里面有一個大的版心
l 版心里面包含 1 號盒子，mod_service 是服務模塊，mod 是模塊的意思
l 版心里面包含 2 號盒子，mod_help 是幫助模塊
l 版心里面包含 3 號盒子，mod_copyright 是版權模塊
6、main 主體模塊制作
以前書寫的就是模塊化中的公共部分。
main 主體模塊是 index 里面專有的，注意需要新的樣式文件 index.css 。
l main 盒子寬度為 980 像素，位置距離左邊 220px (margin-left ) ，給高度就不用清除浮動
l main 里面包含左側盒子，左浮動，focus 焦點圖模塊
l main 里面包含右側盒子，右浮動，newsflash 新聞快報模塊
7、推薦模塊制作
l 大盒子 recom 推薦模塊 recommend
l 里面包含 2 個盒子， 浮動即可
l 1 號盒子 recom_hd
l 2 號盒子 recom_bd ，注意里面的小豎線
8、樓層區 floor 制作
注意這個 floor ，不要給高度，內容有多少，算多少
第一樓是家用電器模塊： 里面包含兩個盒子
l 1 號盒子 box_hd，給一個高度，有個下邊框，里面分為左右 2 個盒子
l 2 號盒子 box_bd，不要給高度
① box_hd 模塊
l 有高度可以不用清除浮動
l 左邊 h3 ，盒子左浮動
l 右邊 tab_list ，右浮動，因為用到 tab 切換效果，所以里面要用 ul 和 li 來做
② box_bd 模塊
l 根據 tab 切換的原理， tab_content 里面包含 內容部分。 這個內容可以通過ul布局
l 分為 5 個大列，列的寬度不一致
9、品優購列表頁制作
（1） 品優購列表頁制作准備工作
\1. 列表頁面是新的頁面，我們需要新建頁面文件 list.html 。
\2. 因為列表頁的*頭部*和*底部*基本一致，所以我們需要把首頁中的頭部和底部的結構復制過來。
\3. 頭部和底部的樣式也需要，因此 list.html 中還需要引入 common.css 。
\4. 需要新的 list.css 樣式文件，這是列表頁專門的樣式文件。
（2） 列表頁 header 和 nav 修改
l 秒殺盒子 sk（ second kill ） 定位即可
l 1 號盒子左側浮動 sk_list 里面包含 ul 和 li
l 2 號盒子左側浮動 sk_con 里面包含 ul 和 li
（3） 列表頁主體 sk _container
l 1 號盒子 sk _container 給寬度 1200，不要給高度
l 2 號盒子 sk_hd ，插入圖片即可
l 3 號盒子 sk_bd ，里面包含很多的 ul 和 li
10、品優購注冊頁制作
（1） 注冊頁類名命名
注冊頁面： register.html
注意：注冊頁面比較隱私，為了保護用戶信息，我們不需要對當前頁面做SEO優化。
（2）注冊頁布局
（3）registerarea 布局