-
CSS3 Media Queries,媒介设备查询
所属栏目:[经验] 日期:2018-10-08 热度:53
允许通过 media 属性为不同媒介设备(如屏幕、打印机)指定专用样式表,而 CSS3 通过 media queries 使得更为行之有效。你可以为媒介类型添加某些查询条件用以检测设备,并采用不同的样式表。例如,你可以有一个大屏幕显示器的专用样式和一个移动设备的专用[详细]
-
CSS3学习之圆角box-shadow,阴影border-radius
所属栏目:[经验] 日期:2018-10-08 热度:54
最近经常玩 腾讯微博 ,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css expression有争议的地方,对png24图片的处理也是用滤镜,类似(padding-top:2px )欠考虑! 看了腾讯的,下午就学了一下css3的东东!打算以后的项目中[详细]
-
纯CSS单行文本溢出追加省略号代码
所属栏目:[经验] 日期:2018-10-06 热度:64
之前一直以为单行文本溢出追加省略号没法兼容所有浏览器,经元泉同志提点,顺利解决: .box { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 样式代码,四个属性都是必须的,并且宽度必须设在当前容器上,父容器定宽[详细]
-
图片热区详解 与切片的优势比较
所属栏目:[经验] 日期:2018-10-06 热度:198
切片和图片热区是什么?图片切片是将很大的网页图片,切成类似拼图的那种形式,之后运用 HTML 代码,再完美的拼接起来的一种加快网页图片显示的手法,图片切片之后你还可以在不同的切片上加入链接等等,从而达到点击不同图片区域跳转到不同页面的效果。图[详细]
-
CSS 滤镜 -webkit-filter 的介绍和使用
所属栏目:[经验] 日期:2018-10-06 热度:73
大家可能对 Instagram 这款 iPhone APP 上的滤镜效果很感兴趣,其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的规范,Webkit 率先支持了它。 -webkit-filte[详细]
-
如何实现IE6下块级元素的内容自动收缩
所属栏目:[经验] 日期:2018-10-06 热度:194
近期在做提示层组件的开发,遇到了一个IE6常见的bug....想出了几个解决的办法,挺有意思的,这里分享给大家。 由于IE6浏览器中,display:inline-block只能触发IE的haslayout属性使得元素具有布局属性,当对div元素使用display:inline-block,div元素仍然为[详细]
-
display:inline-block下的IE元素
所属栏目:[经验] 日期:2018-10-06 热度:136
通常我们想让内联元素为行块布局显示,有2种方法,最常见的是方法是.selector {display:block;float:left;......},第二种方法是.selector {display:inline-block;......},对于第二种方法,在 IE浏览器 中得到支持,测试结果会认为IE能识别display:inline-[详细]
-
HTML5网页让所有浏览器都能识别HTML5标签样式
所属栏目:[经验] 日期:2018-10-06 热度:95
如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的 IE9 不支持Xp系统安装,这样未来很长一段时间,HTML5的开发者将必须考虑向下兼容的问题。HTML5的标签或CSS选择器兼容性的做法[详细]
-
关于HTML条件注释你可能不知道的一些事儿
所属栏目:[经验] 日期:2018-10-06 热度:58
最近经常看到类似这样的HTML代码片段,很多前端开发人员应该都熟悉: 1 !--[if lt IE 7] html class=ie6 ![endif]--2 !--[if IE 7] html class=ie7 ![endif]--3 !--[if IE 8] html class=ie8 ![endif]--4 !--[if gt IE 8]!-- html !--![endif]-- 这段代码[详细]
-
html5给文本框实现email域名自动完成效果
所属栏目:[经验] 日期:2018-10-06 热度:78
产品反馈用户总是输错email的域名,因此服务器得到的email的地址是错误的。比如,有许多用户总将xxx@qq.com输入成xxx@qq.con。 这让后端很烦恼,因为这个email地址是合法的,但是错误也是那么明显的(常识判断,至于qq.con域名是否存在我也不知道)。 为了解[详细]
-
CSS3转换功能transform主要属性值分析及实现
所属栏目:[经验] 日期:2018-10-06 热度:104
css3的到来,让css技术进一步提高了,以前在css2不能实现的功能,现在都可以实现了,例如: 圆角,文字阴影,透明度,渐变,转换,过渡,动画等等。这些功能使用起来很方便。 今天我想介绍一下转换的用法: transform主要包括以下属性值: rotate(旋转度数)[详细]
-
CSS教程:scrollbar的属性及样式分类
所属栏目:[经验] 日期:2018-10-06 热度:54
1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2.scrollbar-3d-light-color立体滚动条亮边的颜[详细]
-
有关 HTML5 的应用现状与发展前景的思考
所属栏目:[经验] 日期:2018-10-05 热度:104
现在的 HTML5 就像当年崭露头角时的 Ajax,有人在做,但不知道叫它什么。最近,苹果在 HTML5 上大做文章,而著名的 Web 设计师 Eric Meyer 则提出了 Web Stacks 的概念。Alex Kessinger 是 Yahoo 的一名前端工程师,本文是他对 HTML5 应用现状与前景的思考[详细]
-
模仿 Google 新搜索框的阴影效果
所属栏目:[经验] 日期:2018-10-05 热度:80
如图所示,注意搜索框的下边框和右边框的简单阴影效果。一起到Google看看去! 是图片吗? 不是,Google是通过3个不同颜色的边框实现的简单阴影。 (注意:Google的效果不支持IE6,但是模仿的效果支持所有浏览器。) Google是如何实现的? Google的主要HTML代[详细]
-
如何隐藏滚动条?IE去掉滚动条HTML代码
所属栏目:[经验] 日期:2018-10-05 热度:156
做了一个页面,与桌面 分辨率 一样大小,但是在IE全屏(F11)下却显示有滚动条,而火狐确没有。怎么样去掉IE滚动条呢?其实有一个属性就可以解决。 方法1:直接在body里面加上属性scroll 代码如: body scroll=no 方法2:使用样式表overflow 代码如: HTML[详细]
-
IE6 select z-index无效,遮挡div的解决教程
所属栏目:[经验] 日期:2018-10-05 热度:145
在最近的一个项目中,遇到了IE6 select遮挡div的bug,为了解决这个bug我查了很多资料,试图找到一个最最有效的方法,很多人是通过iframe的方法来解决,其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法,已经使用 j[详细]
-
Img,Script,Link等标签为空可导致页面多余请求
所属栏目:[经验] 日期:2018-10-05 热度:83
把页面中的img,script,link等标签为空链可以导致页面多余请求的问题,包括IE, Firefox ,chrome, Safari !但是相对于img,script跟link的src、href为空时,在IE下不做请求,而 Chrome , Safari, 和 Firefox则会出现一次多余的新请求。下面详细讲解一[详细]
-
用HTML5制作网页 - HTML5实例教程
所属栏目:[经验] 日期:2018-10-05 热度:100
根据你们询问的人,HTML 5不是迈向创造更语义化的网络的下一 个重要步伐,就是用一系列不完整的标签和标记大杂烩让网络陷入困境的灾难。 争论双方的问题在于,很少的站点在自然环境下使用HTML 5,所以现在所认识到的问题的理论解决方案仍然在很大程度上未[详细]
-
从语义开始 – 概念、意义、实践 [多图]
所属栏目:[经验] 日期:2018-10-05 热度:105
随着WEB标准在国内的不断普及,结构表现行为分离、模块化、语义化、优雅退化等概念也成为考核一名前端人员对WEB标准理解的重要条目,其中,由于SEO背后的商业价值影响,语义化得到了突出的重视,作为一名刚入门的前端工作者,我也曾单纯地认为,语义化便是[详细]
-
{ hide_text } CSS文字隐藏总结报告
所属栏目:[经验] 日期:2018-10-05 热度:55
最近整理的一份CSS文字隐藏的demo,总结了几种方法,希望得出一种最完美的方案放进自己的代码片段,可是,到最后却陷入一种重复不断地推翻结论的境地。因为需要考虑的应用场景和元素实在太多,放下浏览器不谈,不同的应用终端,不同的标签结构会有不一样的[详细]
-
CSS跨浏览器开发原则[图文教程]
所属栏目:[经验] 日期:2018-10-05 热度:178
在互联网设计过程中,可以说没有什么比开发出一个能够在当前所有浏览器下都具有同样吸引眼球效果的设计更让人高兴的事了。遗憾的是,这个目标似乎都被普遍认定为不太可能实现。甚至有些人抛弃了对完美的追求,认为跨浏览器的兼容性并不是必备的。 虽然我也[详细]
-
ie8 css hack 颜色使用示例
所属栏目:[经验] 日期:2018-10-05 热度:92
随着win7使用者的不断扩大,开始将ie8纳入开发兼容浏览器范围 9 例:margin:0px auto9;.这里的9可以区别所有IE和FireFox. * IE6、IE7可以识别. IE8 、FireFox不能. _ IE6可以识别_,IE7、IE8、FireFox不能. .color{ background-color: #CC00FF; /*所有浏览[详细]
-
CSS Sprites:实用技巧,还是潜在危险?[译]
所属栏目:[经验] 日期:2018-09-23 热度:71
无处不在的CSS sprites是为数不多的几个可以绕过逐渐流行阶段,而直接让自己成为CSS最佳实践的Web设计技巧中的一个。尽管在A List Apart对它进行一个解释以及赞同认可这种方式之前,它还没有真正地流行。它最早是由Petr Stancek.在2003年7月提出来作为一个[详细]
-
CSS 网页布局实例:横向分栏水平居中的实现
所属栏目:[经验] 日期:2018-09-23 热度:143
CSS 网页布局实例:横向分栏水平居中的实现 CSS 横向分栏布局实例,在内容显示区,因为元素未定义高度,所以必须添加内容,才能更好地显示元素的位置。也就是给正文显示区更大的余地,让内容决定正方的高度,因为本布局实例就是横向不变竖向变,以满足不同[详细]
-
CSS实例布局:绝对定位的DIV层实现
所属栏目:[经验] 日期:2018-09-23 热度:121
本文要介绍的教程是关于CSS绝对定位的布局问题,关于CSS绝对定位的好处是,不管网页窗口有多大或多小,其内部显示的内容不会变形,浏览用拖动条代替,在对布局显示要求较高的场合,绝对定位还是有很大好处的。这个使用绝对定位技术的CSS代码会告诉你该如何[详细]
