1. 程式人生 > >在網頁中實現細線邊框的兩種方法

在網頁中實現細線邊框的兩種方法

  很多朋友都有過製作網頁的經歷,如今,眾多網頁的設計都用到了表格。這樣不僅有利於網頁的維護,同時,提高了網頁的觀賞性。在眾多網頁製作風格中,細邊框這個製作方法是必不可少的。這裡,我將簡單地談一下細邊框的製作方法。
  
  談到細邊框,本人認為大致有兩種製作方法,第一種是用表格的巢狀,第二種是用CSS強制定義。

   如何用表格巢狀呢?大家都知道,用Bgcolor可以在表格中任意定義表格的背景顏色,用Cellspacing可以控制表格單元的額外空間,如果定義兩個表格,把其中一個的表格背景設為全黑,然後在這個表格中巢狀定義另外一個表格,背景設為全白,並且把Weight=100%。這時,兩個表格是重疊的,但是,如果把背景為黑色的那個表格再定義一個Cellspacing=1。那麼就是說,黑色的表格比白色的表格多出了一個畫素的外圍空間,而白色的表格又在黑色表格之上,從而達到細邊框的效果。原始碼如下:

  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉

   〈tr〉

   〈td〉

   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉

   〈tr〉

   〈td〉

   〈/td〉

   〈/tr〉

   〈/table〉

   〈/td〉

   〈/tr〉

   〈/table〉

  第二種比較簡單,那就是用CSS(層疊樣式表)強制定義,但是,有些比較老的瀏覽器不支援CSS,可能導致無法顯示你所要求的效果。不過使用CSS定義,語句非常簡潔,所作網頁的容量也較小。它的操作方法是,在表格的最外圍的相應最小單元的〈td〉標籤中定義style="BORDER-postion: black 1px solid;",其中,Postion的引數有Left、Right、Top和Bottom,分別表示在單元的左、右、上、下顯示一條1個畫素寬的實線條。

  原始碼如下:

  〈table border="0" bgcolor=white〉

   〈tr〉

   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉

   〈/td〉

   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉

   〈/td〉

   〈/tr〉

   〈tr〉

   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉

   〈/td〉

   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉


   〈/td〉

   〈/tr〉

  〈/table〉

相關推薦

網頁實現邊框方法

  很多朋友都有過製作網頁的經歷,如今,眾多網頁的設計都用到了表格。這樣不僅有利於網頁的維護,同時,提高了網頁的觀賞性。在眾多網頁製作風格中,細邊框這個製作方法是必不可少的。這裡,我將簡單地談一下細邊框的製作方法。    談到細邊框,本人認為大致有兩種製作方法,第一種是用表格

C#實現向已存在的Excel檔案寫入資料例項(方法

 //新增引用 using Excel = Microsoft.Office.Interop.Excel; using System.Reflection; 方法一:將識別結果寫入到Excel表格中(根據指定模版寫入,並將其以當前儲存時間命名另存)            

向HTML插入視頻有方法

rip 新版 服務 解決 all top 解決方案 5.0 ref 向HTML中插入視頻有兩種方法,一種是古老的object標簽,一種是html5中的video標簽,前者兼容性相對好些,後者兼容性讓人頭疼。最常用的向HTML中插入視頻的方法有兩種,一種是古老的<obj

C#實現並發的幾方法的性能測試

返回 也不會 thead syn image 9.png 結果 次數 存在 原文地址:https://www.cnblogs.com/durow/p/4837746.html 0x00 起因 去年寫的一個程序因為需要在局域網發送消息支持一些命令和簡單數據的傳輸,所以寫了

Easyui 彈出加載的遮罩的方法

datagrid IT hellip pla itl width UNC message function 第一種: //彈出加載層function load() { $("<div class=\"datagrid-mask\"></div&

除法求模求逆元的方法

除法 模運算 擴展歐幾裏得 tps sdn 求解 blog span emma   今天下午還是有點閑的,不想刷題,不想補題,突然想起昨天的training 3裏I題涉及到除法取模的問題,就來總結一下   首先對於模運算來說,是沒有對於除法的取模的(即沒有(a/b)%mod

C語言經典演算法(九)——遞迴實現二分查詢的方法

後繼續整理演算法並寫出自己的理解和備註。 C++實現的:遞迴實現二分查詢演算法 1、 遞迴實現二分查詢 <1> 題目描述:針對資料,進行二分查詢(要求:資料的排列有序) <2> 方法一:概念法 <3> 方法二:遞迴法 原始碼: 一、 遞迴實現

pythonlist轉csv的方法

方法一: name_attribute = ['NumberID','UserID','ModuleID','StartDate','EndDate','Frequent'] writerCSV=pd.DataFrame(columns=name_attribute,data=data) wr

js實現跨域的幾方法

js中幾種實用的跨域方法原理詳解 這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向一個不同的域請求資料,或者通過js獲取頁面中不同域的框架中(iframe)的資料。只要協議、域名、埠有任何一個不同,都被當作是不同的域。 下表給出了相對http://sto

在TensorFlow自定義梯度的方法

前言 在深度學習中,有時候我們需要對某些節點的梯度進行一些定製,特別是該節點操作不可導(比如階梯除法如 10 /

VUE實現列印功能的方法

第一種方法:通過npm 安裝外掛   1,安裝  npm install vue-print-nb --save 2,引入  安裝好以後在main.js檔案中引入       &n

echart去除網格方法和echart圖自適應

1. yAxis : [                 {                   &nb

ubootramdisk啟動linux的方法

轉載地址:https://blog.csdn.net/dropping_1979/article/details/20628109 首先要確保核心支援ramdisk啟動: The configuration of the kernel is as follow:  &nb

Python實現"各位相"的方法

給定一個非負整數num,重複累加num中的每一個數字直至結果為個位數 Input: 38 Output: 2 Explanation: The process is like: 3 + 8 = 11, 1 + 1 = 2. Since 2 has only one di

Java實現變數交換的方法

方法一:引入第三方變數 public class ChangeVar{ public static void main(String[] args){ //交換變數 int a = 1; int b = 2; int c= a; //1 a = b;//2 b

AndroidIntent傳遞物件的方法(Serializable,Parcelable)

今天要給大家講一下Android中Intent中如何傳遞物件,就我目前所知道的有兩種方法,一種是Bundle.putSerializable(Key,Object);另一種是Bundle.putParcelable(Key, Object);當然這些Object是有一定的條件

Python實現“反轉整數”的方法

給定一個32位的符號整數,返回它的反轉整數 Example 1: Input: 123 Output: 321 Example 2: Input: -123 Output: -321 Example 3: Input: 120 Output: 21 假設該整數的

Android新增背景音樂的方法

        前些天在嘗試自己寫一個Android小遊戲——flybird         基本功能實現了,就想新增聲音,然後上網查了查,大多是一樣,可是用到我這,有些卻不可以用,所以我還用了兩種方法。         下面談談這兩種方法。         方法一:這是使

網頁嵌入flash檔案的幾方法

<embed allowscriptaccess="never" allownetworking="internal" invokeurls="false" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock

ssm獲取絕對路徑的方法

專案中經常要上傳檔案然後儲存到專案中,這時就需要獲取專案的絕對路徑。方法一:如果我們是在controller裡面想獲取絕對專案的路徑:這樣就可以獲取到專案的絕對路徑了。方法二:我們可以在web.xml裡