常用的几个CSS小技巧

　　被朋友问到的几个CSS小技巧

　　发表人 leo | 文章分类 XHTML+CSS | 发表日期 13-10-2009

　　4

　　被朋友们问到了关于 CSS 一些琐碎的小问题，我的感觉是：虽然这些问题很简单，但是我们在工作当中，经常会被这些琐碎的小知识点给卡住了，并非它们有多么难，可总会有不太好解决的时候，现在记录一下，以备日后查看：

　　1.设置：>>更多 而不是 >>更多

　　——相信大家注意到 更多 前面的符号了，我曾见过一段因为设置不好这个符号而直接用 图片 来代替的代码，其实它们仅仅只是字体不一样。

　　>>更多 这个 css 的字体是：font-family: ‘宋体’;

　　>>更多 这个 css 的字体是：font-family: Arial;

　　2. 设置自适应宽的虚线，效果图如下：

　　在这个效果里，左侧文字的宽度不确定，虚线要自适应文字个数的变化。

　　制作这个效果的思路是：使用 ul、li 结构，把图片切成 width: 4px; height: 1px; 的小点，将图片设置成 li 标签的背景，进行 x 轴方向平铺，再把包含文字标签(比如 span)的背景设为白色(与背景色同一颜色)，加上内填充(padding: 0 10px;)即可。

　　>>查看效果

　　>>下载代码

　　3. 设置DIV内的下拉条，效果图如下：

　　布局方面不多说了，都在下面的源文件里。现在就来看看中间的下拉条如何设置：

　　要让某个 块级元素 内出现下拉条效果，先要给它固定的高、宽，也就是要限定它的范围，接着加上 CSS 样式：overflow: auto;

　　这句意思是：当元素内容有超出的部分，就自动显示，下拉条也就出现了。

　　现在，要让下拉条出现在右侧，而不要让它在底端也出现，还需要做一些设置：

　　让子级元素的 宽 小于父级的宽，比如父级元素的宽是 100px，减去下拉条的宽(IE8下拉条的宽是 14px)，那子级元素的宽度为：82px; ——等等，为什么不是 86px ??

　　原因：IE6、IE7 与 IE8、火狐 对于 下拉条的宽度 的显示尺寸是不一样的，IE6、IE7下拉条的宽度要略大于 IE8、火狐的宽，所以在设置子级宽度的时候，最好少设置几个像素，以免出现下面这种情况：

　　另外，还有一种情况，当效果图是这样的时候：

　　子级的高并没有超出父级的高，也希望下拉条显示出来，样式设置如下：overflow-y: scroll;

　　意思是：让元素的 Y轴 出现滚动条(卷轴)。

　　最终效果如下所示，鼠标可以点击查看，也可以 >>下载源文件：

评论总数：0 条 [ 查看全部 ] 网友评论