HTML/CSS
文章平均质量分 55
iziminy
Up Up Up ...!
展开
-
在IE6下让PNG图片透明的方法
FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的=============================================================================此效果简单,。。。。相当不错 推荐 style="FILTER: progid:DXImageTransform.Microsoft.Alp转载 2014-01-16 17:40:05 · 487 阅读 · 0 评论 -
分享一个开源响应式前端框架-SkelJS
SkelJS 仅有一个js文件,大小只有17kb。是一个轻量级的响应式设计网站应用的前端开发框架。提供可配置的栅栏结构、响应式breakpoint处理和许多其他功能。中文版API文档,参考手册: http://now.willin.org/p/skeljs/转载 2014-02-10 10:21:52 · 1691 阅读 · 0 评论 -
自适应网页设计(Responsive Web Design)
随着3G的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的转载 2014-02-10 14:55:48 · 582 阅读 · 0 评论 -
CSS3 Media Queries 实现响应式demo
Media Query Demos.wrapper { border: solid 1px #666; padding: 5px 10px; margin: 40px;}.viewing-area span { color: #666; display: none;}/* max-width */@media screen and (max-width: 600px)原创 2014-02-10 15:12:07 · 556 阅读 · 0 评论 -
简单活动页面布局
test*{ font-size:12px;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;} table {border-collapse:collapse;border-spacing:0;} fi原创 2014-02-10 16:20:04 · 714 阅读 · 0 评论 -
全屏背景布局居中显示demo
原创 2014-02-11 10:10:53 · 631 阅读 · 0 评论 -
js公告轮播代码
//首页公告var $announcement = $('#announcement ul'); var cheight = parseInt($('#announcement').css('line-height').split('p')[0]); var announcementLength = $announcement.find('li').length; var nowtop,原创 2014-02-13 17:05:44 · 5174 阅读 · 0 评论 -
ie6 a标签背景图遮盖文字的解决办法
今天切页面的时候遇到一个很奇葩的问题,在IE6中,当给a标签设置背景图的时候,a标签的文字被背景图遮住了,链接也失效,很奇葩吧~~对IE6简直无语。。。解决方法:a{position:relative或者position:absolute;}祝IE6早日淘汰,使我众前端脱离苦海!原创 2014-03-19 16:35:42 · 819 阅读 · 0 评论 -
前端开发必备!Emmet使用手册
介绍Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能在运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根转载 2014-03-20 22:07:46 · 618 阅读 · 0 评论 -
Emmet的高级功能与使用技巧
编写好HTML和CSS代码时,我们也需要修改或添加一些内容,Emmet提供了很多非常独特的工具,可以大大提高编辑体验,下面我们挑选几个常用的功能来介绍。萨龙龙发现在sublime text中安装的Emmet插件的快捷键与官方的演示文档中提供的快捷键不一样,这时我们就要修改Emmet快捷键或者查找在sublime text中的Emmet快捷键。修改快捷键,打开PreFerences——P转载 2014-03-20 22:45:44 · 4399 阅读 · 0 评论 -
js返回并刷新页面
返回并刷新页面原创 2014-03-21 16:15:16 · 569 阅读 · 0 评论 -
<meta http-equiv=”X-UA-Compatible” content=”IE=7, IE=9″>
公司的项目在老总的IE9下无法正常访问了。哎,苦逼啊。本以为搞定了IE6,7,8,firefox,chrome,safari,opera,就行了。尼玛的单独一个IE6就够咱折腾会了。以前没有IE9的时候,为了照顾ie8就写个强制使IE8浏览器使用IE7模式渲染。昨天看淘宝页面源代码加了个。查阅资料发现,那个是英文的,基础差。大致翻译是如果你有一个使用X-UA-Compati转载 2014-04-18 11:31:49 · 3362 阅读 · 0 评论 -
兼容IE6的页面底部固定层CSS代码
有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固定层CSS代码。如下:.bottom{background:#000;color:#fff;bottom:0;margin:0 auto;position:fixed;height:23px;opacity:.60;原创 2014-04-19 11:33:12 · 819 阅读 · 0 评论 -
CSS只改变背景透明度,不改变子元素透明度
一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如:原创 2014-04-25 09:29:07 · 1171 阅读 · 1 评论 -
同一个页面使用多个版本的jQuery
jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.10.11版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3.X、1.4.X、1.5.X、1.6.2等等。由于项目的需要,必然也需要不断的使用较新版的jQuery,但对于原来就已经存在并已经采用了的旧jQuery版本,我们如何让多个不同的jQuery版原创 2014-07-21 17:48:09 · 660 阅读 · 0 评论 -
HTML5 全屏 API
注:提 HTML5 只是说明他是一项新的东西,至于浏览器的 JavaScript API 应不应是 HTML5 的一个配套?我们不纠结。不如看这个接口能给我带来什么,思考可以如何给网页做个体验上的增强应用吧。一、说在前面的其实只是一个新的 JavaScript API,让 HTML 元素可以实现全屏显示。不过,这已经足够让我们兴奋。具体是怎样呢?其实这个从 iOS 和 Safari 5.0转载 2014-07-04 16:02:27 · 657 阅读 · 0 评论 -
CSS3 Media Queries 实现响应式demo
现在屏幕分辨率的范围很大,从 320px (iPhone) 到 2560px (大型显示器),甚至更大。用户也不只是使用台式电脑访问web站点了,他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值,已经不能满足需要了。web设计需要适应这种新要求,页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍,如何使用html5和CSS3 Media Queries完成跨浏原创 2017-12-01 14:24:48 · 317 阅读 · 0 评论 -
html5移动端常见问题集锦
meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式viewport模板转载 2017-12-01 14:26:39 · 951 阅读 · 0 评论 -
7 个效果震憾的 HTML5 应用组件
在HTML5的世界里,任何文本、图像都可以变得令人难以想象,很多HTML5应用也都已经随着浏览器的升级而变得运行飞速,而且兼容性也越来越好。下面为大家介绍7款效果震憾的HTML5应用组件,HTML5是强大的,是WEB的未来。1、HTML5实时动态数据图表HTML5实时动态数据图表,这是一款基于HTML5技术的网页图表插件,该图表插件功能十分强大,支持区域范围选择、鼠标拖动自定义区域、显示坐转载 2014-01-28 11:58:59 · 622 阅读 · 0 评论 -
IE6 IE7下ol li无法显示list-style-type解决办法
------解决方案--------------------li { list-style:decimal inside;}/*或*/li { list-style:decimal; margin-left:25px; }原创 2014-01-25 17:31:14 · 1228 阅读 · 0 评论 -
IE8的css hack
关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack:.test{color:#000000; /* FF,OP支持 */color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和“_”的css hack;所以我们可以这样写hack */[color:#原创 2014-01-23 20:40:04 · 503 阅读 · 0 评论 -
文字超长加省略号
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;原创 2013-12-12 09:32:43 · 700 阅读 · 0 评论 -
练习
善品天下网-用户中心 我的善品>用户中心 用户中心 账户中心 账户信息原创 2013-11-21 17:58:20 · 1630 阅读 · 0 评论 -
css:节点li中子元素浮动,即使固定高度,溢出隐藏,在ie6、7中仍有缝隙的解决办法
解决办法:偶然的情况下从新浪网上发现他们在li里加了一个vertical-align: bottom;这个问题就迎仞而解了,不过也只是知其然并不知其所以然,至于到底为什么加个vertical-align: bottom;就可以,有待朋友们给个解释..原创 2013-11-13 17:25:02 · 929 阅读 · 0 评论 -
CSS 公共样式分享
global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式)清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一致。common.css(公共组件样式)一般一个网站所有页面头部、底部样式都是一致的,而且很长时间不会有大的改变,改变的大概就是产品、运营的经常需要添加、去掉某些入口的需转载 2013-11-12 17:54:32 · 915 阅读 · 0 评论 -
分享15个专业且免费的HTML5模板
在这里分享给大家精心挑选的15个HTML5网站模板,这些模板涉及商业、投资、简历、画廊、艺术、慈善、房地产,以及食品等等方面。1. Zeni – Responsive HTML5 Portfolio TemplateDemo Download2. Torn – HTML5 Template 5 Skins Demo Download3. Folder原创 2014-01-23 20:40:42 · 984 阅读 · 0 评论 -
让IE6支持png24透明/半透明的方法
IE6下PNG背景透明或者图片透明一直让人很伤脑筋,以前的解决办法也不尽完好。最近在项目中,发现了一种几乎完美的解决办法。用JS在IE6下面实现png图和背景PNG透明。不敢独享,写下这篇文章,也好为自己以后查阅,利人利己啊。并且,可以解决a:hover 背景png的问题。下面开始,三步即可搞定IE6下PNG透明问题。第一步:下载JS文件DD_belatedPNG_0.0.8a.j原创 2014-01-23 20:40:07 · 529 阅读 · 0 评论 -
11个超炫的视差滚动网站欣赏
目前这种视差滚动效果被越来越多的国内外网站所应用,成为网页设计的热点趋势。通过一个很长的网页页面,其中利用一些令人惊叹的插图 和图形,并使用视差滚动(Parallax Scrolling)效果,让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。完美的展示了一个复杂的过程,让你犹如置身其中。 厌倦了千篇一律,呆板网页设计的你不放一试。视差滚动效果与少即是多的理念相互交融原创 2014-01-23 20:40:40 · 1001 阅读 · 0 评论 -
响应式设计的5个CSS实用技巧
正如我在教程响应式Web设计三步走当中所讲的,响应式的 Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了。现在我分享在编码时常用的五个CSS技巧并举例说明。这些技巧都是使用简 单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用。1. 响应式Video响应式video的CSS技巧是由t原创 2014-01-23 20:40:38 · 613 阅读 · 0 评论 -
CSS hack:针对IE6,IE7,firefox显示不同效果
CSS hack:针对IE6,IE7,firefox显示不同效果做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要。区别不同浏览器的CSS hack写法: 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !impor原创 2014-01-23 20:40:09 · 473 阅读 · 0 评论 -
IE6中 PNG 背景透明的最佳解决方案
为什么要使用 PNG 图片?简单来说,使用 PNG 格式比起 GIF 来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多。目前,最新的浏览器基本上都支持PNG格式。唯独有万恶的 IE6 不支持 PNG 背景透明,在 IE6 中的 PNG 背景图会显示一个灰色的背景。IE6 中 PNG 背景图片透明的方法其实方法有很多,但网络上提供的方法也有诸多缺陷。比如不支持 c原创 2014-01-23 20:40:51 · 1032 阅读 · 0 评论 -
-webkit-scrollbar
-webkit-scrollbar在IE中可以自定义滚动条的样式 ,基于webkit的浏览器现在也可以自定义其样式:::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track原创 2014-01-23 20:40:26 · 785 阅读 · 0 评论 -
IE6 PNG透明终极解决方案(转载)
“珍惜生命,远离IE6”,IE6中的bug令很多Web前端开 发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放弃了很多很炫的效果,为了 让大家在这方面少烧点脑细胞,KwooShung我就舍身一把,把当前最流行最实用的IE6支持PNG图片的方案整理到本贴内,以供大家学习参考!方案1 - 滤镜解决方案:原创 2014-01-23 20:41:14 · 586 阅读 · 0 评论 -
IE6 验证码图片 元素img下出现多余空白问题
在进行页面的DIV+CSS排版时,遇到IE6(当然有时 Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”,根据原因的不同要用不同的 解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳,供大家参考。方法整理来源于万福的网络。 1、将图片转换为块级对象 即,设置img为:原创 2014-01-23 20:41:03 · 597 阅读 · 0 评论 -
css实现透明度(兼容IE6)
filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;原创 2014-01-23 20:40:59 · 628 阅读 · 0 评论 -
HTML5 LocalStorage 本地存储(转)
HTML5 LocalStorage 本地存储说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javas原创 2014-01-23 20:40:57 · 463 阅读 · 0 评论 -
Web前端开发规范文档
规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器原创 2014-01-23 20:40:44 · 479 阅读 · 0 评论 -
雅虎的14条性能优化原则
法则1:减小HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像、样式表、脚本和 Flash 等,的下载上。减少页面元素将会减少 HTTP 请求次数。这是快速显示页面的关键所在。一种减少页面元素个数的方法是简化页面设计。但是否存在其他方式,能做到既有丰富内容,又能获得快速响应时间呢? 以下是这样一些技术:原创 2014-01-23 20:40:32 · 705 阅读 · 0 评论 -
flex 布局详解
一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望的发现 CSS 中并不存在 float: center 的写法,那么 text-align: center、verticle-align: center 是否可行...转载 2018-05-17 10:03:57 · 1531 阅读 · 1 评论