HTML浮動(dòng)布局Float Layout是Web開發(fā)中一種重要的布局技術(shù)，主要通過CSS的float屬性來實(shí)現(xiàn)它允許元素脫離其正常的文檔流，向左或向右移動(dòng)，直到它的外邊緣遇到包含框或另一個(gè)浮動(dòng)元素的邊緣為止浮動(dòng)布局常用于創(chuàng)建多欄布局，如兩欄或三欄布局，其中一欄用于導(dǎo)航或側(cè)邊欄，另一欄或更多欄用于主要內(nèi)容。

5“口”型布局 這是一個(gè)形象的說法，指頁面上下各有一個(gè)廣告條，左邊是主菜單，右邊是友情鏈接等，中間是主要內(nèi)容這種布局的優(yōu)點(diǎn)是頁面充實(shí)內(nèi)容豐富信息量大，是綜合性網(wǎng)站常用的版式，特別之處是頂部中央的一排小圖標(biāo)起到了活躍氣氛的作用缺點(diǎn)是頁面擁擠，不夠靈活也有將四邊空出，只用。

實(shí)例演示在頁面設(shè)計(jì)中，你可以這樣運(yùn)用它來呈現(xiàn)商品詳情點(diǎn)擊展開商品詳細(xì)信息 這里是商品的詳細(xì)描述，包括規(guī)格特點(diǎn)使用方法等隱藏的信息在這里，只需輕輕一點(diǎn)，全部揭曉使用details標(biāo)簽，你可以清晰地劃分層次，讓用戶在需要時(shí)深入了解，而在初次瀏覽時(shí)保持簡潔這種布局既節(jié)省空間，又提高。

第三種flex布局 父盒子 displayflex 左右盒子設(shè)置寬度300px 中間盒子flex1flexgrow1 flexshrink1 flexbasis0%不考慮元素尺寸自由伸縮 第四種grid布局 父盒子display grid gridtemplatecolumns300px auto 300px分割成3列，寬度分別為300px auto 300px。

dreamweaver8是一款非常優(yōu)秀的可視化網(wǎng)頁設(shè)計(jì)布局軟件在日常開發(fā)當(dāng)中，經(jīng)常會(huì)遇到框架布局如上下布局，上左右布局上下左右布局等等這里演示怎樣插入布局框架，然后全部保存打開dreamweaver8，并新建一個(gè)html網(wǎng)頁點(diǎn)擊插入菜單，然后選擇HTML項(xiàng)緊接著，在對應(yīng)的下拉菜單選擇框架，及所需要的布局。

首先說下移動(dòng)端的布局rem布局rem是指html元素上的字體大小對應(yīng)的像素?cái)?shù)值，使用rem為長度單位理想情況下如果將所有的長度單位都用rem標(biāo)示，那么我只需要更改html上的fontsize即可同步按比例更改所有長度單位包括元素寬高邊距字體大小等這在手機(jī)屏幕大小不定時(shí)就特別有用，只需要計(jì)算一。

html5網(wǎng)頁結(jié)構(gòu)布局標(biāo)簽 對于HTML5來講，在網(wǎng)頁結(jié)構(gòu)上標(biāo)簽定義與使用更加語義化，讓搜索引擎以及工程師更加迅速理解當(dāng)前網(wǎng)頁的整個(gè)重心所在 列舉常用HTML5結(jié)構(gòu)組合 header nav section article figure figcaption aside footer 一般首頁結(jié)構(gòu)，如圖所示 當(dāng)然也可以是下面的結(jié)構(gòu) 其中section和article最為相似，而且。