《HYLI5教程課件》-《HYLI5教程課件》-第七章 網(wǎng)頁布局_第1頁
《HYLI5教程課件》-《HYLI5教程課件》-第七章 網(wǎng)頁布局_第2頁
《HYLI5教程課件》-《HYLI5教程課件》-第七章 網(wǎng)頁布局_第3頁
《HYLI5教程課件》-《HYLI5教程課件》-第七章 網(wǎng)頁布局_第4頁
《HYLI5教程課件》-《HYLI5教程課件》-第七章 網(wǎng)頁布局_第5頁
已閱讀5頁，還剩62頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

部門：九江職業(yè)技術(shù)學(xué)院

匯報(bào)人：代飛2021網(wǎng)頁布局技術(shù)0403CSS3+DIV技術(shù)布局02階段案例01框架布局目錄CONTENT階段案例框架布局01框架主要是用來把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁。訪問者瀏覽站點(diǎn)時(shí)，可以使某個(gè)區(qū)域的文檔永遠(yuǎn)不更改，但可通過導(dǎo)航條的鏈接更改主要框架的內(nèi)容。在Dreamweaver中，利用框架和框架集，可以將單個(gè)網(wǎng)頁分成多個(gè)獨(dú)立的區(qū)域，以實(shí)現(xiàn)在一個(gè)瀏覽器窗口中同時(shí)顯示多個(gè)頁面的效果。通過構(gòu)建這些頁面之間的關(guān)系，可以實(shí)現(xiàn)文檔導(dǎo)航、瀏覽等功能。框架多應(yīng)用于各種論壇和電子郵箱頁面，如圖7-1所示。圖7-1

QQ郵箱布局框架是框架集中所要載入的文檔，它實(shí)際上就是單獨(dú)的網(wǎng)頁文件。只有在框架頁面創(chuàng)建好后，在瀏覽器中瀏覽時(shí)才能正常顯示框架集。2.框架框架集用于定義一組框架的布局和屬性，包括框架的數(shù)目、大小、位置以及最初在每個(gè)框架中顯示的網(wǎng)頁。框架集文件本身不包含要在瀏覽器中顯示的內(nèi)容，它只是向?yàn)g覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔等信息。1.框架集使用DreamweaverCS6制作網(wǎng)頁時(shí)，根據(jù)框架分布和各框架作用的不同，框架結(jié)構(gòu)可以分為多種類型，常用的框架結(jié)構(gòu)有左右、上下和嵌套結(jié)構(gòu)。3.框架的結(jié)構(gòu)類型一.框架布局1.框架的結(jié)構(gòu)布局上下結(jié)構(gòu)左右結(jié)構(gòu)左右結(jié)構(gòu)框架由左右兩個(gè)框架組成，可以在瀏覽器中同時(shí)打開兩個(gè)頁面。該框架由三個(gè)網(wǎng)頁文件組成，框架集文件（如命名為index.html）、左框架文件（命名為left，網(wǎng)頁文件為left.html）、和右框架文件（命名為right，網(wǎng)頁文件為right.html）。如圖7-2所示。嵌套結(jié)構(gòu)7-2左右結(jié)構(gòu)frameset是一種框架集屬性，它的目的是用來將網(wǎng)頁分成什么樣子。如圖所示，通過frameset將整個(gè)頁面分成三個(gè)部分，如圖7-4所示：頭部：可以用來放置logo等左側(cè)：目錄框架，用來放置目錄右側(cè)：需要顯示的內(nèi)容。1.1frameset框架用法7-4frameset框架布局所以，frameset的作用就是用來將整個(gè)頁面分成你想要的模塊和架構(gòu)。frameset元素僅僅會(huì)規(guī)定在框架集中存在多少列或多少行，因此必須使用cols或rows屬性將其分為垂直和水平。【案例引入】垂直框架的效果，如圖7-5所示。7-5垂直框架【案例實(shí)現(xiàn)】例7-1example01.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>橫向框架</title></head><framesetrows="33%,34%,33%"frameborder="yes"border="5"framespacing="5"><framesrc="frame_a.html"><framesrc="frame_b.html"><framesrc="frame_c.html"></frameset></html>例7-1通過frame_a.html、frame_b.html和frame_c.html三個(gè)不同的網(wǎng)頁一個(gè)垂直框架。frame_a.html的代碼如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>詩詞鑒賞</title></head><bodybgcolor="#90ee90">

