超級簡單的DIV布局

2021-05-17 21:32:16 字數 1325 閱讀 2124

這篇文章演示在乙個頁面上有效的使用div元素來構建**,而不是使用table元素。因為div元素有很多優勢,所以大部分客戶開發**要求設計開發div元素,而不是table元素。上面的**是是為了給初學者學習使用div元素開發**的。

下面解釋為什麼使用div元素而不是table元素

table元素的優點:大多是設計開發者使用table是為了統一的外觀。table也非常容易維護。另乙個表的好處是,它是與大多數瀏覽器相容。

div 元素的缺點:主要的缺點是,並非所有的css元素與所有的瀏覽器相容。正因為如此,我們必須寫一些自定義css來解決問題。

我已經建立了乙個簡單的應用程式,展示了如何輕鬆地就可以建立僅僅只有div元素的網頁。

下面的圖展示了div元素的布局

這裡是我建立的對頁面布局css樣式表類的列表,讓我們看看更多的細節。

# divheadertable: 設計html頁面的頭部,應用此樣式的div作用相當於headertable 。

# divheaderrow:應用此樣式的div作用相當於table的header row 。由於頭部的影象固定為105,所以row中height元素值為105px。

# divheadercolumn:應用此樣式的div作用相當於table的header column 。值為99%的頭部元素被劃分為3個這樣的元素部分。

# divtable: 應用此類的div作用相當於html文件容器中的table 。

# divrow: 應用此類的div作用相當於html文件容器中的row。

# divcolumn: 應用此樣式的div 相當於html文件容器中的column。容器裡面將有四個width為24%的row。**

以下是網頁的html**顯示如何把css類分配給相應的網頁元素。

**

+91-9702989270

+91-9924839208

user registration

solutation

first name

middle name

last name

login name

e-mail

password

confirm password

address1

address2

state

city

country

pin code

or  

cancel

contact us to discuss your requirements

然這個不是唯一的你能使用div 和css建立的結構,你也能實現不同的布局。

div實現簡單的頁面布局

摘要 使用html和css實現簡單的旅遊 布局,從而熟練地運用css樣式,達到美觀的布局效果。html style width 780px height 150px middle right footer css樣式 body container banner globallink globalli...

網頁布局 div

簡單的網頁布局 注釋就不寫了,看看就懂了,不懂看前面的兩個博文都有詳細講解 效果圖 網頁布局.html charset gb2312 網頁布局title rel stylesheet href style.css type text css head id first 導航div id second...

關於div布局

div布局與定位 div是乙個萬能的盒子,而且相對以 來說較為靈活,在布局方面前天一般用div布局 因為前端要盡量美觀,符合客戶要求 後端用table布局也較為常用 簡潔明瞭 對於布局來說div只是乙個塊級標籤,之所以能布局是基於多個css屬性。通過css來操縱盒子的大小形狀,位置,樣式,色彩,背景...