����λ�ã���ҳ����ҳ�����HTML/CSS�� ������ú�ʵ�õ�CSS����

������ú�ʵ�õ�CSS����

ʱ�䣺2011/5/18 14:45:43��Դ��쫷��������ߣ�������Ҫ����(0)

CSS Menu Generator ��ҳ�˵�����V4.0

��Ȩ�������� ��С��2.5M ���ԣ� ��������

���ص�ַ

1.����������������С
�����������Ĭ��ֵ ��Ȼ������������������С�����ʹ���Ż����û��������õ�CSS���� ������㲻������9MB���ļ����������£�

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:��; }
abbr,acronym { border:0; }

��Σ������������������Ĵ�СΪ10���أ�ʹ�����£�

html {font-size: 62.5%;}

�����С�������ʣ�Ȼ�������Ը����Լ�����Ҫ������С���� ����1Ϊ120����:

h1 {font-size: 2em;}

2.����ˮƽ����
���������վĿǰ���ǹ̶���ȵġ�CSS�������£�

div#container {margin: 0 auto;}

3.����λ�ã�����λ�ã����λ��
����������div

div��left��top����,���������.
����ڲ��div��position������absolute.��������������ĵ������Ͻǵ�λ��..
����ڲ��div(idΪson���Ǹ�)position����Ϊrelative,������left��topֵ�������������div�����Ͻǵľ���.

4.����ҪԪ�ط�������Ļ����
�����ϣ��������Ҫ�Ķ������������룬����ʹ������CSS��

div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}

��������ȷ��ָ����Ⱥ͸߶ȣ��ٰ�top��left������Ϊ���ǵ�һ�룬�����Ϳ�����������ֻص���Ļ�����ġ�

5.�����ظ����õĹ���

.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}

�����Լ���CSS��ʽ���Ϳ���������Ҫ��ʱ��ֱ�ӵ���ӱ�Ǽ��ɡ�

6. ���IE6 �ĸ���Ԫ�ص�˫���߾�����
��һ��div������float:left �� margin-left:100px ��ô��IE6�У����bug�ͻ���֡���ֻ��Ҫ������һ��display���ɣ��������£�

div {float:left;margin:40px;display:inline;}

7.�ĵ����˵�
�����������Ԥ��һ���������Ƿdz�����ġ������ñ��˶�����ҳ����Ҫ������һ�����µ��˽⡣��һ������XHTML��

Peakflow Design

Google

Zen Habits

CSS���룺

#navbar ul li {display:inline;margin:0 10px 0 0;}
#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
#navbar ul li a:hover {background:#eee;color:black;}

8.��ʹ��table��form��
�����������ڽ�����վ��Ƶ�table-free�����ص��Ƿ���ʹ��DIVs�ϡ����ٶԱ���к������Լ��������������ҪһЩ���õ�CSS����JeddHowden.com ����

XHTML:

Personal Information

First Name:

Last Name:

Zip/Postal Code:

CSS:
form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}

9.��footer����ͣ����ҳ��ĵײ�
����ҳ�ĵײ����DZ����Ź�˾�İ汾��Ϣ��������ⲿ����Ϣ��ʵ���أ�����һ���ܹ��ϵļ������ⶼҪ�鹦��The Man in Blue ��

XHTML��

*Place all page content here*

*Place anything you want in your footer here*

CSS:
html, body { height: 100%; }
#nonFooter { position: relative; min-height: 100%; }
* html #nonFooter { height: 100%; }
#content { padding-bottom: 9em; }
#footer { position: relative; margin-top: -7.5em; }

10.��ͬһԪ����ʹ�ö�����
�������õĹ���Խ��Խ��ģ���������˶��������ڲ�CSS��ѡ��һ��Ԫ�ؿ������úܶ���࣬���磺

.red {color: red;}
.bold {font-weight: strong;}

���ǿ�����������

This text will be red yet also bold!

����Ķ����Ի�jQuery��CSS3�˵�Դ��CSSʵ��Tab����CSS��λ-CSS Reset�������IE6���Զ�λ��bug�������취CSS��ʽ����������׵���վ����վ����ҳ����ɺڰ�DW�����ҳʱ��֯CSS�Ľ������ױ�����overflow:hidden

��������

�鿴����0������>>

��������

����˵����...

�ύ����