赵小磊 - 博客园

2013年1月2日

摘要： CSS中使用font-family属性引用中文字体时，经常采用三种方式定义字体：直接写中文英文别名Unicode码直接使用中文名称时，在不支持中文的系统或编码的页面就有可能会无法正常显示。如果使用Unicode码的话又不方便记忆。下面整理了常用的中文字体的英文别名，便于大家查找和使用：Windows中文名英文名宋体*SimSun黑体*SimHei微软雅黑*Microsoft YaHei微软正黑体Microsoft JhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标楷体DFKai-SB仿宋FangSong楷体KaiTi仿宋_GB2312FangSong_GB231 阅读全文

posted @ 2013-01-02 17:48 赵小磊阅读(267) 评论(0) 推荐(0) 编辑

页面性能优化之内容加载优化

摘要：图片按需加载现在大部分门户或电子商务网站的产品列表页,都比较长,且图片较多,如果全部加载,通常会耗费较多时间,而且有数据表明长时间的等待页面响应会流失大部分的用户,所以此时我们就可以考虑只加载第一屏的内容,第一屏内容以外的图片按需加载,用户滚动到该屏时再加载(包括tab切换也可以考虑未显示的区域图片不加载),这样用户在不进行任何操作时,加载页面会很快.看下面的简单demo:<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=u 阅读全文

posted @ 2013-01-02 17:08 赵小磊阅读(520) 评论(0) 推荐(0) 编辑

浮动元素的水平居中

摘要：对于页面上的块级元素，只须定宽及设置margin:0 auto;即可在水平上居中，但对于浮动的元素水平居中是无效的，一个典型的应用就是页面的分页效果了分页效果，在以往可能会采取设置inline-block，然后父容器设置text-align:center方式来实现内容居中，像如下代码：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/h 阅读全文

posted @ 2013-01-02 17:06 赵小磊阅读(544) 评论(0) 推荐(0) 编辑

2012年12月28日

提升用户体验之道：图片预加载

摘要：随着网站构建越来越倾向于实现“桌面般的体验”，网站中的图片数量也开始显著地增长。想想网站中的对话框、Tabs、Tooltips、Sliders以及日历控件吧，这都是实现“桌面般体验”的必要元素。预加载这一堆图片对网站性能及可用性的提升是有好处的，这样避免了图片加载过程中页面的闪烁、破裂（视觉上）等问题。常用的技术有两种常用的图片预加载技术：CSS spritesCSS sprites技术可以用来减少页面产生的HTTP请求数。它是这么实现的，把所有的图型状态（比如按钮的默认状态，悬停及激活等状态）保存到一张图片中。并依据元素的状态，使用CSS对图片进行相应的定位、切割。不过这样有个重要的缺点—— 阅读全文

posted @ 2012-12-28 10:34 赵小磊阅读(395) 评论(1) 推荐(0) 编辑

2012年11月26日

分享30个开发人员有用的CSS代码片断

摘要： CSS是我们使用的功能强大和最常用 web 语言。他可以兼容新旧不同的浏览器，他的兼容跨度确实够大的，从微软的IE到火狐再到谷歌浏览器。在设计的时候我们总是想创建更有创意和风格的网站，无论创建怎么样的网站，有些CSS代码是必须要掌握的，可以说这是核心，掌握这样的一些CSS代码，前端布局方面基本上再不成问题，什么边框圆角，工具提示，浏览器hacks等等都不是问题，在今天的文章中分享我收藏的 30 个CSS 代码段，无论您是经验丰富的 web 设计师还是新手，他们都是非常值得借鉴的；Css Reset by Eric Meyer 1 html, body, div, span, applet, o 阅读全文

posted @ 2012-11-26 10:12 赵小磊阅读(301) 评论(0) 推荐(0) 编辑

2012年11月24日

WML表单提交

摘要：程序代码关键词:<input name="keyword" title="keyword" type="text" format="*M" emptyok="false" maxlength="12"/><br/><anchor title="搜索">搜索 <go href="http://www.codepub.com//" method="get"> <pos 阅读全文

posted @ 2012-11-24 11:14 赵小磊阅读(227) 评论(0) 推荐(0) 编辑

2012年11月15日

针对IE的CSS hack 全面实用

