日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

DIV CSS布局-固定页面开度布局

發(fā)布時間：2023/12/2 52 豆豆
生活随笔 收集整理的這篇文章主要介紹了 DIV CSS布局-固定页面开度布局 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

　　

DIV CSS布局中主要CSS屬性介紹：

Float:

?????? Float屬性是DIV CSS布局中最基本也是最常用的屬性，用于實現(xiàn)多列功能，我們知道<div>標簽默認一行只能顯示一個，而使用Float屬性可以實現(xiàn)一行顯示多個div的功能，最直接解釋方法就是能實現(xiàn)表格布局的多列功能。

Margin:

?????? Margin屬性用于設置兩個元素之間的距離。

Padding:

?????? Padding屬性用于設置一個元素的邊框與其內容的距離。

Clear:

?????? 使用Float屬性設置一行有多個DIV后（多列），最好在下一行開始之前使用Clear屬性清楚一下浮動，否則上面的布局會影響到下面。

　　簡單操作實例：下面使用實例如果做一個簡單又基本的布局，效果如下圖：

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"? "" >

<html xmlns= "" > <head> <meta http-equiv= "Content-Type"? content= "text/html; charset=utf-8"? /> <title>DIV CSS布局教程</title> <style type= "text/css" > #Container{ ???? width:1000px; ???? margin: 0? auto; /*設置整個容器在瀏覽器中水平居中*/ ???? background:#CF3; } #Header{ ???? height:80px; ???? background:#093; } #logo{ ???? padding-left:50px; ???? padding-top:20px; ???? padding-bottom:50px; } #Content{ ???? height:600px; ???? /*此處對容器設置了高度，一般不建議對容器設置高度，一般使用overflow:auto;屬性設置容器根據(jù)內容自適應高度，如果不指定高度或不設置自適應高度，容器將默認為1個字符高度，容器下方的布局元素（footer）設置margin-top:屬性將無效*/ ???? margin-top:20px;/*此處講解margin的用法，設置content與上面header元素之間的距離*/ ???? background:#0FF; ????? } #Content-Left{ ???? height:400px; ???? width:200px; ???? margin:20px;/*設置元素跟其他元素的距離為20像素*/ ???? float:left;/*設置浮動，實現(xiàn)多列效果，div Css布局中很重要的*/ ???? background:#90C; } #Content-Main{ ???? height:400px; ???? width:720px; ???? margin:20px;/*設置元素跟其他元素的距離為20像素*/ ???? float:left;/*設置浮動，實現(xiàn)多列效果，div Css布局中很重要的*/ ???? background:#90C; } /*注：Content-Left和Content-Main元素是Content元素的子元素，兩個元素使用了float:left;設置成兩列，這個兩個元素的寬度和這個兩個元素設置的padding、margin的和一定不能大于父層Content元素的寬度，否則設置列將失敗*/ #Footer{ ???? height:40px; ???? background:#90C; ???? margin-top:20px; } .Clear{ ???? clear:both; } </style> </head> <body> <div id= "Container" > ???? <div id= "Header" > ???????? <div id= "logo" >這里設置了padding屬性介紹一下padding的用法,padding將設置文本與邊框的距離。</div> ???? </div> ???? <div id= "Content" > ???????? <div id= "Content-Left" >Content-Left</div> ???????? <div id= "Content-Main" >Content-Main</div> ???? </div> ???? <div class = "Clear" ><!--如何你上面用到 float ,下面布局開始前最好清除一下。--></div> ???? <div id= "Footer" >Footer</div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"? "" > <html xmlns= "" > <head> <meta http-equiv= "Content-Type"? content= "text/html; charset=utf-8"? /> <title>DIV CSS布局流程</title> <style type= "text/css" > #Container{ ???? width:1000px; ???? margin: 0? auto; /*設置整個容器在瀏覽器中水平居中*/ ???? background:#CF3; } #Header{ ???? height:80px; ???? background:#093; } #logo{ ???? padding-left:50px; ???? padding-top:20px; ???? padding-bottom:50px; } #Content{ ???? height:600px; ???? /*此處對容器設置了高度，一般不建議對容器設置高度，一般使用overflow:auto;屬性設置容器根據(jù)內容自適應高度，如果不指定高度或不設置自適應高度，容器將默認為1個字符高度，容器下方的布局元素（footer）設置margin-top:屬性將無效*/ ???? margin-top:20px;/*此處講解margin的用法，設置content與上面header元素之間的距離*/ ???? background:#0FF; ????? } #Content-Left{ ???? height:400px; ???? width:200px; ???? margin:20px;/*設置元素跟其他元素的距離為20像素*/ ???? float:left;/*設置浮動，實現(xiàn)多列效果，div Css布局中很重要的*/ ???? background:#90C; } #Content-Main{ ???? height:400px; ???? width:720px; ???? margin:20px;/*設置元素跟其他元素的距離為20像素*/ ???? float:left;/*設置浮動，實現(xiàn)多列效果，div Css布局中很重要的*/ ???? background:#90C; } /*注：Content-Left和Content-Main元素是Content元素的子元素，兩個元素使用了float:left;設置成兩列，這個兩個元素的寬度和這個兩個元素設置的padding、margin的和一定不能大于父層Content元素的寬度，否則設置列將失敗*/ #Footer{ ???? height:40px; ???? background:#90C; ???? margin-top:20px; } .Clear{ ???? clear:both; } </style> </head> <body> <div id= "Container" > ???? <div id= "Header" > ???????? <div id= "logo" >這里設置了padding屬性介紹一下padding的用法,padding將設置文本與邊框的距離。</div> ???? </div> ???? <div id= "Content" > ???????? <div id= "Content-Left" >Content-Left</div> ???????? <div id= "Content-Main" >Content-Main</div> ???? </div> ???? <div class = "Clear" ><!--如何你上面用到 float ,下面布局開始前最好清除一下。--></div> ???? <div id= "Footer" >Footer</div> </div> </body> </html> 注解：Container作為整個頁面的容器，控制著整個頁面在瀏覽器的位置，此處使用margin:0 auto;控制Container容器在瀏覽器中水平居中，一般固定寬度的布局都會用到這就代碼。

總結

以上是生活随笔為你收集整理的DIV CSS布局-固定页面开度布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。