Ⅰ 求一個簡單的html5的布局模板

你要HTML5的是要響應式還是什麼？

Ⅱ html5頁面怎麼布局

1）像<span>這樣的行內標記，定義它的margin-top和margin-bottom是無效的，除非你把它設置為塊狀元素才可以。Display:block
2）對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 DIV 等等，
3）無論什麼元素，一旦設置為是浮動顯示，就擁有了完整的盒模型結構，我們就可以使用外邊距，內邊距，邊框，高和寬來控制的大小以及與其他對象之間的位置關系。
4）浮動是從網頁布局的角度來定義元素的顯示，而行內和塊狀屬性主要是從元素自身的性質來定其顯示的。
5）當元素沒有定義邊框時，可以把內邊距作為外邊距使用。有時候外邊距會有重疊現象的。
6）當為元素定義背景圖像時，內邊距區域內可以顯示背景圖像，而對外邊距區域來說，背景圖像是達不到的，他永遠都是透明狀態
7）用div+css設計網頁結構時，設計師滿腦子都是網頁內容，而非內容所呈現的效果。
8）塊狀元素：不管塊狀元素寬度是多少，他總會自動占據一行，因為在他末尾附加了一個換行符，而行內元素沒有這個特點。塊狀元素有完整的盒模型結構，可以定義寬度和高度，而行內元素沒有這個特性，無法通過高度來改變文本行的行高。
塊元素的代表標記 div
行內元素的代表標記 span ，行內標記不具備組織結構框架
9）網頁布局分為：自然布局，浮動布局， 定位布局
10）當一個元素被定義為浮動顯示時，即定義為塊狀元素。並且該元素就會收縮自身體積為最小狀態。所以，應該有個好的習慣即把浮動元素設置高和寬。如果沒有設置，則元素會按照它所包含的內容大小來確定它的大小。
11）當元素浮動後，周邊的對象會自動環繞浮動元素周圍，形成一種環繞關系。
12）塊狀元素之間的外邊距會有重疊現象，但是浮動元素之間的外邊距不會發聲重疊現象。
13）浮動元素移動，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此類推。
14）一般定位元素（絕對或是相對元素）都會覆蓋在文檔流對象之上。但是，select元素的窗口控制項還不完全支持z-index
15）在css定位布局中，一般遵循「外部相對定位，內部絕對定位」
16）在body中設置min-width:760px,可以避免布局重疊現象。

Ⅲ 《HTML5布局之路》面向人群有哪些

書的主要特點是易學、對初學者比較友好、對行業里對代碼的規范要求有詳細說明和介紹回，實戰部分更貼答近於崗位的要求，會更正規化一點吧。主要內容是HTML、CSS、HTML5、CSS3方面的知識，並不涉及JS。
比較適用於 ——
希望自學HTML5的人；
擁有一定計算機基礎的WEB前端/HTML5技術的初學者；
希望學習HTML5的計算機類專業的大學生；
希望夯實基礎的HTML5開發工程師；
自學HTML和CSS，發現學習效率較低的自學者。

Ⅳ 《HTML5布局之路》對前端初學者的優勢在哪

降低了學習難度，提升學習效率，節省掉了大量的學習時間。

可能這本書唯一對學習者的要求，就是需要能夠靜下心來看下去、學下去。

它和其他書（或大多數視頻）不一樣的地方在於，沒有遵循「線性的知識敘述方法」，而是根據一個項目的實現過程，從前期的准備工作，到基本的布局，再到文本樣式處理，一直到最後實現出整個網頁的這樣的過程來寫的。

代入感也會相對較強，同時裡面有很多QA，都是實際開發過程當中或者學習者在學習過程中，可能產生的一些疑問或想法，在這裡面都已經給出了答案和提示，所以會覺得學的特別特別順。

Ⅳ 用html5布局，每一塊用不同的顏色做背景並用邊框框起來，具體內容忽略，只要架構，將框架在網頁上顯

<div style="background:#XXXXXX；border:1px solid #XXXXXX;"></div>布局哪兒離得開div啊。。。跟h4一樣，div布局，加背景就是了。h5隻是新增了一些標簽，新增了一些屬性。不要搞的h5好像是一門新的語言一樣。它照樣是div+css來布局的。新加的幾個塊級標簽只是方便的表明了是哪一部分。

