CSS部分应用

 

  1使用 line-height 垂直居中
  2line-height:24px;
  3使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），一行垂直居中时，使用 line-height 即可
  4清除容器浮动
  5#main {
  6    overflow:hidden;
  7}
  8不让链接折行
  9a {
 10    white-space:nowrap;
 11}
 12上面的设定就能避免链接折行
 13始终让 Firefox 显示滚动条
 14html {
 15    overflow:-moz-scrollbars-vertical;
 16}
 17更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持，也可以使用
 18body, html {
 19    min-height:101%;
 20}
 21使块元素水平居中
 22margin:0 auto;
 23其实就是
 24margin-left: auto;
 25margin-right: auto;
 26这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用
 27body{
 28    text-align: center;
 29}
 30然后定义内层容器
 31text-align: left;
 32恢复。
 33隐藏 Exploer textarea 的滚动条
 34textarea {
 35    overflow:auto;
 36}
 37Exploer 默认情况下 textarea 会有垂直滚动条
 38设置打印分页
 39h2 {
 40    page-break-before:always;
 41}
 42page-break-before 属性能设置打印网页时的分页。
 43删除链接上的虚线框
 44a:active, a:focus {
 45    outline:none;
 46}
 47Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。
 48最简单的 CSS 重置
 49* {
 50   margin: 0; padding: 0
 51}
 52度与父层容器一致），
 53
 54
 55单行一列
 56以下是引用片段：
 57body { margin: 0px; padding: 0px; text-align: center; }  
 58#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 
 59
 60两行一列
 61以下是引用片段：
 62body { margin: 0px; padding: 0px; text-align: center;}  
 63#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}  
 64#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
 65
 66三行一列
 67以下是引用片段：
 68body { margin: 0px; padding: 0px; text-align: center; }  
 69#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  
 70#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  
 71#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 
 72
 73单行两列
 74以下是引用片段：
 75#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }  
 76#bodycenter #dv1 {float: left;width: 280px;}  
 77#bodycenter #dv2 {float: right;width: 410px;} 
 78
 79两行两列
 80以下是引用片段：
 81#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}  
 82#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }  
 83#bodycenter #dv1 { float: left; width: 280px;}  
 84#bodycenter #dv2 { float: right;width: 410px;}
 85
 86三行两列
 87以下是引用片段：
 88#header{ width: 700px;margin-right: auto; margin-left: auto; }  
 89#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }  
 90#bodycenter #dv1 { float: left;width: 280px;}  
 91#bodycenter #dv2 { float: right; width: 410px;}  
 92#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 
 93
 94单行三列 
 95绝对定位
 96以下是引用片段：
 97#left { position: absolute; top: 0px; left: 0px; width: 120px; }  
 98#middle {margin: 20px 190px 20px 190px; }  
 99#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;}