萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> dreamweaver教程 >> dw中實現像素為1px的細邊框表格實例

dw中實現像素為1px的細邊框表格實例

   最近我們都是使用表格來實現如下

  在網頁中制作一個像素為1的wordlink_affiliate">細邊框表格,看起來似乎是一個非常簡單的東西。直接插入表格後設置表格邊框boder=1?做過嘗試的朋友肯定知道通過設置邊框為1像素得出來的表格邊框線非常粗,並不是想要的那種細邊框效果,那麼這種細邊框怎麼做呢?這需要一定的技巧。

  先來看看邊框為1像素的表格效果:

dw中實現像素為1px的細邊框表格實例 三聯

  從上面的效果來看,並不是我們想要的細邊框效果,1個像素的邊框有些太粗,如果邊框顏色設置為純黑效果會更明顯,而大多數時候我們需要的是真正一個像素的邊框效果。下面介紹一下這種方法:

  1、新建一個實際需要大小的表格,設置表格邊框為0,表格間距為1,填充為0,表格的背景顏色設置為想要的邊框顏色,即:border=”0″ cellpadding=”0″ cellspacing=”1″ bgcolor=”#CCCCCC”,如圖:

如何在網頁中制作出像素為1的細邊框表格

  jquery1386566882734="47" />

  2、選中單元格標簽,將單元格背景顏色設置為純白色#FFFFFF,保存預覽即可得到下圖的細邊框效果,真正1像素邊框,看起來效果和直接設置邊框為1完全更清新。

如何在網頁中制作出像素為1的細邊框表格

  當然個人不推薦使用表格了,我們使用css div會很簡單易行

 代碼如下  

<style>
.div{border:1px solid #ccc;}
</style>
<div class='div' ></div>

  得到的效果是一樣的,但是在代碼上會更簡潔維護起來div+css模式比table模式要簡單方法多了。

copyright © 萬盛學電腦網 all rights reserved