Ⅵ 《HTML5布局之路》有沒有電子版

書籍這個東西，通常有三類書籍會出電子書
一種是內容質量很差的書
另一種是暢銷書
還有一種，是已經出版比較久的書
這本書貌似是今年出版的，不可能那麼快做電子版吧~

Ⅶ html5如何布局

justify-content: space-between;
align-items: center;
這兩行放到ul上面

Ⅷ HTML5如何利用rem實現自適應布局

  1. 分析設計圖

假設設計圖大小為1080px。這也就意味著，在開發時，需要兼容的最大解析度為1080px，最小的為320px。

2.調整視口

代碼實例：

<!DOCTYPEhtml>
<head>
<metacharset="UTF-8"/>
<title>布局之路-移動端開發實例</title>
<metaname="viewport"content="width=device-width,user-scalable=no"/>
<linkrel="stylesheet"type="text/css"href="css/reset.css"/>
</head>
<body>
<divclass="wrap"></div>
</body>
</html>

代碼解析：由於使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。

3. 確定設計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。

代碼實例：

<styletype="text/css">
html{
font-size:42px;
}
</style>

4. 按照設計圖的像素進行開發

按照正常網頁開發流程，進行網頁開發即可。

5. 使用百分比和rem替換px

代碼效果對比：

/*使用固定像素*/
.box{
float:left;
width:658px;
font-size:72px;
text-align:center;
line-height:195px;
}
/*使用百分比和rem*/
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}

代碼解析：

  • 水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。

  • 例如，父級寬度為1080px， 子級元素為197px，那麼子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的「分母」也有所不同，在開發時這個地方很容易出現問題，請務必注意。

  • 垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。

Ⅸ 《HTML5布局之路》有具體的項目實例嗎

有具體的項目示例。
實例分為兩種不同的類型。一種實例是小案例，在多個相應章節都有涉及。
另一種實例是貫穿多個章節的例子。我覺得這可能這也是跟其他書籍不同的地方。通過貫穿多個章節的案例講解，然後一步一步完成網站的搭建。
PC端和移動端各自設置了一個大型的案例，跟著操作下來就基本掌握了開發網頁的基本思路和相關知識點。

Ⅹ HTML裡面有幾種布局方式

雙飛翼、多欄、彈性、流式、瀑布流、響應式布局
（1）、雙飛翼布局
經典三列布局，也叫做聖杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個布局模型概念，在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼布局，它的布局要求有幾點：
a、三列布局，中間寬度自適應，兩邊定寬；
b、中間欄要在瀏覽器中優先展示渲染；
c、允許任意列的高度最高；
d、要求只用一個額外的DIV標簽；
e、要求用最簡單的CSS、最少的HACK語句；
在不增加額外標簽的情況下，聖杯布局已經非常完美，聖杯布局使用了相對定位，以後布局是有局限性的，而且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增加多一個div就可以不用相對布局了，只用到了浮動和負邊距，這就是我們所說的雙飛翼布局。
(2)、多欄布局
a、欄柵格系統：就是利用浮動實現的多欄布局，在bootstrap中用的非常多。
b、多列布局：柵格系統並沒有真正實現分欄效果（如word中的分欄），CSS3為了滿足這個要求增加了多列布局模塊
(3)、彈性布局（Flexbox）
CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分布一個容器里項目布局，即使它們的大小是未知或者動態的，這里簡稱為Flex。
Flexbox布局常用於設計比較復雜的頁面，可以輕松的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動布局實現元素位置的定義以及重置元素的大小。
Flexbox布局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多餘空間平均分配多個伸縮項目，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。
(4)、瀑布流布局
瀑布流布局是流式布局的一種。是當下比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷載入數據塊並附加至當前尾部。最早採用此布局的網站是Pinterest，逐漸在國內流行開來。
(5)、流式布局（Fluid） 固定布局和流式布局在網頁設計中最常用的兩種布局方式。固定布局能呈現網頁的原始設計效果，流式布局則不受窗口寬度影響，流式布局使用百分比寬度來限定布局元素，這樣可以根據客戶端解析度的大小來進行合理的顯示。
(6)、響應式布局
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。 響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用「大勢所趨」來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。