如何目標(biāo)站圖片等素材、浮動(dòng)顯示類型溢出控制

如何下載目標(biāo)站圖片等素材布局(重點(diǎn))1、用火狐：1）打開(kāi)目標(biāo)站，右鍵，查看頁(yè)面信息，媒體，全選，另存為2）右鍵，查看源代碼，另存為3）在源代碼點(diǎn)擊js和css路徑，另存為4）批量更改js和css路徑以及html和css文件里面的圖片路徑dreamweaver正則表達(dá)式批量替換.*?2、用單網(wǎng)頁(yè)扒手布局：layout布局(重中之重)常用的layout屬性（1）float——浮動(dòng)改變文檔的輸出流（2）clear——清除浮動(dòng)（3）overflow——溢出控制（4）display——顯示類型（5）position——定位改變文檔的輸出流浮動(dòng)float浮動(dòng)作用: 1.將整行標(biāo)簽修改成內(nèi)嵌的塊狀標(biāo)簽 2.但是這里的內(nèi)嵌是inline-block;但是他具備了高寬的屬性，就像input概念: 1.改變了文檔流的輸出順序 2.將容器的結(jié)束位置縮短 3.理解成給inline-block一樣的效果!將整行標(biāo)簽和內(nèi)嵌標(biāo)簽變成了內(nèi)嵌中的塊狀浮動(dòng)float浮動(dòng)屬性值說(shuō)明none默認(rèn)值。對(duì)象不浮動(dòng)left對(duì)象左浮動(dòng)right對(duì)象右浮動(dòng)DIV+CSS布局大多數(shù)都利用了浮動(dòng)什么是浮動(dòng)？——改變?cè)瓉?lái)文檔內(nèi)容的輸出（顯示）順序▲（1）float——浮動(dòng)浮動(dòng)float浮動(dòng)注意：１.為什么要出現(xiàn)右浮動(dòng)?這里右浮動(dòng)有自己的利用價(jià)值比如出現(xiàn)more更多這樣的效果需要右浮動(dòng)

兩欄布局的時(shí)候左側(cè)div一般是左浮動(dòng),右側(cè)div一般是右浮動(dòng)2.當(dāng)前面容器浮動(dòng)了,后面div如果寬度夠的話,能上去的需要注意清除浮動(dòng)3.如果一行里面有三個(gè)容器都要在一行,那么一定要三個(gè)容器都加上浮動(dòng),如果第三個(gè)div不加float話,那么他肯定不知道自己的顯示位置到底在哪里?就會(huì)出現(xiàn)該容器的顯示到最下方去了，容器重疊了

如何解決:清除浮動(dòng)

4.當(dāng)最后的一個(gè)容器的真實(shí)寬度[width,margin,padding,border]大于上面一行的冗余寬度,那么這個(gè)容器肯定上不去,再怎么浮動(dòng)都沒(méi)用(父容器寬度固定了，所有的子容器加起來(lái)比他大，最后幾個(gè)肯定浮不上去)清除浮動(dòng)clear浮動(dòng)▲（2）clear——清除浮動(dòng)

