����λ�ã�����ҳ > �����ĵ� > ��վ���� > div+css������̸
CROSS BROWSER TABBED PAGES �ص��б� �����CSS���������ģ�����
�û�����
�ܡ��룺 ��������
ע���Ա �οͲι� ��̳����
��div+css������̸

���ߣ�greengnn��ʱ�䣺 2006-03-24���ĵ����ͣ�ԭ�������ԣ���ɫ����
���ͳ�� total:2484 | year:2484 | Quarter:2484 | Month:2484 | Week:1759 | today:229

1.CSS���ֳ��õķ�����
float : none | left | right

ȡֵ��
none :�� Ĭ��ֵ������Ʈ��
left :�� �ı����������ұ�
right :�� �ı������������

�������������ģ�����һ�����е�����

xhtml:

<div id="warp">
 <div id="column1">�����ǵ�һ��</div>
 <div id="column2">�����ǵڶ���</div>
 <div class="clear"></div>
</div>

CSS:

#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;}

position : static | absolute | fixed | relative

ȡֵ��

static :�� Ĭ��ֵ�������ⶨλ��������ѭHTML��λ����
absolute :�� ��������ĵ������ϳ���ʹ�� left �� right �� top �� bottom ���������������ӽ���һ�����ж�λ���õĸ�������о��Զ�λ����������������ĸ����������� body ���󡣶�����ͨ�� z-index ���Զ���
fixed :�� δ֧�֡�����λ��Ӿ���(absolute)��ʽ������Ҫ����һЩ�淶
relative :�� ���󲻿ɲ������������ left �� right �� top �� bottom �������������ĵ�����ƫ��λ��

����ʵ��һ�����е�����

xhtml:

<div id="warp">
 <div id="column1">�����ǵ�һ��</div>
 <div id="column2">�����ǵڶ���</div>
</div>

CSS:

#wrap{ position:relative;/*��Զ�λ*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}

���ǵ���������?

��Ȼ��float����Զ�λ�ģ�������������Ĵ�С�ͷֱ��ʵı仯���ı䣬��position�Ͳ����ˣ�����һ������»���float���֣�

2.CSS���ò���ʵ��

һ��
����һ��

body { margin: 0px;   padding: 0px;  text-align: center;  }
#content {  margin-left:auto;  margin-right:auto;  width: 400px;  width: 370px; }

����һ��

body {  margin: 0px;   padding: 0px;   text-align: center;}
#content-top { margin-left:auto;   margin-right:auto; width: 400px;  width: 370px;}
#content-end {margin-left:auto; margin-right:auto;  width: 400px;   width: 370px;}

����һ��

body {  margin: 0px; padding: 0px;  text-align: center;  }
#content-top {  margin-left:auto;  margin-right:auto;  width: 400px;   width: 370px;  }
#content-mid { margin-left:auto; margin-right:auto;  width: 400px;  width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px;  width: 370px; }

����
��������

#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto;  }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}

��������

#header{    width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}

��������

#header{    width: 700px;margin-right: auto; margin-left: auto;  }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto;  }
#bodycenter #dv1 {  float: left;width: 280px;}
#bodycenter #dv2 { float: right;  width: 410px;}
#footer{     width: 700px;  margin-right: auto; margin-left: auto;  overflow: auto;  }

����
��������
���Զ�λ

#left { position: absolute; top: 0px;  left: 0px; width: 120px;  }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px;  width: 120px;}

float��λ

xhtml:

<div id="warp">
 <div id="column">
 <div id="column1">�����ǵ�һ��</div>
 <div id="column2">�����ǵڶ���</div>
 <div class="clear"></div>
 </div>
 <div id="column3">�����ǵ�����</div>
 <div class="clear"></div>
</div>

CSS:

#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

float���

xhtml:

 <div id="center" class="column">
  <h1>This is the main content.</h1>
 </div>
 <div id="left" class="column">
  <h2>This is the left sidebar.</h2>
 </div>
 <div id="right" class="column">
  <h2>This is the right sidebar.</h2>
 </div>