<h3style="text-align:center;background-color:#66bbcc;">李白詩詞鑒賞</h3><center>

<h4>靜夜思</h4>

床前明月光，<br>

疑是地上霜。<br>

舉頭望明月，<br>

低頭思故鄉(xiāng)。<br></center></body></html>frame_b.html的代碼如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>詩詞鑒賞</title></head><bodybgcolor="#FF99FF"><h3style="text-align:center;background-color:#66bbcc;">杜甫詩詞鑒賞</h3><center>

<h4>絕句</h4>

兩個(gè)黃鸝鳴翠柳，<br>

一行白鷺上青天。<br>

窗含西嶺千秋雪，<br>

門泊東吳萬里船。<br></center></body></html>frame_c.html的代碼如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>詩詞鑒賞</title></head><bodybgcolor="#0000CC"><h3style="text-align:center;background-color:#66bbcc;">蘇軾詩詞鑒賞</h3><center>

<h4>飲湖上初晴后雨</h4>

水光瀲滟晴方好，<br>

山色空蒙雨亦奇。<br>

欲把西湖比西子，<br>

淡妝濃抹總相宜。<br></center></body></html>【案例引入】再利用例7-1中的三個(gè)不同的網(wǎng)頁，還可以制作一個(gè)水平框架。將frameset標(biāo)簽中的row屬性改為col,效果如圖7-6所示：7-6frameset水平布局【案例實(shí)現(xiàn)】例7-2example02.html<framesetcols="33%,34%,33%"frameborder="yes"border="5"framespacing="5"><framesrc="frame_a.html"><framesrc="frame_b.html"><framesrc="frame_c.html"></frameset>這里，頻繁使用到一個(gè)窗口屬性，frame。用<frameset>將整個(gè)頁面分割成三個(gè)塊，而每一個(gè)塊，就是用frame來表示，其就是用來表示一個(gè)單獨(dú)的頁面。其語法：<framesrc="頁面的源地址"><framesrc="頁面的源地址">【案例引入】將例7-1中的三個(gè)網(wǎng)頁置于行和列之中，在瀏覽器中打開，將會(huì)形成一個(gè)混合框架結(jié)構(gòu)，效果如圖7-7所示：圖7-7frameset混合布局【案例實(shí)現(xiàn)】例7-3example03.html<framesetrows="40%,*"cols="*"frameborder="yes"border="5"framespacing="5"> <framesrc="frame_a.html"> <framesetcols="30%,70%"frameborder="yes"framespacing="5"> <framesrc="frame_b.html"><framesrc="frame_c.html"></frameset>通過圖7-7中，可以看到，整個(gè)頁面被分成了3份，但是和之前的都不一樣。其中，frameborder:用來表示顯示邊框framespacing:表示邊框的寬度這里，rows="40%,*"的意思是，將頁面分成上部分40%,下部分用“*”表示為還沒有分配。cols也是這個(gè)意思。然后，通過frame將frame_a.html頁面放在其中。之后，再用frameset將下部分分成左右兩部分，放上frame_b.html頁面和frame_c.html頁面，就會(huì)出現(xiàn)上述的效果了?！拘≠N士】<frameset></frameset>標(biāo)簽和<body></body>標(biāo)簽不能一起使用。不過，如果需要為不支持框架的瀏覽器添加一個(gè)<noframes>標(biāo)簽，此時(shí)一定要將此標(biāo)簽放置在<body></body>標(biāo)簽中！frameset框架的優(yōu)點(diǎn)是在保持菜單等一部分內(nèi)容的情況下，可以將其中的實(shí)際內(nèi)容進(jìn)行更換，所以比較容易維持網(wǎng)頁的整體設(shè)計(jì)。但如果整個(gè)網(wǎng)頁是由一個(gè)圖像組成的時(shí)候，很難利用框架結(jié)構(gòu)。因?yàn)橐亚懈畹膱D像插入到多個(gè)框架中時(shí)，很難顯示成一個(gè)完整的圖像。

