在网页中以&#开头的是HTML实体，一些字符在 HTML 中是预留的，拥有特殊的含义，比如小于号‘<’用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。详情请看http://baike.baidu.com/view/4757776.htm
如何把汉字转换成HTML实体呢？
汉字的HTML实体由三部分组成，”&#+ASCII+;“ 即可。
例如，把“最新” 转换成“最新”
PHP函数把字符串或汉字转为HTML实体 htmlentities()
PHP函数把HTML实体转为字符串或汉字 html_entity_decode()
另附：ASCII编码表在线查询地址：http://mrdede.com/?p=1416
现在做WEB开发（不仅限于移动开发），都要考虑响应式布局与各种移动设备的显示效果等，国内的移动设备浏览器主要是UC浏览器和QQ浏览器为主（内核均为wekit内核），那么开发人员就必须知道一些它们的Meta私有属性，以更好的完成效果。文末有UC/QQ浏览器开发文档链接。
设置屏幕方向为横屏还是竖屏
<meta name="screen-orientation" content="portrait|landscape">
设置是否全屏，yes表示强制浏览器全屏
<meta name="full-screen" content="yes">
缩放不出滚动条
<meta name="viewport" content="uc-fitscreen=no|yes"/>
设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。
排版
<meta name="layoutmode" content="fitscreen|standard" />
fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。
夜间模式
<meta name="nightmode" content="enable|disable"/>
nightmode的值设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式。
强制图片显示
<meta name="imagemode" content="force"/>
UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个
<img src="..." show="force">
应用模式
<meta name="browsermode" content="application"/>
使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
设置屏幕方向
<meta name="x5-orientation" content="portrait|landscape" />
设置全屏
<meta name="x5-fullscreen" content="true" />
设置屏幕模式
普通浏览模式：
<meta name="x5-page-mode" content="default" />
网页应用模式：
<meta name="x5-page-mode" content="app" />
对比
在Jeff 的实际使用的情况下，发现对于控制全屏的meta 标签，UC 跟QQ 处理的方式稍有不同：区别在于处理系统状态栏，UC 是直接覆盖系统状态栏，而QQ 仍然保留之。从原生应用的场景及用户角度看，QQ 的这种“伪全屏”反而是更为友好。
效果不好，自己改。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/* 滚动条样式 实测支持webkit内核浏览器与IE浏览器 火狐无效 */ html { scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/ scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/ scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/ /*Cursor:url(mouse.cur); 自定义个性鼠标*/ } /* 针对webkit内核浏览器的样式 */ .dropdown-menu::-webkit-scrollbar { width:10px; height:10px; } .dropdown-menu::-webkit-scrollbar-button { background-color:#FF7677; } .dropdown-menu::-webkit-scrollbar-track { background:#FF66D5; } .dropdown-menu::-webkit-scrollbar-track-piece { background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png); } .dropdown-menu::-webkit-scrollbar-thumb{ background:#FFA711; border-radius:4px; } .dropdown-menu::-webkit-scrollbar-corner { background:#82AFFF; } .dropdown-menu::-webkit-scrollbar-resizer { background:#FF0BEE; } |
另有滚动条插件，没有下载测试。链接 >> 狂点
据说，用法是这个样子的，在PHP100看到的，如下：
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<link rel="stylesheet" href="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js">script> <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js">script> <script src="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js">script> <script> if (!$.browser.webkit) { $.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default $.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default $(".container").mCustomScrollbar({theme:"dark"}); } script> |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
div{ /* older safari/Chrome browsers */ -webkit-opacity:0.5; /* Netscape and Older than Firefox 0.9 */ -moz-opacity:0.5; /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/ -khtml-opacity:0.5; /* IE9 + etc...modern browsers */ opacity:.5; /* IE 4-9 */ filter:alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style type="text/css"> .test1{ width: 80%; min-height: 80px; text-align: center; line-height: 80px; color: White; font-size: 20px; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00BFFF',endColorStr='#0000CD',gradientType='0'); background: -moz-linear-gradient(top, #00BFFF, #0000CD); background: -o-linear-gradient(top,#00BFFF, #0000CD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00BFFF), to(#0000CD)); } .test2{ width: 80%; min-height: 80px; text-align: center; line-height: 80px; margin-bottom: 10px; color: White; font-size: 20px; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00BFFF',endColorStr='#0000CD',gradientType='0'); background: -moz-linear-gradient(bottom, #00BFFF, #0000CD); background: -o-linear-gradient(bottom,#00BFFF, #0000CD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00BFFF), to(#0000CD)); } .test3 { width: 45%; min-height: 80px; text-align: center; line-height: 80px; margin-bottom: 10px; color: White; font-size: 20px; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00BFFF',endColorStr='#0000CD',gradientType='1'); background: -moz-linear-gradient(left, #00BFFF, #0000CD); background: -o-linear-gradient(left,#00BFFF, #0000CD); background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#00BFFF), to(#0000CD)); } .test4 { width: 45%; min-height: 80px; text-align: center; line-height: 80px; margin-bottom: 10px; color: White; font-size: 20px; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00BFFF',endColorStr='#0000CD',gradientType='1'); background: -moz-linear-gradient(right, #00BFFF, #0000CD); background: -o-linear-gradient(right,#00BFFF, #0000CD); background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#00BFFF), to(#0000CD)); } </style> <div> <div class="test1">垂直渐变:上->下</div> <div class="test2">垂直渐变:下->上</div> </div> <div> <div class="test3" style="display: inline-block;">水平渐变:左->右</div> <div class="test4" style="display: inline-block;">水平渐变:右->左</div> </div> |
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00BFFF',endColorStr='#0000CD',gradientType='0');
参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平
background: -moz-linear-gradient(top, #00BFFF, #0000CD);
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#00BFFF到#0000CD渐变，bottom时从底部由#00BFFF到#0000CD渐变
background: -o-linear-gradient(top,#00BFFF, #0000CD);
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#00BFFF到#0000CD渐变，bottom时从底部由#00BFFF到#0000CD渐变
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00BFFF), to(#0000CD));
参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始颜色 to结束颜色
万恶的IE，但总算有个解决的方法。以前我也看别人的博客中说过，写CSS不一定非要兼容IE所有版本，最多也就是兼容它主流的一两种版本。我也是这个见解，再说了，也不是人人都用IE的，虽然它很牛，但这是中国。360浏览器、QQ浏览器等，虽然使用得也是IE的内核，但是在显示方面是与IE有所区别的，当然，在网站开发中，还是使用火狐为主开发浏览器的，最主要的是他的执行标准还是相对标准的；还有一点，是个人偏好问题，喜欢他自带的开发工具，已经是习惯了。
方法一：
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以下(不包含IE6)版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以上(包含IE6)版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下(不包含版本可识别 <![endif]-->IE7)
<!--[if gte IE 7]> IE7以上(包含IE7)
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
方法二：
<!DOCTYPE html>
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->
实例：IE6及以上版本引入ie.css，增加在head区。
<!--[if gte IE 6]><link href="css/ie.css" rel='stylesheet' type='text/css' /><![endif]-->
<!--[if gte IE 6]><style>.body{margin:0;padding:0}......</style><![endif]-->
<!--[if IE 6]> <html id="ie6" lang="zh-CN"> <![endif]-->
个人还是喜欢使用IE可识别标签引入CSS的方法，html页面不至于看着很乱，如果CSS代码不多，也可以直接写在html中，实例中的第三种方法是最不建议使用的，写出来只为了了解，它会造成大量的HTTP请求。
**************************************************************
CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!
目前IE内核浏览器仍然是国内主流浏览器，占据着PC浏览器的大部分市场份额，版本从IE6到IE10，所有前段工作者都必须面对和解决多个ie浏览器对代码的兼容性问题。在很多情况下，我们需要专门针对IE写css样式，即针对IE的css hack，下面将详细介绍这些内容：
1、常见的特殊符号的应用：
IE6：
_selector{property:value;}
selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important
IE7：
+selector{property:value;}
IE8：
selector{property:value\0;}
IE6 & IE7：
*selector{property:value;}
IE6 & IE7 & IE8：
selector{property:value\9;}
总结起来，如下：
其中，S表示Standards Mode即标准模式，Q表示Quirks Mode，即兼容模式。
（了解更多Quirks模式、Strict(Standars)模式？）
| hack | 示例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) |
| * | *color | Yes | Yes | Yes | Yes | No | Yes |
| + | +color | Yes | Yes | Yes | Yes | No | Yes |
| - | -color | Yes | Yes | No | No | No | No |
| _ | _color | Yes | Yes | No | Yes | No | Yes |
| # | #color | Yes | Yes | Yes | Yes | No | Yes |
| \0 | color\0 | No | No | No | No | Yes | No |
| \9 | color\9 | Yes | Yes | Yes | Yes | Yes | Yes |
| !important | color:blue !important; color:green; |
No | No | Yes | No | Yes | No |
2、条件注释语句（<!–[if IE]> <![endif]–>）
所有的IE可识别
仅IE6可识别
IE6以及IE6以上版本可识别
IE7以下版本可识别
lt 表示less than 当前条件版本以下的版本，不包含当前版本。
gte 表示greeter than or equal 当前版本以上版本，并包含当前版本。
lte 表示less than or equal 当前版本以下版本，并包含当前版本。
3、meta声明
由于IE8 可能会将页面按照 IE7 模式进行渲染，针对 多版本IE的现状，通常会采用设置 X-UA-Compatible HTTP 头的方式将页面在IE中采用统一的渲染模式。
|
0 |
//标准 IE7 模式 |
|
0 |
//兼容 IE7 模式 |
|
0 |
//标准 IE 模式 |
4、其他（/*\**/注释法）
网上也流传着这样一种ie hack方法
.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
分析下：
background-color:blue; 各个浏览器都认识，这里给firefox用；
background-color:red\9;\9所有的ie浏览器可识别；
background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
:root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。
区别不同浏览器的CSS hack写法：
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
| IE6 | IE7 | FF | |
| * | √ | √ | × |
| !important | × | √ | √ |
——————————————————
另外再补充一个，下划线”_”,
IE6支持下划线，IE7和firefox均不支持下划线。
| IE6 | IE7 | FF | |
| * | √ | √ | × |
| !important | × | √ | √ |
| _ | √ | × | × |
于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
其实这些属性即使平时也是常用的，只是在改写响应式网站时，个人认为是更为常用的。由于响应式网站要适应各种屏幕宽度，所以要求制作者在使用CSS时能更强的运用好CSS的各种属性，处理好网站中的文本、图片、背景图片等。改写响应式网站，尤其是现有的PC网站强改响应式网站，要达到尽量好的适应效果，必须灵活运用CSS的各种属性。
下面内容一些通俗易懂的语言做了解释，非那些大网站写得好像不是给我这种文化水平低的人看的内容似的，都是给专业人士看的似的，可还有几个专业人士去查看你那些大学没毕业就看不懂的语言。生气…
text-overflow 属性
默认值：clip
继承性：no
版本： CSS3
JavaScript语法：object.style.textOverflow=”ellipsis”
语法：text-overflow: clip|ellipsis|string;
以下值的前提是行定了宽度和高度。
clip 多余部分剪切（或者叫隐藏）。
ellipsis 如有多余文本，在行最末处以省略号显示（占一字宽度）。
string 按上一个值去理解，也就是把上一个值显示省略的部分换成你自己设定的内容（没使用过，看解释感觉我个人感觉没什么太大的实际意义，没研究）。
在使用ellipsis值时，要使用white-space: nowrap;和overflow: hidden;联合使用才能达到效果。
而clip值我一般是在写响应式时强制解除ellipsis的时候使用，也可能是我对它的理解还不够没感觉还有别的什么用处。
CSS示例：
div.test
{
text-overflow:ellipsis;
white-space: nowrap; //文字不换行
overflow: hidden; //溢出隐藏
}
ellipsis效果：
transform 属性
默认值： none
继承性： no
版本： CSS3
JavaScript 语法： object.style.transform=”rotate(7deg)”
CSS示例：
div
{
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-moz-transform:rotate(-45deg); /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg); /* Opera */
}
效果：
background 属性
默认值： not specified
继承性： no
版本： CSS1 + CSS3
JavaScript 语法： object.style.background=”white url(paper.gif) repeat-y”
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size 规定背景图片的尺寸。 (CSS3属性)
background-repeat 规定如何重复背景图像。
background-origin 规定背景图片的定位区域。 (CSS3属性)
background-clip 规定背景的绘制区域。 (CSS3属性)
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。
inherit 规定应该从父元素继承 background 属性的设置。
CSS示例：
body
{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
background-position 属性
默认值： 0% 0%
继承性： no
版本： CSS1
JavaScript 语法： object.style.backgroundPosition=”center”
值：
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
如果只规定了一个关键词，那么第二个值将是”center”。
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
可以使用百分比(%)，也可以使用像素(px)
CSS示例：
body
{
background-image:url(‘bgimage.gif’);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
提示：您需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。
opacity属性
默认值： 1
继承性： no
版本： CSS3
JavaScript 语法： object.style.opacity=0.5
值：
value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit 应该从父元素继承 opacity 属性的值。
CSS示例：
div{opacity:0.5;}
效果：
使用text-shadow属性可以实现文字阴影效果，具体实例如下：
|
0 1 2 3 |
<style><!-- .z_z {font-size: 44px;font-weight: 800;} .shadow{text-shadow: -1px 2px 3px #000;} --></style> <div class="shadow z_z">CSS实现文字阴影的方法</div> |
解释一下text-shadow的语法:
text-shadow:color length length length;
color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上。
扩展：
下面有一些特效，可以借鉴。 Continue reading