前端技术
文艺er
这个作者很懒,什么都没留下…
展开
-
一次性解决PNG透明度在IE6下显示问题的脚本
插入png图片 png格式因为其优秀的压缩算法和对透明度的完美支持,成为web中最流行的图片格式之一。IE6下png的图片不显示透明效果。其他浏览器都挺好的。为了解决IE6下png图片的般透明效果,的方案是:一次性解决PNG透明度在IE6下显示问题的脚本function correctPNG() { for(var i=0; i { v转载 2014-04-05 22:27:36 · 501 阅读 · 0 评论 -
一次性解决PNG透明度在IE6下显示问题的脚本
png格式因为其优秀的压缩算法和对透明度的完美支持,成为web中最流行的图片格式之一。IE6下png的图片不显示透明效果。其他浏览器都挺好的。为了解决IE6下png图片的般透明效果,的方案是:一次性解决PNG透明度在IE6下显示问题的脚本function correctPNG() { for(var i=0; i<document.images.length; i++)...2014-04-05 22:27:00 · 82 阅读 · 0 评论 -
em(倍)与px的区别
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因...原创 2014-09-04 16:39:48 · 158 阅读 · 0 评论 -
编写高质量代码base.css
@charset "utf-8";/* CSS Document *//*CSS reset*/html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquot...原创 2014-09-04 16:43:45 · 137 阅读 · 0 评论 -
\5fae\8f6f\96c5\9ed1的意思
下面这个CSS是啥意思:font-family:\5FAE\8F6F\96C5\9ED1;答:\5FAE\8F6F\96C5\9ED1应该是unicode编码格式,为了在页面中不显示中文的兼容方法,等价于:font-family:“微软雅黑” font-family:“Microsoft YaHe” 对于一个从事网页设计(也常说成DIV+CSS)的朋友来说,可能会遇到过这样的问题,就是...原创 2015-06-02 10:59:59 · 4142 阅读 · 0 评论 -
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。HTML5的新标签元素有:<header>定义页面或区段的头部;<footer>定义页面或区段的尾部;<nav>定义页面或区段的导航区域;<section>页面的逻辑区域或内容组合;...原创 2014-09-10 21:41:06 · 246 阅读 · 0 评论 -
响应式设计的 5 个 CSS 实用技巧
响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了。本文分享在编码时常用的五个CSS技巧并举例说明。这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用。 1. 响应式Video (demo) 响应式video的CSS技巧是由tjkdesign.com发...原创 2014-09-13 16:15:09 · 155 阅读 · 0 评论 -
修改输入框placeholder文字默认颜色-webkit-input-placeholder
html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如:<input type="text" placeholder="我爱北京" value=" "> 默认的placeholder字体颜色是呈浅灰色,如果想改变这个默认颜色,解决方案如下:input:-moz-placeholder,textarea:-moz-place...原创 2014-09-14 16:42:03 · 854 阅读 · 0 评论 -
Css Sprite
Css Sprite也被为CSS精灵,这是前端攻城师必备的技能之一,也是衡量初级攻城师和中级攻城师的标准之一。下面大概描述一下Css Sprite的基本概念: 这是一种网页图片应用处理的方法,将一个页面涉及到的一些零散的图片整合到一张图片上,减少客户端对服务器HTTP请求的次数,然后用CSS背景图定位的方法来处理需要用到的图片部分。 话说背景定位,其实就是操纵背景的...原创 2014-09-14 17:43:00 · 149 阅读 · 0 评论 -
网站字体样式该如何选择
详解中文字体访问一峰老师博客:http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html相比英文字体,中文字体的网页开发有着极大的局限性。因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体。(*注:确实有网站提供中文字体的web服务,从技术角度,一峰老师不推荐这样...原创 2014-09-21 09:56:02 · 348 阅读 · 0 评论 -
前端在线工具汇总
在线工具集锦:http://tool.oschina.net/ css速查表:http://css.doyoe.com/ 菜鸟教程:http://www.runoob.com/ 在线响应式测试工具:http://quirktools.com/screenfly/http://mattkersley.com/responsive/ 可视化CS...原创 2015-07-03 11:15:58 · 333 阅读 · 0 评论 -
Animator:短小精悍的CSS3动画库
参考:http://www.w3cfuns.com/blog-5458245-5406333.html <div class="main"> <div class="content"> <div id="animate" class="FadeIn"> Animator </原创 2015-07-05 08:47:14 · 541 阅读 · 0 评论 -
有效防止移动搜索转码
在全站头部加个meta:<metahttp-equiv="Cache-Control"content="no-siteapp">原创 2014-10-16 14:32:16 · 268 阅读 · 0 评论 -
前端学习文章【1】
移动时代的前端加密 http://div.io/topic/1220【教程】弧形排列的可折叠二级导航 - 制作思路(布局篇) :http://www.cssmagic.net/demo/20090215-arc-nav/teach.html eg:http://www.cssmagic.net/demo/20090215-arc-nav/index.html前端进阶之路:点击...原创 2015-08-17 09:20:27 · 199 阅读 · 0 评论 -
收藏本站代码
function addToFavorite() {var a="http://#"; var b="收藏本站";if(document.all){window.external.AddFavorite(a,b)}else if(window.sidebar){window.sidebar.addPanel(b,a,"") }else{alert("亲,您的浏览...原创 2014-10-30 10:20:32 · 1045 阅读 · 0 评论 -
css清除浮动大全
我根据自己的经验总结8种清除浮动的方法(测试已通过iechromefirefoxopera,后面三种方法只做了解就可以了): 1,父级div定义height <style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}.div2{back...2014-04-05 21:44:00 · 72 阅读 · 0 评论 -
前端的一些内容及各大浏览器的兼容性
默认样式重置(css reset) css reset原则:但凡是浏览器的样式,都不要使用body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0}ol,ul{list-style:none,padding:0;margin:0}a{text-decoration:none;}img{border:none;}a伪类的先后顺序 link、visited、hover、ac...原创 2014-08-26 22:04:50 · 435 阅读 · 0 评论 -
js小技巧:tab页切换
tab页切换 function switchTab(ProTag, ProBox) { for (i = 1; i < 5; i++) { if ("tab" + i == ProTag) { document.getElementById(ProTag).getEl转载 2014-05-19 17:22:59 · 468 阅读 · 0 评论 -
谷歌字体(Google Font)初探 [翻译自Google官方文档]
这个指南解释了如何使用Google Font的API,把网络字体添加到自己的页面上。你不需要任何的编码,你所要做的只是添加一个特定的CSS到HTML页面上,然后把字体关联到这个CSS样式。转载 2014-06-26 09:40:23 · 1147 阅读 · 0 评论 -
自适应网页设计
随着3G的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的转载 2014-06-22 11:37:45 · 458 阅读 · 0 评论 -
自适应网页设计
一、"自适应网页设计"的概念2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。 如果屏幕宽度在600像素到1300像素之间,则6张图片分成两...2014-06-22 11:37:00 · 118 阅读 · 0 评论 -
谷歌字体(Google Font)初探 [翻译自Google官方文档]
这个指南解释了如何使用Google Font的API,把网络字体添加到自己的页面上。你不需要任何的编码,你所要做的只是添加一个特定的CSS到HTML页面上,然后把字体关联到这个CSS样式。一个快速的例子:这是一个例子,复制下面的HTML代码到一个文件中:<html> <head> <link rel="stylesheet" type="text...2014-06-26 09:40:00 · 270 阅读 · 0 评论 -
怎样从直接Github的repository安装Sublime Text插件
首先,我们假设你在用Sublime Text和Package Control插件。按Ctrl + Shift + P(Mac下是Shift + CMD + P)进命令选择窗口,搜索”repository”,选择”add repository”直接输入一个Sublime Text的Github地址,如https://github.com/ttscoff/MarkdownEditing载入完...原创 2014-07-02 11:26:29 · 704 阅读 · 0 评论 -
一些英文网站改版中文不显示中文标题内容的方法
一些英文网站改版中文网站会导致标题只能显示英文字符,中文好像是替换掉一样。通过查看代码标题的调用是完全没有问题的,应该是哪里的JS限制导致的。通过查阅资料,原来是一些国外的开发者比较喜欢用Cufon字体,默认是不支持的,需要用JS来限制,这就导致中文字符无法显示的原因。我们要解决这个问题就只要找到限制的JS代码,然后删除即可。 然后搜索"Cufon.replace"字符,找到所在的J...原创 2014-07-21 16:00:59 · 362 阅读 · 0 评论 -
Web前端开发规范
规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档。基本准则符合web标准,语义化html, 结构、表现、行为分离,兼容性优良,页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。文件规范1、html、 css、js及image文件均归档至约定的目录中;2、html文件命名:英文命名+后缀.htm,同时将对应界...原创 2014-07-22 16:11:35 · 113 阅读 · 0 评论 -
搜狐WEB标准_前端技术应用规范
搜狐WEB标准_前端技术应用规范原创 2014-07-22 16:16:56 · 109 阅读 · 0 评论 -
响应式十日谈第一日:使用 rem 设置文字大小
上面回顾:在序言中我们已经提到了响应式的一些基本理念,比如:响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷。序言中同样提到,响应式的设计应该秉承「内容优先,移动优先」的设计原则,那么我们知道网页中的内容主要是由文字图片等元素组成的,那么文字该如何响应式呢?当我们每天面...原创 2014-07-24 10:50:55 · 140 阅读 · 0 评论 -
从Web字体谈起——默认字体样式设置
在网页设计中字体的设置不可小觑,好的字体让人赏心悦目,凌乱的字体让人抓狂,如何正确的设置网页中的字体便是今天讨论的话题。在网页设计中字体设置时要考虑到不同系统、不同浏览器、不同渲染方式的字体表现,选择一套合适的字体设置值得深究,为保证各种平台环境中的表现效果兼容性,需要设置一套默认的字体样式。首先我们来看看各大网站的默认字体样式的设置:Google: font-family: a...原创 2014-08-01 10:07:19 · 1800 阅读 · 0 评论 -
css reset重置基础代码
Eric Meyerhtml, body, div, span,applet, object, iframe, table, caption,tbody, tfoot, thead, tr,th, td, del, dfn, em, font, img, ins,kbd, q, s, samp, small,strike, strong, sub, sup, tt, var,...2014-04-01 10:18:00 · 142 阅读 · 0 评论 -
CSS命名规范(规则)
常用的CSS命名规则头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体佈局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submen...2014-04-01 10:42:00 · 150 阅读 · 0 评论 -
如何在IE7下兼容半透明
background:#3598DB; filter:alpha(opacity=60);-moz-opacity:0.6; opacity:0.6; CSS opacity 属性opacity -- 不透明度取值: <alphavalue> | inherit<alphavalue>: 透明度取值(取值范围[0.0,1.0])inheri...原创 2014-08-24 09:51:56 · 213 阅读 · 0 评论 -
IE7下 z-index的bug
z-index 有时候设置了很高的值如:z-index:999; 但是最后在 IE7中却达不到我们想要的效果,设置了z-index还是被遮盖了。因为其实是IE7的渲染DOM的问题,当一个父容器被定位(如position:relative)的时候,子元素的z-index属性会被重置。 解决办法: 在父容器中加上z-index值就可以了。z-index属性必须与position配合用...原创 2014-08-24 17:43:55 · 98 阅读 · 0 评论 -
用3个步骤实现响应式网页设计
第一步:Meta标签(查看演示)大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。[html] view plaincopy <meta name="vi...原创 2014-11-04 15:44:57 · 397 阅读 · 0 评论