CSS:

body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}

��������

xhtml:

<div id="header">�����Ƕ���</div>
<div id="warp">
 <div id="column">
 <div id="column1">�����ǵ�һ��</div>
 <div id="column2">�����ǵڶ���</div>
 <div class="clear"></div>
 </div>
 <div id="column3">�����ǵ�����</div>
 <div class="clear"></div>
</div>

CSS:

#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

��������

xhtml:

<div id="header">�����Ƕ���</div>
<div id="warp">
 <div id="column">
 <div id="column1">�����ǵ�һ��</div>
 <div id="column2">�����ǵڶ���</div>
 <div class="clear"></div>
 </div>
 <div id="column3">�����ǵ�����</div>
 <div class="clear"></div>
</div>
<div id="footer">�����ǵײ�һ��</div>

CSS:

#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}

PS:�����г����dz��õ����ӣ������о�֮�ã���һÿ�����ӣ��Ҷ�û������margin,padding,boeder�����ԣ�����Ϊ�Ҹ��˾��ã����п��ȶ�λ��ʱ����ò����õ����ǣ����DZز����ѣ���Ϊ������������Ļ������������������⣬������ͷ�ۣ����Ҳ���һϵ��CSS���룬�Ҿ���������Ч�ʺ�Ч�������ã�

3.CSS���ָ߼�����

margin��padding�����п���Ҫ�õ�����������������ν���أ���������������������ȵķ�����ͬ��

IE 6.0 Firefox Opera����
��ʵ����=width+padding+border+margin
IE5.X
��ʵ����=width-padding-border-margin

�����ԣ���һ���º������IJ����ڵڶ�������º���Ǻ���ҵģ�

�������� hack

 div.content {
width:400px; //����Ǵ����width�������������������
voice-family: "\"}\""; //IE5.X/win������"\"}\""�������
voice-family:inherit;
width:300px; //����IE6/win���ڵIJ��������������䣬�µ���ֵ(300px)���ǵ��˾ɵ�
}
html>body .content { //html>body��CSS2���
width:300px; //֧��CSS2��д���������(��IE5)���Ҷ�������һ��
}

div.content {
width:300px !important; //�������ȷ��width���󲿷�֧��!important��ǵ������ʹ���������ֵ
width(�ո�)/**/:400px; //IE6/win��������䣬����IE6/win��Ȼ��Ϊwidth��ֵ��300px����IE5.X/win������䣬�µ���ֵ(400px)���ǵ��˾ɵģ���Ϊ!important��Ƕ����Dz�������
}
html>body .content { //html>body��CSS2���
width:300px; //֧��CSS2��д������������Ҷ�������һ��
}

������͵���������Ӳ鿴

www.blueidea.com/tech/site/2006/3170.asp
www.jluvip.com/blog/article.asp?id=114

�еȸ߼���

n��n�в��֣�ÿ�и߶ȣ����Ȳ�����ȷ�����еĸ߶ȣ�����ͬ����ÿ�����ʦ׷���Ŀ�꣬�����У�����ͼ��䡢��JS�ű���
��������������������غ��еĸ��ױ߽�������ڲ������ϵķ�����

����ͼ��䷨��

xhtml:

<div id="wrap">
<div id="column1">���ǵ�һ��</div>
<div id="column1">���ǵڶ���</div>
<div class="clear"></div>
</div>

css:

#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}

���ǽ�һ��npx����һ��ͼƬ���ⲿ���������ظ�����λ�����н�����λ�������ظ������Ӿ��ϲ��������и߶�һ���Ĵ���

JS�ű�����

www.blueidea.com/bbs/NewsDetail.asp?id=2453983
�����ԭ������������������ȡ�߶ȣ��жϸ߶ȣ��߶���ȡ�

��������������غ��еĸ��ױ߽�������ڲ������ϵķ���

��ƪ����˵�ĺ���ϸ�ˣ�

www.blueidea.com/tech/web/2006/3210.asp

