三部分 附錄（因為暫時不支持插入超鏈接所以部分內容無法顯示）

附錄一 DIV命名規范

• 企業DIV使用頻率高的命名方法
• 網頁內容類
• 標題: title
• 摘要: summary
• 箭頭： arrow
• 商標： label
• 網站標志： logo
• 轉角/圓角：corner
• 橫幅廣告： banner
• 子菜單： subMenu
• 搜索： search
• 搜索框： searchBox
• 登錄： login
• 登錄條：loginbar
• 工具條： toolbar
• 下拉： drop
• 標簽頁： tab
• 當前的： current
• 列表： list
• 滾動： scroll
• 服務： service
• 提示信息： msg
• 熱點：hot
• 新聞： news
• 小技巧： tips
• 下載： download
• 欄目標題： title
• 熱點： hot
• 加入：joinus
• 注冊： regsiter
• 指南： guide
• 友情鏈接： friendlink
• 狀態： status
• 版權： copyright
• 按鈕： btn
• 合作伙伴： partner
• 投票： vote
• 左右中：left right center

• 
  
• 注釋的寫法: /* Footer */ 內容區/* End Footer */
• id的命名:
• 頁面結構
• 容器: container
• 頁頭：header
• 內容：content/container
• 頁面主體：main
• 頁尾：footer
• 導航：nav
• 側欄：sidebar
• 欄目：column
• 頁面外圍控制整體布局寬度：wrapper
• 左右中：left right center

• 導航
• 導航：nav
• 主導航：mainbav
• 子導航：subnav
• 頂導航：topnav
• 邊導航：sidebar
• 左導航：leftsidebar
• 右導航：rightsidebar
• 菜單：menu
• 子菜單：submenu
• 標題: title
• 摘要: summary

• 功能
• 標志：logo
• 廣告：banner
• 登陸：login
• 登錄條：loginbar
• 注冊：regsiter
• 搜索：search
• 功能區：shop
• 標題：title
• 加入：joinus
• 狀態：status
• 按鈕：btn
• 滾動：scroll
• 標簽頁：tab
• 文章列表：list
• 提示信息：msg
• 當前的:current
• 小技巧：tips
• 圖標: icon
• 注釋：note
• 指南：guild
• 服務：service
• 熱點：hot
• 新聞：news
• 下載：download
• 投票：vote
• 合作伙伴：partner
• 友情鏈接：link
• 版權：copyright

