最近有时间都在优化我们的情侣博客《双陈记》,神马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的小技巧,继续慢慢折腾。
Logo图片加alt属性就行吧?
我的意思是图片为背景的时候,图片为背景比直接是图片优化要好些哟!
技术大拿啊~~多整点这些,以后常来学习哈~
谢谢哈!我也是菜鸟一个,以后共同学习哈!