如果本章演示效果無(wú)法正常展示,請(qǐng)至主站查看 http://coffee.zji.me/
這個(gè)吧,其實(shí)真的沒(méi)有很復(fù)雜的道理,就是每個(gè)單元里放上相應(yīng)的內(nèi)容,靠表格控制著他規(guī)規(guī)矩矩的呆著。當(dāng)然了,沒(méi)東西的地方就不填寫(xiě)了,于是就留出了空白。
現(xiàn)在很少有人用表格去布局了,除了淘寶之類(lèi)的特殊情況,或者……這家伙不會(huì) CSS。因?yàn)楸砀癫混`活,修改起來(lái)也十分的麻煩啊~在這里簡(jiǎn)單講講做個(gè)了解。
比如我現(xiàn)在有兩張圖片,想讓他們排在一行,然后相互距離 100 像素怎么辦呢?我們就做一個(gè)一行三列的表格,第一個(gè)單元格和第三個(gè)單元格分別放一張圖片,而第二個(gè)單元格留空,設(shè)置寬度為 100px。代碼如下:
<table>
<tr>
<td><img src="http://coffee.zji.me/imgs/bridge.jpg" width="300" /></td>
<td width="100"></td>
<td><img src="http://coffee.zji.me/imgs/bridge.jpg" width="300" /></td>
</tr>
</table>
來(lái)看看效果:
![]() |
![]() |
那么我們只是想讓一張圖片距離左側(cè) 300px 呢?
<table>
<tr>
<td width="300"></td>
<td><img src="http://coffee.zji.me/imgs/bridge.jpg" width="300" /></td>
</tr>
</table>
效果如下:
![]() |
所以這個(gè)東西其實(shí)很好理解,設(shè)置合適的單元格尺寸,來(lái)?yè)伍_(kāi)布局而已,你用 Excel 也可以玩。然后到了布局復(fù)雜的不行了,大家又發(fā)明了表格的嵌套,就是把一個(gè)表格放到另一個(gè)表格的單元格里,亂的讓人想吐……不多說(shuō),只做了解。下一章我們學(xué)習(xí)一個(gè)重點(diǎn)的內(nèi)容哦——表單。
本章學(xué)習(xí)卡片:卡片 10
本書(shū)是收費(fèi)的,不過(guò)交費(fèi)憑自覺(jué)。價(jià)格定義為每人請(qǐng)我喝一杯咖啡(哪種品質(zhì)的咖啡隨意),支付寶賬號(hào):
alay9999@163.com (劉源)
為了讓大家閱讀方便,本書(shū)將在如下站點(diǎn)發(fā)布,但最終內(nèi)容以主站為準(zhǔn):
未經(jīng)本人許可,禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系: dms@zji.me