如何把切割好的小圖像在網(wǎng)頁中做成一個(gè)大圖像，然后哦像框架文件一樣在固定一部分圖像的同時(shí)，只更改其中的某些內(nèi)容呢？這個(gè)時(shí)候就可以使用iframe框架來完成。1.2iframe浮動(dòng)框架用法iframe框架稱為浮動(dòng)框架或內(nèi)聯(lián)框架，它的內(nèi)部顯示的是一個(gè)文檔內(nèi)容，這與框架無異。該框架可以出現(xiàn)在標(biāo)準(zhǔn)XHTML網(wǎng)頁中的任何位置。它的工作方式類似于嵌入到XHTML網(wǎng)頁中的窗口，通過iframe框架可以查看另外一個(gè)網(wǎng)頁，可以通過屬性指定出現(xiàn)在該窗口中的網(wǎng)面的URL、窗口的寬度與高度，以及是否具有邊框。浮動(dòng)框架周圍的任何文本環(huán)繞框架的方式與文字環(huán)繞圖片的方式一樣?？梢酝ㄟ^<iframe>元素來創(chuàng)建浮動(dòng)框架。浮動(dòng)框架式一種比較特別的框架，和frame比較類似。不過frame必須在frameset中才可以，而iframe不一樣，首先，它是一種內(nèi)聯(lián)框架，其次，它可以放在網(wǎng)頁中的任何位置。所以，iframe可以直接放置在<body></body>中或者其他標(biāo)簽之中。iframe的語法格式為：<iframesrc="源頁面"></frame>iframe還有其他的一些常用屬性如表7-1所示：表7-1iframe的常用屬性值屬性值描述frameborder0、1規(guī)定是否顯示框架周圍的邊框nameframe_name規(guī)定iframe的名稱scrollingyes、no、auto規(guī)定是否在iframe中顯示滾動(dòng)條srcURL規(guī)定在iframe中顯示的文檔的URLwidthpixels、%規(guī)定的框架寬度heightpixels、%規(guī)定的框架高度alignleft、right、middle、bottom規(guī)定的框架對(duì)齊方式【案例引入】我們通過實(shí)例來演示一下的使用，當(dāng)點(diǎn)擊天貓?jiān)谏厦娴目騼?nèi)顯示天貓頁面，點(diǎn)擊京東則顯示京東頁面，實(shí)現(xiàn)效果如圖7-8，圖7-9所示。圖7-8

顯示天貓頁面效果圖7-9

顯示京東頁面效果【案例實(shí)現(xiàn)】例7-4example04.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8">

<title>內(nèi)嵌框架</title></head><body><iframename="topIframe"width="100%"height="400px"src="/"frameborder="1"scrolling="auto"></iframe><p>

<ahref="/"target="topIframe">天貓</a>

<ahref="/"target="topIframe">京東</a></p></body></html>【任務(wù)目標(biāo)】使用iframe浮動(dòng)框架實(shí)現(xiàn)一個(gè)公司首頁的效果?！景咐搿客ㄟ^一個(gè)具體的案例來講解iframe浮動(dòng)框架的使用,其效果如圖7-10所示。圖7-10

公司首頁效果圖7-10所示的網(wǎng)頁為一個(gè)公司主頁面，通過iframe浮動(dòng)框架實(shí)現(xiàn)?！景咐龑?shí)現(xiàn)】從圖7-10頁面整個(gè)布局來看，頁面分為上種下框架，中間框架又拆分為左右兩個(gè)框架。最上面框架為logo與主導(dǎo)航，中間左側(cè)框架為次導(dǎo)航，中間右側(cè)插入了一個(gè)iframe浮動(dòng)框架，放置頁面主體內(nèi)容，最下方框架為版尾?！翱蚣堋泵姘逍Ч鐖D7-11所示。圖7-11框架面板效果（1）搭建結(jié)構(gòu)搭建出圖7-11的架構(gòu)，代碼如下：例7-5example05.html<body><divid="container"><divid="head"style="border:double4px;">

<h1>頭部</h1></div><divid="left"style="border:double4px;">

<h1>左邊</h1></div><divid="right"style="border:double4px;">

<h1>右邊</h1><div>

<center><h1>IFrame框架</h1></center></div></div><divid="footer">

