网站前端开辟设想中的网站优化本领
正在停止网站前端开辟设想的时分,怎样做到用户取SEO兼得,是每一个站少皆要思索的成绩,许多时分要做到的确不容易,上面收拾整顿几个小本领,各人能够看下。
1、笔墨交换图片
那种脚法正在LOGO的处置上最为常睹,许多时分人们会把尾页的LOGO减上<H1>标签,但是<H1>标签里假如出有笔墨的话,结果必定欠好,因而许多人会正在logo上减上alt形貌,可是必定借是出有间接笔墨大概锚文原来的结果好,那个时分我们便需求用到那个本领了,我们去看一下普通人的做法:
<h1 class="main-logo"> <a href="#"> <img src="images/header-image.jpg" alt="淘客站少网" /> </a> </h1> |
上面我们去看下怎样使用CSS真现笔墨交换图片:
<h1 id="tk"> <span>淘客站少网</span> </h1> |
上面是CSS代码:
h1#tk { width: 250px; height: 25px; background-image: url(logo.gif); } |
经由过程那种办法,我们便能够很好的统筹用户体验战SEO。
2、文章列表字数截与成绩
那是一切网站城市逢到的成绩,如上图所示,文章列表假如字数太多,便会分红两排大概把列表挤变形,那个时分便需求截与题目的字数,那样一去对SEO是很倒霉的,那个时分我们能够用CSS去掌握,没有截与字数,可是显现的仍然是截与字数的,那样一去,正在美妙及SEO上皆能统筹到。
我们去看下网页代码:
<div class="list"> <ul> <li><a href="#">多个启示灵感页里网站设想多个启示多个启示灵感页里网站设想多个启示</a><span>2010-03-14</span></li> <li><a href="#">315个JS告白代码战269个殊效</a><span>2010-03-14</span></li> <li><a href="#">SNS网多个启示灵感页里网站设想多个启示多个启示灵感页里网站设想多个启示站</a><span>2010-03-14</span></li> <li><a href="#">阿里巴巴推贩子</a><span>2010-03-14</span></li> <li><a href="#">谷歌评价必应搜刮算法</a><span>2010-03-14</span></li> <li><a href="#">谷歌评价必应搜刮算法谷歌评价必应搜刮算法</a><span>2010-03-14</span></li> <li><a href="#">汉王创艺妙手+无线0604数位板…</a><span>2010-03-14</span></li> <li><a href="#">跨事后台开辟的那讲槛</a><span>2010-03-14</span></li> <li><a href="#">09年外洋100年夜最好设想专客网站</a><span>2010-03-14</span></li> <li><a href="#">阿里巴巴推贩子</a><span>2010-03-14</span></li> </ul> </div> |
再去看下CSS代码:
body{ padding:2em; font-size:12px; font-family:"SimSun"; } .list{ width:300px; } .list ul{ margin:0; padding:0 0 0 30px; list-style:none; background:url(blog.owncsser/wp-content/uploads/2009/08/bg_li.gif) 8px 5px no-repeat; float:left; } .list ul li{ clear: both; float:left; width:100%; height:20px; } .list ul li a{ float:left; margin-right:60px; padding-right:10px; height:20px; line-height:20px; overflow:hidden; } .list ul li span{ float:left; margin-left:-60px; width:60px; height:20px; font:11px/20px "Times New Roman", Times, serif; color:#ccc; } |
再去看下显现结果:
能够看出,题目中过剩的字数曾经出有显现出去了,而html代码中的题目却很完好。
注:相干网站建立本领浏览请移步到建站教程频讲。
相关信息
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|