Topic Center

Contact Sales

首頁 > 開發者 > CSS

css類比表格效果

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

類比表格效果，在IE6,IE7,IE8,firefox,Opera下測試通過

雖然不推薦用這種方式來類比表格,但是確實可以做到.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
DIV+CSS類比表格效果 - by koyoz.com</
title
>
<
style
type
="text/css"
>
* {margin:0;padding:0}
#main {margin:100px 0 0 200px}
#main ul {width:520px;height:165px;list-style:none}
#main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;height:33px;text-align:center;line-height:33px}
#main li.b {border-bottom:1px solid #ccc}
#main li.r {border-right:1px solid #ccc}
</
style
>
</
head
>
<
body
>
<
div
id
="main"
>
<
ul
>
<
li
>
11</
li
>
<
li
>
11</
li
>
<
li
>
11</
li
>
<
li
>
11</
li
>
<
li
class
="r"
>
11</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
class
="r"
>
11</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
class
="r"
>
11</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
class
="r"
>
11</
li
>
<
li
class
="b"
>
</
li
>
<
li
class
="b"
>
</
li
>
<
li
class
="b"
>
</
li
>
<
li
class
="b"
>
</
li
>
<
li
class
="b r"
>
11</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：

css實現滑鼠滑過改變文字(中文變英文) 02-28

selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點... 09-09

使用CSS巧妙地製作背景色漸層動畫執行個體 03-24

詳解css display屬性中常見的四個屬性值用法（代碼執行個體） 09-07

CSS修改iframe內的樣式問題 12-07

如何用CSS改變上劃線、底線以及刪除線的顏色呢？ 12-07

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

css類比表格效果

聯繫我們

熱門內容

熱門主題

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support