----------------------------------------------------------------------------------------------------
0001：
CSS技术的核心是布局，而不是样式。CSS的强大生命力在于它的布局能力，而不是细枝末节的修饰功能。
----------------------------------------------------------------------------------------------------
0002：
浏览器对CSS的解析差异是CSS开发人员所面临的巨大挑战。
----------------------------------------------------------------------------------------------------
0003：
评价一种Web开发技术优劣的标准只有一个，那就是看这种技术能否在最恰当的时间和最恰当的地点，以最恰当
的方式，为最需要信息的人提供最恰当的信息服务。
----------------------------------------------------------------------------------------------------
0004：
标准化永远不会是错误。
----------------------------------------------------------------------------------------------------
0005：
全部CSS的布局是发展趋势。
----------------------------------------------------------------------------------------------------
0006：
表格布局是不标准的，表格的目的是用来显示数据的，而不是来完成布局，错把表格当布局缘于当时Web技术的
缺乏和对标准需求的乏力。
----------------------------------------------------------------------------------------------------
0007：
Web 1.0的主要特点在于用户通过浏览器获取信息，Web 2.0则更注重用户的交互作用，用户既是网站内容的消
费者，也是网站内容的制造者。Web 1.0到Web 2.0的转变，具体的说，从模式上是单纯的“读”向“写”的转变。
所以互联网的下一步，是要让所有的人都忙起来，用全民力量共同组织出贴近生活的网。
----------------------------------------------------------------------------------------------------
0008：
表格的作用依然不容忽视，不过，表格会日渐恢复表格的本来职能——数据的组织和显示，而不是让表格承载
网页布局的重任。
----------------------------------------------------------------------------------------------------
0009：
似乎在XHTML＋CSS布局中数据列表都喜欢使用<li>标签，但是如果是多行多列的数据显示，使用<td>标签会优
于<li>标签。
----------------------------------------------------------------------------------------------------
0010：
做好事容易，难的是一辈子做好事。
----------------------------------------------------------------------------------------------------
0011：
776px是现在设计的标准宽，能兼容1024x768、800x600等多种显示分辨率。
----------------------------------------------------------------------------------------------------
0012：
在传统表格布局中，要实现圆角一般通过插入一个3行3列的表格，然后在4个顶角单元格中插入制作好的圆角图
象，并定义表格背景色与圆角图象的颜色一致就可以了。
----------------------------------------------------------------------------------------------------
0013：
多层表格嵌套会带来两个问题：一个是浏览器解析的缓慢；另一个是多层嵌套为代码维护与内容修改带来麻烦。
----------------------------------------------------------------------------------------------------
0014：
版权标志：©
----------------------------------------------------------------------------------------------------
0015：
<pre>标签可以按照文本的格式进行显示。
----------------------------------------------------------------------------------------------------
0016：
html标签一般也设置一个宽度：
html
{
min-width:776px;
}
----------------------------------------------------------------------------------------------------
0017：
body的常见属性设置：
body
{
/*定义边距*/
margin:0px;
padding:0px;
/*定义边宽*/
border:0px;
/*定义字体颜色*/
color:#000000;
/*定义字体大小*/
font-size:12px;
/*定义行高为字体大小的1.2倍*/
line-height:120%;
/*定义居中对齐*/
text-align:center;
/*定义背景颜色*/
background-color:#CCCCCC;
/*定义字体集*/
font-family:宋体 新宋体 Arial Verdana Sans-Serif;
}
----------------------------------------------------------------------------------------------------
0018：
a的常见属性设置：
a
{
margin:0px;
padding:0px;
border:0px;
/*没有下划线*/
text-decoration:none;
}
/*链接的颜色*/
a:link
{
color:#661133;
}
/*访问之后的链接颜色*/
a:visited
{
color:#FFAABB;
}
/*鼠标滑过链接时的样式*/
a:hover
{
color:#AABBCC;
text-decoration:underline;
}
/*定义鼠标按下的样式*/
a:active
{
color:#CCBBAA;
}
----------------------------------------------------------------------------------------------------
0019：
设置背景图：
#divContent
{
/*横向的背景图片*/
background:url(http://images.163.com/images/163homepage/biaoshi.gif) repeat-x left top;
}
----------------------------------------------------------------------------------------------------
0020：
所有的标签都必须是闭合的，如果是单独不成对的标签，应在标签的最后加一个“/”来关闭它，如<br />
----------------------------------------------------------------------------------------------------
0021：
所有的元素和属性都必须小写。
----------------------------------------------------------------------------------------------------
0022：
所有的属性都必须用双引号“”括起来。
----------------------------------------------------------------------------------------------------
0023：
所有特殊符号都用编码表示，例如，小于号（<）不是元素的一部分，必须被编码为“<”，大于号（>）为
“>”
----------------------------------------------------------------------------------------------------
0024：
html中的注释应该是：<!--这里是一个Panel区域-->
----------------------------------------------------------------------------------------------------
0025：
常用的块状元素包括div、h1～h6、p、table和ul。默认情况下，块状元素都会占据一行，通俗的说，两个相邻
块状元素不会出现并列显示的现象。
----------------------------------------------------------------------------------------------------
0026：
div元素表示文档结构块的意思，它可以把文档分割为多个有意义的区域或模块。因此，使用div元素可以实现
网页的总体布局。span元素与div元素一样在CSS布局中很有用。一般使用span元素为部分文本定义特殊的样式或者
修饰特定内容用。
----------------------------------------------------------------------------------------------------
0027：
有序列表：
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
----------------------------------------------------------------------------------------------------
0028：
标准网页布局要求网页结构与网页样式必须分离，这就是要把网页的样式用独立的CSS文件夹设置。
----------------------------------------------------------------------------------------------------
0029：
padding是属性，表示补白。下面的语句所呈现的效果是清除页面与浏览器边框之间的距离。
body
{
padding:0px;
}
----------------------------------------------------------------------------------------------------
0030：
用来构建整体框架的元素对象应该定义id属性，因为这些对象一般在页面中都是比较唯一、固定的，不会出现
一个结构在同一个页面内重复出现的现象。而可能重复出现的元素，最好使用class。
----------------------------------------------------------------------------------------------------
0031：
设置首字母的样式：
p:first-letter
{
color:#CCCCCC;
font-size:30px;
float:left;
}
----------------------------------------------------------------------------------------------------
0032：
常见属性解释：
●position：设置对象的定位方式。取值为absolute表示对象脱离文档流动，根据浏览器、具有定位功能的父
元素或特殊元素的左上角作为坐标原点来定位；取值为relative表示以文档流动中的当前对象自身位置为坐标原点
进行定位；取值为fixed表示不受任何网页影响，根据浏览器的左上角进行定位，定位之后在窗口中的显示位置就被
固定，不随滚动条滚动。
●z-index：设置对象层叠顺序，取值越大，显示越靠上，此属性仅作用于position属性值设置为relative或absolute
的元素。
●top、right、bottom、left：设置对象与其最近一个具有定位属性的上级元素边框的距离，该属性仅在定位
position属性被设置时可用，否则会被忽略。
●clear：设置对象左右不允许有浮动对象，该属性需要与float属性配合使用。
●float：设置对象是否浮动以及浮动方向。当被定义为浮动时，对象将被视作块状显示，即display属性等于
block，此时浮动对象的display属性将被忽略。
●overflow：设置对象内容超过指定高和宽时如何显示内容。所有元素默认为visible，除了textarea元素和body
元素的默认值是auto。设置textarea元素的此属性值为hidden将隐藏其滚动条。
●display：设置对象显示类型或方式。
●visibility：设置是否显示对象。
----------------------------------------------------------------------------------------------------
0033：
不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色
的解释差异。
----------------------------------------------------------------------------------------------------
0034：
Url都使用根地址定位好。
----------------------------------------------------------------------------------------------------
0035：
在元素内容与边框之间的空白区域，被称做元素的补白（padding），有人也称之为元素的内边距。填充或内框，
在元素边框外边的空白区域，被称做边界（margin），有人也称之为元素的外边距或外框。
----------------------------------------------------------------------------------------------------
0036：
设置div的边框：<div style="border-width:1px; border-style:dashed; border-color:#CCCCCC; width:400px; height:400px;"></div>
----------------------------------------------------------------------------------------------------
0037：
实现信纸效果：
<style type="text/css">
li
{
border-bottom-style:solid;
border-bottom-color:#66CC66;
border-bottom-width:1px;
padding:5px 0px 0px 0px;
}
</style>
<div style="border-width:1px; border-style:solid; border-color:#CCCCCC; width:400px; ">
<ol style="font-size:12px;list-style-position:inside; margin:5px;">
<li>《JavaScript从入门到精通（黄金版）》电子工业出版社</li>
<li>《.NET性能优化》清华大学出版社</li>
<li>《Java与模式》电子工业出版社</li>
<li>《SQL编程实用大全（精华版）》中国水利水电出版社</li>
<li>《Ajax基础教程》人民邮电出版社</li>
</ol>
</div>
----------------------------------------------------------------------------------------------------
0038：
要实现CSS平行居中，首先应在父元素中定义text-align:center，这个属性在IE中实现所有元素的居中。但在
其他浏览器中只能实现文本和内联元素居中，要实现块状元素居中，解决方法就是为显示元素定义margin-right:auto;
margin-left:auto;
----------------------------------------------------------------------------------------------------
0039：
为了实现元素高度自适应，应该显示增加overflow:auto声明，但如果是IE浏览器，还需要增加一个辅助元素，
定义clear:both属性，实现强制撑开元素的高度。
<div style="width: 400px; height: auto; text-align: center; margin-left: auto; margin-right: auto;
background-color: #335566;">
<div style="width: 300px; height: 50px; background-color: #221177;">
</div>
<div style="width: 300px; height: 50px; background-color: #6611CC;">
</div>
<div style="clear: both;">
</div>
</div>
----------------------------------------------------------------------------------------------------
0040：
很多国内大型网站都把12px作为网页显示的标准字体大小。
----------------------------------------------------------------------------------------------------
0041：
line-height在网页设计中应该是字体大小的1.2倍～2倍。
----------------------------------------------------------------------------------------------------
0042：
列表项默认以单列垂直显示，它符合人眼所描规律，这样可以快速浏览信息。当然列表也可以在行内并列显示。
<style type="text/css">
li
{
display:inline;
padding:0px;
}
li a
{
text-decoration:none;
font-size:12px;
color:#666666;
padding:5px;
}
li a:hover,li a:focus,li a:active
{
text-decoration:none;
font-size:12px;
color:#666666;
background-color:#DDDDDD;
}
</style>
<ul style="list-style-type:none;">
<li><a href="#">菜单一</a></li>|
<li><a href="#">菜单二</a></li>|
<li><a href="#">菜单三</a></li>|
<li><a href="#">菜单四</a></li>|
<li><a href="#">菜单五</a></li>
</ul>
----------------------------------------------------------------------------------------------------
0043：
截断字符串：
<div id="divMain" style="width: 200px; height: 100px; background-color: #DDDDDD; text-overflow:ellipsis; overflow:hidden;">
ABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDE
</div>
----------------------------------------------------------------------------------------------------
0044：
流动模型是HTML默认布局模式，浮动模型是CSS推出的一种布局模型。
----------------------------------------------------------------------------------------------------
0045：
任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义了display:block;声明。这样就可
以为浮动元素定义width和height属性，即使是内联显示元素。
----------------------------------------------------------------------------------------------------
0046：
当两个或者两个以上的相邻元素都被定义为浮动显示时，如果存在足够的空间容纳它们，浮动元素之间可以并
列显示。如果没有足够的空间，那么后面的浮动元素将会下移到能够容纳它的地方，这个向下移动的元素有可能产
生一个单独的浮动。
----------------------------------------------------------------------------------------------------
0047：
绝对定位元素的包含块是由距离它最近的、且被定位的上级元素，也就是在它外面最接近它的position属性值
为absolute、relative或fixed的父级元素。如果不存在这样的父级元素，那么默认包含块就是浏览器窗口本身。
----------------------------------------------------------------------------------------------------
0048：
IE：79.78% Firefox：15.82% Safari：3.28% Opera：0.81%
----------------------------------------------------------------------------------------------------
0049：
MultipleIEs，内置了从IE3到IE6的所有版本，便于进行浏览器兼容性测试。
----------------------------------------------------------------------------------------------------
0050：
手状显示：<div style="cursor:pointer; width:400px; height:400px; background-color:#FFFFFF;"></div>
----------------------------------------------------------------------------------------------------
0051：
把不同的页面公共样式存放在主样式表文件中，然后分别为不同页面定义属于自己的样式表文件。
----------------------------------------------------------------------------------------------------
0052：
根据功能块分离样式，如页眉、页脚、导航条、功能块等。
----------------------------------------------------------------------------------------------------
0053：
样式表文件，总体是先定义元素基本属性，然后定义id布局属性，最后是公共类，布局属性又以模块化从上到
下逐步定义。
----------------------------------------------------------------------------------------------------
0054：
对于属性书写来说，按属性的字母顺序进行排序，可以防止属性重复声明或被覆盖。
----------------------------------------------------------------------------------------------------
0055：
样式代码也必须有注释。
----------------------------------------------------------------------------------------------------
0056：
有时候中文注释会引起IE6的问题。
----------------------------------------------------------------------------------------------------
0057：
CSS注释的目的是为了本地查看和维护，以及团队内信息交流，但当把CSS上传到服务器上时，就没有必要把这
些注释也一块上传了。清除注释与代码空行能够节省带宽。最佳方法就是利用一些在线CSS优化工具快速优化。
----------------------------------------------------------------------------------------------------
0058：
应该把所有重复性的工作开发成软件自动执行。
----------------------------------------------------------------------------------------------------
0059：
凡是图象本身代表要显示的信息或内容，则应以图象方式插入，即通过img元素来实现；凡是图象作为布局的需
要来显示，与显示的内容或信息无关，则都应该以背景图象的方式嵌入，也就是说修饰性图象不能与内容性图象混
合使用。传统布局中就是因为把修饰性图象与内容性图象大量用img对象来插入，给布局带来无穷的后患。
----------------------------------------------------------------------------------------------------
0060：
纯CSS的圆角：
<style type="text/css">
#divTop
{
width: 402px;
height: 12px;
text-align: center;
}
#divTop div
{
/*实现非IE浏览器下的居中*/
margin: 0 auto;
height: 1px;
overflow: hidden;
background: #666666;
}
#t1{width: 390px;}
#t2{width: 394px;}
#t3{width: 396px;}
#t4{width: 398px;}
#t5{width: 398px;}
#t6{width: 400px;}
#t7{width: 400px;}
#t8{width: 400px;}
#t9{width: 402px;}
#t10{width: 402px;}
#t11{width: 402px;}
#t12{width: 402px;}
#divContent
{
width: 400px;
height: 200px;
border: 1px;
border-style: solid;
border-color:#666666;
}
</style>
<div id="divTop">
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>
<div id="t4"></div>
<div id="t5"></div>
<div id="t6"></div>
<div id="t7"></div>
<div id="t8"></div>
<div id="t9"></div>
<div id="t10"></div>
<div id="t11"></div>
<div id="t12"></div>
</div>
<div id="divContent"></div>
----------------------------------------------------------------------------------------------------
0061：
提示信息框：
<style type="text/css">
#divBox
{
border:1px;
border-style:solid;
border-color:#666666;
width:300px;
height:300px;
text-align:center;
font-size:12px;
}
#divBox div
{
width:100%;
}
#divTop
{
border-bottom:1px;
border-bottom-style:solid;
border-bottom-color:#666666;
background-color:#DDDDDD;
text-align:left;
height:20px;
line-height:20px;
}
</style>
<div id="divBox">
<div id="divTop">小贴士：</div>
<div id="divContent"></div>
</div>
----------------------------------------------------------------------------------------------------
0062：
实现阴影效果：
<div style="width:300px; height:300px; background:#CCCCCC; margin:10px auto;">
<div style=" width:298px; height:298px; position:relative; top:-2px; left:-2px;background-color:#FFFFFF; border:1px solid #999999;">
</div>
</div>
----------------------------------------------------------------------------------------------------
0063：
图片四周的阴影效果：
<div style="background:#BBBBBB; border:1px solid #DDDDDD; float:left;">
<div style="position:relative; margin:1px;background:#777777; border:1px solid #999999;">
<div style="position:relative; padding:1px; border:1px solid #555555; background:#FFFFFF;">
<img src="#" style="width:300px; height:180px;"/>
</div>
</div>
</div>
----------------------------------------------------------------------------------------------------
0064：
要确保站点布局统一，避免页面庞杂、多变，统一性可以体现在配色、结构、版式上，另外使用的标识、广告
条、图标和装饰线等也应该保持一致。
----------------------------------------------------------------------------------------------------
0065：
应树立网站的个性和特色。
----------------------------------------------------------------------------------------------------
0066：
CSS Tab Designer是一款专供使用CSS设计导航菜单的可视化工具。内置60多种导航菜单。
----------------------------------------------------------------------------------------------------
0067：
http://www.cssplay.co.uk/：有大量CSS代码。
----------------------------------------------------------------------------------------------------
0001：
CSS技术的核心是布局，而不是样式。CSS的强大生命力在于它的布局能力，而不是细枝末节的修饰功能。
----------------------------------------------------------------------------------------------------
0002：
浏览器对CSS的解析差异是CSS开发人员所面临的巨大挑战。
----------------------------------------------------------------------------------------------------
0003：
评价一种Web开发技术优劣的标准只有一个，那就是看这种技术能否在最恰当的时间和最恰当的地点，以最恰当
的方式，为最需要信息的人提供最恰当的信息服务。
----------------------------------------------------------------------------------------------------
0004：
标准化永远不会是错误。
----------------------------------------------------------------------------------------------------
0005：
全部CSS的布局是发展趋势。
----------------------------------------------------------------------------------------------------
0006：
表格布局是不标准的，表格的目的是用来显示数据的，而不是来完成布局，错把表格当布局缘于当时Web技术的
缺乏和对标准需求的乏力。
----------------------------------------------------------------------------------------------------
0007：
Web 1.0的主要特点在于用户通过浏览器获取信息，Web 2.0则更注重用户的交互作用，用户既是网站内容的消
费者，也是网站内容的制造者。Web 1.0到Web 2.0的转变，具体的说，从模式上是单纯的“读”向“写”的转变。
所以互联网的下一步，是要让所有的人都忙起来，用全民力量共同组织出贴近生活的网。
----------------------------------------------------------------------------------------------------
0008：
表格的作用依然不容忽视，不过，表格会日渐恢复表格的本来职能——数据的组织和显示，而不是让表格承载
网页布局的重任。
----------------------------------------------------------------------------------------------------
0009：
似乎在XHTML＋CSS布局中数据列表都喜欢使用<li>标签，但是如果是多行多列的数据显示，使用<td>标签会优
于<li>标签。
----------------------------------------------------------------------------------------------------
0010：
做好事容易，难的是一辈子做好事。
----------------------------------------------------------------------------------------------------
0011：
776px是现在设计的标准宽，能兼容1024x768、800x600等多种显示分辨率。
----------------------------------------------------------------------------------------------------
0012：
在传统表格布局中，要实现圆角一般通过插入一个3行3列的表格，然后在4个顶角单元格中插入制作好的圆角图
象，并定义表格背景色与圆角图象的颜色一致就可以了。
----------------------------------------------------------------------------------------------------
0013：
多层表格嵌套会带来两个问题：一个是浏览器解析的缓慢；另一个是多层嵌套为代码维护与内容修改带来麻烦。
----------------------------------------------------------------------------------------------------
0014：
版权标志：©
----------------------------------------------------------------------------------------------------
0015：
<pre>标签可以按照文本的格式进行显示。
----------------------------------------------------------------------------------------------------
0016：
html标签一般也设置一个宽度：
html
{
min-width:776px;
}
----------------------------------------------------------------------------------------------------
0017：
body的常见属性设置：
body
{
/*定义边距*/
margin:0px;
padding:0px;
/*定义边宽*/
border:0px;
/*定义字体颜色*/
color:#000000;
/*定义字体大小*/
font-size:12px;
/*定义行高为字体大小的1.2倍*/
line-height:120%;
/*定义居中对齐*/
text-align:center;
/*定义背景颜色*/
background-color:#CCCCCC;
/*定义字体集*/
font-family:宋体 新宋体 Arial Verdana Sans-Serif;
}
----------------------------------------------------------------------------------------------------
0018：
a的常见属性设置：
a
{
margin:0px;
padding:0px;
border:0px;
/*没有下划线*/
text-decoration:none;
}
/*链接的颜色*/
a:link
{
color:#661133;
}
/*访问之后的链接颜色*/
a:visited
{
color:#FFAABB;
}
/*鼠标滑过链接时的样式*/
a:hover
{
color:#AABBCC;
text-decoration:underline;
}
/*定义鼠标按下的样式*/
a:active
{
color:#CCBBAA;
}
----------------------------------------------------------------------------------------------------
0019：
设置背景图：
#divContent
{
/*横向的背景图片*/
background:url(http://images.163.com/images/163homepage/biaoshi.gif) repeat-x left top;
}
----------------------------------------------------------------------------------------------------
0020：
所有的标签都必须是闭合的，如果是单独不成对的标签，应在标签的最后加一个“/”来关闭它，如<br />
----------------------------------------------------------------------------------------------------
0021：
所有的元素和属性都必须小写。
----------------------------------------------------------------------------------------------------
0022：
所有的属性都必须用双引号“”括起来。
----------------------------------------------------------------------------------------------------
0023：
所有特殊符号都用编码表示，例如，小于号（<）不是元素的一部分，必须被编码为“<”，大于号（>）为
“>”
----------------------------------------------------------------------------------------------------
0024：
html中的注释应该是：<!--这里是一个Panel区域-->
----------------------------------------------------------------------------------------------------
0025：
常用的块状元素包括div、h1～h6、p、table和ul。默认情况下，块状元素都会占据一行，通俗的说，两个相邻
块状元素不会出现并列显示的现象。
----------------------------------------------------------------------------------------------------
0026：
div元素表示文档结构块的意思，它可以把文档分割为多个有意义的区域或模块。因此，使用div元素可以实现
网页的总体布局。span元素与div元素一样在CSS布局中很有用。一般使用span元素为部分文本定义特殊的样式或者
修饰特定内容用。
----------------------------------------------------------------------------------------------------
0027：
有序列表：
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
----------------------------------------------------------------------------------------------------
0028：
标准网页布局要求网页结构与网页样式必须分离，这就是要把网页的样式用独立的CSS文件夹设置。
----------------------------------------------------------------------------------------------------
0029：
padding是属性，表示补白。下面的语句所呈现的效果是清除页面与浏览器边框之间的距离。
body
{
padding:0px;
}
----------------------------------------------------------------------------------------------------
0030：
用来构建整体框架的元素对象应该定义id属性，因为这些对象一般在页面中都是比较唯一、固定的，不会出现
一个结构在同一个页面内重复出现的现象。而可能重复出现的元素，最好使用class。
----------------------------------------------------------------------------------------------------
0031：
设置首字母的样式：
p:first-letter
{
color:#CCCCCC;
font-size:30px;
float:left;
}
----------------------------------------------------------------------------------------------------
0032：
常见属性解释：
●position：设置对象的定位方式。取值为absolute表示对象脱离文档流动，根据浏览器、具有定位功能的父
元素或特殊元素的左上角作为坐标原点来定位；取值为relative表示以文档流动中的当前对象自身位置为坐标原点
进行定位；取值为fixed表示不受任何网页影响，根据浏览器的左上角进行定位，定位之后在窗口中的显示位置就被
固定，不随滚动条滚动。
●z-index：设置对象层叠顺序，取值越大，显示越靠上，此属性仅作用于position属性值设置为relative或absolute
的元素。
●top、right、bottom、left：设置对象与其最近一个具有定位属性的上级元素边框的距离，该属性仅在定位
position属性被设置时可用，否则会被忽略。
●clear：设置对象左右不允许有浮动对象，该属性需要与float属性配合使用。
●float：设置对象是否浮动以及浮动方向。当被定义为浮动时，对象将被视作块状显示，即display属性等于
block，此时浮动对象的display属性将被忽略。
●overflow：设置对象内容超过指定高和宽时如何显示内容。所有元素默认为visible，除了textarea元素和body
元素的默认值是auto。设置textarea元素的此属性值为hidden将隐藏其滚动条。
●display：设置对象显示类型或方式。
●visibility：设置是否显示对象。
----------------------------------------------------------------------------------------------------
0033：
不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色
的解释差异。
----------------------------------------------------------------------------------------------------
0034：
Url都使用根地址定位好。
----------------------------------------------------------------------------------------------------
0035：
在元素内容与边框之间的空白区域，被称做元素的补白（padding），有人也称之为元素的内边距。填充或内框，
在元素边框外边的空白区域，被称做边界（margin），有人也称之为元素的外边距或外框。
----------------------------------------------------------------------------------------------------
0036：
设置div的边框：<div style="border-width:1px; border-style:dashed; border-color:#CCCCCC; width:400px; height:400px;"></div>
----------------------------------------------------------------------------------------------------
0037：
实现信纸效果：
<style type="text/css">
li
{
border-bottom-style:solid;
border-bottom-color:#66CC66;
border-bottom-width:1px;
padding:5px 0px 0px 0px;
}
</style>
<div style="border-width:1px; border-style:solid; border-color:#CCCCCC; width:400px; ">
<ol style="font-size:12px;list-style-position:inside; margin:5px;">
<li>《JavaScript从入门到精通（黄金版）》电子工业出版社</li>
<li>《.NET性能优化》清华大学出版社</li>
<li>《Java与模式》电子工业出版社</li>
<li>《SQL编程实用大全（精华版）》中国水利水电出版社</li>
<li>《Ajax基础教程》人民邮电出版社</li>
</ol>
</div>
----------------------------------------------------------------------------------------------------
0038：
要实现CSS平行居中，首先应在父元素中定义text-align:center，这个属性在IE中实现所有元素的居中。但在
其他浏览器中只能实现文本和内联元素居中，要实现块状元素居中，解决方法就是为显示元素定义margin-right:auto;
margin-left:auto;
----------------------------------------------------------------------------------------------------
0039：
为了实现元素高度自适应，应该显示增加overflow:auto声明，但如果是IE浏览器，还需要增加一个辅助元素，
定义clear:both属性，实现强制撑开元素的高度。
<div style="width: 400px; height: auto; text-align: center; margin-left: auto; margin-right: auto;
background-color: #335566;">
<div style="width: 300px; height: 50px; background-color: #221177;">
</div>
<div style="width: 300px; height: 50px; background-color: #6611CC;">
</div>
<div style="clear: both;">
</div>
</div>
----------------------------------------------------------------------------------------------------
0040：
很多国内大型网站都把12px作为网页显示的标准字体大小。
----------------------------------------------------------------------------------------------------
0041：
line-height在网页设计中应该是字体大小的1.2倍～2倍。
----------------------------------------------------------------------------------------------------
0042：
列表项默认以单列垂直显示，它符合人眼所描规律，这样可以快速浏览信息。当然列表也可以在行内并列显示。
<style type="text/css">
li
{
display:inline;
padding:0px;
}
li a
{
text-decoration:none;
font-size:12px;
color:#666666;
padding:5px;
}
li a:hover,li a:focus,li a:active
{
text-decoration:none;
font-size:12px;
color:#666666;
background-color:#DDDDDD;
}
</style>
<ul style="list-style-type:none;">
<li><a href="#">菜单一</a></li>|
<li><a href="#">菜单二</a></li>|
<li><a href="#">菜单三</a></li>|
<li><a href="#">菜单四</a></li>|
<li><a href="#">菜单五</a></li>
</ul>
----------------------------------------------------------------------------------------------------
0043：
截断字符串：
<div id="divMain" style="width: 200px; height: 100px; background-color: #DDDDDD; text-overflow:ellipsis; overflow:hidden;">
ABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDE
</div>
----------------------------------------------------------------------------------------------------
0044：
流动模型是HTML默认布局模式，浮动模型是CSS推出的一种布局模型。
----------------------------------------------------------------------------------------------------
0045：
任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义了display:block;声明。这样就可
以为浮动元素定义width和height属性，即使是内联显示元素。
----------------------------------------------------------------------------------------------------
0046：
当两个或者两个以上的相邻元素都被定义为浮动显示时，如果存在足够的空间容纳它们，浮动元素之间可以并
列显示。如果没有足够的空间，那么后面的浮动元素将会下移到能够容纳它的地方，这个向下移动的元素有可能产
生一个单独的浮动。
----------------------------------------------------------------------------------------------------
0047：
绝对定位元素的包含块是由距离它最近的、且被定位的上级元素，也就是在它外面最接近它的position属性值
为absolute、relative或fixed的父级元素。如果不存在这样的父级元素，那么默认包含块就是浏览器窗口本身。
----------------------------------------------------------------------------------------------------
0048：
IE：79.78% Firefox：15.82% Safari：3.28% Opera：0.81%
----------------------------------------------------------------------------------------------------
0049：
MultipleIEs，内置了从IE3到IE6的所有版本，便于进行浏览器兼容性测试。
----------------------------------------------------------------------------------------------------
0050：
手状显示：<div style="cursor:pointer; width:400px; height:400px; background-color:#FFFFFF;"></div>
----------------------------------------------------------------------------------------------------
0051：
把不同的页面公共样式存放在主样式表文件中，然后分别为不同页面定义属于自己的样式表文件。
----------------------------------------------------------------------------------------------------
0052：
根据功能块分离样式，如页眉、页脚、导航条、功能块等。
----------------------------------------------------------------------------------------------------
0053：
样式表文件，总体是先定义元素基本属性，然后定义id布局属性，最后是公共类，布局属性又以模块化从上到
下逐步定义。
----------------------------------------------------------------------------------------------------
0054：
对于属性书写来说，按属性的字母顺序进行排序，可以防止属性重复声明或被覆盖。
----------------------------------------------------------------------------------------------------
0055：
样式代码也必须有注释。
----------------------------------------------------------------------------------------------------
0056：
有时候中文注释会引起IE6的问题。
----------------------------------------------------------------------------------------------------
0057：
CSS注释的目的是为了本地查看和维护，以及团队内信息交流，但当把CSS上传到服务器上时，就没有必要把这
些注释也一块上传了。清除注释与代码空行能够节省带宽。最佳方法就是利用一些在线CSS优化工具快速优化。
----------------------------------------------------------------------------------------------------
0058：
应该把所有重复性的工作开发成软件自动执行。
----------------------------------------------------------------------------------------------------
0059：
凡是图象本身代表要显示的信息或内容，则应以图象方式插入，即通过img元素来实现；凡是图象作为布局的需
要来显示，与显示的内容或信息无关，则都应该以背景图象的方式嵌入，也就是说修饰性图象不能与内容性图象混
合使用。传统布局中就是因为把修饰性图象与内容性图象大量用img对象来插入，给布局带来无穷的后患。
----------------------------------------------------------------------------------------------------
0060：
纯CSS的圆角：
<style type="text/css">
#divTop
{
width: 402px;
height: 12px;
text-align: center;
}
#divTop div
{
/*实现非IE浏览器下的居中*/
margin: 0 auto;
height: 1px;
overflow: hidden;
background: #666666;
}
#t1{width: 390px;}
#t2{width: 394px;}
#t3{width: 396px;}
#t4{width: 398px;}
#t5{width: 398px;}
#t6{width: 400px;}
#t7{width: 400px;}
#t8{width: 400px;}
#t9{width: 402px;}
#t10{width: 402px;}
#t11{width: 402px;}
#t12{width: 402px;}
#divContent
{
width: 400px;
height: 200px;
border: 1px;
border-style: solid;
border-color:#666666;
}
</style>
<div id="divTop">
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>
<div id="t4"></div>
<div id="t5"></div>
<div id="t6"></div>
<div id="t7"></div>
<div id="t8"></div>
<div id="t9"></div>
<div id="t10"></div>
<div id="t11"></div>
<div id="t12"></div>
</div>
<div id="divContent"></div>
----------------------------------------------------------------------------------------------------
0061：
提示信息框：
<style type="text/css">
#divBox
{
border:1px;
border-style:solid;
border-color:#666666;
width:300px;
height:300px;
text-align:center;
font-size:12px;
}
#divBox div
{
width:100%;
}
#divTop
{
border-bottom:1px;
border-bottom-style:solid;
border-bottom-color:#666666;
background-color:#DDDDDD;
text-align:left;
height:20px;
line-height:20px;
}
</style>
<div id="divBox">
<div id="divTop">小贴士：</div>
<div id="divContent"></div>
</div>
----------------------------------------------------------------------------------------------------
0062：
实现阴影效果：
<div style="width:300px; height:300px; background:#CCCCCC; margin:10px auto;">
<div style=" width:298px; height:298px; position:relative; top:-2px; left:-2px;background-color:#FFFFFF; border:1px solid #999999;">
</div>
</div>
----------------------------------------------------------------------------------------------------
0063：
图片四周的阴影效果：
<div style="background:#BBBBBB; border:1px solid #DDDDDD; float:left;">
<div style="position:relative; margin:1px;background:#777777; border:1px solid #999999;">
<div style="position:relative; padding:1px; border:1px solid #555555; background:#FFFFFF;">
<img src="#" style="width:300px; height:180px;"/>
</div>
</div>
</div>
----------------------------------------------------------------------------------------------------
0064：
要确保站点布局统一，避免页面庞杂、多变，统一性可以体现在配色、结构、版式上，另外使用的标识、广告
条、图标和装饰线等也应该保持一致。
----------------------------------------------------------------------------------------------------
0065：
应树立网站的个性和特色。
----------------------------------------------------------------------------------------------------
0066：
CSS Tab Designer是一款专供使用CSS设计导航菜单的可视化工具。内置60多种导航菜单。
----------------------------------------------------------------------------------------------------
0067：
http://www.cssplay.co.uk/：有大量CSS代码。
----------------------------------------------------------------------------------------------------