<h1>底部</h1></div></div></body>然后對(duì)每個(gè)框架進(jìn)行樣式的設(shè)置，代碼如下：body{margin:0px;padding:0px;}#container{margin-left:auto;margin-right:auto;margin-top:0px;padding:0px;height:750px;width:1024px;}#container#head{margin:0px;padding:0px;height:62px;width:1024px;}#container#left{margin:0px;padding:0px;float:left;height:623px;width:250px;}#container#right{padding:0px;width:754px;height:623px;margin:0px;float:right;overflow:visible;}#container#footer{margin:0px;padding:0px;height:65px;width:1024px;font-size:12px;color:#333;text-align:center;}（2）插入內(nèi)容然后將主要內(nèi)容插入例7-5。頭部代碼：<divid="head"style="border:double4px;"><ul>

<li><ahref="#">設(shè)為首頁</a></li>

<li><ahref="#">加入收藏</a></li></ul></div>左邊框架代碼：<divid="left"style="border:double4px;"><ul>

<li><ahref="home.html"target="main">圓源首頁<spanid="en">Home</span></a></li>

<li><ahref="#">公司簡介<spanid="en">Aboutus</span></a></li>

<li><ahref="#">產(chǎn)品展示<spanid="en">Products</span></a></li>

<li><ahref="#">企業(yè)榮譽(yù)<spanid="en">Honor</span></a></li>

<li><ahref="#">留言反饋<spanid="en">Gusetbook</span></a></li>

<li><ahref="#">聯(lián)系我們<spanid="en">Contactus</span></a></li></ul></div>右邊框架插入一個(gè)iframe浮動(dòng)框架，代碼如下：<divid="right"style="border:double4px;"><divid="r3"> <iframename="main"marginwidth="0"marginheight="0"frameborder="0"scrolling="no"width="750"height="580"></iframe></div></div>底部框架代碼：<divid="footer">

<spanid="bq">版權(quán)所有?圓源數(shù)碼科技有限公司

<br>地址：重慶市沙坪壩區(qū)新城東路133號(hào)電話lt;/span></div>在瀏覽器運(yùn)行效果如圖7-12所示：圖7-12

公司主頁面框架效果（3）美化頁面然后利用CSS樣式設(shè)置對(duì)圖7-12效果進(jìn)行美化：頭部框架的美化代碼#container#head{background-image:url(images/top_s1-1.jpg); margin:0px;padding:0px;height:62px;width:1024px;}#container#headul{height:56px;width:240px;margin-right:0px; padding-top:30px;margin-left:auto;}#container#headulli{float:left;list-style-type:none; padding-left:0px;margin-left:15px;margin-right:15px;}#container#headullia{font-size:12px;color:#333;text-decoration:none;}左邊導(dǎo)航框架的美化代碼#container#left{margin:0px;padding:0px;float:left;height:623px; width:270px;background-image:url(images/left_s1-1.jpg); background-repeat:no-repeat;}#container#leftul{width:200px;margin-top:30px;margin-left:40px;}#container#leftulli{line-height:34px;list-style-type:none;}#container#leftullia{font-family:"黑體";font-size:16px; color:#033711;text-decoration:none;}#container#leftullia#en{font-family:Tahoma,Geneva,sans-serif; font-size:12px;}右邊浮動(dòng)框架的美化#container#right#r3{background-repeat:no-repeat;background-position:top;padding-top:30px;padding-left:30px;height:560px;width:754px;}美化過后，并且刪除每個(gè)div的style="border:double4px;"，最后運(yùn)行效果如圖7-13所示圖7-13

美化后公司主頁的效果（4）iframe浮動(dòng)框架的設(shè)置對(duì)iframe浮動(dòng)框架的加入源src="home.html"，運(yùn)行效果如圖7-14：home.html代碼如下home.html<!doctypehtml><html><head><metacharset="utf-8"><title>home</title><style> #content{margin:0px;padding:0px;height:550px;width:700px;} #content#mleft#m1{filter:Alpha(Style=2);float:left;} #content#mrighth1{filter:Glow(Color=#ffff00,Strength=10); color:#06F;font-family:"黑體";padding-top:120px;} #content#mleft{float:left;margin-top:10px;}</style></head><body><divid="content"><divid="mleft"><imgid="m1"src="images/m1-1.jpg"width="416"height="396"/></div><divid="mright">

<h1>新源數(shù)碼，<br/>

真誠<br/>

歡迎您！</h1></div></div></body></html>圖7-14公司主頁CSS3+DIV技術(shù)布局037.3CSS3+DIV技術(shù)布局在

