Tagged: css,HTML,命名 |
Cat: HTML, css |
重构的时候有一种很简单的class命名思维,我们可能知道,可能不知道;但是知道后又很难应用上,是什么的思维呢?请看以下两段代码:
第一段:
...
对应的css写法:
.a{}
.a .b{}
.a .b .c{}
第二段:
...
对应的css写法:
.a{}
.a_b{}
.a_b_c{}
有什么区别呢?很明显第二种的HTML写法会冗余一点,但是CSS的写法就没那么复杂的选择结构了。在小型项目中,这两个基本上没什么区别的。但是在大型项目中就不一样了:
1、第一种写法适合局部排版
2、第二种写法适合全局公用模板
Tagged: css3,mac,临摹 |
Cat: css |
为什么我说临摹?因为你下来看到的基本上是代码写出来的——无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还有很多别的更强悍的应用,本实例只是列举一些简...
Tagged: IE,跳转,高端浏览器 |
Cat: HTML, css |
鉴于本博客主题皮肤直接鄙视了ie浏览器,于是需要一个非ie浏览器跳转页来提示用ie的用户。
ie用户在本站看到的效果比高端浏览器用户看到的效果是相差甚远的,为表示歉意,我特地做了以下提示页:[ie用户的富士康深情一跳]
当然也不是说ie就不是高端浏览器啦,ie9还是灰常强大的。
以下是demo: 点击这里
ie用户可直接访问http://xiebiji.com就会有提示啦。
Tagged: -ms-interpolation-mode,bicubic,ie7,图片失真,缩放 |
Cat: css |
本文请用ie7查看已达到最好的学习效果。
YUI的网页优化建议里面有提到要保持图片比例为原比例,但是往往实际操作中有可能会要变换图片比例。而变换比例图片就会失真,如:
原比例:
放大后:
图片锯齿恐怖>_
Tagged: 位置,偏移,兼容,基点,锚点 |
Cat: css |
不知道有没有人研究过这个,当点击页面的锚点连接的时候一般就跳转到特定id的元素,而实际表现的是滚动条滚动使该特定id元素对齐滚动条所处元素的顶端。
那假如我现在要求这个位置不是在顶端,而是离顶端有一定距离。
先看看我实现的方法例子:
在线地址:锚点偏移实例(强烈建议用firefox浏览器查看)
这实际上是一种掩眼法,对齐的参考点还是在元素的顶端,只是我把元素的设置了特定的border-top(padding-top也可以,margin-top不可以),锚点就可以好像真的一样偏移到目标标题文字,但是这样会使下来元素之间产生一段距离,那么我们只要设置其margin-top为负值,而且刚好为padding-top的值即可。但是还会产生一个问题,margin-top为负数值时,会强行把元素的p...
Tagged: css,HTML,JS,mootools,xhtml,在线简历 |
Cat: HTML, css, javascript, mootools, 前台设计 |
很快就要找工作了,最近比较闲,于是把写了个在线网页版简历。水平有限,肯定不少错误。希望高人可以指出错误。
此简历基于XHTML1.0/Css2.0/Mootools
我不能像大大们那样用纯js写效果,只能用mootools来写了。
极端希望大家给点意见,我发现自己好像很多自己总结的知识不一定对的。有兴趣的朋友可以留言索取整个实例源码。
在线测试地址:http://xiebiji.com/works/resume/