网页代码DIV+CSS布局积累

11.17 CSS英文命名
在写CSS的时候，经常为一些名字而发愁，比如说菜单后面的背景要用什么词来表示呢？大家都知道，菜单一般用menu来表示，那么菜单后面的背景我会用menubg，CSS里就写#menubg {…}。
还有一些其他的比如搜索框之类的应该怎么命名呢？下面有一些可以算得上是标准的命名吧。如果有错误或者遗漏请朋友们帮忙补上，谢谢！ 
CODE:
页头：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写法
CODE:
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,th{font-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;}
.cRed,a.cRed:link,a.cRed:visited{ color:Red; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#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:visited{color:#000;}
a.cBlack:hover{color:#bc2931;}
.cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}
.cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}
.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 a{text-decoration: none;}
.noBorder{border:none; }
页面上所有图片自动缩放的代码
CODE:
<script language="JavaScript">
var imgObj;
for(i = 0; i < document.all.length; i++)
{
if(document.all(i).tagName.toLowerCase()=="img")
{
   imgObj = document.all(i)   //建议只判断高度或者宽度其中一个，那样可以自动按比例缩放
   if (imgObj.height>500)   //判断图片的高度，如果大于500，则设置为500，值可以自己修改
   {
imgObj.height=500
   }
   if (imgObj.width>700)   //判断图片的宽度，如果大于700，则设置为700，值可以自己修改
   {
imgObj.width=700
   }
}
}
</script>
滚动条的颜色定义
CODE:
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中定义了：
CODE:
img.framed {
padding: 6px;
border: 1px solid #CCC;
}
那么在HTML文件中，针对嵌入的图片定义class="framed"就会有相应的边框效果。
CODE:
<img src="......" class="framed" >
在FF下一个自适应高度的简单做法
CODE:
加上
height: 100%;
overflow: auto;
自动换行的简单做法
CODE:
table-layout: fixed;
WORD-BREAK: break-all;
WORD-WRAP: break-word;
怎样用CSS把层做成半透明？
CODE:
用下面的样式表定义你的层
.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,具有语义化.
先看代码
CODE:
<div class="wrap">
<div id="sideright">
   <p>......</p>
</div>
<div id="sideleft">
<p>......</p>
</div>
<div id="foot">
   <address>
   http://www.forest53.com
   </address>
</div>
   </div>
其中WRAP是父级容器,sideright和sideleft是左、右部分的内容，foot里放了内容，在左、右内容的下面，并在父级容器里面，起到了清除浮动DIV的作用。
有什么能控制滚动条大小的吗？
CODE:
<div style="overflow:auto;width:200px; height:150px; zoom:0.5;">
<div style="width:2000px; height:1500px; zoom:2;">
有什么能控制滚动条大小的吗
</div>
</div>
同时调用几个地方的外部CSS
CODE:
main.css
@import 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+margin
IE5.X
真实宽度=width-padding-border-margin
解决的方法是:
CODE:
div.content {
width:400px; //这个是错误的width，所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是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标记对他们不起作用
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}

关于W3C检验时候的DIV元素封闭
所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:
CODE:
<br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />
成对的标签应有打开标签和关闭标签,例如：
CODE:
<table><tr><td> </td></tr></table>
没有成对关闭标签的元素 都要加 /
CODE:
如：
<base>
<br>
<hr>
<img>
<input>
<link>
<meta>
<nobr>
请问如何设置img标签图片自动适应高度？
想请教一下，倘若我设定了img的宽度一定值，我想保持纵横比不变，高度自动适应，该如何设置CSS，能否实现？
CODE:
<style type="text/css">
img {
max-width: 200px;
width:expression_r(this.width > 200 ? "200px" : (this.width+"px"));
}
</style>
<img src="http://gg.blueidea.com/2006/gongyi/banner.jpg"/>
10个你未必知道的CSS技巧
本文作者是：Trenton Moss。
发表网站是：http://www.webcredible.co.uk/。
本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。
如果你得到原作者或原发表网站的授权，可以自由使用本翻译。
1.CSS字体属性简写规则
一般用CSS设定字体属性是这样做的：
CODE:
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也可以把它们全部写到一行上去：
CODE:
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
2. 同时使用两个类
一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
CODE:
<p class="text side">...</p>
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
补充：对于一个ID，不能这样写<p id="text side">...</p>也不能这样写
3. CSS border的缺省值
通常可以设定边界的颜色，宽度和风格，如：
CODE:
border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
4. CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
CODE:
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。