jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

18

December

2012

现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到。

其实这样的布局方式很早就有,只是没有那么个契机推广开吧。做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已。

首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行。

HTML CODE:

<div id="header">Default header. No absolute and fixed.</div>
<div id="topToolbar">Fixed at the top of the Toolbar.</div>
<div id="content">
	<p>此处省略1000字...</p>
</div>
<div id="bottomToolbar">Fixed at the bottom of the Toolbar. By Bluesdream.com</div>

[ 查看全文... ]

迎接圣诞 网站优化调整

15

December

2012

圣诞将至,马路上、公司里到处洋溢着圣诞的氛围。所以趁着项目空档期,我便把网站调整了一下,也算是赶个潮流应个景吧。说来也巧,本文正好是我博客的第100篇文章。从09年初创建,到如今已走过了近5个年头,经历过多次的搬家、调整和种种原因,直到现在才认真打理起来。最后希望能把网站越搞越好吧~

调整内容:
1. 为了应景,将网站首页的悬浮层图片,换成了雪花。 [ 查看全文... ]

Ublue jQuery FloatLayer 浮动层插件

12

December

2012

翻啊翻...又翻到个早已遗忘在角落的存货...
这个插件,是之前应间应同事需求而写的。功能也比较简单,主要是为了实现点击某个区域,弹出个浮动层,显示相关的介绍。

JAVASCRIPT CODE:

$(function(){
	$(".unfoldLayer").UblueFloatLayer({
		floatLayer:"floatLayer", //设置浮动层
		offsetMode:"center", //设置对齐方式 (默认值center 可选参数:Left、center)
		offsetTop:"6", //设置上间距(默认值0 可负值)
		offsetLeft:"0" //设置左间距(默认值0 可负值)
	});
});

[ 查看全文... ]

国务院办公厅发布2013年部分节假日安排

10

December

2012

中新网12月10日电 据中国政府网消息,国务院办公厅日前发布关于2013年部分节假日安排的通知。根据国务院《关于修改< 全国年节及纪念日放假办法>的决定》,为便于各地区、各部门及早合理安排节假日旅游、交通运输、生产经营等有关工作,经国务院批准,现将2013年元旦、春节、清明节、劳动节、端午节、中秋节和国庆节放假调休日期的具体安排通知如下。

一、元旦:1月1日至3日放假调休,共3天。1月5日(星期六)、1月6日(星期日)上班。

二、春节:2月9日至15日放假调休,共7天。2月16日(星期六)、2月17日(星期日)上班。 [ 查看全文... ]

响应式Web设计(Responsive Web Design)简述

09

December

2012

最近在整理一些自己的DEMO...发现有些DEMO因为太久了,自己都忘记了。所以还是贴出来吧,既是分享也是便于自己查看。

随着手机越来越智能、平板电脑越来越主流,移动终端大赶超传统PC只是时间的问题。可随时而来的问题就是,移动终端由于为了适合各种人群和需求,往往屏幕的尺寸层出不穷。这就导致很多网站看起来不伦不类,在PC上看明明很好,但一到小屏幕的移动端,就完全变形或者呈现效果不佳。为此,一些网站往往根据不同的屏幕分辨率,制作不同样式的页面,但这样就大大增加了成本。

科技是与时俱进的,技术也是与时俱进的,所以老外就想到了“响应式Web设计(Responsive Web Design)”。其概念就是根据不同的设备,不同的屏幕进行响应,调用最符合当前用户的一个网页风格。(其实我的网站很早以前就应用了响应式web设计,不过仅仅针对小于1240的屏幕做了“一个”窄版的风格,可能没什么人会注意到此细节。)

另外相对应的优势也十分明显:页面只有一个,只是针对不同的分辨率、不同的设备环境进行了一些不同的设计,所以在开发、维护和运营上,相对多个版本,能节约成本。 兼容性优势:移动设备新的尺寸层出不穷,定制的版本通常只适用于某些规格的设备,如果新的设备分辨率变化较大,则往往不能兼容,而开发新的版本需要时间,这段时间内的访问就是个问题,但是响应式Web设计可以提前预防这个问题。 操作灵活:响应式设计是针对页面的,可以只对必要的页面进行改动,其他页面不受影响。 [ 查看全文... ]

《十万个冷笑话》第04集 福禄篇

30

November

2012

今天周五,放松一下、欢乐一下吧。《十万个冷笑话》又出新的了~ 在很久很久以前,有一座葫芦山,镇压着一只千年蛇妖...
吐槽一句:爱奇艺的分享外链太差劲了... 所以本人只能坚持一贯原则,仍然使用优酷播放。

[ 查看全文... ]