DIVCSS布局积累.doc

在写CSS的时候，经常为一些名字而发愁，比如说菜单后面的背景要用什么词来表示呢？大家都知道，菜单一般用menu来表示，那么菜单后面的背景我会用menubg，CSS里就写#menubg 。还有一些其他的比如搜索框之类的应该怎么命名呢？下面有一些可以算得上是标准的命名吧。如果有错误或者遗漏请朋友们帮忙补上，谢谢！Copy to clipboardCODE:页头：header登录条：loginbar标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service热点：hot新闻：news下载：download注册：regsiter状态：status按钮：btn投票：vote合作伙伴：partner友情链接：friendlink页脚：footer版权：copyright提交：submit文本框：textbox统计：count以上结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠和下划线； 4.尽量不缩写，除非一看就明白的单词。 11.17 网易的CSS写法Copy to clipboardCODE:/* 全局CSS定义 */body text-align: center; font-family:宋体, arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;div,form,img,ul,ol,li,dl,dt,dd margin: 0; padding: 0; border: 0;h1,h2,h3,h4,h5,h6 margin:0; padding:0;table,td,tr,thfont-size:12px;/* 链接颜色 */a:link color: #1f3a87; text-decoration:none;a:visited color: #83006f;text-decoration:none;a:hover color: #bc2931; text-decoration:underline;a:active color: #bc2931;/* 颜色属性 定义规则，小写c加颜色名称 */.cRed,a.cRed:link,a.cRed:visited color:Red; .cBlue,a.cBlue:link,a.cBlue:visitedcolor:#1f3a87;.cDRed,a.cDRed:link,a.cDRed:visited color:#bc2931;.cGray,a.cGray:link,a.cGray:visited color: #4F544D;.cDGray,a.cDGray:link,a.cDGray:visited color: #666;.cWhite,a.cWhite:link,a.cWhite:visited color:#fff;.cBlack,a.cBlack:link,a.cBlack:visitedcolor:#000;a.cBlack:hovercolor:#bc2931;.cYellow,a.cYellow:link,a.cYellow:visitedcolor:#ff0;.cGreen,a.cGreen:link,a.cGreen:visitedcolor:#008000;/* 字体属性 定义规则，小写f加属性名称 */.fB font-weight: bold;.fI font-style: italic;/* 字体大小*/.f12px font-size:12px;.f14px font-size:14px;/* 其他属性 */.left float: left;.right float: right;.clear clear: both; font-size:1px; width:1px; visibility: hidden; .hidden display: none;.unLine ,.unLine atext-decoration: none;.noBorderborder:none; 页面上所有图片自动缩放的代码Copy to clipboardCODE:var imgObj;for(i = 0; i 500) /判断图片的高度，如果大于500，则设置为500，值可以自己修改 imgObj.height=500 if (imgObj.width700) /判断图片的宽度，如果大于700，则设置为700，值可以自己修改 imgObj.width=700 滚动条的颜色定义Copy to clipboardCODE:scrollbar-face-color: #E0D5BE; scrollbar-track-color: #EBE4D3; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-dark-shadow-color: #ffffff; scrollbar-arrow-color: #978C71;给图片加边框在CSS文件中对img定义边界（border），例如我在CSS中定义了：Copy to clipboardCODE:img.framed padding: 6px; border: 1px solid #CCC; background-color: #FFF; 那么在HTML文件中，针对嵌入的图片定义class=framed就会有相应的边框效果。Copy to clipboardCODE:在FF下一个自适应高度的简单做法Copy to clipboardCODE:加上height: 100%;overflow: auto;自动换行的简单做法Copy to clipboardCODE: table-layout: fixed; WORD-BREAK: break-all; WORD-WRAP: break-word;怎样用CSS把层做成半透明？Copy to clipboardCODE:用下面的样式表定义你的层 .alpha filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100解释：Opacity=开始的不透明度(100的话就不透明了) FinishOpacity=结束的不透明度(100的话就不透明了) Style=样式，从0开始，1.2.3.有均匀透明啊，放射形状透明啊. StartX=开始透明的X坐标，基本上为图片、层的左上角（0） StartY= 开始透明的Y坐标，基本上也为图片、层的左上角（0） FinishX=结束透明的X坐标，基本上也图片、层的右下（图片、层的宽度） FinishY=结束透明的Y坐标，基本上也为图片、层的右下角（图片、层的高度）再谈一下关于清除浮动(闭合浮动元素)最简单的方法最简单的清除浮动(闭合浮动元素的方法是在父级容器内,浮动对象下面再插入一个额外的DIV标签，来清除浮动（clear）,浏览器兼容性好，没有HACKS，缺点是要增加一个无语义的标签,但在有的布局下,可使这个只起到清除作用的DIV,具有语义化.先看代码Copy to clipboardCODE: . . 其中WRAP是父级容器,sideright和sideleft是左、右部分的内容，foot里放了内容，在左、右内容的下面，并在父级容器里面，起到了清除浮动DIV的作用。有什么能控制滚动条大小的吗？Copy to clipboardCODE:有什么能控制滚动条大小的吗同时调用几个地方的外部CSSCopy to clipboardCODE:main.cssimport url(font.css);import url(nav.css);import url(form.css);import url(footer.css);import url(ad.css);各浏览器padding、margin的差异margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：IE 6.0 Firefox Opera等是真实宽度=width+padding+border+marginIE5.X真实宽度=width-padding-border-margin解决的方法是:Copy to clipboardCODE:div.content width:400px; /这个是错误的width，所有浏览器都读到了voice-family: ; /IE5.X/win忽略了后的内容voice-family:inherit;width:300px; /包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的 htmlbody .content /htmlbody是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标记对他们不起作用 htmlbody .content /htmlbody是CSS2的写法width:300px; /支持CSS2该写法的浏览器有幸读到了这一句 附上：HACK总表关于W3C检验时候的DIV元素封闭所有的标记都必须要有一个相应的结束标记以前在HTML中，你可以打开许多标签，例如和而不一定写对应的和来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个/来关闭它。例如:Copy to clipboardCODE:成对的标签应有打开标签和关闭标签,例如：Copy to clipboardCODE: 没有成对关闭标签的元素 都要加 /Copy to clipboardCODE:如：请问如何设置img标签图片自动适应高度？想请教一下，倘若我设定了img的宽度一定值，我想保持纵横比不变，高度自动适应，该如何设置CSS，能否实现？Copy to clipboardCODE:img max-width: 200px;width:expression(this.width 200 ? 200px : (this.width+px);10个你未必知道的CSS技巧本文作者是：Trenton Moss。 发表网站是：http:/www.webcredible.co.uk/。本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。如果你得到原作者或原发表网站的授权，可以自由使用本翻译。1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的：Copy to clipboardCODE:font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif;但也可以把它们全部写到一行上去：Copy to clipboardCODE:font: bold italic small-caps 1em/1.5em verdana,sans-serif;真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。2. 同时使用两个类一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：Copy to clipboardCODE:.同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。补充：对于一个ID，不能这样写.也不能这样写3. CSS border的缺省值通常可以设定边界的颜色，宽度和风格，如：Copy to clipboardCODE:border: 3px solid #000这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。4. CSS用于文档打印许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：Copy to clipboardCODE: 第1行就是显示，第2行是打印，注意其中的media属性。但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。5. 图片替换技巧一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。比如你想整个卖东西的图标，你就用了这个图片：Copy to clipboardCODE:这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：Buy widgets但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：Copy to clipboardCODE:h1 background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px 注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。6. CSS box模型的另一种调整技巧这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：Copy to clipboardCODE:#box width: 100px; border: 5px; padding: 20px 这样调用它：Copy to clipboardCODE:.这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。但用CSS也可以达到同样的目的，让它们显示效果一致。Copy to clipboardCODE:#box width: 150px #box div border: 5px; padding: 20px 这样调用：Copy to clipboardCODE:.这样，不管什么浏览器，宽度都是150点了。7. 块元素居中对齐如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：Copy to clipboardCODE:#content width: 700px; margin: 0 auto 你会使用 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：Copy to clipboardCODE:body text-align: center #content text-align: left; width: 700px; margin: 0 auto 这会把网页内容都居中，所以在Content中又加入了Copy to clipboardCODE:text-align: left 。8. 用CSS来处理垂直对齐垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。9. CSS在容器内定位CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：Copy to clipboardCODE:#container position: relative 这样容器内所有的元素都会相对定位，可以这样用：.如果想定位到距左30点，距上5点，可以这样：Copy to clipboardCODE:#navigation position: absolute; left: 30px; top: 5px 当然，你还可以这样：Copy to clipboardCODE:margin: 5px 0 0 30px注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。10. 直通到屏幕底部的背景色在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：Copy to clipboardCODE:#navigation background: blue; width: 150px 较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。Copy to clipboardCODE:body background: url(blue-image.gif) 0 0 repeat-y 此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。本文作者是：Trenton Moss。 发表网站是：http:/www.webcredible.co.uk/。本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。如果你得到原作者或原发表网站的授权，可以自由使用本翻译。 常用CSS缩写语法总结 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：Copy to clipboardCODE:#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:Copy to clipboardCODE:property:value1; 表示所有边都是一个值value1； property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em; 边框(border)边框的属性如下：Copy to clipboardCODE:border-width:1px; border-style:solid; border-color:#000; 可以缩写为一句：border:1px solid #000; 语法是border:wid