一小時搞定DIV+CSS佈局-固定頁面開度佈局

時間 2019-11-09

標籤一小時搞定 div+css div css 佈局固定頁面欄目 HTML 简体版

原文原文鏈接

本文講解使用DIV+CSS佈局最基本的內容，讀完本文你講會使用DIV+CSS進行簡單的頁面佈局。css

轉載請標明：http://www.kwstu.com/ArticleView/divcss_2013929173533658html

關於DIV+CSS佈局中用到的CSS必備知識請看：http://www.kwstu.com/ArticleView/divcss_201442291125960瀏覽器

DIV+CSS佈局中主要CSS屬性介紹：佈局

Float:ui

Float屬性是DIV+CSS佈局中最基本也是最經常使用的屬性，用於實現多列功能，咱們知道<div>標籤默認一行只能顯示一個，而使用Float屬性能夠實現一行顯示多個div的功能，最直接解釋方法就是能實現表格佈局的多列功能。spa

Margin:code

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

Padding:htm

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

Clear:

使用Float屬性設置一行有多個DIV後（多列），最好在下一行開始以前使用Clear屬性清楚一下浮動，不然上面的佈局會影響到下面。

實例講解：下面使用實例若是作一個簡單又基本的佈局，效果以下圖：

代碼：

<!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佈局教程</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;屬性設置容器根據內容自適應高度，若是不指定高度或不設置自適應高度，容器將默認爲1個字符高度，容器下方的佈局元素（footer）設置margin-top:屬性將無效*/

margin-top:20px;/*此處講解margin的用法，設置content與上面header元素之間的距離*/

background:#0FF;

}

#Content-Left{

height:400px;

width:200px;

margin:20px;/*設置元素跟其餘元素的距離爲20像素*/

float:left;/*設置浮動，實現多列效果，div+Css佈局中很重要的*/

background:#90C;

}

#Content-Main{

height:400px;

width:720px;

margin:20px;/*設置元素跟其餘元素的距離爲20像素*/

float:left;/*設置浮動，實現多列效果，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"></div>

<div id="Footer">Footer</div>

</div>

</body>

</html>

註解：Container做爲整個頁面的容器，控制着整個頁面在瀏覽器的位置，此處使用margin:0 auto;控制Container容器在瀏覽器中水平居中，通常固定寬度的佈局都會用到這就代碼。

本文只講述最基本的佈局，在具體開發實踐中可能會遇到瀏覽器兼容性等其餘問題，遇到細節問題請自行百度解決，解決的多了經驗就積累起來了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。