30

以&#开头的是什么编码?

在网页中以&#开头的是HTML实体,一些字符在 HTML 中是预留的,拥有特殊的含义,比如小于号‘<’用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符,我们必须在 HTML 源码中插入字符实体。详情请看http://baike.baidu.com/view/4757776.htm

如何把汉字转换成HTML实体呢?

汉字的HTML实体由三部分组成,”&#+ASCII+;“ 即可。

例如,把“最新” 转换成“&#26368;&#26032;”

另附:ASCII编码表在线查询地址:http://mrdede.com/?p=1416

十二 23

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题

百度源代码如下

可以打开百度,右键查看源码看下!我们可以看下文件头是否存在这样一行代码!

这句话的意思是强制使用IE7模式来解析网页代码!

在这里送上几种IE使用模式!

<meta http-equiv="X-UA-Compatible" content="IE=8">
2. Google Chrome Frame也可以让IE用上Chrome的引擎:

<meta http-equiv="X-UA-Compatible" content="chrome=1" />
3.强制IE8使用IE7模式来解析

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"><!– IE7 mode –>
//或者
<meta http-equiv="X-UA-Compatible" content="IE=7"><!– IE7 mode –>
4.强制IE8使用IE6或IE5模式来解析

<meta http-equiv="X-UA-Compatible" content="IE=6"><!– IE6 mode –>

<meta http-equiv="X-UA-Compatible" content="IE=5"><!– IE5 mode –>
5.如果一个特定版本的IE支持所要求的兼容性模式多于一种,如:

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
二.设定网站服务器以指定预设兼容性模式

如果服务器是自己的话,可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。

录入,下列的 web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

另外还有一起其他的解决方案,例如google的

ie7 – js中是一个JavaScript库(解决IE与W3C标准的冲突的JS库),使微软的Internet Explorer的行为像一个Web标准兼容的浏览器,支持更多的W3C标准,支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题,并使 得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式(推荐)

使IE5,IE6,IE7兼容到IE8模式

使IE5,IE6,IE7,IE8兼容到IE9模式

解决PNG显示问题

只需将透明png图片命名为*-trans.png

需要注意的是:此方法对背景平铺(background-repeat)和背景(background-position)无法起到任何作用,默认会占满整个容器。
三、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
创建html5时发现这么一句话,不知其什么意思,百度如下:
这 样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果没安装GCF,则使用最高版本的IE内核进行渲染。Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

十一 20

CSS伪类写几个三角形,很实用的

CSS伪类写几个小三角形
CSS伪类写几个小三角形

Continue reading

十一 01

移动端UC /QQ 浏览器的部分私有Meta 属性

现在做WEB开发(不仅限于移动开发),都要考虑响应式布局与各种移动设备的显示效果等,国内的移动设备浏览器主要是UC浏览器和QQ浏览器为主(内核均为wekit内核),那么开发人员就必须知道一些它们的Meta私有属性,以更好的完成效果。文末有UC/QQ浏览器开发文档链接。

UC 浏览器的部分私有Meta 属性

设置屏幕方向为横屏还是竖屏

<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这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。

QQ 浏览器x5内核Meta私有属性

设置屏幕方向

<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 的这种“伪全屏”反而是更为友好。

Continue reading

31

CSS滚动条样式,火狐无效

效果不好,自己改。

另有滚动条插件,没有下载测试。链接 >> 狂点

据说,用法是这个样子的,在PHP100看到的,如下:

 

30

Opacity透明度属性IE浏览器及其它浏览器兼容方法

 

10

CSS(background)背景色渐变

垂直渐变:上->下
垂直渐变:下->上
水平渐变:左->右
水平渐变:右->左

IE系列

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00BFFF',endColorStr='#0000CD',gradientType='0');

参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平

Firefox

background: -moz-linear-gradient(top, #00BFFF, #0000CD);

参数:top、bottom垂直,left、right水平 例如:top时从顶部由#00BFFF到#0000CD渐变,bottom时从底部由#00BFFF到#0000CD渐变

Opera

background: -o-linear-gradient(top,#00BFFF, #0000CD);

参数:top、bottom垂直,left、right水平 例如:top时从顶部由#00BFFF到#0000CD渐变,bottom时从底部由#00BFFF到#0000CD渐变

webkit,如Chrome、Safari等

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00BFFF), to(#0000CD));

参数:linear线性, x1 x2, x3 x4 x1与x3相同时垂直,x2与x4相同时水平 from起始颜色 to结束颜色

29

实现IE兼容效果引入CSS及文件方法

万恶的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以下(不包含IE7)版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以上(包含IE7)版本可识别 <![endif]-->
<!--[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中采用统一的渲染模式。

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的写在最后面。

28

改写响应式网站常用CSS属性及使用方法总结(未完)

其实这些属性即使平时也是常用的,只是在改写响应式网站时,个人认为是更为常用的。由于响应式网站要适应各种屏幕宽度,所以要求制作者在使用CSS时能更强的运用好CSS的各种属性,处理好网站中的文本、图片、背景图片等。改写响应式网站,尤其是现有的PC网站强改响应式网站,要达到尽量好的适应效果,必须灵活运用CSS的各种属性。
下面内容一些通俗易懂的语言做了解释,非那些大网站写得好像不是给我这种文化水平低的人看的内容似的,都是给专业人士看的似的,可还有几个专业人士去查看你那些大学没毕业就看不懂的语言。生气…

一、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 */
}

效果:

织梦先生

二、CSS背景图片类

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;}

效果:

织梦先生
织梦先生
织梦先生
织梦先生
织梦先生
21

css3实现文字阴影效果方法

使用text-shadow属性可以实现文字阴影效果,具体实例如下:

CSS实现文字阴影效果的方法

解释一下text-shadow的语法:
text-shadow:color length length length;
color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上。

扩展:

下面有一些特效,可以借鉴。 Continue reading