网页制作
文章平均质量分 69
hello刘海
这个作者很懒,什么都没留下…
展开
-
去除chrome浏览器自动添加的默认样式
chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:input:-webkit-autofill {background-color: #FAFFBD;background-image: none;color: #000;}看到这转载 2016-04-07 14:37:45 · 11033 阅读 · 0 评论 -
IE6下png背景不透明问题的综合拓展
转载自:http://www.zhangxinxu.com/wordpress/?p=14转载 2014-05-19 15:18:28 · 565 阅读 · 0 评论 -
IE下css bug集合-翻译自haslayout.net
转载自:http://www.zhangxinxu.com/wordpress/2009/12/ie%E4%B8%8Bcss-bug%E9%9B%86%E5%90%88-%E7%BF%BB%E8%AF%91%E8%87%AAhaslayout-net/转载 2014-05-19 15:16:34 · 621 阅读 · 0 评论 -
csshover.htc解决IE6 hover兼容问题
为了美观,很多网站主都喜欢用hover来定义一些元素,比如这一句:menu li: hover {background:#fff;}。但如果访客使用IE6浏览器,那么你的一切心思都是白费,因为他根本欣赏不到#fff的背景效果。这又是IE6的一个兼容问题,就是不能正确解读所有CSS元素的hover定义,除a:hover可以正确外,其余元素的hover定义一律不能解释。解决IE6的hover的兼容问题原创 2014-05-12 16:36:11 · 1376 阅读 · 0 评论 -
谷歌滚动条设置 IE滚动条设置
google浏览器chrome设置滚动条样式.courrlist ::-webkit-scrollbar { width: 10px;}.courrlist ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-ra转载 2014-05-06 11:38:58 · 936 阅读 · 0 评论 -
关于获取各种浏览器可见窗口大小的一点点研究
关于获取各种浏览器可见窗口大小的一点点研究function getInfo(){var s = "";s = " 网页可见区域宽:" document.body.clientWidth;s = " 网页可见区域高:" document.body.clientHeight;s = " 网页可见区域宽:" document.body.offsetWidth " (包括边线和原创 2014-04-18 16:35:24 · 493 阅读 · 0 评论 -
ie6遮罩层没法遮罩select
ie6遮罩层无法遮罩select ,此处添加一下代码可以遮罩父窗口的select标签原理:select为窗口级元素,所以div无法遮罩select,iframe和select为统计元素,通过设置iframe的z-index就可 以避免在ie6下的这种bug <divstyle="position:absolute;z-index:-1;width:100%;height:200px;bo原创 2013-11-04 16:14:38 · 579 阅读 · 0 评论 -
IE6/IE7中li底部4px的Bug
当li的子元素中有浮动(float)时,IE6/IE7中元素的下面会产生4px空隙的bug。XHTML ul class="list"> li>div>vapourdiv>li> li>div>百度div>li> li>div>淘宝div>li> li>div>迅雷div>li>ul> 经过测试发现:li的子元素浮动是这个转载 2014-03-11 13:12:45 · 640 阅读 · 0 评论 -
CSS 中文字体的英文名称 (simhei, simsun) 宋体 微软雅黑
华文细黑:STHeiti Light [STXihei]华文黑体:STHeiti华文楷体:STKaiti华文宋体:STSong华文仿宋:STFangsong俪黑 Pro:LiHei Pro Medium俪宋 Pro:LiSong Pro Light标楷体:BiauKai苹果俪中黑:Apple LiGothic Medium苹果俪细宋:Apple LiSung L转载 2014-02-19 14:30:24 · 2911 阅读 · 0 评论 -
解决IE6浏览器下position:fixed固…
方法一:html{height:100%;overflow:hidden;}body{margin:0;height:100%;overflow:auto;}.wrap{height:1000px;}.box{ width:100px;height:100px;background:red;position:absolute;left:20px;top:50px;}原创 2013-11-04 16:14:51 · 759 阅读 · 0 评论 -
使IE6下PNG背景透明的七种方法任你…
PNG图像格式介绍:PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG’s NotGIF”,是一种位图文件(bitmapfile)存储格式,读成“ping”。PNG用来存储灰度图像时,原创 2013-11-04 16:12:42 · 572 阅读 · 0 评论 -
关于gif图片(或png8)杂边锯齿的问题
1. gif图片产生杂边锯齿的原因 五、参考文章1. 维基百科 RGBA2. 百度百科 阿尔法通道3. 月光博客 Photoshop的GIF透明图片插件转载 2014-06-10 11:06:24 · 1394 阅读 · 0 评论 -
IE6下png背景不透明问题的综合拓展
一、可解决的方法1. IE css 滤镜IE css滤镜中有一个使png背景透明的滤镜,JavaScript方法也是应用的这个滤镜实现png背景透明的。写法:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’);用法示例:.png{background:u转载 2014-06-10 11:15:58 · 646 阅读 · 0 评论 -
JS与Flash相互调用
flash使用的actionscript跟javascript是非常相通的,下面描述如何互相调用函数:1:javascript调用flash中的函数在flash的脚本中增加代码:import flash.external.ExternalInterface;假定要调用的函数是hello,as代码如下代码:function hello(){ return "hello转载 2014-07-30 10:38:48 · 2592 阅读 · 0 评论 -
input元素相对父级元素错位了?IE7
先看代码: 期望结果:div1距离左边边距100px,div2中的input距离div1的左边距离为0 IE6、7表现异常:div2中的input距离div1的左边距离为100px,也就是说继承了父级div1的margin-leftIE8、9,chrome,FF表现正常原因:产生这种错误的原因是因为当input仅转载 2016-01-11 11:16:32 · 1189 阅读 · 0 评论 -
兼容浏览器的min-height和min-width
min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/先说说min-height。这个看起来很容易。看下面试例:div style="border:5px solid #f00;min-height:200px;width:300px;转载 2016-01-08 18:41:07 · 1532 阅读 · 0 评论 -
浅谈inline-block及解决空白间距
如今有很多网站都用上了 inline-block 属性,比如 {display:inline-block; *display:inline; *zoom:1},以上 css 代码随处可见。很多人看见 *display:inline; *zoom:1 就下意识的认为:哦,原来 inline-block 这个属性 ie6 和 ie7 不支持。那么 ie6,7 真的不支持 display:inline-转载 2016-01-08 18:37:42 · 795 阅读 · 0 评论 -
目前比较全的CSS重设(reset)方法总结
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。 当今流行的浏览器(如:Firefox、O转载 2015-01-28 17:05:04 · 941 阅读 · 0 评论 -
CSS3的calc()使用
平时在制作页面的时候,总会碰到有的元素是100%的宽度。众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异转载 2015-01-28 15:36:07 · 1132 阅读 · 0 评论 -
浏览器加载和渲染html的顺序
转自:http://topic.csdn.net/u/20111124/21/ab0de63f-da83-4857-8eb0-6983f890d399.html?87567前阵子,在组内给大家做了一次关于“浏览器加载和渲染HTML的顺序”的分享(PS:这前面html几个字在51testing上可能展示有点问题),这里再总结一下吧。1.浏览器加载和渲染html的顺序1、IE下载的顺序转载 2014-08-26 16:41:15 · 510 阅读 · 0 评论 -
CSS3 Media Queries
Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> link href="css/style.css" rel="stylesheet" type="text/css" med转载 2014-08-07 14:26:02 · 405 阅读 · 0 评论 -
使用CSS3 Flexbox布局
Flexbox的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器(flex container)来辅助实现。 Flexbox可以简单快速的创建一个具有弹性功能的布局,当在一个小屏幕上显示的时候,Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩,从而容易调转载 2014-08-05 17:27:47 · 537 阅读 · 0 评论 -
css3弹性盒子模型之box-flex
box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高、水平均分、按比例划分。但是它有一定的局 限性,在firefox、chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)、chrome(-webkit)。一、box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分。 11转载 2014-08-05 10:39:03 · 1297 阅读 · 0 评论 -
html中插入flash代码详解
width="550" height="400" > NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">转载 2014-07-30 11:13:50 · 4896 阅读 · 0 评论 -
用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解
如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。比如说我们熟悉的wordpress后台,当屏幕分辨率小于900px的时候,左边的侧栏就会变成收拢状态(@media only screen and (max-width:900px转载 2014-02-25 14:56:14 · 10657 阅读 · 0 评论 -
outline:none || hidefocus="true" || onfocus="this.blur();"
hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.blur()" 它的值是一个布尔值,如hideFocus=true。也可省略赋值直接写hideFocus。 你给的代码如果没有hideFocus,那么鼠标点击该超链接,则外面出现一个虚线框,即为聚焦。而使用了hideFocus则不会有虚线框。在IE下,需要在标签 a 的结构中加入 hidefocus转载 2014-02-13 14:54:29 · 1282 阅读 · 0 评论 -
link和@import的区别
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:XML/HTML代码 XML/HTML代码 两者都是外部引用CSS的方式,但是存在一定的区别: 区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@原创 2013-11-04 16:14:32 · 568 阅读 · 0 评论 -
DIV+CSS列等高技巧
n行n列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,做法有:背景图填充、加JS脚本的方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。1 背景图填充法就是将一个npx宽的一张图片在外部容器纵向重复,定位到两列交错的位置纵向重复,在视觉上产生了两列高度一样的错觉XHTML<divid="column1">这是第一列<divid="colum原创 2013-11-04 16:14:26 · 971 阅读 · 0 评论 -
web前端开发必备工具
开发工具(IDE)下载DreamWeaver 推荐Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。完美者 破解版本EditPlus 推荐EditPlus是一款由韩国Sangil-Ki原创 2013-11-04 16:14:17 · 961 阅读 · 0 评论 -
推荐几款Web前端框架
1、flexApache基金会今天发布了Flex4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本。需要注意的是,Flex目前还在孵化阶段,还不是Apache的正式项目,Flex 4.8也不是一个正式的Apache版本。Apache称,该版本标志着Flex新时代的开始,Flex的未来将由社区来驱动,而不是由一个公司驱动。开发者可以通过贡献代码,来帮助改进Fl原创 2013-11-04 16:14:14 · 993 阅读 · 0 评论 -
ie6.0下div 实现1px高度
解决方法有如下几种:1.加一个font-size=0px;的属性可以实现.style type="text/css">.a{font-size:0px;height:1px;background-color:red;}style>div class="a">div> 但经过我的测试,细是细了,但不是1px,有点像是2px.不知道是我的浏览器问题,还是别的原因.你们可以用这个方法原创 2013-11-04 16:13:52 · 915 阅读 · 0 评论 -
HTML特殊符号对照表
特殊符号命名实体十进制编码特殊符号命名实体十进制编码ΑΑΑΒΒΒΓΓΓΔΔΔΕΕΕΖΖΖΗΗ原创 2013-11-04 16:13:24 · 692 阅读 · 0 评论 -
怎样实现在任务栏显示小图标的效果…
有些站点,访问时会在地址栏地址前显出小图标,添加到收藏夹后也在收藏栏中显示图标,这样很好的与其它站点有了区别。要达到这个效果,先需做出这个图标文件,图像为16*16像素,不要超过16色。文件格式为ico,然后上传至你的网站。然后,在需要的页面中,加上以下html语句到文件的和之间(假设以上ico文件的地址http://happyisland.126.com/icon.ico)。<link原创 2013-11-04 16:12:40 · 1355 阅读 · 0 评论 -
简单CSS hack总结
区别不同浏览器的CSShack写法:区别IE6与FF: background:orange;*background:blue;区别IE6与IE7: background:green !important;background:blue;区别IE7与FF: background:orange; *background:green;区别F原创 2013-11-04 16:12:29 · 508 阅读 · 0 评论 -
哀悼日网站首页变灰
1.滤镜方法在 中加入:html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}or html{filter:gray}或者在引用的css样式表中加入html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}原创 2013-11-04 16:14:10 · 1045 阅读 · 0 评论 -
问候来来访者的代码
document.write("<fontcolor=#990099 size=-1> ")day = new Date()hr = day.getHours()minu=day.getMinutes()s="嗨!您好,现在是:";s=s+hr+"点"+minu+"分。 ";if (hr ==1)document.write(s+"已经是午夜一点多啦!别忘了休息喔!")if (h原创 2013-11-04 16:13:34 · 531 阅读 · 0 评论 -
设为主页,收藏夹代码
1.文字型: <aonclick="this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.apple-wallpaper.com’);"href="http://www.apple-wallpaper.com">设为首页2.按钮型: <input TYPE="button" VA原创 2013-11-04 16:12:14 · 526 阅读 · 0 评论 -
table的thead/tbody/tfoot/tr/th/t…
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成。下载一块显示一块,表格巨大时有比较好的效果。tbody包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了th原创 2013-11-04 16:12:22 · 1322 阅读 · 0 评论 -
正则表达式限制文本框输入
1、只能输入中文:<inputtype="text" onkeyup="value=value.replace(/[-~]/g,'')" />2、只能输入数字代码(小数点也不能输入):onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,''原创 2013-11-04 16:12:47 · 657 阅读 · 0 评论 -
纯DIV+CSS制作圆角矩形
样式1:简洁型css圆角矩形b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid#999;border-right:1px原创 2013-11-04 16:12:18 · 980 阅读 · 0 评论