补充说一下：类名是可以任意设置的，只要符合html的命名规则即可。也就是说，“search”在这里只是个名字，本身不具有意义，就好像问“姚明是什么意思”一样。
另外，name在这里也是个类名，当一个class同时设置多个类名时，它会自动把这些类的css样式进行合并（如果样式之间存在冲突，则后面的会覆盖前面的）。
再再补充一下：一个元素具有多个类，你可以在生活中随处找到例子，比如说一个人按性别分是男人，按年龄分是青年，按文化程度分是大学生，那么他就同时具有男人、青年、大学生的属性，即 class="男人 青年 大学生"
关于css常见问题，大多是移动端的。 简单的排版规则：条目与条目之间空两行，每条内容部分分段空一行。标点符号全部用中文字符。css的标点用英文。 条目编号后面紧跟英文字母的，要空一格，比如 4. css，“4.”和“css”之间有一个空格。 一、在做手机轮播图时，banner图的宽度是手机屏幕的宽度，轮播图加了左右切换按钮，按钮的position:absolute；定位的元素，定位的元素超出父容器时（超出了100%），会出现滚动条。 二、在移动端有3种布局可选。 1.定位布局 说明：头部、尾部是fixed定位。中间内容部分绝对定位，overflow-y:auto； 2. flex布局（朕极力推荐） 说明：这里写的简洁，没有写很多兼容，移动端兼容性比较好，安卓5.1以上都可以用。用的是较新的flex声明。（这个布局是抄袭手淘团队的。） 3.普通的流式布局 说明：头部和尾部依然是fixed定位，但是#content内容部分则是用padding-top和padding-bottom来支撑页面，这种布局相当垃圾，会带来各种页面上下莫名其妙的留白问题。 三、css属性 1. word-wrap:break-word； word-break:break-all；让一行连续的数字或英文字母遇到边界自动换行。 2. -webkit-user-select:none | normal | text；这个属性是禁止用户选择、复制文字，同时还会使input框、select框不能获取焦点，导致无法输入或选择。 所以在使用这个属性时，注意防止对input和select的污染。 3. css3属性选择器。li[class*='act']，可以选中所有class中有‘act’的li元素。 $('li').attr('class').indexOf('act')只是获取第一个li的class，然后判断是否有‘act’ 通过for循环可以进一步操作， for(var i = 0i <$("li[class*='act']").lengthi++){ $("li[class*='act']")[i] . . . } 4.清除浮动，解决高度塌陷 a.伪类(抄袭bootstrap的做法) .clearfix{} .clearfix:after{ display:tablecontent:' 'clear:both} b.王妮的做法 .box{ clear:bothoverflow:hidden} c.对于子元素写margin-top把父级拖下来的情况 （百度说是W3C的标准，只要破坏了父级子级紧贴的结构就可以了） 给父级写border-top，或者给父级写padding-top。采用b方法也可以，a方法无效。 5. css高度单位和颜色单位 height:calc（100vh - 200px）目前来看，兼容性还不错。注意，减号两边是有空格的。 background:rgba（255，255，255，0.5）rgb颜色值 和 颜色透明度。 6.关于 padding-top:100%padding-left:100% 可以利用这两个属性做绝对正方形。比如微信朋友圈的照片9宫格，qq空间的照片9宫格，sina微博的照片9宫格。屏幕宽度未知，一行排3个，每个宽度都是33.33333%，但是高度不能写百分比了。在每个宽度为33.3333%的元素里再写一个div，这个div的默认宽度就是父级的33.33333%，再用padding-top:100%把高度撑开，padding-top:%就是根据已有宽度计算，padding-top:100%padding-top的px值就和宽度相同，这样，正方形就做出来了，在正方形里面position:absolute一个div，width:100%height:100%然后在这个div里面布局就好。 每个正方形的间距可以用qq空间的2px的透明边框来做，也可以像sina微博一样，用左右padding和margin-bottom来做。一张图和四张图的时候，sina是另外写两个class来做的。 qq空间是js插件写进去的，最大宽度是290px，高度是根据最大宽度计算出来的。 7. 0.5px的线 a.发现qq空间的细线，兼容2倍屏和3倍屏 @media only screen and (-webkit-min-device-pixel-ratio : 1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) { .action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after { -webkit-transform:scaleY(.5) -moz-transform: scaleY(.5) -ms-transform: scaleY(.5) -o-transform: scaleY(.5) transform: scaleY(.5) } .action.flex .dropdown-menu .btn:after,.action.flex:before,.min-comments:nth-child(1):after { -webkit-transform-origin: 100% 0 -moz-transform-origin: 100% 0 -ms-transform-origin: 100% 0 -o-transform-origin: 100% 0 transform-origin: 100% 0 } .action.flex:after,.action.flex>.btn:after,.feed .source:after { -webkit-transform-origin: 0 100% -moz-transform-origin: 0 100% -ms-transform-origin: 0 100% -o-transform-origin: 0 100% transform-origin: 0 100% } } @media only screen and (-webkit-device-pixel-ratio: 1.5) { .action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after { -webkit-transform:scaleY(.6666) -moz-transform: scaleY(.6666) -ms-transform: scaleY(.6666) -o-transform: scaleY(.6666) transform: scaleY(.6666) } } @media only screen and (-webkit-device-pixel-ratio: 3) { .action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after { -webkit-transform:scaleY(.33) -moz-transform: scaleY(.33) -ms-transform: scaleY(.33) -o-transform: scaleY(.33) transform: scaleY(.33) } } b. weui的作法是 .weui-cells:after { content: " " position: absolute left: 0 bottom: 0 right: 0 height: 1px border-bottom: 1px solid #e5e5e5 color: #e5e5e5 -webkit-transform-origin: 0 100% transform-origin: 0 100% -webkit-transform: scaleY(0.5) transform: scaleY(0.5) z-index: 2 } 8.背景图片尺寸background-size，img标签object-fit，object-position。 background-size:contain | cover | auto 90% | 50% auto 这是以背景图的方式展示图片的，如果用img元素的话， object-fit:fill | contain | cover | none | scale-down（和background-size效果类似） object-position:center和background-position的取值一样。 这两个属性一起用的话，就能让img元素src的图片效果像背景图片的效果一样，不会因为图片尺寸不成比例而走形。但是兼容性不太好，目前只适合在移动端用。 9.阻止手机弹出默认菜单，长按img标签或者长按a标签会弹出系统默认菜单（ios上，安卓上没测）。 -webkit-touch-callout:none 10.给文字写行高时，让文字垂直居中时，要把高度也一起写了，line-height:35pxheight:35px 在用appcan做hybrid app时，发现在华为meta8上，用 ul li 做九宫格，li 浮动排在一行时，每个 li 有文字，高度用li的行高撑开的，没有文字的 li 和有文字的 li 的高度是不一样的。有的格子有文字有的没有文字，导致九个格子没有排在3行，有格子掉下去了，排成了4行。所以，在用行高让文字居中时，高度和行高要都写上。 11. text-align:justify p标签内大段文字时，除了最后一行，其余的文字都是左对齐，导致段落文字距离右边间距明显大于左边。 可以利用这个属性不处理最后一行的特性，做这种布局： 上面这个布局有一点bug，最后一行是留白，把父级撑高了，原因是父级认为所有子代，包括空文本节点都是占据空间的，哪怕空格，也占据空间。可以给父级 ul 写 font-size:0；就能把底部留白去除了，然后给子代再写font-size:14px就可以了。 但是，text-align:justify毕竟是处理空格（拉伸空格来使内部元素水平分散），所以在html中，li 要是连着写和分段写，表现结果是不一样的，所以这种奇妙的布局还是有些许不完美，甚至不能用。 12.去除-webkit-的滚动条 #content::-webkit-scrollbar{ display：none} 设置滚动条样式 /*滚动条宽度*/ #content::-webkit-scrollbar{ width:5px} /*滚动条滑块*/ #content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25)border-radius:3px} /*滚动条的整个背景*/ #content::-webkit-scrollbar-track-piece{ background:#eee} TGuide /* scrollbar */ ::-webkit-scrollbar{width:10pxheight:10px} ::-webkit-scrollbar-button{display:none} ::-webkit-scrollbar-track{background-color:black} ::-webkit-scrollbar-track-piece{background:#FFF} ::-webkit-scrollbar-thumb{background-color:#8E8E8Eborder-radius:5px} ::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B} ::-webkit-scrollbar-corner{background-color:#535353} /*::-webkit-scrollbar-resizer{background-color:#FF6E00}*/ 前面不加选择器表示，所有出现滚动条的元素。 13.设置placeholder的样式 input::-webkit-input-placeholder{ color:#999} input::-moz-input-placeholder{ color:#999} input:-ms-input-placeholder{ color:#999} 注意 -ms- 前面是一个 “ ：”。 14.移动端点击某一行 :active 时添加背景色，比如 li:active{ background:#eee} 时，要给 body标签上写ontouchstart，否则没有效果。 另一方面，给body添加，可以阻止图片被默认拖拽。百度的logo就可以被拖拽。 15.pageshow（）和pagehide（）方法。 问题描述：A页面跳转到B页面，在B页面操作后，返回到A页面，A页面的ajax方法不能被再次触发。appcan里面从B页面返回A页面是直接关闭了B页面，微信里是从缓存里取。这两者都不能再次触发A页面的ajax。比如，修改姓名，修改性别。从A页面点击input跳转到B页面进行修改操作，修改完成之后返回A页面，发现信息没有刷新，此时需要主动触发。 解决方法：可以监听pageshow方法，用addEventListener方法进行监听。pageshow（）方法的触发条件是，只要页面被显示就触发，比如appcan里的B页面覆盖在A页面，把B页面关闭，A页面自然就展现出来了，那么A页面的pageshow方法就会触发；微信里，点击返回，虽然是从缓存里取页面，但也会触发pageshow方法。pagehide（）顾名思义。 16.关于position。 华为meta7，安卓版本4.4.2，position:relative的元素比position:absolute的元素层级要高。百度新闻的导航效果，也是利用了这个。很奇怪。 这种结构，i.line是absolute，每个div都是relative，安卓4.4.2上 i.line 会被父级的兄弟div遮挡住。 解决办法是，把 i.line 拿出来，和div同级。 17. background:url() no-repeat center, url() no-repeat center可以一次性放两个图片，中间用逗号隔开。 18.关于移动端软键盘弹起，盖住页面的问题。 核心解决办法是利用 document.activeElement.scrollIntoView(false)参数false，表示activeElement的元素与页面下边对齐，true表示activeElement的元素与页面上边对齐。这个方法兼容性很好。 另一个方法与之类似 document.activeElement.scrollIntoViewIfNeeded()这个方法效果不是很好，没有上面那个好用。 19.常见于小说、报纸排版的column布局。 常用的5个属性有4个是知晓效果的： column-width:每列的宽度。 column-gap:列与列之间的间距。 column-fill:不知有何软用。 column-rule:列与列直接的分割线，与border属性效果一样。 column-count:总共分多少列。（这个属性受column-width限制，当同时写上column-width和column-count时，以column-width优先，比如总宽度800px，height:200pxcolumn-width:400pxcolumn-count:4显然，800px最多只能分2列，所以优先以column-width进行计算。） 小兼容：ios上，横向滚动 overflow-x:auto的容器不适合直接当成分栏布局的容器，应该在 overflow-x 的元素内嵌套一个div当做分栏布局的容器。否则会出现，分栏线，column-rule不跟随容器滚动的奇异现象。另外，column-gap不适合赋值，应当将column-gap写成0，列与列之间的间距可以用分栏布局的子元素的左右padding来做。 大段文字 .box{ width:300pxheight:14emoverflow-x:auto} /*滚动的容器*/ .col{ height:11.9emtext-align:justifycolumn-count:2column-gap:0} /*分栏的容器*/ .col >p{ padding:0 .5emline-height:1.2} /*文字内容的容器，加左右padding以增加列与列之间的间距。*/ 四、貌似很多webapp都会写两个meta标签不确定是否支持16进制的颜色值。（好像测试过，16进制颜色没有效果。在appcan里也没有效果。） 五、 一般不能上传相同图片 可以用 $('input[type="file"]').wrap('').closest('form').get(0).reset()重置后就可以了。 六、在安卓上touchmove出现了神奇的bug，百度上说，安卓上touchmove的一瞬间就会触发touchcancel，touch事件就全部被取消了。IOS上是没有这个问题的。 解决方法是：在touchmove里写e.preventDefault()即可。但是这样的话，手指滑动页面就不能scroll了。页面将无法滚动了。 七、flex布局 1. 2012年以后的版本 给父级添加 display:-webkit-flexdisplay:flex flex盒子内子元素的排列方向称作主轴，与主轴垂直的称作交叉轴。 flex盒子内的子元素可以被作项目。 注意：设为flex后，其子元素的float、clear、vertical-align属性就会失效。 a.作用于父级的6个属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。 //子元素的排列方向 flex-direction:row（默认值，从左到右） | row-reverse（从右到左） | column（从上到下） | column-reverse（从下到上） //子元素是否换行 flex-wrap:nowrap（默认值，不换行） | wrap（换行） | wrap-reverse（换行，但第一行在下方） //子元素排列方向和子元素是否换行的简写 flex-flow:row nowrap（默认值，从左到右，不换行。） //项目（子元素）在主轴上的对齐方式 justify-content:flex-start（默认值，以起点为始） | flex-end（以终点为始） | center（居中） | space-between（首尾两个元素紧贴边界，其余元素之间间隔相等） | space-around（每个项目的两侧间隔相等，相当于给每个项目加了margin，并且左右margin相等。所以首尾元素与边界都是有间距的。） //项目（子元素）在交叉轴上的对齐方式 align-items:flex-start（以起点为始） | flex-end（以终点为始） | center（居中） | baseline（与项目的第一行文字的基线对齐） | stretch（默认值，在交叉轴方向撑满父级） //多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。 align-content:flex-start（与交叉轴的起点对齐） | flex-end（与交叉轴的终点对齐） | center（与交叉轴的中点对齐） | space-between（与交叉轴两端对齐，轴线之间的间隔平均分布） | space-around（每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍，第一行和最后一行不会紧贴边框） | stretch（默认值，铺满整个交叉轴） （ align-content：stretch第一根轴线与边框对齐，其他轴线均分父级间隙。 ） b.作用于项目（子元素）的6个属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。 //子元素的排列顺序 order:0（默认值） | 1 | 2 | 3 . . . //项目（子元素）的放大比例 flex-grow:0（默认值，默认不放大，尽管有剩余空间） | 1 | 2 | 3 . . . //项目的缩小比例 flex-shrink:1（默认值，当空间不足时，该项目将缩小） | 0（不论如何，都不缩小） //项目占据的主轴空间 flex-basis:auto（默认值，项目本来的大小） | 固定值（200px，50%，100% . . .） //flex-grow，flex-shrink，flex-basis的简写 flex ：0 1 auto； flex:0 1 auto（默认值，有多余空间也不放大，但空间不足会缩小，默认占据空间就是自身大小） flex:auto=>flex：1 1 auto根据空间大小，可放大可缩小。（有兼容性问题，chrome可以正常解析 flex：auto-- flex：1 1 auto但 IE 就搞笑了，IE10解析出来的flex：auto -- flex：1 0 auto；只放大，不缩小。IE11解析出来的flex：auto；和chrome一样，可放大可缩小。所以在用这个属性的时候，要写完整值，不要简写。） flex:none； -- flex：0 0 auto；不放大，也不缩小。 //单个项目与其他项目不一样的对齐方式，会覆盖父级的align-items align-self:auto（默认值， 继承父级的align-items的值） | flex-start | flex-end | center | baseline | stretch除了auto，其他的与父级align-items属性一致。 注意要活用align-self：stretch和align-items：stretch 2. 2009年的版本 目前新版本被支持的很好，所以旧版的直接写带前缀的。 display:-webkit-boxdisplay:-ms-flexbox 子元素如果有display：inline的，要把子元素写成display：block2012年的版本不需要。 a.父级的5个属性。-webkit-box-pack，-webkit-box-align，-webkit-box-direction，-webkit-box-orient，-webkit-box-lines。 //项目在主轴上的对齐方式 -webkit-box-pack:start（默认值，从起点开始） | end | center | justify //项目在交叉轴上的对齐方式 -webkit-box-align:stretch（默认值，交叉轴方向撑满父级） | start | end | center | baseline //项目的排列顺序 -webkit-box-direction:normal（默认值，以起点为始） | reverse（以终点为始） //主轴方向 -webkit-box-orient:horizontal（默认值，水平方向） | vertical（垂直方向） | inline-axis（行内方式，映射为horizontal） | block-axis（块方式排列，映射为vertical） //项目（子元素是否换行） box-lines:single（默认值，不允许） | multiple（允许） 经测试，没有浏览器支持，这个属性不能用。 b.子元素的3个属性。box-flex，box-flex-group，box-ordinal-group。 //是否缩放 -webkit-box-flex:0（默认值，不放大也不缩小） | 1 | 2 | 3 . . . //子元素排列次序 -webkit-box-ordinal-group:1 | 2 | 3 . . . 从小到大排列。 3. 对 1、2 的小结。 2012年版本比2009年的版本主要多了两个属性，1个是子元素是否换行，flex-wrap，2009年的box-lines不起作用。还有一个是子元素在主轴的对齐方式，2012年的justify-content:space-around2009年的没有这个效果，但是可以通过加左右padding值的方式做到。 如果要兼容2009年版本的盒子布局又想换行的，只能改用float布局。 八、html结构嵌套问题 p标签内不要嵌套块元素，其他的像h、p、dl . . .的块元素都会发生解析错误。可以嵌套行间元素。 类似的，还有a标签里不能再出现a标签，嵌套多少层都不行。 html标签嵌套要按照块元素包含行间元素的规则来写。 九、标签 让浏览器用最新内核渲染。 十、form标签一点特性 在移动端，input框获取焦点时，浏览器会弹出软键盘，想让软键盘的enter键变成搜索两个字，需要让这个input按照这种结构写： 说明：onsubmit='return false'阻止表单默认提交，便于自己操作。 input 的 type 必须是 search。 input 的 加了style='position：relative'，防止ios上点击搜索按钮会闪屏（白屏）。 十一、浏览器兼容 1.关于table表格的宽度设置问题。 Firefox和chrome的解析方式是不一样的，chrome会把你写的table宽度全部转化成px。Firefox则不会，所以在td写行间样式宽度时，不能百分比和px混用，要统一，要么每个td都写百分比的宽，要么都写px的宽；不要这几个td写百分比，那几个td写px。 2.某些安卓不识别height:calc（）可以用flex布局代替。 十二、KTV字幕效果 实现方式1： 把文字写两遍，两个行间元素span，包裹相同的文字。 首页 首页 或者 首页 首页 实现原理是：让内部两个span宽度相等，其中一个设置width:0%；overflow:hidden然后用js动态控制width从0% -- 100%。 实现方式2：（张鑫旭说只适用于chrome，但是我测了下，好像firefox也是可以的。） 实现原理：background-image是覆盖在background-color上的，chrome有个私有属性 -webkit-background-clip:text意为背景裁切，以文字为裁切起止。效果就是背景图片只会展示文字的书写路径，除了文字的其他部分空间不展示背景图。再结合-webkit-text-fill-color:transparent将文字渲染的颜色写为透明，这样，文字路径就透出了背景图。再改变背景图片的水平位置，就能露出文字和背景图片下的背景颜色，就做到KTV字母效果了。 核心的css属性： background-image:url()/*纯色的背景图，用来渲染文字颜色，因为文字是透明的。*/ background-repeat:no-repeat -webkit-background-clip:text -webkit-text-fill-color:transparent background-position:0 0 ↑改变他就可以了。 关于实现方式2的图示：CSS可以写成一个独立的文件与html文件链接，也可以直接写在html里，甚至可以直接在html文件里的相关标签上定义样式，写法非常的灵活，以下是一工字型结构的页面，你可以学习一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
font: 100% 宋体, 新宋体
background: #666666
margin: 0/* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0
text-align: center/* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
color: #000000
}
.twoColLiqLtHdr #container {
width: 80% /* 这将创建一个占据 80% 浏览器宽度的容器 */
background: #FFFFFF
margin: 0 auto/* 自动边距（与宽度一起）会将页面居中 */
border: 1px solid #000000
text-align: left/* 这将覆盖 body 元素上的“text-align: center”。 */
}
.twoColLiqLtHdr #header {
background: #DDDDDD
padding: 0 10px /* 此填充会将出现在它后面的 div 中的元素左对齐。如果 #header 中使用的是图像（而不是文本），您最好删除填充。 */
}
.twoColLiqLtHdr #header h1 {
margin: 0/* 将 #header div 中最后一个元素的边距设置为零将避免边距重叠（即 div 之间出现的无法解释的空白）。如果 div 周围有边框，则不必将边距设置为零，因为边框也会避免边距重叠 */
padding: 10px 0/* 使用填充而不使用边距将可以使元素远离 div 的边缘 */
}
/* sidebar1 提示：
1. 由于我们使用的是百分比，因此最好不要在侧栏中使用填充。它将会新增至宽度，而让符合标准的浏览器建立未知的实际宽度。
2. 如果为 div 中的元素设置左边距和右边距，则会在 div 边缘和这些元素之间产生空白，如“.twoColLiqLtHdr #sidebar1 p”规则中所示。
3. 由于 Explorer 会在父元素显示之后计算宽度，因此基于百分比的栏有时会出现无法解释的错误。如果您需要更可预见的结果，可选择改为以像素为单位设置栏的大小。
*/
.twoColLiqLtHdr #sidebar1 {
float: left
width: 24%/* 由于此元素是浮动的，因此必须指定宽度 */
background: #EBEBEB/* 将显示背景色，其宽度等于栏中内容的长度，*/
padding: 15px 0/* 顶部和底部的填充将在该 div 中产生视觉空间 */
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
margin-left: 10px/* 对于将要放在侧栏中的每个元素，都应当设置左边距和右边距 */
margin-right: 10px
}
/* mainContent 提示：
1. mainContent 和 sidebar1 之间的空白是由 mainContent div 的左边距创建的。无论 sidebar1 div 中包含多少内容，都将保留栏空白。如果您希望在 #sidebar1 中的内容结束时，用 #mainContent div 的文本填充 #sidebar1 空白，则可以删除此左边距。
2. 为了避免在所支持的最小分辨率 800 x 600 下出现“浮动下降”，mainContent div 中的元素（包括图像）不应大于 430 像素。
3. 在下面的 Internet Explorer 条件注释中，zoom 属性用来赋予 mainContent“hasLayout”。这会避免几个特定于 IE 的错误。
*/
.twoColLiqLtHdr #mainContent {
margin: 0 20px 0 26%/* 右边距可以用百分比或像素来指定，它会在页面的右下方产生空白。 */
}
.twoColLiqLtHdr #footer {
padding: 0 10px/* 此填充会将它上面 div 中的所有元素左对齐。 */
background:#DDDDDD
}
.twoColLiqLtHdr #footer p {
margin: 0/* 将脚注中第一个元素的边距设置为零将避免出现可能的边距重叠（即 div 之间出现的空白）*/
padding: 10px 0/* 就像边距会产生空白一样，此元素上的填充也将产生空白，但不会出现边距重叠问题 */
}
/* 要重用的各种类 */
.fltrt { /* 此类可用来使页面中的元素向右浮动。浮动元素必须位于页面上要与之相邻的元素之前。 */
float: right
margin-left: 8px
}
.fltlft { /* 此类可用来使页面上的元素向左浮动 */
float: left
margin-right: 8px
}
.clearfloat { /* 此类应当放在 div 或 break 元素上，而且该元素应当是完全包含浮动的容器关闭之前的最后一个元素 */
clear:both
height:0
font-size: 1px
line-height: 0px
}
-->
</style><!--[if IE]>
<style type="text/css">
/* 请将所有版本的 IE 的 css 修复放在这个条件注释中 */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px}
.twoColLiqLtHdr #mainContent { zoom: 1padding-top: 15px}
/* 上面的专用 zoom 属性为 IE 提供避免错误所需的 hasLayout */
</style>
<![endif]--></head>
<body class="twoColLiqLtHdr">
<div id="container">
<div id="header">
<h1>标题</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>sidebar1 内容</h3>
<p>此 div 上所显示的背景色刚好与内容等宽。如果您喜欢改用分界线，而且 #mainContent div 所包含的内容将始终比 #sidebar1 div 中的多，请在 #mainContent div 的左边缘放置一个边框。 </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1>主要内容 </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 级别的标题 </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- 这个用于清除浮动的元素应当紧跟 #mainContent div 之后，以便强制 #container div 包含所有的子浮动 --><br class="clearfloat" />
<div id="footer">
<p>脚注</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