HTML中，常使用div元素來創(chuàng)建多列，使用CSS對(duì)元素樣式設(shè)計(jì)，從而將網(wǎng)頁設(shè)計(jì)稿中的布局樣式呈現(xiàn)在網(wǎng)頁上。在各大網(wǎng)站中，常見的布局結(jié)構(gòu)分為：單列布局，兩列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照網(wǎng)站的實(shí)際需求使用多列進(jìn)行布局。7.3.1單列布局標(biāo)題正文型，即單列布局，類似文章頁面。單列布局多用于網(wǎng)站的首頁，比如360搜索，單列布局的結(jié)構(gòu)簡潔明了，主題突出，適合排列簡單的內(nèi)容，不適合多行內(nèi)容，通常單列布局都是固定寬度的。如圖7-8所示圖7-15360單列布局圖【案例引入】我們利用單局布局模擬實(shí)現(xiàn)QQ瀏覽器的首頁，效果如圖7-16所示圖7-16QQ瀏覽器的首頁【案例實(shí)現(xiàn)】例7-6example06.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>布局</title><styletype="text/css">body{margin:0;//margin的作用是居中padding:0;}.header{text-align:center;}.main{margin:0auto;width:80%;text-align:center;}.foot{margin:0auto;width:80%;text-align:center;}</style></head><body><divclass="header"><imgsrc="images/標(biāo)題.jpg"></div><divclass="main"><imgsrc="images/主體.jpg"></div><divclass="foot"><imgsrc="images/版權(quán)信息.jpg"></div></body></html>7.3.2多列布局隨著

HTML5和CSS3新技術(shù)的出現(xiàn)，以及移動(dòng)設(shè)備的飛速發(fā)展，互聯(lián)網(wǎng)發(fā)生了翻天覆地的變化，對(duì)于如今來說，布局已不必再拘泥于固定格式。近些年網(wǎng)頁排版設(shè)計(jì)的趨勢，都是非常規(guī)布局，他們并不嚴(yán)格遵循某種準(zhǔn)則或既定體系。視覺交互方面的，比如全屏布局，瀑布流，無縫拼圖布局等，這些都不局限于傳統(tǒng)的布局方式。而對(duì)于傳統(tǒng)類的，信息類的網(wǎng)站大多都采用單列，兩列或三列布局，還有混合布局結(jié)構(gòu)。【案例引入】通過案例來實(shí)現(xiàn)一個(gè)兩列布局的效果，只需要將兩個(gè)側(cè)邊欄分別向左向右浮動(dòng)，就可以形成兩列布局：效果如圖7-17圖7-17兩列布局效果圖【案例實(shí)現(xiàn)】例7-7example07.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>兩列布局</title><styletype="text/css">body{margin:0auto;padding:0;max-width:960px;}.left{float:left;width:30%;height:300px;}.right{float:right;width:70%;height:300px;}.main{width:90%;margin:0auto;}</style></head><body><divclass="main">

<divclass="left"><imgsrc="images/左邊.jpg"></div>

<divclass="right"><imgsrc="images/右邊.jpg"></div></div></body></html>【案例引入】其實(shí)，三列布局的原理和兩列布局的原理是一樣的，只不過多了一列，只需給兩列布局中間再加一列，然后重新計(jì)算三列的寬度，就實(shí)現(xiàn)了三列布局。效果如圖7-18圖7-18三列布局效果圖【案例實(shí)現(xiàn)】例7-8example08.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>三列布局</title><styletype="text/css">.left{float:left;width:320px;background-color:pink;color:green;height:600px;}.right{float:right;width:320px;background-color:#6FC;color:red;height:600px;}.middle{float:left;width:320px;background-color:#FF9;color:gray;height:600px;}.main{margin:0auto;padding:0;max-width:960px;} img{height:200px;width:200px;margin-left:50px;}</style></head><body><divclass="main"><divclass="left">

<h4align="center">紅燒牛肉</h4>

<imgsrc="images/紅燒牛肉.jpg"><br><p>制作方法：<br>1、牛肉洗凈，切0.5厘米長方形厚片。陳皮切條狀，蔥洗凈、切長段，姜去皮、切絲。<br>2、鍋中倒1杯油燒熱，放入牛肉片小火炸至肉片干酥，撈出。<br>3、倒出炸油，鍋中留1小匙油燒熱，爆香干辣椒，加入陳皮炒香，再加入蔥、姜炒勻。<br>4、最后加入牛肉片、八角和A料，小火燜燒至湯汁收干即可盛出。<br><br></p></div><divclass="middle">

<h4align="center">紅燒茄子</h4>

<imgsrc="images/紅燒茄子.jpg"><br><p>

制作方法：<br>

1、將腌過的茄塊用力擠干水份。<br>

2、鍋中放油燒至三成熱，倒入茄塊翻炒，至呈黃色時(shí)成盤里。<br>

3、鍋洗凈，放少量油，燒至五成熱時(shí)，將蔥碎、蒜片、八角放入炒出香味，倒入茄塊翻炒。<br>

4、茄塊炒時(shí)，放料酒、豆瓣碗里的所有調(diào)料、半杯湯或水燒沸后勾芡。<br>

5、撒入香菜。<br></p></div><divclass="right">

<h4align="center">可樂雞翅</h4>

<imgsrc="images/可樂雞翅.jpg"><br><p>

制作方法：<br>

1、將材料準(zhǔn)備好，雞翅膀用生抽、鹽、火麻油、料酒腌制30分鐘左右。<br>

2、鍋中放油燒至三成熱，倒入茄塊翻炒，至呈黃色。<br>

3、雞翅煎至變色后，倒入準(zhǔn)備好的蒜、姜、辣椒，翻炒兩面金黃香味流入到肉汁中即可。<br>

4、倒入輔料之后，翻炒幾下，就可以倒入可樂了。要注意，可樂不要倒太多，剛好蓋過雞翅就可以了。<br>

5、大火燜10分鐘后收汁即可出鍋，放上準(zhǔn)備好的香菜即可。<br></p></div></div></body></html>同樣的道理，更多列的布局，其實(shí)和兩列、三列的布局模式是一樣的.7.3.3彈性盒模型布局在CSS3中，CSSFlexibleBox模塊也稱為彈性盒，是一個(gè)非常重要的模塊，該模塊用于以非常靈活的方式實(shí)現(xiàn)頁面布局處理。在之前的布局模型當(dāng)中，布局處理比較死板，當(dāng)容器的尺寸發(fā)生變化，那么布局也會(huì)相應(yīng)的發(fā)生改變，比如，當(dāng)容器的尺寸變小時(shí)，其他內(nèi)容會(huì)超出容器的范圍。我們來看一個(gè)案例?！景咐搿慨?dāng)主容器里面放了3個(gè)div，效果如圖7-19所示圖7-19

傳統(tǒng)布局效果【案例實(shí)現(xiàn)】例7-9example9.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>彈性盒</title><style>#main{border:2pxsolid#382aff;padding:1em;width:960px;} .content{border:2pxsolid#ff2834;padding:1em;} div{border:2pxsolid#73ff58;padding:1em;float:left;width:200px;}</style></head><body> <divid="main"> <divclass="content"> <h1>section1</h1><p>博客，僅音譯，英文名為Blogger，為WebLog的混成詞。它的正式名稱為網(wǎng)絡(luò)日記；又音譯為部落格或部落閣等，是使用特定的軟件，在網(wǎng)絡(luò)上出版、發(fā)表和張貼個(gè)人文章的人，或者是一種通常由個(gè)人管理、不定期張貼新的文.</p></div><divclass="content"><h1>section2</h1>

<p>博客上的文章通常以網(wǎng)頁形式出現(xiàn)，并根據(jù)張貼時(shí)間，以倒序排列。</p></div><divclass="content"><h1>section3</h1>

<p>博客是繼MSN、BBS、ICQ之后出現(xiàn)的第4種網(wǎng)絡(luò)交流方式，現(xiàn)已受到大家的歡迎，是網(wǎng)絡(luò)時(shí)代的個(gè)人“讀者文摘”，是以超級(jí)鏈接為入口的網(wǎng)絡(luò)日記，它代表著新的生活、工作和學(xué)習(xí)方式.</p></div></div></body></html>但是當(dāng)#main選擇器的寬度發(fā)生變化時(shí)，那么布局也會(huì)發(fā)生改變，比如將寬度改為600px，效果如圖7-20所示圖7-20

尺寸發(fā)生變化后的效果因此，引入彈性盒布局模型的目的是提供一種更加有效的方式來靈活地應(yīng)對(duì)這樣的問題。在該布局模型中，容器會(huì)根據(jù)布局的需要，調(diào)整其中包含的條目的尺寸和順序來最好地填充所有可用的空間。彈性盒布局和方向無關(guān)的。在傳統(tǒng)的布局方式中，block布局會(huì)將塊在垂直方向從上到下依次排列；而inline布局則會(huì)按照水平方向來排列。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。1.使用彈性盒布局dispaly:box因?yàn)閺椥院羞@個(gè)屬性需要兼容各種瀏覽器，所以它有指定方法，即需要寫前綴進(jìn)行兼容性{display:-moz-box;display:-webkit-box;display:box;}在CSSFlexibleBox模塊中，該容器元素中的每一個(gè)元素均被稱為“Flexitem”，將該容器元素稱為“Flexcontainer”。使用彈性盒布局和使用浮動(dòng)等樣式屬性進(jìn)行布局的一個(gè)主要區(qū)別是：使用浮動(dòng)等樣式屬性的時(shí)候，需要對(duì)容器里面每一個(gè)元素指定樣式屬性，但是當(dāng)使用彈性盒布局時(shí)，只需對(duì)容器元素指定樣式屬性?！景咐搿课覀儗?duì)容器元素為id屬性值為main的div元素使用彈性盒布局，在瀏覽器中打開示例頁面，頁面中所有樣式類名為content的div元素的排列方式被修改為橫向排列。如圖7-21所示圖7-21