作用:為了不影響后面的布局屬性值說(shuō)明none默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象left不允許左邊有浮動(dòng)對(duì)象(不需要記)right不允許右邊有浮動(dòng)對(duì)象(不需要記)both不允許有浮動(dòng)對(duì)象<style>.fl{float:left;}.fr{float:right;}.clear{clear:both;}</style><divstyle="width:500px;border:1pxsolidred;margin:0auto;"> <divstyle="width:250px"class="fl">類容左邊類容左邊類容</div><divclass="fr">右邊類容</div></div><divclass="clear"></div><ahref="####">adfasdfasfdsafdsafd</a>浮動(dòng)何時(shí)使用：不清楚前面div容器里面到底是左浮動(dòng)還是右浮動(dòng),我們這里直接使用clear:both;兩邊都給清除（浮動(dòng)僅僅對(duì)后面的節(jié)點(diǎn)有影響）如何使用：詳見(jiàn)浮動(dòng)塌陷清除浮動(dòng)clear浮動(dòng)塌陷浮動(dòng)▲浮動(dòng)塌陷當(dāng)里面的容器浮動(dòng)了，那么，如果父容器沒(méi)有給高度，就會(huì)塌陷成一條線。<divstyle="border:1pxsolidred;"> <divstyle="float:left;">浮動(dòng)</div></div><divstyle="color:blue;">我沒(méi)有浮動(dòng)，但是我也上去了</div>清除浮動(dòng)解決方案一：(舊方法，由于有overflow:hidden，不適合做帶有二級(jí)菜單的導(dǎo)航欄等效果):1、給浮動(dòng)層的父容器加上一個(gè)overflow:hidden;*zoom:1;/**zoom給IE6看的zoom代表防止IE6、IE7塌陷的一個(gè)屬性,ie6下字體會(huì)不斷的放大,這里后面zoom:1;這里的單位px千萬(wàn)不需要加上*/2、給浮動(dòng)的子容器的父容器后面加上冗余度太高了 <divstyle=“clear:both;”></div>浮動(dòng)float浮動(dòng)▲浮動(dòng)塌陷清除浮動(dòng)解決方案二(不適用于不知道內(nèi)容多高的地方):1、給外面的容器加上一個(gè)高度height:500px;2.使用clear:both;//這個(gè)可以寫(xiě)，可以不寫(xiě)<style>.clear{clear:both;}</style><divclass=“clear”></div>/*放在父容器內(nèi)容最后或者父div下面*/清除浮動(dòng)解決方案三：

min-height最小的高寬，里面浮動(dòng)的容器撐不起來(lái)它min-width最小的寬度(不兼容IE6)清除浮動(dòng)解決方案四(現(xiàn)在通用方法):.clearfix{*zoom:1;}//IE6、IE7父容器不塌陷.clearfix:before,.clearfix:after{display:table;line-height:0;content:"";}

//其他瀏覽器，浮動(dòng)父容器不塌陷

.clearfix:after{clear:both;}//給父容器后面清除浮動(dòng)重置樣式浮動(dòng)*{margin:0px;padding:0px;}::selection{background:#F90;color:#fff;}::-moz-selection{background:#F90;color:#fff;}body{font-size:12px;background:#ccc;font-family:"微軟雅黑","黑體","宋體";}a{text-decoration:none;color:#333;transition:all500ms;}a:hover{text-decoration:underline;color:#F90;}img{border:none;}ul,li,ol{list-style:none;}b,strong{font-weight:normal;}em,i{font-style:normal}u,del{text-decoration:none;}.w980{margin:0auto;width:980px;}.fl{float:left;}.fr{float:right;}.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;line-height:0;content:"";}.clearfix:after{clear:both;}.tl{text-align:left;}.tr{text-align:right;}.tc{text-align:center;}.mt5{margin-top:5px;}.pt5{padding-top:5px;}.mb5{margin-bottom:5px;}.mt10{margin-top:10px;}.blue{color:#1d60d3;}.blueBg{background-color:#1d60d3;}課堂練習(xí)浮動(dòng)▲將如下的HTML代碼用浮動(dòng)顯示為如圖的效果<divid="div1">1</div><divid="div3">3</div><divstyle="clear:both;"id="div2">2</div>課后練習(xí)浮動(dòng)通過(guò)本題掌握的技巧：1、當(dāng)背景圖可以平鋪,比較規(guī)則的時(shí)候,那么可以截一張小圖寬度為1像素,好處:圖片非常小,利于網(wǎng)頁(yè)加載

2、在IE6，display:block會(huì)占一整行，就算外面浮動(dòng)了也沒(méi)用課后練習(xí)圖文列表課后練習(xí)圖文列表2課后練習(xí)帶時(shí)間的新聞列表方法一：litext-align:right；連接左浮動(dòng)(這種方法，時(shí)間不要套標(biāo)簽)方法二：鏈接左浮動(dòng)，時(shí)間右浮動(dòng)。(連接是a標(biāo)簽，時(shí)間用其他標(biāo)簽套起來(lái))在IEtest測(cè)試兩種方法的兼容性。課程提要Overflow—溢出控制作用:如果容器里面的內(nèi)容超出本身容器的高寬尺寸的話,那么就產(chǎn)生溢出問(wèn)題前提是：容器限定了寬高尺寸。課堂練習(xí)Overflow—溢出控制▲寫(xiě)一個(gè)div，用overflow屬性控制其大小永遠(yuǎn)在長(zhǎng)寬在100px以內(nèi)的顯示效果；HomeBaidu實(shí)戰(zhàn)display顯示類型

