一天大家在团队中讨论“未知图片垂直居中”的问题,突发奇想用 vertical-align:middle这个属性来实现,于是抽了时间做了下面这个不成熟的例子:
CSS:
div{
width:140px;
height:140px;
text-indent:-8px;
text-align:center;
line-height:138px;
background:red;
font-size:12px;
*font-size:120px;
*text-indent:-60px;...
图片垂直居中 - 段正淳的css笔记(5)
css代码的简写 - 段正淳的css笔记(4)
1、css代码的简写
css缩写的语法,对新手有一定帮助,老鸟就不用看了.
1.1: 0px不需要单位,直接:margin:0
1.2:盒模型的缩写,语法是margin:上 右 下 左;.甚至可以简写成margin:上 (右左) 下,当然右左的值应该是一样的
1.3:css属性的最后一项”;”号省略。(不建议 ^_^)
1.4:字体宽度normal用400代替,bold用700代替。
1.5:16...
css属性顺序书写规范 - 段正淳的css笔记(3)
1、标题右侧“更多”的实现
曾经做上图所示的效果,会使用到position来相对定位到h2标签的右侧.这样的做法,代码确实会多好几行. 其实可以用个笨一点的办法来实现的:
譬如html代码如下:
< h2>< a h ref="#" >标题< /a> < span>更多…< /span...
圆角的做法 - 段正淳的css笔记(2)
1、圆角的做法.
为了这个圆角,前段开发们付出的努力是在是太多了.又要考虑http连接数,又要考虑css与html的代码量与语义.
贴出的是最近考虑替换现有圆角做法的方案,可能还有许多未考虑的状况.但是大体的编写方式便是如下.
好处是便于维护,只有一个图片.还可以某种程度上的任意缩放.缺点是多了无意义的html代码.
————&a...
类目之间的横竖线 - 段正淳的css笔记(1)
试想过总结出这几年来写css与xhtml的经验 ,汇总成一片”旷世奇文”分享给大家。无奈寡人年世已高,真是有点力不从心了。于是转念一想,可以用笔记的形式展现,这样就不用担心写不出来了。
现在就来说个淘宝首页上的一个小技巧。
1、类目之间的 横 竖线
从很久很久以前开始,类目间的竖线无非都只有三种。
1、背景图
在a标签设置一...