摘要： .all IE{property:value\9;}.gte IE 8{property:value\0;}.lte IE 7{*property:value;}.IE 8/9{property:value\0;}.IE 9{property:value\9\0;}.IE 7{+property:value;}.IE 6{_property:value;}.not IE{property//:value;}lte：就是Less than or equal to的简写，也就是小于或等于的意思。lt ：就是Less than的简写，也就是小于的意思。gte：就是Greater than or eq 阅读全文

posted @ 2012-11-15 09:32 赵小磊阅读(189) 评论(0) 推荐(0) 编辑

2012年11月14日

window7下预览版IE10问题

摘要：今天早上来到公司，习惯打开http://www.cnbeta.com/看IT新闻，头条是window 7下的ie10预览版发布，我于是离开装上并体验，没多久发现如下问题：一、点击超链接的瞬间，超链接的文字会出现灰色的背景，如下图：如果不需要这个背景色，我首先想到的解决办法是：CSS里加上下面一句代码即可解决：a:focus { background:none; }二、条件注释问题<!--[if IE 10]><script type="text/javascript"> window.alert("你使用的是IE10浏览器！"); 阅读全文

posted @ 2012-11-14 10:39 赵小磊阅读(391) 评论(0) 推荐(0) 编辑

2012年10月31日

锚点失效问题。

摘要： <a href="#order" title="在线订购">在线订购</a><a name="order" id="order"></a>html中，关于锚点，这样加锚点一般没什么问题的，兼容各个浏览器。但是最近发现在ie6内核，360浏览器下居然失效，查了一下原因<a name="order" id="order">任意文字</a>a标签里面有内容的话，360浏览器就正常了。。或者这个这个a标签添加样式阅读全文

posted @ 2012-10-31 13:29 赵小磊阅读(1854) 评论(0) 推荐(0) 编辑

2012年10月26日

jQuery 简洁几句代码实现图片延迟加载

摘要： /*! * jquery.scrollLoading.js*/(function($) { $.fn.scrollLoading = function(options) { var defaults = { attr: "data-original", ... 阅读全文

posted @ 2012-10-26 22:01 赵小磊阅读(327) 评论(0) 推荐(1) 编辑

2012年10月17日

网页打开速度慢怎么办

摘要：网页打开速度慢怎么办？首先，我们应该找出网页打开速度慢的原因，然后对这些可能造成网页打开速度慢的原因进行改进。这里武汉seo整理了常见可能会应该网页打开速度慢的原因供大家参考：1、网站空间的选择一个稳定的空间对于网站的打开速度有着直接影响，要是空间不稳定三天两头的出问题，那这个网站还怎么运营，迟早要关门大吉。所以我们选择空间服务商也要慎重。2、页面缓存技术的运用。在平时当中，各大网站的缓存处理，站长们这是为了减轻服务器的负担。建议对一些不常更改的文件比如模板全部做缓存处理3、图片的处理。图片的压缩*：有些网站上的图片根本就没有压缩过，直接放上去，网站像这样的图片有很多的话，直接严重地影响网页的阅读全文

posted @ 2012-10-17 16:30 赵小磊阅读(867) 评论(0) 推荐(0) 编辑

2012年9月29日

JS仿网易摄影-社区推荐展示效果

摘要：浏览网页摄影网站的时候，发现这个网站有个栏目效果不错，http://pp.163.com/square/，他们是用css3实现，虽然效果很棒，但是只能在chrome、火狐等高级浏览器才能看得到，ie就不要想了，so。。。。我用js实现了这个效果，感觉还不错。。<!doctype html><html><head><meta charset="utf-8"><title>JS仿网易摄影-社区推荐展示效果</title><style type="text/css">* { 阅读全文

posted @ 2012-09-29 13:15 赵小磊阅读(441) 评论(0) 推荐(0) 编辑

JS运动框架

摘要： function startMove(obj, json, fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bStop = true; for(var attr in json){ var iCur = 0; if(attr == "opacity"){ iCur = Math.round(parseFloat(getStyle(obj, attr)*100)); }else{ iCur = parseInt(getStyle(obj, attr)) || 0;... 阅读全文

posted @ 2012-09-29 10:54 赵小磊阅读(647) 评论(0) 推荐(0) 编辑

2012年9月19日

侧边栏：在线客服

摘要： <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">body { height:2000px; }#box { width:150px; height:300px; background:#ccc; position:fixed; left:-150px; font-size:14px; }#box span { width:20px; pa 阅读全文

posted @ 2012-09-19 23:38 赵小磊阅读(654) 评论(0) 推荐(0) 编辑

2012年8月31日

面向对象JavaScript入门——来自Mozilla的官网教程

摘要：尽管面向对象JavaScript与其他语言相比之下存在差异，并由此引发了一些争论，但毋庸置疑，JavaScript具有强大的面向对象编程能力。本文先从介绍面向对象编程开始，然后回顾JavaScript对象模型，最后演示JavaScript中的面向对象编程概念。目录JavaScript回顾面向对象编程专用术语基于原型的编程JavaScript面向对象编程5.1. 核心对象5.2. 自定义对象5.2.1. 类5.2.2. 对象（类实例）5.2.3. 构造函数5.2.4. 属性（对象属性）5.2.5. 方法5.2.6. 继承5.2.7. 封装5.2.8. 抽象5.2.9. 多态提示参考文献尽管面向对阅读全文

posted @ 2012-08-31 16:27 赵小磊阅读(285) 评论(0) 推荐(0) 编辑

公告