彈性布局效果【案例實(shí)現(xiàn)】例7-10example10.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>彈性盒</title><style>#main{border:2pxsolid#382aff;padding:1em;display:-moz-box; display:-webkit-box;display:box;} .content{border:2pxsolid#ff2834;padding:1em;} div{border:2pxsolid#73ff58;padding:1em;}</style></head><bodystyle="width:600px;"> <divid="main"> <divclass="content"> <div> <h4>section1</h4>

<p>示例文字1</p></div> <div><h4>section2</h4>

<p>示例文字2</p></div></div><divclass="content"> <h4>section3</h4>

<p>示例文字3</p> <div> <h4>section4</h4>

<p>示例文字4</p></div> <div><h4>section5</h4>

<p>示例文字5</p></div></div></div></body></html>2.設(shè)置元素排列順序box-direction可以通過box-direction樣式屬性的使用可以控制容器中所有子元素的排列順序，指定值有以下幾種normal|reverse|inherit其中normal是默認(rèn)值，表示按照正常順序排列。所謂正常順序，就是我們看書寫文字的順序，從左往右，由上至下。而reverse表示反轉(zhuǎn)，先出現(xiàn)的元素，就在下面或是右邊【案例引入】在例7-10的代碼中，將容器元素為id屬性值為main的div元素，指定box-direction:reverse;樣式屬性。在瀏覽器中打開，頁面中所有樣式類名為content的div元素的排列方式被修改為從容器元素，即id屬性值為main的div元素開始反向排列，如下圖7-22所示圖7-22反向排列布局效果【案例實(shí)現(xiàn)】例7-11example11.html#main{border:2pxsolid#382aff;padding:1em;display:-moz-box; display:-webkit-box;display:box;-moz-box-direction:reverse;-webkit-box-direction:reverse;box-direction:reverse;}當(dāng)我們?cè)俅涡薷囊幌耰d屬性值為main的div元素的樣式，代碼如下所示#main{border:2pxsolid#382aff;padding:1em;display:-moz-box; display:-webkit-box;display:box;}然后對(duì)所有樣式類名為content的div元素指定box-direction:reverse;樣式屬性，代碼如下所示.content{border:2pxsolid#ff2834;padding:1em;display:-moz-box;display:-webkit-box;display:box;-moz-box-direction:reverse;-webkit-box-direction:reverse;box-direction:reverse;}在瀏覽器中打開示例頁面，頁面中所有content的div元素的所有section子元素的排列方式被修改為橫向反向排列，如下圖7-23所示圖7-23橫向反向排列布局效果3.設(shè)置元素排列方式box-orient可以通過box-orient來確定容器中子元素的方向。是橫著排還是豎著走?？蛇x的值有：horizontal|vertical|inline-axis|block-axis|inherit其中，inline-axis是默認(rèn)值。且horizontal與inline-axis的表現(xiàn)似乎一致的，讓子元素橫排；而vertical與block-axis的表現(xiàn)也是一致的，讓元素縱列。上例中的效果，元素的排列方式是橫向的，我們可以為content的div元素添加-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;樣式屬性，讓元素縱列。代碼如下.content{border:2pxsolid#ff2834; padding:1em;display:-moz-box;display:-webkit-box;display:box;-moz-box-orient:vertical;-webkit-box-orient:vertical;-o-box-orient:vertical;box-orient:vertical;}在瀏覽器中打開示例頁面，頁面中所有content的div元素的所有section子元素的排列方式被修改為縱向排列，如圖7-24所示圖7-24

