-
纯CSS3立体提示模块的实现,附源码
所属栏目:[经验] 日期:2018-10-04 热度:105
最近一些日子都在看JS方面的书,写小游戏,好久没写CSS了,昨天看了一个纯CSS3进度条的例子,感觉很有创意,尤其是用background-size来repeat渐变斜线这招,妙不可言。今天再浩方打dota的时候刷不进房间,看到它弹出一个提示框,如下: 发现跟进度条有个共[详细]
-
CSS3 中box-shadow用法
所属栏目:[经验] 日期:2018-10-04 热度:51
box-shadow:阴影水平偏移值(可取正负值); 阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色; -moz-box-shadow:2px 6px 10px #888888; -webkit-box-shadow:2px 6px 10px #888888; box-shadow:2px 6px 10px #888888; filter: progid:DXImageTransform[详细]
-
使用HTML5/CSS3五步快速制作便签贴特效
所属栏目:[经验] 日期:2018-10-04 热度:132
本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作 便签 贴效果的HTML页面,效果图如下: (注: 图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢! ) 注:该效果可以在 Safari , Chrome , Firefox 和 Opera 在看到效果,IE上由于对[详细]
-
抛弃 CSS Hacks 后的浏览器兼容方案
所属栏目:[经验] 日期:2018-10-04 热度:154
如果你看过之前发在芒果小站的《CSS 忍者:安全的 CSS hacks 秘籍 》这篇文章,应该基本清楚了通过 IE 条件注释替代 CSS Hacks 的技巧。最近考虑在项目中实际应用这个方案。 一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本,当然在 IE9 开始逐步推[详细]
-
纯英文纯数字 CSS 强制折行代码
所属栏目:[经验] 日期:2018-10-04 热度:131
文字折行经常被测试拿来当 bug 提,这种蛋疼的事情还是写个公共类了事吧! 将以下代码放在CSS文件中即可: .break-word { word-wrap: break-word; break-word: break-all; } (文章来源:芒果小站)[详细]
-
分享16个优秀的CSS3表单开发教程
所属栏目:[经验] 日期:2018-10-04 热度:178
CSS3给Web开发带来了革命性的影响,以前很多需要 Java Script才能实现的复杂效果,现在使用CSS3就能简单的实现。今天这篇文章和大家分享16个优秀的CSS3表单开发教程。 1. Create a Stylish Contact Form with HTML5 CSS3 2. Create a Slick CSS3 Login For[详细]
-
解决IE6 select z-index无效,遮挡div的bug
所属栏目:[经验] 日期:2018-10-04 热度:95
在最近的一个项目中,遇到了IE6 select遮挡div的bug,为了解决这个bug我查了很多资料,试图找到一个最最有效的方法,很多人是通过iframe的方法来解决,其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法,已经使用 j[详细]
-
不要使用value作为li的自定义属性
所属栏目:[经验] 日期:2018-10-04 热度:163
如果想利用DOM的自定义属性,不要给li设置value,不管给li的value属性设置什么值,返回的都是整型值。 但是,如果通过getAttribute还是能获得真实属性值的。而用obj.value和 jQuery 等类库中的attr方法是不行的。 来源:http://www.iliawang.com/[详细]
-
让 Chrome 崩溃的 CSS 代码
所属栏目:[经验] 日期:2018-10-04 热度:56
让 Chrome 崩溃的 CSS 代码,请看下边的CSS。点击查看DEMO(请使用谷歌Chrome浏览器) Copy to Clipboard 引用的内容:[www.veryhuo.com]background-image: -ms-radial-gradient(center bottom, ellipse closest-corner, #4B8BEE 0%, #78AAF6 100%); backg[详细]
-
学习HTML5的10个顶级资源
所属栏目:[经验] 日期:2018-10-04 热度:81
HTML5已经成为互联网行业的最新流行语,不少人相信这是Web的未来。即使没有加入该社区的人也承认,HTML5包括了本来应该从一开始的HTML规范中包含的功能。在这篇文章中,我们将告诉你大约10 个HTML5的资源,让您现在开始使用该技术。 1)HTML 5工作草案标准[详细]
-
CSS 网页布局实例:横向分栏水平居中的实现
所属栏目:[经验] 日期:2018-10-03 热度:184
CSS 网页布局实例:横向分栏水平居中的实现 CSS 横向分栏布局实例,在内容显示区,因为元素未定义高度,所以必须添加内容,才能更好地显示元素的位置。也就是给正文显示区更大的余地,让内容决定正方的高度,因为本布局实例就是横向不变竖向变,以满足不同[详细]
-
CSS实例布局:绝对定位的DIV层实现
所属栏目:[经验] 日期:2018-10-03 热度:182
本文要介绍的教程是关于CSS绝对定位的布局问题,关于CSS绝对定位的好处是,不管网页窗口有多大或多小,其内部显示的内容不会变形,浏览用拖动条代替,在对布局显示要求较高的场合,绝对定位还是有很大好处的。这个使用绝对定位技术的CSS代码会告诉你该如何[详细]
-
CSS3实例效果五则,很实用的WEB开发教程
所属栏目:[经验] 日期:2018-10-02 热度:68
对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了更多的选择。 用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)[详细]
-
把Flash转成Javascript/HTML5
所属栏目:[经验] 日期:2018-10-02 热度:130
SmokeScreen是这样一个开源软件,它可以把Flash的swf文件转成 Java script/HTML5,它的口号是:Flash without plugin。为什么要这样做呢?它说主要是因主Apple的iPhone/iPod/iPad不支持flash,而且看似Steve Jobs也不愿意在以后支持flash。所以,他们搞了[详细]
-
全兼容可高亮二级缓冲折叠菜单[附DEMO演示]
所属栏目:[经验] 日期:2018-09-30 热度:130
最近一段时间一直比较忙,已经有好几个月没有打理博客了。现将一个最近在项目中制作的一个菜单实例整理出来,共享一下。 在后台或OA系统中最常用到的布局往往是一个全屏布局,一般都是上中下三行两列布局,页头、页脚、左侧菜单加一个右侧ifame框架页。所[详细]
-
什么是css sprite?原理优缺点及使用实例
所属栏目:[经验] 日期:2018-09-30 热度:61
关于CSS Sprite CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度[详细]
-
js+css实现禁止鼠标右键与选中网页文字
所属栏目:[经验] 日期:2018-09-30 热度:136
关于禁止右键的文章,烈火也曾经提到过几篇,相关代码都比较冗长,不够精简,在本文中我们来看一个js+css简单实现的代码,可以禁止鼠标右键及选中网页中的文字,支持 Firefox 火狐浏览器 。 CSS代码: body{ -moz-user-select:none; hutia:expression(this.[详细]
-
图片自适应大小,超出部分自动隐藏缩略
所属栏目:[经验] 日期:2018-09-30 热度:151
在制作网站布局中,图片的自适应功能是一个非常重要的功能,一般的用处是来防止图片撑开容器而对图片的尺寸进行必要的控制。有一个比较简单的方法来实现: max-width:600px; IE7、FF等其他非 IE浏览器 下最大宽度为600px。但在IE6中无效。 width:600px; 在[详细]
-
CSS+DIV层跨浏览器定位代码,附效果演示
所属栏目:[经验] 日期:2018-09-30 热度:93
本教程主要说的是纯CSS实现跨浏览器固定定位,这是个基础问题,关于CSS的相关知识,你可以参考烈火提供的CSS中文手册,关于此类问题,现在可以了解一下,但是在以后却要经常面对的问题,本代码不仅实现绝对定位,而且也实现了跨浏览器,参考一下便会明白了[详细]
-
input、select居中不兼容浏览器的解决方法
所属栏目:[经验] 日期:2018-09-30 热度:123
css修正Input标签在各种浏览器中差异,首先说明一下input、select等可能在各种浏览器中的表现差异: 1.当input或select与其他标签(例如a、label)混排时,可能出现不居中的问题。 2.input里面输入的文字行高存在差别,有空隙等等。 3....混排时,外层标签不[详细]
-
IE6、IE7、IE8浏览器下CSS不兼容的解决分析
所属栏目:[经验] 日期:2018-09-30 热度:110
IE6里DIV错位的问题 采用FLOAT:LEFT的DIV在 IE8 、IE7、都没问题,IE6下却向下移动,出现空白。这是因为,IE6采用的内核默认把DIV之间的距离增加了3~5个PX,所以,试试是将下移的DIV的STYLE里增加margin-left:-5px;或者更[详细]
-
CSS 背景透明而文字不透明的方法代码
所属栏目:[经验] 日期:2018-09-30 热度:197
本文要介绍的是CSS 背景透明而文字不透明的效果,本实现方法支持多个浏览器,包括:IE、 Firefox 、 Chrome 、 Opera 等。 实例代码如下:[详细]
-
CSS 实现文字、DIV层水平自适应屏幕大小
所属栏目:[经验] 日期:2018-09-30 热度:193
烈火网(LieHuo.Net)CSS教程,本文给大家介绍的是CSS 水平自适应的实现代码,这个与其它的水平自适应好像还有点区别,它里面的文字也会自适应,文字外的DIV同样也会随着浏览器窗口的大小而水平适应,大家仔细观察一下。 !DOCTYPE html PUBLIC -//W3C//DTD X[详细]
-
绝对定位的DIV+CSS层,多个层嵌套在一起
所属栏目:[经验] 日期:2018-09-30 热度:111
烈火网(LieHuo.Net)CSS教程 CSS多层绝对定位的一个小演示,多个层嵌套在一起,学习CSS布局的一个好例子。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3[详细]
-
CSS禁止中文输入法(只能输入英文)
所属栏目:[经验] 日期:2018-09-21 热度:112
CSS样式也是可以实现某些类似脚本的功能,例如今天要说的就是禁止输入中文,只要在CSS样式中加上以下代码就可以了: Copy to Clipboard 引用的内容:[www.veryhuo.com]ime-mode : disabled (说明:他的真实效果是禁止切换输入法,也就是说只能输入默认输入[详细]