北京网站制作的小知识

.专门用于控制文本自动换行功能的属性是 text-wrap 和 word-wrap，而 line-break 和 word-break 用来控制断行和单词边界分隔，根据 W3C 的描述来说，word-wrap 是最激进的自动换行方式，可以强行断开单词。而现实情况是，word-break: break-all; 的方式要更为激进

2.border-radius:10px 10px 10px 10px; 圆角矩形。像素越大，圆角就越大

3.CSS实现图片按固定大小等比例缩放例如：设置图片最大高度和宽度分别为120px，75px，即当图片宽大于120或者高大于75时则等比例缩放。.imglist_3 img{margin-right:10px;max-width:120px;max-height:75px;font:bold 12px/28px normal;}* html .imglist_3 img{width: expression(this.width > 120 && this.width > this.height ? "120px" :auto); height:expression(this.height >75 ? "75px":auto);}/* for IE6 */

4.cursor:hand;/pointer 鼠标划上去变为手型

5.overflow-y:scroll; 高度固定大小之后，超过高度自动出现滚动条

6. text-indent:2em;可充当空格

7.background:url(..images/yy.jpg) left/right/0/npx    top/bottom/0/npx  no-repeat;

8.合并图：主要原理background:url(..images/yy.jpg) 0 -23px no-repeat;(-23是指沿y轴在-23的位置上)

9.鼠标划上和离开换背景onmouseout="this.style.background='url(images/kuang.gif)';" onmouseover="this.style.background='url(images/kuang_bg.gif)'

10.opacity:0.7;半透明（IE6不支持）

11.关于ie6下没有fixed属性的解决办法：
     http://my.oschina.net/juhuakai/blog/14939

    这个问题困扰了很多人，网上有js的方法，还有纯css的方法，这次看到一个很简单，但很强大的css的   解决办法：
    body {
   _background-image: url(about:blank); /*用浏览器空白页面作为背景*/
   _background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
  }
  div {
   _position: absolute; /*IE6 用absolute模拟fixed*/
   _top: expression(documentElement.scrollTop+documentElement.clientHeight -   this.clientHeight+”px”); /*IE6 动态设置top位置*/
   }
    expression：是一个css表达式直接写在css之下；
    了解js的就可以看出来内部的数据组合方式，和js比较像，内部也可以写入一个数值，乃至一个变量。
   当然也可以设置_left的值；
   值得收藏

12.解决长串英文不折行问题：（word-wrap同word-break的区别）
    兼容 IE 和 FF 的换行 CSS 推荐样式
 最好的方式是
    word-wrap:break-word; overflow:hidden;

   解释：
   word-wrap是控制换行的。使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问   题。但是对于长串的英文，就不起作用。break-word是控制是否断词的。normal是默认情况，英文单词不被拆开。break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）
ie下：使用word-wrap:break-word;所有的都正常。
ff下：如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。
为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。

用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。

所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。

13.在IE7/FF中，鼠标移动到链接上时，”淘你喜欢”字样会变为红色，但IE6则无反应。所以IE6的bug就是如果a 与 a:hover 的css定义是一样的，也就是说如果a:hover 中没有样式的改变，hover就不会被触发。但如果在a:hover{}增加一些特定的属性，例如a:hover{border:none;}或者a:hover{padding:0;}又或者a:hover{background: none;}此时hover就可以触发了

14.阴影：（边框或者文字都可以。只是IE版本不支持）

#boxShadow1{-moz-border-radius:10px;（圆角）
-webkit-border-radius:10px;（圆角）
border-radius:10px;（圆角）
border:1px solid ddd;
-webkit-box-shadow:0 0 10px black;（x轴、y轴、模糊半径、颜色）
-moz-box-shadow:0 0 10px black;
}

15.〖Html代码〗渐变色彩分割线
右→左淡化 ：
<HR style="FILTER: alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100); HEIGHT: 10px" color=#8000ff>

左→右淡化

--------------------------------------------------------------------------------

 
代码：
 
<HR style="FILTER: alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0); HEIGHT: 10px" color=#ffff00>
 
 
立体

--------------------------------------------------------------------------------

 
代码：
 
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=2); HEIGHT: 10px" color=#ff0000>