網頁設計公司
您現在的位置:首頁  >  新聞中心
  • 軟體設計
    Software Development
  • 品牌及LOGO設計
    Brand and LOGO Design
  • 網站設計及建制
    Web Design
  • 多媒體動畫制作
    Multimedia Presentations
  • 聯絡我們
    Contact US
  • 新聞中心
    網頁設計公司必讀的文章 ( 135 ) 用div+css模擬表格對角線


    首先聲明:

    這只是探討一種CSS模擬表格對角線的用法,實際在工作中可能覺得這樣做有點小題大作,這不是本主題討論的重點。如果對此深以為然的朋友,請一笑過之。。。

    有時在插入文檔時,要用到表格對角線,常見的作法是用圖片的方式來處理,還有就是用vml來畫對角線,能不能用html+css方式來實現呢?答案是肯定的,下面我們來摸擬一個表格對角線。

    原理:

    用邊框線來摸擬斜線,我們知道,如果將一個DIV的邊框線設置得足夠寬並定義了不同的顏色時,其相鄰的兩條邊框線交界處就是斜線。知道了這個原理,我們就可以用border-left和border-top來模擬出斜線的效果。

    我們先創建一個結構:
    程序代碼 程序代碼
    <div class="out">
    <b>類別</b>
    <em>姓名</em>
    </div>

    我們用<div class="out">作為對角線的容器,我們來設置斜線樣式,關鍵代碼如下:
    程序代碼 程序代碼
    .out{
       border-top:40px #D6D3D6 solid;/*上邊框寬度等於表格第一行行高*/
       width:0px;/*讓容器寬度為0*/
       height:0px;/*讓容器高度為0*/
       border-left:80px #BDBABD solid;/*左邊框寬度等於表格第一行第一格寬度*/      
      position:relative;/*讓裡面的兩個子容器絕對定位*/
    }

    <b>和<em>兩個標籤來設置兩個分類,分別將它們設置為塊狀結構display:block;清除其默認的字體樣式font-style:normal;因其父容器設置了相對定位,所以設置其為絕對定位,這樣可以將它偏移到你想指定的位置了。
    程序代碼 程序代碼
    b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
    em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}

    這樣一個斜線對角線就模擬出來了。知道了原理,你可以變成很多有趣的東西出來,祝你好運!

    這種對角線模擬法也有缺點:

    1、寬高度必須是已知的。
    2、寬高的長度不能差得太大,你可以試試將寬度拉得比高度長好幾倍,看看效果。(給你們留點作業練習練習)
    3、還有就是斜線條不能設置顏色。
    另:以上代碼只測試了ie6和ff3,其它瀏覽器未做測試,請朋友們測試一下。

    下面是完整的代碼:
    HTML代碼


    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
    首頁 | 關於我們 | 新闻中心 | 聯絡我們 | 加入最愛
    Bay Stars Design 網頁設計公司 Copyright © 2005-2008 Bay Stars Design Web Design Company All risghts reserved.