Archive for the ‘前台设计’ Category

一个简单的HTML类名命名思维

重构的时候有一种很简单的class命名思维,我们可能知道,可能不知道;但是知道后又很难应用上,是什么的思维呢?请看以下两段代码:

第一段:

...

对应的css写法:

.a{} .a .b{} .a .b .c{}

第二段:

...

对应的css写法:

.a{} .a_b{} .a_b_c{}

有什么区别呢?很明显第二种的HTML写法会冗余一点,但是CSS的写法就没那么复杂的选择结构了。在小型项目中,这两个基本上没什么区别的。但是在大型项目中就不一样了:

1、第一种写法适合局部排版

2、第二种写法适合全局公用模板

......[ More Detail ]

另类运用,css3临摹苹果mac系统界面

为什么我说临摹?因为你下来看到的基本上是代码写出来的——无js无图纯html+css。

先看效果截图:(暂仅在chrome或safari5中有完整效果)

在线测试地址:http://xiebiji.com/works/mac_style/

源码打包:http://css3mac.googlecode.com/files/mac_style.rar

本实例源码中应用的图片只有苹果官方的壁纸一张。其余图标,包括我个人首页的小logo,都无应用到图片(也没有用到datauri)而是直接用css3绘制出来的,创作本实例目的是本人为了加深对一些css3属性的理解。(有人会说还不如直接做成图片,我不反对)。

创作本实例过程中,可以看出,css3可以做到一些我们以往没想过事情,例如“文件夹”图标的绘制。当然css3还有很多别的更强悍的应用,本实例只是列举一些简...

......[ More Detail ]

无聊的时候写了一个非ie浏览器跳转页

鉴于本博客主题皮肤直接鄙视了ie浏览器,于是需要一个非ie浏览器跳转页来提示用ie的用户。

ie用户在本站看到的效果比高端浏览器用户看到的效果是相差甚远的,为表示歉意,我特地做了以下提示页:[ie用户的富士康深情一跳]

当然也不是说ie就不是高端浏览器啦,ie9还是灰常强大的。

以下是demo: 点击这里

ie用户可直接访问http://xiebiji.com就会有提示啦。

......[ More Detail ]

小笔记两个

在获取鼠标所在位置坐标的时候,针对ie需要用到document.body.scrollTop属性,但是在以下情况下,document.body.scrollTop始终为0,如果顶部申明:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"

document.body.scrollTop 要改成: document.documentElement.scrollTop

给textarea加以下css属性:

textarea{resize:none}

不要问我有什么用,有这个属性自然有其发生作用的时候。

......[ More Detail ]

多层div相互层叠激活方法(提升z-index)

最近有一个作业中的一个小功能要求以下:多层div相互层叠,要求激活其中一个。 先看我做的DEMO:http://xiebiji.com/works/activeDiv/ 来看一下关键的js代码(基于mootools):

//层叠激活 /*获取当前所有层区域*/ //定义一个存放多个区域数据的集合 var allArea=new Array(); //遍历所有存在的div $$('#comm_area .comm_div').each(function(e){ pushOneArea(e);//依次存数据 }); //往allArea集合中存入一个区域数据,e为$()方法得来的元素 function pushOneArea(e){ var oneArea=new Object();//定义1个对象 //赋予对象一些必要的数据 oneArea.sx=e.getStyle('left').toInt(); oneArea.ex=e.getStyle('left').toInt()+e.getStyle('width').toInt(); oneArea.sy=e.getStyle('top').toInt&#...
......[ More Detail ]

过年我也会看书的

过年在家其实有时候晚上是很无聊的,因为家里常年没人住,过年的时候回家,家里没什么东西,当然电脑和网络也没有的,不过我是一个熬得住无聊的人,我很容易就可以打发时间,放假的时候我顺手问同学借了这本书《ppk 谈 JavaScript》。

这本书的简介我就直接引用豆瓣的啦,毕竟我还没有看完哈。

不看不知道一看吓一跳,这本是一本好书,我看了第一章的前几节就给迷住了。就我看的那几节,它把javascript的来龙去脉都说清楚了,‘浏览器大战’之类的词藻我还真第一次听说,说得挺让人感兴趣的。越看越兴奋,让我感觉到javascript甚至其他前端知识的前卫性,前端将牵起一段革命,这一点也不夸张,因为按这书说的,不同巨头公司之间一直以来都在技术革新...

......[ More Detail ]