• class的命名:
• 顏色:使用顏色的名稱或者16進制代碼,如
• .red { color: red; }
• .f60 { color: #f60; }
• .ff8600 { color: #ff8600; }
• 字體大小,直接使用”font+字體大小”作為名稱,如
• .font12px { font-size: 12px; }
• .font9px {font-size: 9pt; }
• 對齊樣式,使用對齊目標的英文名稱,如
• .left { float:left; }
• .bottom { float:bottom; }
• 標題欄樣式,使用”類別+功能”的方式命名,如
• .barnews { }
• .barproduct { }

• 注意事項::
• 一律小寫;
• 盡量用英文;
• 不加中杠和下劃線;
• 盡量不縮寫，除非一看就明白的單詞.

• 
  
• 推薦的 CSS 書寫順序：
• 顯示屬性
• display
• list-style
• position
• float
• clear
• 自身屬性
• width
• height
• margin
• padding
• border
• background
• 文本屬性
• color
• font
• text-decoration
• text-align
• vertical-align
• white-space
• other text
• content

附錄二 CSS精靈

• CSS精靈原理以及應用
• CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。
• 該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。
• 一個簡單的例子：
• 一張圖片作出一個按鈕的三個狀態
• 一個鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態，a:link，a:hover，a:active <a class="button" href="#">鏈接</a>
• 加入右側的圖片為：200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標滑過、鼠標點擊的狀態。則可以使用CSS進行定義。

a {
 display:block; 
 width:200px; 
 height:65px; 
 line-height:65px; /*定義狀態*/
 text-indent:-2015px; /*隱藏文字*/
 background-image:url(button.png); /*定義背景圖片*/
 background-position:0 0;
 /*定義鏈接的普通狀態，此時圖像顯示的是頂上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定義鏈接的滑過狀態，此時顯示的為中間部分，向下取負值*/
}
a:active {
 background-position:0 -132px; 
 /*定 義鏈接的普通狀態，此時顯示的是底部的部分，向下取負值*/
}

• 更多的CSS雪碧，圖片更復雜，背景定位更精確。可能會用到大量的數值
• 如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
• 優點：
• 減少加載網頁圖片時對服務器的請求次數
• 可以合并多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
• 提高頁面的加載速度
• sprite技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的 GIF只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNGsprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
• 減少鼠標滑過的一些bug
• IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，由于一張圖片即可，所以不會出現這種現象。
• 不足：
• CSS雪碧的最大問題是內存使用
• 影響瀏覽器的縮放功能
• 拼圖維護比較麻煩
• 使CSS的編寫變得困難
• CSS 雪碧調用的圖片不能被打印
• 錯誤得使用 Sprites 影響可訪問性

附錄三 一些tips解決方案

頁面優化實踐

• 從下面的幾個方面可以進行頁面的優化：
• 減少請求數
• 圖片合并
• CSS文件合并
• 減少內聯樣式
• 避免在 CSS中使用 import
• 減少文件大小
• 選擇適合的圖片格式
• 圖片壓縮
• CSS 值縮寫（Shorthand Property)
• 文件壓縮
• 頁面性能
• 調整文件加載順序
• 減少標簽數量
• 調整選擇器長度
• 盡量使用CSS 制作顯示表現
• 增強代碼可讀性與可維護性
• 規范化
• 語義化
• 模塊化

寫DIV+CSS 的一些常識

• 不要使用過小的圖片做背景平鋪
• 這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區域，需要 200200=40, 000 次，占用資源
• 無邊框
• 推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框寬度為零，但邊框樣式、顏色還是會被瀏覽器解析，占用資源
• 慎用 通配符
• 所謂通配符，就是將CSS 中的所有標簽均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標簽。
• CSS的十六進制顏色代碼縮寫
• 習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優孰劣，有待仔細考證。
• 樣式放頭上，腳本放腳下。不內嵌，只外鏈
• 堅決不用 CSS表達式
• 使用 引用樣式表，而不是通過@import 導入。
• 一般來說，PNG比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得優化。
• 千萬不要在 HTML中縮放圖片，一者不好看，二者占資源。
• 正文字體最好用偶數
• 12px、14px、16px，效果非常好。特例，15px。
• block、ul、ol等上下留出至少一倍行距，左側至少兩倍行距，右側隨意。
• 段落之間，至少要有一倍行距
• 強行指定某些元素的 line-height，正文 1.6倍于文字大小，標題1.3倍。
• 中文標點用全角
• 英文夾雜在中文中，左右空格，半角。
• 中文字體的粗體和斜體，遠離較好

常用代碼片段

• 雅虎工程師提供的CSS初始化示例代碼【僅供參考】
• 可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯誤。

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
 margin:0; padding:0; 
}
body {
 background:#fff; 
 color:#555; 
 font-size:14px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
 font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
 font-weight:normal; 
 font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
 font-style:normal; 
 font-weight:normal;
}
a { 
 color:#555; 
 text-decoration:none; 
}
a:hover { 
 text-decoration:underline; 
}
img {
 border:none;
}
ol,ul,li { 
 list-style:none; 
}
input, 
textarea, 
select, 
button { 
 font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
 border-collapse:collapse; 
}
html {
 overflow-y: scroll;
} 
.clearfix:after {
 content: "."; 
 display: block; 
 height:0; 
 clear:both; 
 visibility: hidden;
}
.clearfix { 
 *zoom:1; 
}

• mobile meta標簽

<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

• 表格不被撐開

table-layout: fixed; word-break: break-all;;border-collapse: collapse

• 不設寬高居中

<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
 <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
 <input type=”button” value=”item1″ />
 </span>
</div>

• 透明度的兼容代碼

filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

• 文字溢出點點省略

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

• 清除浮動的幾種方法
• 方法一：投機取巧法 – 不推薦
• 直接一個放到當作最后一個子標簽放到父標簽那兒，此方法屢試不爽，兼容性強
• 方法二：overflow + zoom方法 –不推薦
• .fix{overflow:hidden; zoom:1;}
• 此方法優點在于代碼簡潔，涵蓋所有瀏覽器
• 方法三：after + zoom方法 -推薦–此方法可以說是綜合起來最好的方法了
• clearfix只應用在包含浮動子元素的父級元素上

.fix{zoom:1;}
.fix:after{
 display:block; 
 content:'clear'; 
 clear:both;
 line-height:0; 
 visibility:hidden;
}

• 更多代碼片段詳情
• 實用的60個CSS代碼片段

一些總結

• 自動繼承屬性：
• color
• font
• text-align
• list-style
• …
• 非繼承屬性：
• background
• border
• position
• …
• 具有破壞性的元素：
• float
• display:none;
• position:absoblute/fixed/sticky;
• 具有包裹性的元素：
• display:inline-block/table-cell
• position:absolute/fixed/sticky
• overflow:hidden/scroll
• 消除圖片底部間隙的方法
• 圖片塊狀化-無基線對齊
• img{display:block;}
• 圖片底線對齊
• img{vertical-align:bottom;}
• 行高足夠小 - 基線位置上移
• .box{line-height:0;}

一些概念

• BFC
• BFC全稱”Block Formatting Context” 中文為“塊級格式化上下文”
• 記住這么一句話：BFC元素特性表現原則就是，內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
• 優雅降級(graceful degradation)
• 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容
• 漸進增強 progressive enhancement：
• 是在瀏覽器開啟JavaScript功能后，如果瀏覽器版本不支持某些 JavaScript 能力，我們解決這種問題的方式
• 平穩退化
• 是在瀏覽器沒有JavaScript功能，或沒有開啟JavaScript功能情況下，我們解決這種問題的方式；

學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料，一起學習，一起成長！