我爱电脑技术论坛 » 网站建设 » DIV+CSS常用的网页布局代码

star2008 发表于 2008-4-8 11:50

DIV+CSS常用的网页布局代码

　单行一列XoX5o:KWAi$R"PZD
　　以下是引用片段：*S
i:hMp]
　　body { margin: 0px; padding: 0px; text-align: center; }
6gz$jGq 　　#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
'w/bB.`]p
;XR%fZ md 　　两行一列
I dkT!I(\-\E 　　以下是引用片段：w0id^;Y(M$[
　　body { margin: 0px; padding: 0px; text-align: center;} +p(a d YP.u"O.Hr/T
　　#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
7H6bNo
z'G%~OL 　　#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}2v m@dv6c F7K?
MqSXHi1@%T
　　三行一列
E+VZ_j ~wf 　　以下是引用片段：C*h)l|`Q0a
　　body { margin: 0px; padding: 0px; text-align: center; } kl5};y_
　　#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
!fa,KCG F"~ 　　#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
`e6BPd~0D 　　#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } .a|;V`V"iV
M_Z)v/Xsr k2~H&{
　　单行两列
,k']FR `
yW$jf 　　以下是引用片段：emC:m'C8C Kh
　　#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } 'EWWkH `'z
　　#bodycenter #dv1 {float: left;width: 280px;}
j3eP!}k!wQ 　　#bodycenter #dv2 {float: right;width: 410px;}
b0n0b3X%rZ6Z.qz 2WA
U3MU
　　两行两列8])o&hL^#^a5q
　　以下是引用片段： jj&VjLEJ!?4L
　　#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#W EPG#oeL 　　#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } @ f0oJ;k!H0S3[
　　#bodycenter #dv1 { float: left; width: 280px;} N7vm.Z
`
　　#bodycenter #dv2 { float: right;width: 410px;}
WF9q~x5|2EY F
$f2iB"|&u"VH u 　　三行两列
(A/{_ t(Fug
[ 　　以下是引用片段：D8Yy*R_
　　#header{ width: 700px;margin-right: auto; margin-left: auto; }
1Za,ZR }$\t 　　#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
)z)h+bx;S!W 　　#bodycenter #dv1 { float: left;width: 280px;}
YZCnB*@'aFb 　　#bodycenter #dv2 { float: right; width: 410px;}
L%E'}7MD}Va5k x 　　#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
/n+W0l!CN
6w!d'e'Ul-V7}5bC 　　单行三列
3UGxZ3a [&^p/D 　　绝对定位?z%S{
C1N
　　以下是引用片段：5z&uP:^9y/I2{*bp(tc0F
　　#left { position: absolute; top: 0px; left: 0px; width: 120px; }
!o`veB P(w(M 　　#middle {margin: 20px 190px 20px 190px; } c_n&_a p a
　　#right {position: absolute;top: 0px; right: 0px; width: 120px;} L2ADj$B3PI2o6v
!hP3Z(t.dU4_
　　float定位一uB}q1}gx
　　xhtml:
._bC'McM 　　以下是引用片段：
5C|"BM*\f5r C1w 　　Yg}5_YJ d

K ZZj2r+B9_$t 　　MuiS#LLrEjX+m
9op%I3BZu
　　
gpS ^x~ 这里是第一列
7t6[5Fc+K+r"B_JD #P:f(x8z_a
　　7kz3mw/x
这里是第二列DZVsh1T

Hit8Mp,o 　　
N? []BiR
3tK!^v_ 　　-i T2D3cZwqbiU
m[D+}8V#|9pP \
　　Wi!a FM&q~#A
这里是第三列
,zn1X0e YG5B-T2x
`{1s+O4W/zf 　　
4m4ajH8@QZ
;oZkpk`f5O^ a 　　
@ r7dsYP,Z 6Qk[9z8n|J
8Y#a| G9\.LF6N
　　CSS:
*eb@p
U/v 　　以下是引用片段：
:g+J-O]} H,~ 　　#wrap{ width:100%; height:auto;}
QDXR E*m1wu 　　
Y!wj Q*|5y n 3Zk!Ke-? S"?;w!C1mk
V$E+a`3v{U M K
　　#column{ float:left; width:60%;}

Y%z&s^k|g i @d+J 　　#column1{ float:left; width:30%;}
[7f/w!Y'caS 　　#column2{ float:right; width:30%;} 7BTUp,JB:g\!D:z
　　#column3{ float:right; width:40%;} -w#^He^O@$E
　　.clear{ clear:both;} &_KoG3E#N*K
&mr]pr,?6]eci
　　float定位二 L a"J$o2r_6s/~b(P
z
　　xhtml::v].X P7_ L9u
　　以下是引用片段：
k7p OIJ4FBn 　　
R'?1Ci+\ p
/m;tjF)D/x 　　&vJ~a@:v
This is the main content.&L;[ hN8b
&Bm,jtl B8m5]
　　
)B6aD8X!G8D%UAk
2ZQk1jyh 　　fv6`RM&m}s.z