縱向排列布局效果4.設(shè)置元素寬度box-flex【案例引入】接下來通過將例7-11中，所有樣式類名為content的div元素的flex屬性值設(shè)置為1的方法，使所有樣式類名為content的div元素的總寬度等于容器元素，即id屬性值為main的div元素的寬度。當(dāng)所有樣式類名為content的div元素的flex屬性值都被設(shè)置為1時(shí)，這些div元素的寬度均等。效果如圖7-25所示圖7-25元素寬度為1的布局效果【案例實(shí)現(xiàn)】例7-12example12.html.content{border:2pxsolid#ff2834;padding:1em;display:-moz-box;display:-webkit-box;display:box;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;-moz-box-orient:vertical;-webkit-box-orient:vertical;-o-box-orient:vertical;box-orient:vertical;}5.設(shè)置垂直方向上的對(duì)齊方式box-alignbox-align決定了垂直方向上的空間利用，也就是垂直方向上的對(duì)齊表現(xiàn)。為了便于記憶，我們可以拿來和CSS2中的vertical-align隱射記憶，兩者都有”align”，都是都是垂直方向的對(duì)齊box-align的可選參數(shù)有start|end|center|baseline|stretch其中stretch為默認(rèn)值，為拉伸，也就是父標(biāo)簽高度過高，其孩子元素的高度就多高，start表示頂邊對(duì)齊，end為底部對(duì)齊，center為居中對(duì)齊，baseline表示基線（英文字母o,m,n等的底邊位置線）對(duì)齊6.設(shè)置垂直方向上的對(duì)齊方式box-packbox-pack決定了父標(biāo)簽水平遺留空間的使用，其可選值有start|end|center|justify就大部分的行為表現(xiàn)來說分別對(duì)應(yīng)text-align屬性的值：left|right|center|justify；但是，之所以box-pack不使用”left”，而是”start”，是因?yàn)閎ox-direction屬性，這玩意可以反轉(zhuǎn)原本的排列，原本的“左對(duì)齊”反轉(zhuǎn)后結(jié)果是“右對(duì)齊”了，此時(shí)”left”顯然就詞不達(dá)意了，所以使用”start”更具有概括性，就是與父標(biāo)簽的起始位置對(duì)齊，從而不會(huì)產(chǎn)生語義與行為上的困擾。7.box-flex-group和box-ordinal-group子元素除了以上說的幾個(gè)屬性外，還有兩個(gè)屬性box-flex-group和box-ordinal-group，因?yàn)檫@兩個(gè)屬性實(shí)用性不強(qiáng)，這里就不做詳細(xì)的說明。目前沒有瀏覽器支持box-flex-group屬性。box-ordinal-group用整數(shù)值來定義伸縮盒對(duì)象的子元素顯示順序。數(shù)值越小，位置就越靠前，這不難理解，第一組在最前嘛，隨后第二組，第三組…例如：box-ordinal-group:1的組就會(huì)在box-ordinal-group:2的組前面顯示。于是，我們可以利用這個(gè)屬性改變子元素的順序。7.4階段案例【案例引入】制作汽車展示網(wǎng)頁，頁面內(nèi)容包括頁面頂部“水平導(dǎo)航欄”和“橫幅”，右側(cè)顯示出“汽車型號(hào)導(dǎo)航”，中間內(nèi)容顯示“推薦車型”和“備用零件”，網(wǎng)頁底部顯示“網(wǎng)站或公司信息”。需要將網(wǎng)頁內(nèi)容進(jìn)行有效排版。【案例實(shí)現(xiàn)】例7-13example13.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論