《双陈记》情侣博客

位置:主页 > IT那点事 > 3个css的小技巧

3个css的小技巧

最近有时间都在优化我们的情侣博客《双陈记》,神马js,html,css都在折腾。今天总结了3个小的css技巧有助于网站的排版美观和seo优化。
1.网站Logo文字链接的优化,这里要说的是很多网站都有漂亮的Logo,但也有很多网站直接就是用的Logo图片来做的链接,这样对搜索引擎不是太友好,这是我们要做的就是需要做一个对seo有利的文字链接,然后用css买这个文字链接隐藏掉,这样既美观又对seo有利了,何乐而不为了。
其实就是一个很简单很短的css代码就能实现这个功能。 text-indent:-999px;在需要隐藏的链接的地方,加入text-indent:-999px;确保这个a标签添加了block属性,这样就ok了。
2.关于文章首行缩进。
在需要进行首行缩进的id内,添加如下css代码: text-indent:2em,就可以实现中文常用中的首行缩进。
3.关于用css对文章标题进行截断。
《双陈记》情侣博客的边栏有几个最新文章,最热文章之类的分类,下属的文章标题如果太长就会换行,看着很不美观。这时就需要用css把长的标题进行截断。
代码如下:

.sidebar ul li ul li {
width:168px;//设定一个宽度
overflow:hidden;//超出固定宽度后隐藏
text-overflow:ellipsis;//显示省略号,FF下只显示截断
white-space:nowrap;// 强制不换行
}

这样就实现了文章标题过长的截断。

以上就是今天优化和美化《双陈记》情侣博客所用到的3个css的小技巧,继续慢慢折腾。



无觅相关文章插件

已经有4位童鞋留言了,还不来盖楼!

  1. Logo图片加alt属性就行吧?

  2. :cool:
    技术大拿啊~~多整点这些,以后常来学习哈~

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片