博天堂官方网址

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
你可能遇到了下面的問題
關閉右側
常見的div+css網頁布局類型有哪些?
  • 作者:博天堂官方网址
  • 發表時間:2019-07-02 16:10
  • 來源:博天堂官方网址網絡

 DIV+CSS是現在最流行的一種網頁布局格式,以前常用表格來布局,而現在比較知名的網頁設計全部采用的DIV+CSS來排版布局。DIV+CSS的好處可以使HTML代碼更整齊,更容易使人理解,而且在瀏覽時的速度也比傳統的布局方式快,最重要的是它的可控性要比表格強得多。下面介紹常見的布局類型。 
1 單行單列固定寬度 
單行單列固定寬度也就是一列固定寬度布局,它是所有布局的基礎,也是最簡單的布局形式。一列固定寬度中,寬度的屬性值是固定像素。下面舉例說明單行單列固定寬度的布局方法,具體步驟如下。

(1)在HTML文檔的<head>與</head>之間相應的位置輸入定義的CSS樣式代碼,如下所示:
 <style>
#content{
       background-color:#ffcc33;
       border:5px solid #ff3399;
       width:500px;

       height:350px;
               }
</style> 
小妙招: 使用background-color:#ffcc33將DIV設定為黃色背景,并使用border:5px solid #ff3399將DIV設置了粉紅色的5px寬度的邊框,使用width:500px設置寬度為500像素固定寬度,使用height:350px設置高度為350像素。 

(2)在HTML文檔<body>與</body>之間的正文中輸入以下代碼,給DIV使用了layer作為id名稱。 <div id="content ">1列固定寬度</div>

(3)在瀏覽器中瀏覽,由于是固定寬度,無論怎么改變瀏覽器窗口大小,DIV的寬度都不改變,

2   一列自適應

自適應布局在網頁設計中常見的一種布局形式,自適應的布 局能夠根據瀏覽器窗口的大小,自動改變其寬度或高度值,是一種非常靈活的布局形式,良好的自適應布局網站對不同分辨率的顯示器都能提供最好的顯示效果。自適應布局需要將寬度由固定值改為百分比。下面是一列自適應布局的CSS代碼: <html xmlns="http://fnszeye.com">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>1列自適應</title>
<style>
#Layer{
       background-color:#00cc33;
       border:3px solid #ff3399;
       width:60%;
       height:60%;
}
</style>
</head>
<body>
<div id="Layer">1列自適應</div>
</body>
</html> 

 這里將寬度和高度值都設置為60%,從瀏覽效果中可以看到,DIV的寬度已經變為了瀏覽器寬度60%的值,當擴大或縮小瀏覽器窗口大小時,其寬度和高度還將維持在與瀏覽器當前寬度比例的60%,窗口變大 自適應布局是比較常見的網頁布局方式。

.3 兩列固定寬度 
有了一列固定寬度作為基礎,兩列固定寬度就非常簡單。我們知道DIV用于對某一個區域的標識,因此,列的布局自然需要用到兩個DIV。 兩列固定寬度非常簡單,兩列的布局需要用到兩個DIV,分別把兩個DIV的id設置為left與right,表示兩個DIV的名稱。首先為它們設置寬度,然后讓兩個DIV在水平線中并排顯示,從而  形成兩列式布局,具體步驟如下。 

(1) 在HTML文檔的<head>與</head>之間相應的位置輸入定義的CSS樣式代碼,如下所示: <style>
#left{
       background-color:#00cc33;
       border:1px solid #ff3399;
       width:250px;
       height:250px;
       float:left;
       }
#right{
       background-color:#ffcc33;
       border:1px solid #ff3399;
       width:250px;
       height:250px;
       float:left;
}
</style> 
(2)在HTML文檔的<body>與</body>之間的正文中輸入以下代碼,給DIV使用left和right作為id名稱。 <div id="left">左列</div>
<div id="right">右列</div> 

(3)在使用了簡單的float屬性之后,兩列固定寬度就能夠完整地顯示出來了。

4  兩列寬度自適應 
下面使用兩列寬度自適應布局,來實現左右欄寬度能夠做到自動適應,設置自適應主要通過寬度的百分比值設置。CSS代碼修改為如下:
 <style>
#left{
    background-color:#00cc33;border:1px solid #ff3399; width 

 
  :60%;
    height:250px; float:left;
    }
#right{
    background-color:#ffcc33;border:1px solid #ff3399; width:30%;
    height:250px; float:left;
}
</style> 
這里主要修改了左欄寬度為60%,右欄寬度為30%。無論怎樣改變瀏覽器窗口大小,左右兩欄的寬度與瀏覽器窗口的百分比都不改變。 


5  三列浮動中間寬度自適應

 使用浮動定位方式,從一列到多列的固定寬度及自適應,基本上可以簡單完成,包括三列的固定寬度。這里給我們提出了一個新的要求,希望有一個三列式布局,其中左欄要求固定寬度,并居左顯示,右欄要求固定寬度并居右顯示,而中間欄需要在左欄和右欄的中間,根據左右欄的間距變化自動適應。 在開始這樣的三列布局之前,有必要了解一個新的定位方式——絕對定位。前面的浮動定位方式主要由瀏覽器根據對象的內容自動進行浮動方向的調整,但是這種方式不能滿足定位需求時,就需要新的方法來實現,CSS提供的除去浮動定位之外的另一種定位方式就是絕對定位,絕對定位使用position屬性來實現。 下面講述三列浮動中間寬度自適應布局的創建,具體操作步驟如下。

(1)在HTML文檔的<head>與</head>之間相應的位置輸入定義的CSS樣式代碼,如下所示:
 <style>
body{ margin:0px; }
#left{ background-color:#ffcc00;   border:3px solid #333333; width:100px;
 height:250px; position:absolute; top:0px; left:0px;
}
#center{ background-color:#ccffcc; border:3px solid #333333; height:250px;
    margin-left:100px; margin-right:100px; }
#right{ background-color:#ffcc00; border:3px solid #333333; width:100px;
    height:250px; position:absolute; right:0px; top:0px; }
</style>

(2)在HTML文檔<body>與</body>之間的正文中輸入以下代碼,給DIV使用left、right和center作為id名稱。 <div id="left">左列</div>
<div id="center">中間列</div>
<div id="right">右列</div>
以上就是關于常見的div+css的布局類型更多的css知識請關注小企業網站建設fnszeye.com

相關文章推薦閱讀:win10 iis的安裝步驟     Access數據庫的用途      注冊網站域名        圖片網站怎樣能更好的收錄