文檔流
文檔流科贬，是指盒子按照html標(biāo)簽編寫的順序依次從上到下，從左到右排列
塊元素占一行，行內(nèi)元素在一行之內(nèi)從左到右排列
先寫的先排列，后寫的排在后面钠右，每個(gè)盒子都占據(jù)自己的位置
文檔流指的是文檔中可現(xiàn)實(shí)的對象在排列時(shí)所占用的位置
將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素仪搔，即為文檔流
也就是說在文檔流中元素默認(rèn)會(huì)緊貼到上一個(gè)元素的右邊
如果右邊不足以放下元素屠升，元素則會(huì)另起一行，在新的一行中繼 續(xù)從左至右擺放
這樣一來每一個(gè)塊元素都會(huì)另起一行誉尖，那么我們?nèi)绻朐谖臋n
流中進(jìn)行布局就會(huì)變得比較麻煩
浮動(dòng)
所謂浮動(dòng)指的是使元素脫離原來的文本流辛掠，在父元素中浮動(dòng)起來
浮動(dòng)使用float屬性
可選值：none：不浮動(dòng)；left：向左浮動(dòng)释牺；right：向右浮動(dòng)
塊級元素和行內(nèi)元素都可以浮動(dòng)萝衩，當(dāng)一個(gè)行內(nèi)元素浮動(dòng)以后將會(huì)自動(dòng)變?yōu)橐?個(gè)塊級元素
當(dāng)一個(gè)塊級元素浮動(dòng)以后，寬度會(huì)默認(rèn)被內(nèi)容撐開没咙，所以當(dāng)漂浮一個(gè)塊級元素時(shí)我們都會(huì)為其指定一個(gè)寬度
當(dāng)一個(gè)元素浮動(dòng)以后猩谊，其下方的元素會(huì)上移，元素中的內(nèi)容將會(huì)圍繞在元素的周圍
浮動(dòng)會(huì)使元素完全脫離文本流祭刚，也就是不再在文檔中在占用位置
元素設(shè)置浮動(dòng)以后牌捷，會(huì)一直向上漂浮直到遇到父元素的邊界或者其他浮動(dòng)元素
元素浮動(dòng)以后即完全脫離文檔流，這時(shí)不會(huì)再影響父元素的高度涡驮，也就是浮動(dòng)元素不會(huì)撐開父元素
浮動(dòng)元素默認(rèn)會(huì)變?yōu)閴K元素暗甥，即使設(shè)置display:inline以后其依然是個(gè)塊元素
浮動(dòng)特性
浮動(dòng)元素有左浮動(dòng)(float:left)和右浮動(dòng)(float:right)兩種
浮動(dòng)的元素會(huì)向左或向右浮動(dòng)，碰到父元素邊界捉捅、浮動(dòng)元素撤防、未浮動(dòng)的元素才停下來?
相鄰浮動(dòng)的塊元素可以并在一行，超出父級寬度就換行?
浮動(dòng)讓行內(nèi)元素或塊元素自動(dòng)轉(zhuǎn)化為行內(nèi)塊元素?
浮動(dòng)元素后面沒有浮動(dòng)的元素會(huì)占據(jù)浮動(dòng)元素的位置棒口，沒有浮動(dòng)的元素內(nèi)的文字會(huì)避開浮動(dòng)的元素寄月，形成文字饒圖的效果? ?
父元素內(nèi)整體浮動(dòng)的元素?zé)o法撐開父元素辜膝，需要清除浮動(dòng)?
浮動(dòng)元素之間沒有垂直margin的合并?
清除浮動(dòng)
clear屬性可以用于清除元素周圍的浮動(dòng)對元素的影響。
也就是元素不會(huì)因?yàn)樯戏匠霈F(xiàn)了浮動(dòng)元素而改變位置漾肮。
可選值：
????????????? left：忽略左側(cè)浮動(dòng)
????????????? right：忽略右側(cè)浮動(dòng)
????????????? both：忽略全部浮動(dòng)
????????????? none：不忽略浮動(dòng)厂抖，默認(rèn)值
方法：
??????? ? 1.父級上增加屬性overflow：hidden
?????????? 2.在最后一個(gè)子元素的后面加一個(gè)空的div，給它樣式屬性 clear:both（不推薦）
?????????? 3.使用成熟的清浮動(dòng)樣式類克懊，clearfix
????????????? .clearfix:after,.clearfix:before{ content: "";display: table;}
????????????? .clearfix:after{ clear:both;}
?????????????? .clearfix{zoom:1;}
清除浮動(dòng)的使用方法：
.con2{... overflow:hidden}
或者
<div class="con2 clearfix">
定位
position屬性可以控制Web瀏覽器如何以 及在何處顯示特定的元素
可以使用position屬性把一個(gè)元素放置到網(wǎng)頁中的任何位置
可選值：
static：默認(rèn)值忱辅，沒有定位，元素出現(xiàn)在正常的文檔流中谭溉，相當(dāng)于取消定位屬性或者不設(shè)置定位屬性
relative：生成相對定位元素耕蝉，元素所占據(jù)的文檔流的位置不變，元素本身相對文檔流的位置進(jìn)行偏移
absolute： 生成絕對定位元素夜只，元素脫離文檔流垒在，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方
????????????????? 相對于上一個(gè)設(shè)置了相對或者絕對或者固定定位的父級元素來進(jìn)行定位
????????????????? 如果找不到扔亥，則相對于body元素進(jìn)行定位场躯。
fixed ：生成固定定位元素，元素脫離文檔流旅挤，不占據(jù)文檔流的位置
??????????? 可以理解為漂浮在文檔流的上方踢关，相對于瀏覽器窗口進(jìn)行定位。
inherit ：從父元素繼承 position 屬性的值
相對定位
每個(gè)元素在頁面的文檔流中都有一個(gè)自然位置
相對于這個(gè)位置對元素進(jìn)行移動(dòng)就稱為相對定位
周圍的元素完全不受此影響
當(dāng)將position屬性設(shè)置為relative時(shí)粘茄，則開啟了元素的相對定位
當(dāng)開啟了相對定位以后签舞，可以使用top、right柒瓣、?bottom儒搭、left四個(gè)屬性對元素進(jìn)行定位
相對定位的特點(diǎn)
如果不設(shè)置元素的偏移量，元素位置不會(huì)發(fā)生改變
相對定位不會(huì)使元素脫離文本流元素
在文本流中的位置不會(huì)改變
相對定位不會(huì)改變元素原來的特性
相對定位會(huì)使元素的層級提升芙贫，使元素可以覆蓋文本流中的元素
絕對定位
絕對定位指使元素相對于html元素或離他最近的祖先定位元素進(jìn)行定位
當(dāng)將position屬性設(shè)置為absolute時(shí)搂鲫，則開啟了元素的絕對定位
當(dāng)開啟了絕對定位以后，可以使用top磺平、right魂仍、 bottom、left四個(gè)屬性對元素進(jìn)行定位
絕對定位的特點(diǎn)
絕對定位會(huì)使元素完全脫離文本流
絕對定位的塊元素的寬度會(huì)被其內(nèi)容撐開
絕對定位會(huì)使行內(nèi)元素變成塊元素
一般使用絕對定位時(shí)會(huì)同時(shí)為其父元素指定一個(gè)相對定位
以確保元素可以相對于父元素進(jìn)行定位
固定定位
固定定位的元素會(huì)被鎖定在屏幕的某個(gè)位置上拣挪，當(dāng)訪問者滾動(dòng)網(wǎng)頁時(shí)擦酌，固定元素會(huì)在屏幕上保持不動(dòng)
當(dāng)將position屬性設(shè)置為fixed時(shí)，則開啟了元素的 固定定位
當(dāng)開啟了固定定位以后菠劝，可以使用top赊舶、right、bottom、left四個(gè)屬性對元素進(jìn)行定位
固定定位的其他特性和絕對定位類似
z-index
當(dāng)元素開啟定位以后就可以設(shè)置z-index這個(gè)屬性
這個(gè)屬性可以提升定位元素所在的層級
z-index可以指定一個(gè)整數(shù)作為參數(shù)
值越大元素顯示的優(yōu)先級越高
也就是z-index值較大的元素會(huì)顯示在網(wǎng)頁的最上層
background-color
background-color屬性用來為元素設(shè)置背景顏色
需要指定一個(gè)顏色值锯岖，當(dāng)指定了一個(gè)顏色以后，整個(gè)元素的可見區(qū)域都會(huì)使用這個(gè) 顏色作為背景色
如果不設(shè)置背景顏色甫何，元素默認(rèn)背景顏色 為透明出吹，實(shí)際上會(huì)顯示父元素的背景顏色
background-image
background-image可以為元素指定背景圖片
和background-color類似，這不過這里使用的是一個(gè)圖片作為背景
需要一個(gè)url地址作為參數(shù)辙喂，url地址需要指向一個(gè)外部圖片的路徑
例如：
???????? background-image: url(1.jpg)
background-repeat
background-repeat用于控制背景圖片的重復(fù)方式
如果只設(shè)置背景圖片默認(rèn)背景圖片將會(huì)使用平鋪的方式捶牢，可以通過該屬性進(jìn)行修改
可選值：
????????????? repeat：默認(rèn)值，圖片左右上下平鋪
????????????? no-repeat：只顯示圖片一次巍耗，不會(huì)平鋪
????????????? repeat-x：沿x軸水平平鋪一張圖片
????????????? repeat-y：沿y軸水平平鋪一張圖片
background-position
background-position用來精確控制背景 圖片在元素中的位置
可以通過三種方式來確定圖片在水平方向 和垂直方向的起點(diǎn)
關(guān)鍵字：top right bottom left center
百分比
數(shù)值
background-attachment
background-attachment用來設(shè)置背景圖 片是否隨頁面滾動(dòng)
可選值：
???????????? scroll：隨頁面滾動(dòng)
???????????? fixed：不隨頁面滾動(dòng)
background
background是背景的簡寫屬性秋麸，通過這個(gè) 屬性可以一次性設(shè)置多個(gè)樣式，而且樣式 的順序沒有要求
例如：
??????? background: green url(1.jpg)?? no-repeatcenter?? centerfixed;
CSS Sprite
CSS Sprites是一種網(wǎng)頁圖片應(yīng)用處理方式
通過這種方式我們可以將網(wǎng)頁中的零星圖 片集中放到一張大圖上
這樣一來炬太，一次請求便可以同時(shí)加載多張圖片灸蟆，大大提高了圖片的加載效率
常用圖片格式
圖片是網(wǎng)頁制作中很重要的素材
圖片有不同的格式，每種格式都有自己的特性
了解這些特效亲族，可以方便我們在制作網(wǎng)頁時(shí)選取適合的圖片格式炒考，圖片格式及特性如下：
1、psd
psd是photoshop的專用格式
UI設(shè)計(jì)師使用photoshop設(shè)計(jì)效果圖霎迫，最后會(huì)將psd格式的效果圖交付給前端工程師
這種格式是不壓縮的斋枢，而且保留了圖層、透明和半透明等圖片信息
所以這種圖片格式的容量相對來說是很大的
前端工程師使用這種格式的效果圖來切圖制作網(wǎng)頁
但是網(wǎng)頁中不會(huì)使用這個(gè)格式的圖片知给，它的作用一是保存圖片的原始數(shù)據(jù)瓤帚，二是方便圖片的修改
2、jpg
jpg是一種有損壓縮格式涩赢，壓縮效率高戈次，容量相對來說最小，網(wǎng)絡(luò)傳輸速度快
它不能存為透明背景筒扒，在網(wǎng)頁中應(yīng)用最廣朝扼，一般在不需要透明背景的時(shí)候就使用這種圖片
3、gif
gif是一種無損壓縮格式的圖片霎肯，最多只有256種顏色擎颖，顏色豐富的圖片轉(zhuǎn)化為這種格式會(huì)顏色失真
它的背景可以是透明的，但不能是半透明的观游，透明背景中的圖像
如果邊緣輪廓是曲線的搂捧，會(huì)產(chǎn)生鋸齒，它還可以保存為動(dòng)畫格式
4懂缕、png
png的目的是為了代替gif圖片
無損壓縮允跑，背景可以是透明或者半透明的
透明圖像邊緣光滑，沒有鋸齒，網(wǎng)頁中需要透明或者半透明背景的圖片聋丝，首選是png圖片
png也是firework的專用格式索烹，也可以包含圖層信息
firework是另外一款可以和photoshop相比的圖像處理軟件
也有少量的UI設(shè)計(jì)師使用這種軟件來設(shè)計(jì)網(wǎng)頁效果圖
他們設(shè)計(jì)的效果圖就是帶圖層的png格式的，碰到這種設(shè)計(jì)師
如果我們習(xí)慣了photoshop切圖弱睦，可以將帶圖層的png效果圖轉(zhuǎn)化成psd圖片再處理
5百姓、webp
它是由谷歌于2010年推出的新一代圖片格式
在壓縮方面比當(dāng)前jpg格式更優(yōu)越，在質(zhì)量相同的情況下
WebP格式圖像的體積要比jpg格式圖像小40%况木，不過這種圖片還沒有得到廣泛的瀏覽器支持
僅在Chrome和Opera上支持垒拢，在其他瀏覽器上需要安裝插件才可以顯示，目前還沒有大規(guī)模使用
位圖和矢量圖
位圖也叫點(diǎn)陣圖火惊，是由一個(gè)個(gè)的方形的像素點(diǎn)排列在一起拼接而成的
位圖在放大時(shí)求类，圖像會(huì)失真
上面講的5種圖像都屬于位圖
矢量圖和位圖組成圖像的原理不同，它的圖像輪廓是由函數(shù)曲線生成的
當(dāng)放大圖像時(shí)屹耐，實(shí)際的原理就是將曲線乘以一個(gè)倍數(shù)尸疆，圖像可以輕易地放大
而且不會(huì)出現(xiàn)像素塊，圖像邊緣也不會(huì)出現(xiàn)鋸齒
svg
svg是一種矢量二維圖形格式惶岭，它是基于xml標(biāo)記語言描述的仓技，可以通過任何文本編輯器創(chuàng)建
它的優(yōu)點(diǎn)是文件容量小，放大不失真俗他，而且背景也可以是透明的
目前大量使用這種格式來制作網(wǎng)頁圖標(biāo)或者網(wǎng)頁地圖
由于它是矢量的脖捻，所以在不同終端屏幕上(pc、手機(jī))都有很好的顯示效果
flash
flash是一種矢量動(dòng)畫文件格式兆衅，曾經(jīng)在網(wǎng)絡(luò)上風(fēng)靡一時(shí)地沮，如今已逐漸退出歷史舞臺(tái)
原因是它的技術(shù)更新跟不上發(fā)展，這種格式既可以是靜態(tài)的圖形羡亩，還可以是多媒體動(dòng)畫
還可以加入用戶交互和數(shù)據(jù)摩疑，這是它曾經(jīng)很流行的原因
這種格式名為swf，flash是對它的統(tǒng)稱
這種格式在網(wǎng)頁中已經(jīng)很少使用了畏铆，它的很多優(yōu)秀特性雷袋，可以用HTML5取代
swf文件中衍生出一種視頻格式flv，它是一種流媒體視頻格式
由于它有文件容量小辞居，可以邊下載楷怒，邊觀看等優(yōu)點(diǎn)，目前廣泛應(yīng)用在視頻網(wǎng)站中
總結(jié)
網(wǎng)頁制作中瓦灶，如果要使用不透明背景的圖片鸠删，就使用jpg圖片
如果要使用透明或者半透明背景的圖片，就使用png圖片
制作網(wǎng)頁圖標(biāo)時(shí)候贼陶，如果圖標(biāo)含多種顏色刃泡，可以使用gif或png圖片
如果圖標(biāo)是單色巧娱，而且要求有很好的顯示效果，可以使用svg烘贴；如果是動(dòng)畫圖標(biāo)禁添，可以使用gif
photoshop常用圖片處理技巧
photoshop是一款優(yōu)秀的圖像處理軟件，作為前端開發(fā)工程師桨踪，掌握它的一些常用功能是必須的
photoshop的常用功能有：選擇老翘、裁剪圖像、修圖馒闷、取色酪捡、插入文字等等
除了這些常用功能叁征，前端還需要掌握制作新圖像纳账、切圖等技巧
本次講解的photoshop版本為cs6
圖片格式轉(zhuǎn)換與壓縮
文件/存儲(chǔ)為（不推薦）選擇圖片類型以及壓縮比
文件/存儲(chǔ)為web所用格式（推薦） 選擇圖片類型以及壓縮比
圖像放縮，平移
使用放縮工具捺疼， 圖像放大縮小疏虫，在圖像上點(diǎn)擊放大，按住alt鍵點(diǎn)擊縮小
快捷鍵Ctrl+“+”放大 Ctrl+“-”縮小啤呼，雙擊此工具可以讓圖像按照原始大小顯示
使用平移工具卧秘， 對圖像進(jìn)行移動(dòng)，在使用其他工具時(shí)官扣，按住空格鍵盤的空格鍵
可以切換到此工具翅敌，移動(dòng)完后松開空格鍵回到原來的工具
雙擊此工具可以讓圖像放縮到顯示區(qū)域完全顯示
新建圖像
執(zhí)行菜單命令 文件/新建 可以新建一張圖片，設(shè)置大小惕蹄，顏色模式選RGB
網(wǎng)頁圖片一般選擇72像素/英寸蚯涮，如果圖像要打印，可設(shè)為300/英寸
背景按情況選透明或白色
移動(dòng)選擇與圖層面板
1卖陵、按住Ctrl遭顶，在圖像上點(diǎn)擊可以選中圖層
2、選擇此工具泪蔫，勾選工具屬性欄上的“自動(dòng)選擇圖層”棒旗，可以在圖像上點(diǎn)擊選中圖層
3、移動(dòng)元素同時(shí)按住Alt鍵可復(fù)制一個(gè)圖層
4撩荣、圖層面板的操作铣揉，包括圖層的顯示隱藏、圖層順序餐曹、新建圖層老速、圖層刪除
針對圖像中選中圖層的操作
1、移動(dòng)
2凸主、自由變換? 執(zhí)行菜單命令 編輯/自由變換
3橘券、拖拽到另一張圖像上完成圖層拷貝
歷史記錄面板
記錄20部操作，可以點(diǎn)擊已經(jīng)記錄的操作步驟回到之前
選擇工具
1、矩形選擇工具
2旁舰、橢圓選擇工具 按住alt+shift鍵可以從中心拉出正圓
3锋华、任意套索工具 用手任意畫出選區(qū)，不精確箭窜，不常用
4毯焕、多邊形套索 可以選擇多邊形物體，對于結(jié)構(gòu)復(fù)雜的物體磺樱，可以點(diǎn)多個(gè)小段來選擇纳猫。
5、磁性套索 可以自動(dòng)在物體邊緣生成選擇線竹捉，但是由于太自動(dòng)了芜辕，所以不夠精確，也不常用块差。
6侵续、魔術(shù)棒選擇工具? 按照點(diǎn)擊的點(diǎn)的顏色范圍來選擇
???? 可以設(shè)置范圍的容差，容差越大憨闰，選擇區(qū)域越大
??? 對于有單色背景的圖像中的元素状蜗，可以用它點(diǎn)選背景，然后反選鹉动，從而選中元素
7轧坎、快速選擇工具? 直接在要選的元素上畫，按照畫的顏色范圍進(jìn)行選擇
8泽示、對圖層創(chuàng)建選區(qū)：按住Ctrl缸血，用鼠標(biāo)點(diǎn)擊對應(yīng)的圖層，在圖層外框生成選區(qū)
選區(qū)的編輯技巧
1边琉、新選區(qū)模式下移動(dòng)選區(qū)
2属百、選區(qū)的加、減变姨、乘族扰，工具屬性欄上設(shè)置
3、調(diào)整邊緣 工具屬性欄或者執(zhí)行菜單命令 選擇/調(diào)整邊緣
4定欧、變換選區(qū) 執(zhí)行菜單命令 選擇/變換選區(qū)渔呵，可對選區(qū)進(jìn)行縮放、移動(dòng)等
5砍鸠、反選 執(zhí)行菜單命令 選擇/反向
6扩氢、取消選擇 執(zhí)行菜單命令 選擇/取消選擇，快捷鍵ctrl+d
選區(qū)特別注意
選區(qū)（螞蟻線）只對當(dāng)前圖層器起作用爷辱，選區(qū)操作失敗一般是當(dāng)前圖層弄錯(cuò)了
裁剪圖像
1录豺、裁切工具
2朦肘、對選區(qū)執(zhí)行菜單命令 圖像/裁剪
3、設(shè)置矩形框大小双饥，創(chuàng)建固定寬高的矩形框媒抠，可進(jìn)行固定尺寸裁剪
針對確定選區(qū)的操作技巧
1、復(fù)制? ? 執(zhí)行菜單命令 編輯/拷貝 快捷鍵ctrl+c
2咏花、粘貼? 執(zhí)行菜單命令 編輯/粘貼 快捷鍵ctrl+v
2趴生、粘貼入? 執(zhí)行菜單命令 編輯/選擇性粘貼/貼入
3、填充? 執(zhí)行菜單命令 編輯/填充
4昏翰、描邊? 執(zhí)行菜單命令 編輯/描邊
5苍匆、刪除? ? 執(zhí)行菜單命令 編輯/清除? 快捷鍵 delete
6、自由變換? 執(zhí)行菜單命令 編輯/自由變換 快捷鍵 ctrl+t
擦除與修復(fù)工具
1棚菊、擦除工具
2浸踩、污點(diǎn)修復(fù)工具
參考線技巧
1、視圖/標(biāo)尺窍株，顯示標(biāo)尺民轴，在標(biāo)尺上按住鼠標(biāo)拖動(dòng)可以拉出參考線
2攻柠、視圖/對齊到/參考線? 讓參考線移動(dòng)時(shí)自動(dòng)對齊到選框或者圖像的邊緣
3球订、視圖/新建參考線 可以精確創(chuàng)建參考線
文本輸入
1、執(zhí)行菜單命令 編輯/首選項(xiàng)/單位和標(biāo)尺 設(shè)置文字的單位
2瑰钮、文本輸入
3冒滩、文本編輯? 屬性工具欄上點(diǎn)擊文本編輯按鈕
取色
1、取色工具浪谴，點(diǎn)擊前景色按鈕开睡，彈出取色對話框，當(dāng)前工具切換成取色工具
2苟耻、點(diǎn)擊前景色按鈕篇恒，當(dāng)前工具自動(dòng)切換到取色工具
圖像大小與畫布大小
1、圖像/圖像大小? 查看和設(shè)置圖像的整體大小
2凶杖、圖像/畫布大小? 查看和設(shè)置圖像的畫板大小
尺寸測量
1胁艰、切片工具? 雙擊切片彈出切片對話框
2、切片選擇工具
3智蝠、矩形框工具腾么，打開信息面板
photoshop批量切圖技巧
切圖，就是從效果圖中把網(wǎng)頁制作需要的小圖片裁剪出來杈湾。?
1解虱、使用psd格式并且?guī)в袌D層的圖像切圖?
2、在圖像上用切片工具切出需要的小圖?
3漆撞、雙擊切片殴泰，給切片命名?
4于宙、執(zhí)行菜單命令 存儲(chǔ)為web所用格式?
5、點(diǎn)選切片悍汛，設(shè)置切片的圖片格式?
6限煞、存儲(chǔ)切片，選擇“所有用戶切片”员凝，點(diǎn)存儲(chǔ)(多個(gè)切片會(huì)存到所選文件夾中的images文件夾中)?
Photoshop制作雪碧圖技巧
雪碧圖署驻，就是將網(wǎng)頁制作中使用的多個(gè)小圖片合并成一個(gè)圖片
使用css技術(shù)將這張合成的圖片應(yīng)用在網(wǎng)頁不同的地方
雪碧圖可以減少網(wǎng)頁加載時(shí)的http請求數(shù)，優(yōu)化網(wǎng)頁性能
步驟：?
使用Photoshop新建一張背景透明的圖片?
將小圖片復(fù)制到此圖片中健霹，排列好每個(gè)圖像的位置旺上，圖片幅面不夠可以用畫布大小調(diào)整大小
按照所有小圖片的范圍裁剪圖片，存為透明背景的png圖片
導(dǎo)航條和導(dǎo)航欄
擁有易用的導(dǎo)航條對于任何網(wǎng)站都很重要糖埋。
通過 CSS宣吱，您能夠把乏味的 HTML 菜單轉(zhuǎn)換為漂亮的導(dǎo)航欄。
導(dǎo)航欄 = 鏈接列表
導(dǎo)航欄需要標(biāo)準(zhǔn)的 HTML 作為基礎(chǔ)瞳别。
在我們的例子中征候，將用標(biāo)準(zhǔn)的 HTML 列表來構(gòu)建導(dǎo)航欄。
導(dǎo)航欄基本上是一個(gè)鏈接列表祟敛，因此使用 <ul> 和 <li> 元素是非常合適的：
實(shí)例
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
現(xiàn)在疤坝，讓我們從列表中去掉圓點(diǎn)和外邊距：
實(shí)例
ul
{
list-style-type:none;
margin:0;
padding:0;
}
list-style-type:none - 刪除圓點(diǎn)
導(dǎo)航欄不需要列表項(xiàng)標(biāo)記
把外邊距和內(nèi)邊距設(shè)置為 0 可以去除瀏覽器的默認(rèn)設(shè)定
以上例子中的代碼是用在垂直、水平導(dǎo)航欄中的標(biāo)準(zhǔn)代碼
垂直導(dǎo)航欄
如需構(gòu)建垂直導(dǎo)航欄馆铁，我們只需要定義 <a> 元素的樣式跑揉，除了上面的代碼之外：
實(shí)例
a
{
display:block;
width:60px;
}
display:block - 把鏈接顯示為塊元素可使整個(gè)鏈接區(qū)域可點(diǎn)擊（不僅僅是文本），同時(shí)也允許我們規(guī)定寬度
width:60px - 塊元素默認(rèn)占用全部可用寬度埠巨。我們需要規(guī)定 60 像素的寬度
注釋：請始終規(guī)定垂直導(dǎo)航欄中 元素的寬度历谍。如果省略寬度，IE6 會(huì)產(chǎn)生意想不到的結(jié)果辣垒。
水平導(dǎo)航欄
有兩種創(chuàng)建水平導(dǎo)航欄的方法望侈。使用行內(nèi)或浮動(dòng)列表項(xiàng)
兩種方法都不錯(cuò)，但是如果您希望鏈接擁有相同的尺寸勋桶，就必須使用浮動(dòng)方法
行內(nèi)列表項(xiàng)
除了上面的“標(biāo)準(zhǔn)”代碼脱衙，構(gòu)建水平導(dǎo)航欄的方法之一是將 <li> 元素規(guī)定為行內(nèi)元素：
實(shí)例
li
{
display:inline;
}
display:inline; - 默認(rèn)地，<li> 元素是塊元素哥遮。在這里岂丘，我們?nèi)コ嗣總€(gè)列表項(xiàng)前后的換行
???????????????????????? 以便讓它們在一行中顯示
對列表項(xiàng)進(jìn)行浮動(dòng)
在上面的例子中，鏈接的寬度是不同的
為了讓所有鏈接擁有相等的寬度眠饮，浮動(dòng) <li> 元素并規(guī)定 <a> 元素的寬度：
實(shí)例
li
{
float:left;
}
a
{
display:block;
width:60px;
}
float:left
使用 float 來把塊元素滑向彼此
display:block
把鏈接顯示為塊元素可使整個(gè)鏈接區(qū)域可點(diǎn)擊（不僅僅是文本）奥帘，同時(shí)也允許我們規(guī)定寬度
width:60px
由于塊元素默認(rèn)占用全部可用寬度，鏈接無法滑動(dòng)至彼此相鄰
我們需要規(guī)定 60 像素的寬度
元素的層級
如果定位元素的層級一樣仪召，則下邊的元素會(huì)覆蓋上邊的元素（上下只文檔中的位置）
當(dāng)元素開啟定位以后就可以設(shè)置z-index這個(gè)屬性
這個(gè)屬性可以提升定位元素所在的層級
z-index可以指定一個(gè)整數(shù)作為參數(shù)寨蹋，值越大元素顯示的優(yōu)先級越高松蒜，也就是z-index
值較大的元素會(huì)顯示在網(wǎng)頁的最上層
沒有開啟定位的元素，不能使用z-index
父元素的層級再高也不會(huì)蓋住子元素
CSS 圖像透明度
創(chuàng)建透明圖像
通過 CSS 創(chuàng)建透明圖像是很容易的
注釋：CSS opacity 屬性是 W3C CSS 推薦標(biāo)準(zhǔn)的一部分
定義透明效果的 CSS3 屬性是opacity
/* 針對 IE8 以及更早的版本 */
img{opacity:0.4;filter:alpha(opacity=40);}
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性opacity來設(shè)定透明度
opacity 屬性能夠設(shè)置的值從 0.0 到 1.0
值越小已旧，越透明
IE8 以及更早的版本使用濾鏡filter:alpha(opacity=x)
x 能夠取的值從 0 到 100秸苗。值越小，越透明
圖像透明度Hover 效果
/* 針對 IE8 以及更早的版本 */
img{opacity:0.4;filter:alpha(opacity=40);}
/* 針對 IE8 以及更早的版本 */
img:hover{opacity:1.0;filter:alpha(opacity=100);}
第一個(gè) CSS 代碼塊類似實(shí)例 1 中的代碼
此外运褪，我們已經(jīng)設(shè)置了當(dāng)鼠標(biāo)指針位于圖像上時(shí)的樣式
在這個(gè)例子中惊楼，當(dāng)指針移動(dòng)到圖像上時(shí)，我們希望圖像是不透明的
對應(yīng)的 CSS 是：opacity=1
IE8 以及更早的瀏覽器：filter:alpha(opacity=100)
當(dāng)鼠標(biāo)指針移出圖像后秸讹，圖像會(huì)再次透明
透明框中的文本
<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
? width: 400px;
? height: 266px;
? background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
? border: 1px solid black;
}
div.transbox
{
width: 338px;
height: 204px;
margin:30px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */filter:alpha(opacity=60);
/* CSS3 standard */opacity:0.6;
}
div.transbox p
{
? margin: 30px 40px;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
div.background{
????????????????????????? width: 400px;
????????????????????????? height: 266px;
????????????????????????? background: url('/i/tulip_peach_blossom_w.jpg') no-repeat; border:
????????????????????????? 1px solid black;
????????????????????????? }???????
div.transbox{
???????????????????? width: 338px;
???????????????????? height: 204px;
???????????????????? margin:30px;
???????????????????? background-color: #ffffff;
???????????????????? border: 1px solid black;
???????????????????? /* for IE */filter:alpha(opacity=60);
??????????????????? /* CSS3 standard */opacity:0.6;
?????????????????? }
div.transbox p{ margin: 0 auto;}
首先檀咙，我們創(chuàng)建一個(gè) div 元素 (class="background")
它有固定的高度和寬度、背景圖像璃诀，以及邊框
然后我們在第一個(gè)div內(nèi)創(chuàng)建稍小的 div (class="transbox")
"transbox" div 有固定的寬度弧可、背景色和邊框 - 并且它是透明的
在透明div 內(nèi)部，我們在 p 元素中加入了一些文本
CSS 背景
CSS 允許應(yīng)用純色作為背景劣欢，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果
CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上
背景色
可以使用background-color 屬性為元素設(shè)置背景色
這個(gè)屬性接受任何合法的顏色值
這條規(guī)則把元素的背景設(shè)置為灰色：
p {background-color: gray;}
如果您希望背景色從元素中的文本向外少有延伸棕诵，只需增加一些內(nèi)邊距：
p {background-color: gray; padding: 20px;}
可以為所有元素設(shè)置背景色，這包括 body 一直到 em 和 a 等行內(nèi)元素
background-color 不能繼承凿将，其默認(rèn)值是 transparent
transparent 有“透明”之意
也就是說校套，如果一個(gè)元素沒有指定背景色，那么背景就是透明的丸相，這樣其祖先元素的背景才能可見
背景圖像
要把圖像放入背景搔确，需要使用background-image 屬性
background-image 屬性的默認(rèn)值是 none彼棍，表示背景上沒有放置任何圖像
如果需要設(shè)置一個(gè)背景圖像灭忠，必須為這個(gè)屬性設(shè)置一個(gè) URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
大多數(shù)背景都應(yīng)用到 body 元素，不過并不僅限于此
下面例子為一個(gè)段落應(yīng)用了一個(gè)背景座硕，而不會(huì)對文檔的其他部分應(yīng)用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}
您甚至可以為行內(nèi)元素設(shè)置背景圖像弛作，下面的例子為一個(gè)鏈接設(shè)置了背景圖像：
a.radio {background-image: url(/i/eg_bg_07.gif);}
理論上講，甚至可以向 textareas 和 select 等替換元素的背景應(yīng)用圖像
不過并不是所有用戶代理都能很好地處理這種情況
另外還要補(bǔ)充一點(diǎn)华匾，background-image 也不能繼承
事實(shí)上映琳，所有背景屬性都不能繼承
背景重復(fù)
如果需要在頁面上對背景圖像進(jìn)行平鋪，可以使用background-repeat 屬性
屬性值 repeat 導(dǎo)致圖像在水平垂直方向上都平鋪蜘拉，就像以往背景圖像的通常做法一樣
repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)萨西，no-repeat 則不允許圖像在任何方向上平鋪
默認(rèn)地，背景圖像將從一個(gè)元素的左上角開始
請看下面的例子：
body? {? background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}
背景定位
可以利用background-position 屬性改變圖像在背景中的位置
下面的例子在 body 元素中將一個(gè)背景圖像居中放置：
body? {? ? background-image:url('/i/eg_bg_03.gif');??
background-repeat:no-repeat;background-position:center;}
為 background-position 屬性提供值有很多方法
首先旭旭，可以使用一些關(guān)鍵字：top谎脯、bottom、left持寄、right 和center
通常源梭，這些關(guān)鍵字會(huì)成對出現(xiàn)娱俺，不過也不總是這樣。還可以使用長度值
如 100px 或5cm废麻，最后也可以使用百分?jǐn)?shù)值荠卷。不同類型的值對于背景圖像的放置稍有差異
關(guān)鍵字
圖像放置關(guān)鍵字最容易理解，其作用如其名稱所表明的
例如烛愧，top right 使圖像放置在元素內(nèi)邊距區(qū)的右上角
根據(jù)規(guī)范油宜，位置關(guān)鍵字可以按任何順序出現(xiàn)
只要保證不超過兩個(gè)關(guān)鍵字 - 一個(gè)對應(yīng)水平方向，另一個(gè)對應(yīng)垂直方向
如果只出現(xiàn)一個(gè)關(guān)鍵字怜姿，則認(rèn)為另一個(gè)關(guān)鍵字是 center
所以验庙，如果希望每個(gè)段落的中部上方出現(xiàn)一個(gè)圖像，只需聲明如下：
p? {? ? background-image:url('bgimg.gif'); background-repeat:no-repeat;background-position:top;}
百分?jǐn)?shù)值
百分?jǐn)?shù)值的表現(xiàn)方式更為復(fù)雜
假設(shè)你希望用百分?jǐn)?shù)值將圖像在其元素中居中社牲，這很容易：
body?
{
?? background-image:url('/i/eg_bg_03.gif');??
?? background-repeat:no-repeat;background-position:50% 50%;
}
這會(huì)導(dǎo)致圖像適當(dāng)放置粪薛，其中心與其元素的中心對齊
換句話說，百分?jǐn)?shù)值同時(shí)應(yīng)用于元素和圖像
也就是說搏恤，圖像中描述為 50% 50% 的點(diǎn)（中心點(diǎn)）與元素中描述為 50% 50% 的點(diǎn)（中心點(diǎn)）對齊
如果圖像位于 0% 0%违寿，其左上角將放在元素內(nèi)邊距區(qū)的左上角
如果圖像位置是 100% 100%，會(huì)使圖像的右下角放在右邊距的右下角
因此熟空，如果你想把一個(gè)圖像放在水平方向 2/3藤巢、垂直方向 1/3 處，可以這樣聲明：
body {background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;background-position:66% 33%;}
如果只提供一個(gè)百分?jǐn)?shù)值息罗，所提供的這個(gè)值將用作水平值掂咒，垂直值將假設(shè)為 50%
這一點(diǎn)與關(guān)鍵字類似
background-position 的默認(rèn)值是 0% 0%，在功能上相當(dāng)于 top left
這就解釋了背景圖像為什么總是從元素內(nèi)邊距區(qū)的左上角開始平鋪迈喉，除非您設(shè)置了不同的位置值
長度值
長度值解釋的是元素內(nèi)邊距區(qū)左上角的偏移
偏移點(diǎn)是圖像的左上角
比如绍刮，如果設(shè)置值為 50px 100px
圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右 50 像素、向下 100 像素的位置上：
body{background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;background-position:50px 100px;}
注意挨摸，這一點(diǎn)與百分?jǐn)?shù)值不同孩革，因?yàn)槠浦皇菑囊粋€(gè)左上角到另一個(gè)左上角
也就是說，圖像的左上角與 background-position 聲明中的指定的點(diǎn)對齊
背景關(guān)聯(lián)
如果文檔比較長得运，那么當(dāng)文檔向下滾動(dòng)時(shí)膝蜈，背景圖像也會(huì)隨之滾動(dòng)
當(dāng)文檔滾動(dòng)到超過圖像的位置時(shí)，圖像就會(huì)消失
您可以通過background-attachment 屬性防止這種滾動(dòng)
通過這個(gè)屬性熔掺，可以聲明圖像相對于可視區(qū)是固定的（fixed）饱搏，因此不會(huì)受到滾動(dòng)的影響：
body{background-image:url(/i/eg_bg_02.gif);? background-repeat:no-repeat;background-attachment:fixed}
background-attachment 屬性的默認(rèn)值是 scroll，也就是說置逻，在默認(rèn)的情況下推沸，背景會(huì)隨文檔滾動(dòng)
CSS 背景屬性
background簡寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中
background-attachment诽偷，背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
background-color坤学，設(shè)置元素的背景顏色
background-image疯坤，把圖像設(shè)置為背景
background-position，設(shè)置背景圖像的起始位置
background-repeat深浮，設(shè)置背景圖像是否及如何重復(fù)
css解決圖片閃爍
做完功能以后压怠，發(fā)現(xiàn)在第一次切換圖片時(shí)
會(huì)發(fā)現(xiàn)圖片有一個(gè)非常快的閃爍飞苇，這個(gè)閃爍會(huì)造成一次不佳的用戶體驗(yàn)
為了解決該問題菌瘫，可以將三個(gè)圖片整合為一張圖片
這樣可以同時(shí)將三張圖片一起加載，就不會(huì)出現(xiàn)閃爍的問題了
然后再通過background-position來切換要顯示的圖片的位置布卡，這種技術(shù)叫做圖片整合技術(shù)（CSS-Sprite）
優(yōu)點(diǎn)：
1? 將多個(gè)圖片整合為一張圖片(雪碧圖）里雨让，瀏覽器只需要發(fā)送一次請求，可以同時(shí)加載多個(gè)圖片忿等，提高訪問效率栖忠，提高了用戶體驗(yàn)。
2? 將多個(gè)圖片整合為一張圖片贸街，減小了圖片的總大小庵寞，提高請求的速度，增加了用戶體驗(yàn)
