收集一些常用的css技巧,不断更新中

经常在写div+css的过程中,遇到不少细节问题,这里总结一下以便以后使用,同时和大家分享。

1、段落首行缩进两个汉字:text-indent:2em;

2、信息列表内容长度超过时显示省略号:

这个记得要给一个固定宽度,不然就没效果了,列表内容长度超过时自动转化为省略号,当然源码中还是文字内容全部,外观好看,同时蜘蛛抓取的时候还是完整的。
white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;

More...

标签:

div之选择器id选择器与class选择器继承的问题

最近在做一个网站模板,之前一直都是全站css div用的均为class选择器,很少用到id的,最近在做一企业站,当做到列表页翻页条的时候遇到了麻烦,按照常理来做是没问题的,可是结果预览的时候border上下边框地不显示,只显示左右的,任凭我怎样调整都不行。因为之前一直用class选择器,这次用的是id+class,遇到了不少麻烦,具体我想是这样的,因为有时候要经常出来class嵌套到id里面,这样

More...

标签:

div,li,span元素中的span右对齐,换行显示的解决方法

我们常常在做网站的时候会div,li,span中加入span右对齐,例如:文章列表中在我们会加入时间让它右对齐,以增加网页的可读性,如下代码:

html如下:

<ul class="news">
    <li>span右对齐,换行显示的解决方法<span>2010-8-26</span></li>
</ul>

css:.news ul li span{float:right;}

不过问题又来了,往往我们在一个块中加入span时就会发现在网页中预览时span换行右对齐了,那么这是为什么呢?

More...

标签:

div,span,li自动换行的方法

有时候在做导致或者友情链接的时候,我们会用到span或者li,当到当行尾时,如果距离不够时,则会出现如下图所示的布局错乱情况。代码如下:

<ul>
 <li><a href="#">友情链接</a></li>
 <li><a href="#">友情链接</a></li>
</ul>

#footer ul{border-bottom:10px solid #E0E0DE; padding:2px 5px 20px 2px; margin-bottom:5px; background-color:#FFFFFF;}
#footer li{ float:left; margin-left:5px;white-space:nowrap;}

More...

标签:

分页:«1»