利用 CSS 進行網頁布局

這裡主要主要介紹如何利用 css 來進行網頁的一欄，兩欄，三欄和混合布局

type="text/css">

body
.top
.main
.foot
style>
head>
class="top">
div>
class="main">
div>
class="foot">
div>
body>
html>

type="text/css">

body
.main
.left
.right
style>
head>
class="main">
class="left">
div>
class="right">
div>
div>
body>
html>

如果要使左右兩列的寬度自適應大小，只要將 class 等於 right 和 left 的兩個 div 的寬度設定為百分比的形式就好了，不要固定寬度。例如：

.left

.right

type="text/css">

body
.left
.middle
.right
style>
head>
class="left">
div>
class="middle">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
div>
class="right">
div>
body>
html>

如果我們在這裡只是簡單的設定 right, left 和 middle 的 div 的寬度的話，middle div 裡面的內容會顯示在一行，然後自己撐開了，使 right, left 和 middle 不在同一行，所以這裡用到了position:absolute從而使 middle div 裡面的根據內容自適應寬度。

type="text/css">

body
.top
.head
.main
.left
.right
.sub_l
.sub_r
.foot
style>
head>
class="top">
class="head">
div>
div>
class="main">
class="left">
div>
class="right">
class="sub_l">
div>
class="sub_r">
div>
div>
div>
class="foot">
div>
body>
html>

利用css進行網頁布局

網頁布局 又稱版式布局，是網頁ui設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性的化的表現出來，是一種具有個人藝術特色的視覺傳達方式。傳達資訊的同時有美感。網頁設計特點 相對紙媒來說 特點 1 網頁可以自適應寬度2 網頁的長度理論上可以無限延長3 頁面為 頭部，主體部分，底部。分欄又稱為...

用CSS對網頁進行布局

今天學習了用css對網頁進行簡單的布局，感覺還不錯，下面來分享一下。首先用div給頁面分塊是基礎，網頁布局就是將網頁合理的分成乙個乙個塊。接下來寫css層疊樣式，給每個要定義樣式的div定義乙個class或id,在對應的class裡面寫好樣式，這裡最主要的用到的屬性有margin，padding，w...

使用CSS進行簡單的網頁布局

web頁面是由塊元素組成的，正常情況下塊元素乙個個按垂直方向排布，構成了頁面。但是這種基本的布局方式絕大多時候不能滿足我們的需求，所以各種布局方式應運而生，所以，本文來介紹最簡單的幾種網頁布局方法。二 兩列布局 兩列布局一般是左右兩列的布局方式 三 三列布局 這個布局中的middle沒有加寬度，也就...