css快递订单跟踪圆点图

评论(0)浏览(288)分类:HTML/CSS兼容/XML
css快递订单跟踪圆点图  纯css实现线路走向圆点图,快递订单跟踪线路图形,效果如下  圆点使用了css3的border-radius,IE8-不支持,所以显示的是正方形。  css快递订单跟踪圆点图源代码如下style body{padding:50px} ul.list{border-left:solid 2px #999;padding-left:20px;margin:0px} ul.list li{position:relative;border-bottom:solid 1px #999;li..

去掉移动端浏览器连接点击高亮背景色

评论(0)浏览(79)分类:HTML/CSS兼容/XML
去掉移动端浏览器连接点击高亮背景色  移动端浏览器打开网页,点击里面连接时会出现一个高亮灰色背景色,如何去掉这个高亮灰色背景色?webkit核心浏览器可以使用-webkit-tap-highlight-color:transparent设置为透明色不显示。  去掉移动端浏览器连接点击高亮背景色代码如下第一个链接点击有灰色高亮背景第二个连接点击无灰色高亮背景meta name=viewport content=width=device-w..

绚丽的css3动画效果

评论(0)浏览(151)分类:HTML/CSS兼容/XML
绚丽的css3动画效果2016-9-8:添加firefox支持。  绚丽的HTML5 CSS动画效果,请使用webkit内核的浏览器,如chrome运行示例。chrome运行后效果如下图所示源代码如下style body { background: black; width:100%;height:100%;overflow:hidden; position: relative; } .effect-wrapper { width: 400px; height: 400px;..

·在html页面中显示乱码解决办法

评论(0)浏览(92)分类:HTML/CSS兼容/XML
·在html页面中显示乱码解决办法  今天修改一个客户网站,发现中文符号点,就是键盘上Esc键下那个中文点号,在一些系统的浏览器上显示一个框框,为乱码,但是在本人电脑上却可以正常显示为中文点号,其他电脑也正常显示,就公司里面有2台电脑是这个问题(这2台电脑其他浏览器打开也是一个框框乱码,如下图所示)。  检查后发现这些内容字体为Microsoft Yahei,Arial,Helveti..

html5 file accept属性详解

评论(0)浏览(151)分类:HTML/CSS兼容/XML
html5 file accept属性详解  html5的file控件新增accept属性,可以让弹出窗口显示允许mime类型的文件,而不是全部文件类型。  在W3C的规格只允许Image/*、Video/*、Audio/*三种MIMEtype是允许的,也就是说上述三种以外的选择,就只能选择所有档案*.*  DEMO!DOCTYPE htmlhtmlhead meta charset=utf-8 titleJS Bin/title/headbody divAll Files input type='..

CSS控制打印区域

评论(1)浏览(472)分类:HTML/CSS兼容/XML
CSS控制打印区域style@media print{INPUT {display:none}}/styleTABLE border=0 style=font-size:9pt; width=300px align=centerTHEAD style=display:table-header-group;font-weight:boldTRTD colspan=2 align=center style=font-weight:bold;border:3px double red每页都有的表头/TD/TR/THEADTBODY style=text-align:centerTRTD表格内容/TDTD表格内容/TD/TRTR..

使png图片在ie6浏览器下也支持透明

评论(0)浏览(65)分类:HTML/CSS兼容/XML
使png图片在ie6浏览器下也支持透明没有使用滤镜来修正ie下png透明的效果,这样会出现灰色的边。stylebody{background:#000000;margin:100px;}.kuang{background:url(/images/kuang.png) no-repeat center center ;width:134px;height:144px;}/style div class=kuang/div使用滤镜及important【for w3c】后,灰色边框不见了,效果一比较就知道stylebody{background:#000000;margin:..

IE/Firefox/W3C浏览器代码触发事件

评论(0)浏览(49)分类:JavaScript/Ajax
IE/Firefox/W3C浏览器代码触发事件  firefox或者w3c浏览器没有直接在DOM中添加onclick事件,而是通过addEventListener添加事件时,无法使用 DOMObject.onclick()使用这种方法触发事件,但是可以通过dispatchEvent来触发。  测试代码如下div id=dvEvtdiv的内容/divinput type=button value=触发事件 onclick=btnFireEvent() /script type=text/javascript var dv; windo..

html实体对象:实体编号&#和实体符号

评论(0)浏览(278)分类:HTML/CSS兼容/XML
html实体对象:实体编号&#和实体符号  html实体对象有2种,实体编号和实体符号实体编号的组成和号()井号(#)编号(数字)封号(;)实体符号的组成和号()字符(字母)封号(;)备注  同一个符号,可以用实体名称和实体编号两种方式引用,实体名称的优势在于便于记忆,但不能保证所有的浏览器都能顺利识别它,而实体编号则没有这种担忧,但它实在不方便记忆。注意点实体符号..

CSS表格固定表头示例

评论(0)浏览(248)分类:HTML/CSS兼容/XML
CSS表格固定表头示例  css+JavaScript实现表格的表头固定效果,页面滚动,表头处于页面最顶端。  CSS表格固定表头示例代码如下!doctype htmlhtml headtitleCSS表格固定表头/titlemeta http-equiv=Content-type content=text/html; charset=utf-8style type=text/css* html,* html body /* 修正IE7振动/闪动bug */{background-image:url(about:blank);background..

网页设计行业的初学者学什么

评论(0)浏览(41)分类:HTML/CSS兼容/XML
网页设计行业的初学者学什么近来因为要到大学学校里搞演讲的原因,有很多朋友问我网页设计都需要学什么?因此写了这篇文章来讨论一下要参加此网页设计行业的初学者学什么最直接最有效果最占优势。  那么在讨论之前,我们先来了解一下网站工作的分工。  现在大型网站在开发方面都需要什么人呢?大致上分三种,一是服务器系统维护,程序开发的人员,工作是是管理维护系统..

IE子元素float left碰到父容器边界子元素居右bug

评论(0)浏览(73)分类:HTML/CSS兼容/XML
IE子元素float left碰到父容器边界子元素居右bug  IE下一个简单的css菜单,父元素li float布局,position relative,子菜单ul position absolute定位定宽,然后子菜单li元素也是float定位,定宽,为父元素宽度1/2,设置line-height,并排显示2个,但是发现在ie8+下,有个子菜单的li居然居右,firefox,chrome,ie7(IE就是怪咖啊,ie7尽然正常,ie8+不正常)下显示正常。  结构大概如下IE8..

子容器margin-top为何会影响父容器位置

评论(0)浏览(54)分类:HTML/CSS兼容/XML
子容器margin-top为何会影响父容器位置  子容器设置css设置margin-top,如果子容器和父容器直接没有内容,由于css盒式模型,将会导致子容器和父容器的margin-top叠加,导致父容器也会继承子容器的margin-top,导致父容器顶部出现空白。  示例代码如下,cs父容器aa继承了cs设置的martin-top!doctype htmlstyle .main{margin-left:100px;width:500px;height:500px;border:solid ..

浏览器Html5 Video支持的视频格式

评论(0)浏览(266)分类:HTML/CSS兼容/XML
浏览器Html5 Video支持的视频格式  浏览器Html5 Video标签支持的视频格式:浏览器 | 影音格式Ogg TheoraMP4(H.264)WebMMicrosoft Internet Explorer9╳○╳Mozilla Firefox5+○╳○Google Chrome13+○○○Apple Safari5+╳○╳Opera11+○╳○从上表中可以知道,只要准备好Mp4与Ogv二种影音格式即可兼容所有支持video标签的浏览器。 video width=640 height=360 preload co..

iframe和父页,window.open打开页面之间的引用

评论(0)浏览(788)分类:JavaScript/Ajax
iframe和父页,window.open打开页面之间的引用  iframe和父页,window.open打开页面和被打开页面之间的关系可以通过下面的对象获取到  1)通过iframe加载的,在iframe中用parent对象得到父页window作用域,如果iframe中又加载了iframe,在最里层的iframe中需要重复调用parent直到得到需要的父页作用域(如parent.parent)。如果是直接引用最顶级的父页作用域,可以使用top对象。  2)父页..

禁止textarea拖拽更改大小

评论(0)浏览(70)分类:HTML/CSS兼容/XML
禁止textarea拖拽更改大小  textarea在高版本的Firefox,chrome等浏览器下,textarea会在右下角出现一个小图标,拖动图标可以更改textarea的大小。textarea style=width:300px;height:100px;/textarea  要想拖动textarea右下角图标更改textarea大小,可以增加resize:no属性,textarea就不可以拖动更改大小了,右下角的图标也消失不见。textarea style=width:300px;he..

css打造下拉菜单

评论(0)浏览(61)分类:HTML/CSS兼容/XML
css打造下拉菜单  纯css写的菜单,通过:hover伪类控制子菜单的显示,ie6-不支持非连接对象的伪类,需要自己写js代码进行兼容,不过可以考虑放弃ie6了,应该没人再用了吧?!doctype htmltitle简单纯css菜单/titlestyle ul,li{list-style:none;margin:0px;padding:0px} ul.menu li{margin-left:10px;float:left;position:relative;line-height:20px}/*注意..

css3浮动层变大变小切换效果

评论(0)浏览(401)分类:HTML/CSS兼容/XML
css3浮动层变大变小切换效果  一个css3动画效果,点击链接标签弹出详细内容层,从页脚升起然后平铺整个屏幕,而原来的内容层缩小。具体看效果了,装逼可以一用。嘿嘿。注意使用标准浏览器如chrome,firefox,ie8-就不要来凑热闹了。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdstylehtml, bod..

CSS3动画Transition

评论(0)浏览(230)分类:HTML/CSS兼容/XML
CSS3动画Transition  W3C标准中对css3的transition这是样描述的:css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用语法: transition : ['transition-property&..

CSS3动画transform-origin

评论(0)浏览(45)分类:HTML/CSS兼容/XML
CSS3动画transform-origin CSS3动画transform-origin属性默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处,如下图所示:  我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来..

CSS3动画Transform-style介绍

评论(0)浏览(32)分类:HTML/CSS兼容/XML
CSS3动画Transform-style介绍CSS3 transform-style属性transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:flat和preserve-3d。transform-style属性的使用语法非常简单:transform-style: flat | preserve-3d其中flat值为默认值,表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。  也就是说,如果对一..

viewport参数详解

评论(0)浏览(39)分类:HTML/CSS兼容/XML
viewport参数详解  meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0  该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让 viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就..

css3动画transform使用详解

评论(0)浏览(79)分类:HTML/CSS兼容/XML
css3动画transform使用详解  Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧。语法: transform : none | transform-funct..

通过@media screen控制网站在移动端显示

评论(0)浏览(462)分类:HTML/CSS兼容/XML
通过@media screen控制网站在移动端显示  今天下午花点时间将本站css进行修改,通过@media screen max-width/min-width将本站在移动端浏览器下显示得更加友好。  本站在分辨率宽度680px一下显示如下  如果您在电脑端浏览本站使用的标准浏览器(IE9+,firefox,chrome等),可以缩小浏览器窗口大小到680px以下可以看到效果。  利用@media screen实现网页..

选中网页内容弹出按钮点击发送选中内容到服务器

评论(1)浏览(75)分类:JavaScript/Ajax
选中网页内容弹出按钮点击发送选中内容到服务器  效果:在网页中选中一段内容后,自动弹出一个按钮,点击按钮可以将选中的内容回发到服务器。  实现方法:用javascript添加document.onmouseup事件,用range API判断是否选中内容,选中内容则弹出按钮,给按钮绑定点击事件,点击后将选中的内容使用ajax发送到服务器端。  选中网页内容弹出按钮点击发送选中内容到服务器源代码如下script ..

修改input file控件默认浏览文字

评论(0)浏览(442)分类:HTML/CSS兼容/XML
修改input file控件默认浏览文字  如何修改html input file控件默认的浏览(firefox和ie)或者选择文件(chrome)显示内容。解决办法:用一个透明的file控件浮动到你的自己的提示文字或者图片上即可。注意:IE下必须要调整默认的按钮位置对到你的文字上,前面显示文件路径的那部分覆盖住提示文字需要双击才能弹出文件选择窗口。自己调整input的font-size属性变换file控件大小..

IE透明滤镜alpha失效解决办法

评论(0)浏览(61)分类:HTML/CSS兼容/XML
IE透明滤镜alpha失效解决办法  IE的透明滤镜filter:alpha(opacity=40)在未添加xhtml申明时会不起效果。即使添加了xhtml申明,IE7也无效。IE7下xhtml申明alpha滤镜无效IE8无xhtml申明也无效源代码如下!DOCTYPE htmltitleIE透明滤镜alpha失效/titlestyle#dvTable div.opc4{opacity:0.4;filter:alpha(opacity=40);}#dvTable div.opc4:hover{opacity:1;filter:alpha(opacity=1..

让IE6,IE7支持display inline-block

评论(0)浏览(45)分类:HTML/CSS兼容/XML
让IE6,IE7支持display inline-block  IE6,IE7对css样式display inline-block的支持有问题,需要经过css hack后才会支持。注意:IE8需要加xhtml申明变为css1compat模式才会支持inline-block,backcompat模式不支持,但是可以通过css hack来实现,和IE7-一样。  要想让IE6,IE7支持css样式display inline-block,有下面2种方法1、先使用display:inline-block属性触发块元素,然后..

img hspace/vspace失效解决办法

评论(0)浏览(94)分类:HTML/CSS兼容/XML
img hspace/vspace失效解决办法  html img标签添加了hspace,vspace属性后确没有作用,图片紧靠文字解决办法。  img标签添加了hspace,vspace属性后确没起作用,一般是样式中定义了img,设置了margin导致的,如下,上图的图片添加了hspace为10,但是文字还是紧靠图片,查看图片样式后发下有如下的css设置过img的margin为0。  将这个样式中的img去掉后,img设置hspace,v..