����

www.jluvip.com/blog/article.asp?id=151

�����߶Ȳ��֣���խ770px���1024px���䲼�֣�

www.blueidea.com/tech/web/2005/3124.asp

�����һ���������죬���ᵽ����һ�������˾����վ��Ҫ��1.800x600������2.1024x767������3.1280�¾��С�4.������JS��
��ͻȻ��������ƪ���£������������о�����˼����������ˣ����Ǻ������IE5�е����Ⱑ��

������̳��������
http://www.blueidea.com/bbs/NewsDetail.asp?id=2506047

��������ɫ����
���α༭��moby

�������̳��վ�ۺ�����ҳ�������μ�����

������� �����������
��tableһ������div
�����CSS�������������
div��ͼƬ����Ӧ�������
[css]IE5/IE5.5/IE6/FF������
��ӱʵ�õ���ʾͼƬЧ��
��������
��tableһ������div
�����׺����ı���
��css�����˿���
ȫ�� ��վ ��̳
����������CSS Fireworks ��Ʊ��� ��ҳ���� Dreamweaver Studio8 Flash
վ������ վ�������б�
1000��PNGͼ��������
�����Ч--���Կ�ܵ�����
CROSS BROWSER TABBED PAGES
��άʤ˵����ϵͳ�Ĺ���
ɳ̲С�ӡ�Quest˵��������
Ҷ�� ̸Oblog�ɳ��Ĺ���
JavaScript����������
xScrollStick
�������ʵ�ָ������Ĺ���
TSREDʮ������
��Ŀ���� ��Ŀ�����б�
�����Ч--���Կ�ܵ�����
CROSS BROWSER TABBED PAGES
JavaScript����������
xScrollStick
�������ʵ�ָ������Ĺ���
div+css������̸
��tableһ������div
������loading����������
ģ��combox(select)�ؼ�
COOL��ʵ�õĶ�̬Ч��

��ɫ�����Ȩ�������������ر�������Ҫת�أ�������Ȩ��վ���Ҳ����������⣬��ҿ�������ת����վ���ԭ�����£���ԭ���ߺ�������վ�����ӱ��뱣��������վԭ���ģ�����ԭ����һ�ڣ��������ӣ������°�Ȩ����վ�����߹��С�

ת��Ҫ����ת��֮ͼƬ���ļ��������벻Ҫ��������վ���Ҳ�׼���ϸ���վ���ˮӡ���಻��Ĩȥ��վ��ˮӡ��

�ر�ע������վ���ṩ����Ӱ��Ƭ���廭�������Ʒ������ʹ�ã�����ԭ������ϵ����Ȩ��ԭ��������

�������� 2 ������ ���֣�- llllllllllllllllllll + ��������: 2 ,ƽ����: 4.50


iboor Publish at 2006-3-27 11:33:48 ����5
лл���ղء�
iei Publish at 2006-3-25 9:08:05 ����4
�ö�����ȻҪ�����о������ղأ�
��������
�û����� �����
˵����������ȷ���û�����������ܲ������ۡ���������DZ�վ��Ա�������ע�� Ϊ��վ��Ա��
ע�⣺�����е����ӡ����ݵ���Ҫ�޸ĵĴ���������������������ĵ���ʱ�޸ġ�
������ 1 2 3 4 5
ע�⣺�벻Ҫ�������к��������޹صĹ�����ӣ�Υ�߷�ID
����ע�⣺
���������������������Ա����������Ա��ʱɾ����
���������ϵ��£������л����񹲺͹��ĸ����йط��ɷ���
���е�һ����������Ϊ��ֱ�ӻ��ӵ��µ����»����·�������
����վ���۹�����Ա��Ȩ������ɾ�����Ͻ�����е���������
�����ڱ�վ��������Ʒ����վ��Ȩ����վ��ת�ػ�����
�����뱾���ۼ��������Ѿ��Ķ���������������
�Ƽ��ĵ� | ��ӡ�ĵ� | �����ĵ� | ������� ��