display--顯示類型<span>我是span內(nèi)容</span><span>我是span內(nèi)容</span><div>我是div內(nèi)容</div><div>我是div內(nèi)容</div><ahref="#">鏈接</a><ahref="#">鏈接</a>

屬性值說(shuō)明block將對(duì)象強(qiáng)制作為塊對(duì)象顯示，后面的html文檔內(nèi)容從新行開(kāi)始none隱藏對(duì)象。不顯示在瀏覽器中。inline將對(duì)象強(qiáng)制作為內(nèi)聯(lián)對(duì)象呈遞，從對(duì)象中刪除行inline-block將對(duì)象做為內(nèi)聯(lián)對(duì)象顯示，但是對(duì)象的內(nèi)容作為塊對(duì)象排列。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被顯示排列在同一行內(nèi)，內(nèi)嵌的塊狀form表單里面的所有標(biāo)簽，全都是內(nèi)嵌標(biāo)簽，并且全都有寬高尺寸,內(nèi)嵌的塊狀inline-block：在IE6中，整行標(biāo)簽不支持，但是內(nèi)聯(lián)標(biāo)簽支持display顯示類型

display--顯示類型作用: 1.將整行標(biāo)簽和內(nèi)嵌標(biāo)簽進(jìn)行一個(gè)互換 2.網(wǎng)上很多一些顯示隱藏二級(jí)菜單都是利用display這個(gè)屬性來(lái)完成的js,jQuery做的功能利用jquery,js的交互事件將網(wǎng)頁(yè)中的css代碼給修改屬性值: block塊狀如同:div標(biāo)簽整行標(biāo)簽有高寬 inline內(nèi)嵌如何:span標(biāo)簽不是整行標(biāo)簽沒(méi)有任何的高寬屬性,他的高寬跟他里面的內(nèi)容有關(guān) inline-block內(nèi)嵌中的塊狀內(nèi)嵌標(biāo)簽,具備了高寬屬性，float之后的標(biāo)簽，就是inline-block none隱藏代表容器消失type="hidden"隱藏框firebug中HTML節(jié)點(diǎn)是灰色效果注意：1、這里的none和visibility:hidden的區(qū)別：前者不占位置，后者占位置2、inline-block在IE6僅支持內(nèi)嵌元素，如a、span、i等等，不支持塊狀的，如div、p等等，解決辦法是：display:inline-block;*zoom:1;*display:inline;display顯示類型

display--顯示類型注意: 1.導(dǎo)航欄中l(wèi)i標(biāo)簽是整行效果,但是現(xiàn)在想讓他在一行顯示,問(wèn)題:

如何將li標(biāo)簽改成一行顯示,而且還具備高寬的屬性呢?

兩種:

一:使用display:inline-block;

二.使用float浮動(dòng)來(lái)完成推薦[兼容性好]課堂練習(xí)display--顯示類型▲寫(xiě)兩個(gè)div，分別用display控制第一個(gè)div為顯示第二個(gè)div為隱藏▲將ul列表的html代碼，顯示如右圖的效果提示：用inline-block必須要在IE8和火狐下測(cè)試<ul><li><ahref="#">鏈接1</a></li><li><ahref="#">鏈接2</a></li><li><ahref="#">鏈接3</a></li></ul>課堂練習(xí)2display--顯示類型用display寫(xiě)一個(gè)二級(jí)菜單定位position