Y:O6m]@8@2R| 　　
b,`INIK8c This is the left sidebar.
~!L(KyM G^"DE a3B'[\ YaX%@ o!?;L
　　"H_] fN/IZ
(wOd9xQ
　　!bgY{z9a^!g N

&bfPx0D5?@.R5D5B 　　
PwmE-CX This is the right sidebar.
h?&a%z Nt[Bt
7K`X"c"Te X 　　
:lF)Y:C~$o ghp q7UuWDRg
*NS&w-QH9K5g
　　CSS:
xM&}TjU 　　以下是引用片段：
3bABs,X.Q QU 　　body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
FBy7DQ[b 　　.column {position: relative;float: left;} O&ypk UHG)w1C#l
　　#center {width: 100%;} ;e
Pr_+|ztZe$\e
　　#left {width: 180px; right: 240px;margin-left: -100%;} 5?,|5Et1c!fSB ?,r&d
　　#right {width: 130px;margin-right: -100%;} OA;X~Q
^2UU^;sY:S0E
　　两行三列
.b:~.Cl.c2|'xt 　　xhtml:Z [K$K!i,YT/T8a
　　以下是引用片段：1P!iB A+q&h2C`{Q
　　P?e C S'Z
这里是顶行
C(o8Q2Au If?5Z 9p|yl2j @+IRO
　　n@+cwm][
6u? ]7]lO3s
　　!n;{amJ5Y;K0m(wBE_A
!\+Hri0n:@\
　　&^f]8{2H]
这里是第一列Vl5\9e@!yLC
5tZ"X _,D4m%jy7e }
　　
d7n Kb'H
Hx9pUa 这里是第二列
B,I%\$i*K-t
E&m
r)r3`3eU9r6`%D
FQ 　　 Y,|hp"eO#^V7o#R

L Rpz di0p %A%c vY4]3I3i

/J8ee q[4Bq'c j1E 　　
C;Xy2~,Nt*t&A:T GWEr5|I8yL;{J i
　　a.ly(dB[4s!I
这里是第三列r#[1Q-N2fE}7|dp

,w Y&FrtOY]qz 　　:t"]K!Pj ]d2O-V
)OH6{;]T"Z*T W)Us
　　
&X*V.o}Y'F4q ex Qe#l7X'{4e.~.d

Ge;h0@2|9sp 　　CSS: #V%xzVqZ
　　以下是引用片段：3V;N.l NQ(V"l6M["v
　　#header{width:100%; height:auto;} 4l `9YA~3K-ns2?6K$?
　　#wrap{ width:100%; height:auto;} (x3J^P?US
　　#column{ float:left; width:60%;} sPE.O
}&G&I~
　　#column1{ float:left; width:30%;} ax7V f"`v
J)j
　　#column2{ float:right; width:30%;} _qj:^O+BnF~
　　#column3{ float:right; width:40%;}
gy5xW.vg6v 　　.clear{ clear:both;} $o:h.]hyIs

^D9z:` ](GU I;Mu2f/l't.} 　　三行三列
h(BfD i:[ 　　xhtml:
!x yeFI/AMULM 　　以下是引用片段：
O6[ Z r"r+E
L U:G)R 　　`V%x?}2C
这里是顶行#m8A@5gl,e

w:MQi UQ\5bp 　　|V ]:?K7{$L^

(c G.]UfoP 　　E`s+hx*h

!aC[Lg6u.J 　　#~:^&|'[,d@
这里是第一列
4b*e*r2V v3S t
yW1B6Q4`/uUc8g4ZY&r%s 　　
$O2aX)G G ~eS1W 这里是第二列M3SqRU[v
ta Hk+K
　　 PU+Hc(oh.|
k;E&DF7M^g.R]@-f%gf5D%y
　　

^v%YD)iE5IE u-S5s"V:_x%U
　　i.E%U9T0OE3Vi
这里是第三列A yT8K.H SP E{

l]U'`+z 　　P6X)^*Q0w_gt*Q8f$s
|T;tV-?!lKb
　　
0Tw{7n6Y'a|P 1j3Ika;u h
　　
O$BWa*l6u+h 这里是底部一行+T-O0H)t`6['|
a*G0p p%i4?
7S*o(fj&}j
　　CSS:
^y*v R"j)hn 　　以下是引用片段：
&CGTYr`?!jv 　　#header{width:100%; height:auto;}
y\\%sm @!a 　　#wrap{ width:100%; height:auto;}
0ut2O bO]p 　　#column{ float:left; width:60%;} lo8q1Va$ji
　　#column1{ float:left; width:30%;}
ottt| 　　#column2{ float:right; width:30%;} )Vi `&zj{n-wl
　　#column3{ float:right; width:40%;} U1J'a^|`K
c4i7\
　　.clear{ clear:both;}
s:J2wX ?n!O` 　　#footer{width:100%; height:auto;}
G~#X$zy9{4O n_Cq(l fX8nY*x k&z,Y
　　PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，都没有设置margin,padding,boeder等属性！

查看完整版本: DIV+CSS常用的网页布局代码