網頁布局 table布局

table 的特性決定了它非常適合用來做布局，並且**中的內容可以自動居中，這是之前用的特別多的一種布局方式

而且也加入了display：table;dispaly:table-cell來支援 teble 布局。

1.簡單布局

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>table布局
title
>
6<
style
>
7table
1011
style
>
12head
>
13<
body
>
14<
table 
align
="center"
width
="500"
height
="400"
border
=1 bordercolor
="#00ff99"
cellspacing
="1"
cellspadding
= "1"
>
15<
caption
>這是caption標籤新增的表名
caption
>
16<
thead
>
17<
tr><
td colspan
="3"
align
="center"
>**名稱
td>
tr>
18thead
>
19<
tbody
>
20<
tr>
21<
td width
="30%"
height
="25"
>**標題
td>
22<
td colspan
="2"
align
="right"
>搜尋框
td>
23tr
>
24<
tr>
25<
td width
="30%"
>左邊
td>
26<
td width
="40%"
>中間
td>
27<
td>右邊
td>
28tr
>
29tbody
>
30<
tfoot
>
31<
tr>
32<
td colspan
="3"
align
="center"
>**底部資訊
td>
33tr
>
34tfoot
>
35table
>
36body
>
37html
>

這是一張整體的**，使用了最新的html5語義，第一行和第四行分別跨度了三列，這裡用colspan="3"來限制，而第二行的「搜尋框」占用了兩列的位置，用colspan="2"控制； align="center"是對**內文字的對齊限制，center表示中間，right表示靠右，left靠左。

2.table-cell布局

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
/>
5<
title
>table-cell**布局
title
>
6<
style 
type
="text/css"
>
7.wrap
14.wrap>div
17.left
21.right
25.center
2829
style
>
30head
>
31<
body
>
32<
div 
class
="wrap4 wrap"
>
33<
div 
class
="left"
>left
div>
34<
div 
class
="center"
>**布局
div>
35<
div 
class
="right"
>right
div>
36div
>
37body
>
38html
>

如何使用table布局靜態網頁

html lang en width 100 cellpadding 0 cellspacing 0 align center width 100 align center width 100 align center bgcolor orange align center height 35 hr...

網頁布局流式布局

工具所用到外掛程式 masonry 是 一款非常強大的jquery動態網格布局外掛程式，可以幫助開發人員快速開發類似剪貼畫的介面效果。和css中float的效果不太一樣的地方在 於，float先水平排列，然後再垂直排列，使用masonry則垂直排列元素，然後將下乙個元素放置到網格中的下乙個開發區域。...

網頁布局 響應式布局

響應式布局是 乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本 media all 用於所有的裝置 screen 用於電腦螢幕,平板電腦,智慧型手機等 and not only 三個關鍵字可以選 1 head 2 style media screen 3 media screen and m...