position：定位▲將CSS選擇器選中的對(duì)象在document文檔中進(jìn)行精確位置定位▲以某個(gè)對(duì)象為參考父對(duì)象作為位置參照點(diǎn)，默認(rèn)為body對(duì)象▲作用:將網(wǎng)頁(yè)中一些特定的容器放到特定的位置,這個(gè)位置使用浮動(dòng)不好控制,而且這個(gè)特定位置還在容器的上方!可以將容器定位在網(wǎng)頁(yè)中任何一個(gè)位置!!!效果:1.js圖片滾動(dòng)效果2.js返回頂部插件3.非常多的js特效都是靠定位來(lái)完成的

position：定位以四個(gè)點(diǎn)為原點(diǎn)位置屬性作用：設(shè)定定位對(duì)象的上下左右位置，單位為像素（px）top：距離參考對(duì)象上部的距離bottom：距離參考對(duì)象下方的距離left：距離參考對(duì)象左側(cè)的距離right：距離參考對(duì)象右側(cè)的距離分類

position：定位默認(rèn)狀態(tài)position:static默認(rèn)值加了這個(gè)屬性和不加沒(méi)有任何區(qū)別絕對(duì)定位 position:absolute非常多!!!!!!!!!

一定要有參考點(diǎn):1.默認(rèn)以body為參考點(diǎn)2.父(這里的父標(biāo)簽指的是長(zhǎng)輩都可以)參考點(diǎn)另一種方式:1.給上級(jí)容器加上一個(gè)

position:relative;證明這個(gè)容器是子容器絕對(duì)定位position:absolute的參考點(diǎn)2.如果父容器產(chǎn)生了定位,那么子容器的參考點(diǎn)默認(rèn)會(huì)發(fā)生變化思考：為什么設(shè)置父參考點(diǎn)用相對(duì)定位，而不是絕對(duì)定位

相對(duì)定位position:relative

他的參考點(diǎn)就是當(dāng)前容器，不會(huì)對(duì)周圍的容器產(chǎn)生影響

瀏覽器定位position:fixed特征：相對(duì)于瀏覽器定位,也就是說(shuō)不隨垂直滾動(dòng)條進(jìn)行移動(dòng)固定

IE6不兼容position:fixed屬性如何解決?課后作業(yè),當(dāng)著你們個(gè)人獨(dú)立解決問(wèn)題和分析問(wèn)題的能力!!!

position：定位1.用來(lái)控制容垂直位置css屬性：z-index，并且只有定位了(無(wú)論哪種定位，沒(méi)有定位就沒(méi)有垂直位置。)，才有垂直位置。垂直位置越大,就在上方。z-index:999;這里千萬(wàn)不能加px!!!2、只要使用了定位，z-index就產(chǎn)生了，并且比沒(méi)有定位的元素都高。如果z-index設(shè)為負(fù)數(shù)，就會(huì)比沒(méi)定位的低3.絕對(duì)定位absolute必須要有參考點(diǎn),給父容器加個(gè)relative，就以父容器為參考。如果父容器沒(méi)有加相對(duì)定位relative，則自動(dòng)以body為參考點(diǎn)。4.絕對(duì)定位你在做定位之前一定要知道當(dāng)前容器的參考點(diǎn)到底是哪一個(gè)!!!?。?！5.!!!定位之后,這個(gè)容器的文檔流的輸出順序會(huì)發(fā)生改變,容易引起后面容器的排版6.插入--媒體--swf自動(dòng)生成一段代碼7、插入swf的方法：8.如果二級(jí)菜單在flash動(dòng)畫(huà)的下方,那么這個(gè)時(shí)候需要給二級(jí)菜單增加一個(gè)z-index:999;如果加了z-index，還是不能顯示在flash的上方，就需要把flash設(shè)置為透明。<paramname="wmode"value="transparent"/>9.定位必須和位置樣式進(jìn)行配合使用。注意課程提要

position：定位絕對(duì)定位absolute

position：定位絕對(duì)定位絕對(duì)定位：position="absolute“▲將對(duì)象從文檔流中拖出，用位置屬性控制當(dāng)前對(duì)象▲以上一次設(shè)置定位屬性的父(祖先)對(duì)象為參考對(duì)象進(jìn)行定，即設(shè)置父對(duì)象的position為absolute或者relative，建議用relative，否則會(huì)對(duì)父對(duì)象有影響▲若沒(méi)有