div+css模擬表格效果代碼

2020-12-25 網際網路IT先鋒

非常不錯的模擬表格效果代碼,需要注意的是 這類代碼一般都是通過寬度控制,大家注意計算好

<!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>11</li>

<li></li>

<li></li>

<li></li>

<li></li>

<li>11</li>

<li></li>

<li></li>

<li></li>

<li></li>

<li>11</li>

<li></li>

<li></li>

<li></li>

<li></li>

<li>11</li>

<li></li>

<li></li>

<li></li>

<li></li>

<li>11</li>

</ul>

</div>

</body>

</html>

相關焦點

  • 詳解DIV+CSS與表格建站的區別
    table時代,一個頁面表格達到10個以上是非常普遍的事情,但是現在用DIV+CSS,一個table都可以不用,就完全達到之前的效果,這就直接導致網頁文件大小比使用table時減少50%-80%,更節約各位站長的硬碟空間,訪問者打開網頁時更快,而且用div+CSS時,不像以往使用table時,必須把全部table讀取完了才顯示頁面內容,現在是可以讀一個div就顯示一個效果,大家打開網頁不用等。
  • 網頁設計之css+div PK table+css
    用過div+CSS作個整個網站,如果是純粹的div的布局是比較麻煩的,尤其是你div裡面嵌套div的,div布局的時候,你有些頁面效果還是要捨棄一點的,比如圖片的圓角,這些如果套div比較麻煩,在一個div在VS2005設計器裡面可能變形,如果過多的套div,你實現Ajax拖動效果的時候比較麻煩,所以我覺得眼下還是
  • div+css對SEO的影響-專業SEO技術教程(35)
    首先,使用div+css設計的網站有助於提升搜尋引擎spider提升爬行效率。div+css的代碼精簡是table無法比擬的,即使div+css的HTML加上對應css文件一般都小於table的HTML文件。div+css實現了樣式和布局完全分離,前臺垃圾代碼大量減少,內容更加突出,讓蜘蛛在你的網站上快速爬行,短時間內爬完你的網站。
  • CSS技巧,像table一樣布局div
    table> <tr>  <td></td>  <td></td>  <td></td> </tr></table>    下來是css
  • css 表單效果,純div+css實現
    純div+css實現,大家可以參考下,也許有一些問題,大家可以修正下<!lis[i].style.left = initleft + i*100 + "px";}}</script><style type="text/css
  • 網頁設計基礎:Div+CSS布局入門教程
    " _fcksavedurl=""css.css"" rel="stylesheet" type="text/css" /></head> <body></body></html>   這是XHTML的基本結構,將其命名為index.htm,另一個記事本文檔則命名為
  • css div高度自適應
    此文章主要為大家介紹了css div高度自適應,具有一定的參考價值,學習覺得挺不錯的,分享給大家。它的作用是指定背景圖片的大小,比如:對於一個div塊,我們需要為它添加一張圖片作為背景,然 而圖片大小並非總能盡如人意,但我們又不想使用background-repeat屬性讓背景平鋪,那麼這時我們就可以使用background- size屬性使圖片放大或者是縮小來適應div塊,當然這也可能會造成背景圖的失真。
  • DIV+CSS教程_DIV+CSS布局_DIV+CSS實例教程手冊
    第1天:XHTML CSS基礎知識文件類型2.語言編碼3. html標籤4. css風格5. css優先權6.第3天:兩列和三列布局1,兩列自適應寬度2,兩列固定寬度如圖3所示,第二列具有固定寬度居中4,xhtml塊級元素(div
  • 零基礎html5+div+css+js網頁開發教程第003期 html代碼基本結構
    本節知識視頻教程以下開始文字講解:一、Html代碼基本結構html代碼就像一個人一樣,可以分成幾個部分。我們先來了解三個節點。>包含網頁基本編碼格式的html代碼結構說明:這裡的Charset屬性代表編碼格式設置。
  • CSS布局實例:上中下三行 中間自適應
    本文代碼在firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 測試通過。對於非ie內核瀏覽器,通過設定display:table、display:table-row和display:table-cell來模擬表格的表現形式。
  • 使用HTML DIV+CSS樣式+JavaScript實現自定義個性化的模態窗口
    二、 CSS樣式使用CSS設置模態窗口的完整代碼:<style type="text/css">body {margin: 0px;padding: 0px將模態窗口的CSS樣式應用在Html代碼中:<body><div></div><div><div><div>關閉<
  • div+css無圖片實現圓角矩形
    在做頁面的時候,很多時候會用圓角矩形來妝點一下,但如果用圖片的話,即要用到圖片又要用到大量的代碼,勢必增加了頁面的重量在頁面的時候剛好要用到圓角矩形,於是寫了以下方法,分享一下 以下為引用的內容
  • CSS技巧學習:像table一樣布局div
    許多網頁設計師都喜歡,將兩個或者多個容器等高的並排放置,並在裡面展示每個容器的內容,就象經典表格布局中的單元格控制幾個欄目的位置,也喜歡容器的內容居中或頂部對齊顯示。  但是你又不喜歡用table來實現他,那怎麼辦呢?實現的方法很多,有根據視覺錯覺實現的,有用JS控制使高度相等的,還有採用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。
  • div+css二級彈出菜單的製作
    div+css二級彈出菜單的製作1.效果圖:當滑鼠移動到左側菜單的時候,右側會彈出對應的二級菜單,當滑鼠移開的時候,二級菜單隱藏。2.在一級菜單上新增二級菜單列表,代碼如下3.預覽效果如下,樣式亂了,這是因為一級菜單和二級菜單重合在一起了,並沒有在右側彈出4.讓二級菜單隱藏,新增如下代碼5.隱藏後的效果,但僅僅隱藏和顯示二級菜單還是不夠的,因為現在二級菜單的位置還不對,我們期望二級菜單是在一級菜單右側展示的6.添加如下代碼,此代碼定義了一級菜單的li是相對定位
  • div+css網站布局設計常見錯誤大全
    div+css是網站設計標準(或稱「WEB標準」)中常用的術語之一,通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區別,因為XHTML網站設計標準中,不再使用表格定位技術,而是採用css+div的方式實現各種定位
  • php學習之div+css標準化布局(一)
    1.div+css布局說明:在網頁開發中,需要對頁面內容進行「模塊化標準布局」,把內容放入到某個位置,讓頁面形成固定規律展示出來模塊化:在網頁中所有的內容都是以塊來展示的>標準化:在開發網站時是有一定的標準的,w3c標準好處:為了把html頁面和css代碼進行分離,在以後的維護時和合作開發、有利於搜索引導的抓取2.無意義div和span說明:在html標記中一般都是有自帶名稱。
  • 一行 CSS 代碼的魅力
    允許我們快速的創建基於 CSS Grid 布局的頁面,並且提供各種便捷的指令及函數(隨機、循環等等),讓我們能通過一套規則,得到不同 CSS 效果。沒錯,它的本質其實就是上述的那一行核心 CSS 代碼。
  • css教程:網頁中Span和Div的區別
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 css教程:網頁中Span和Div的區別
  • HTML+CSS:掌握css的繼承以及代碼的優先級問題
    上邊文章我們說了使用css的三種不同的選擇器,本篇文章我們主要介紹css的繼承規則以及css代碼的權重優先級問題。(1)css的繼承規則CSS的某些樣式代碼是具有繼承性的,那麼究竟什麼是繼承呢?比如下面代碼:我們設置p標籤的字體顏色為紅色並添加1像素的紅色邊框。在網頁中的顯示效果就如下圖所示:從上邊的圖片你可以看出字體顏色為紅色不僅使p標籤中的文字變成了紅色,還應用於p標籤中的所有子元素文本,這裡子元素為span標籤。但是邊框屬性並沒有應用到子元素中去。
  • 將CSS樣式代碼應用到HTML頁面的幾種方式
    例如,為一段文本設置行內樣式表,樣式例如,為一段文本設置行內樣式表,樣式分別為文字顏色、文字下劃線、文字大小和加粗,其代碼和效果如下圖:這種方式的樣式表應用例如,設置一個div標籤的樣式,那麼文檔中所以用<div>和</div>框住的內容就應用該樣式,如下圖:又如,定義一個樣式類,引用該類,代碼及效果如下圖:內嵌式樣式表是可以被重複引用的,但是卻不能跨頁使用。