在進(jìn)行網(wǎng)站前端開發(fā)設(shè)計(jì)的時(shí)候，如何做到用戶與SEO兼得，是每個(gè)站長(zhǎng)都要考慮的問(wèn)題，很多時(shí)候要做到確實(shí)不易，下面整理幾個(gè)小技巧，大家可以看下。

一、文字替換圖片

這種手法在LOGO的處理上最為常見，很多時(shí)候人們會(huì)把首頁(yè)的LOGO加上<H1>標(biāo)簽，可是<H1>標(biāo)簽里如果沒有文字的話，效果肯定不好，因此很多人會(huì)在logo上加上alt描述，但是肯定還是沒有直接文字或者錨文本來(lái)的效果好，這個(gè)時(shí)候我們就需要用到這個(gè)技巧了，我們來(lái)看一下一般人的做法：

<h1 class="main-logo">

   <a href="#">

       <img src="images/header-image.jpg" alt="淘客站長(zhǎng)網(wǎng)" />

   </a>

</h1>

下面我們來(lái)看下如何運(yùn)用CSS實(shí)現(xiàn)文字替換圖片：

<h1 id="tk">

        <span>淘客站長(zhǎng)網(wǎng)</span>

</h1>

下面是CSS代碼：

h1#tk {

        width: 250px;

        height: 25px;

        background-image: url(logo.gif);

        }

通過(guò)這種方法，我們就可以很好的兼顧用戶體驗(yàn)和SEO。

二、文章列表字?jǐn)?shù)截取問(wèn)題

這是所有網(wǎng)站都會(huì)遇到的問(wèn)題，如上圖所示，文章列表如果字?jǐn)?shù)太多，就會(huì)分成兩排或者把列表擠變形，這個(gè)時(shí)候就需要截取標(biāo)題的字?jǐn)?shù)，這樣一來(lái)對(duì)SEO是很不利的，這個(gè)時(shí)候我們可以用CSS來(lái)控制，不截取字?jǐn)?shù)，但是顯示的依然是截取字?jǐn)?shù)的，這樣一來(lái)，在美觀及SEO上都能兼顧到。

 我們來(lái)看下網(wǎng)頁(yè)代碼：

<div class="list">
<ul>
<li><a href="#">多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設(shè)計(jì)多個(gè)啟發(fā)多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設(shè)計(jì)多個(gè)啟發(fā)</a><span>2010-03-14</span></li>
<li><a href="#">315個(gè)JS廣告代碼和269個(gè)特效</a><span>2010-03-14</span></li>
<li><a href="#">SNS網(wǎng)多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設(shè)計(jì)多個(gè)啟發(fā)多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設(shè)計(jì)多個(gè)啟發(fā)站</a><span>2010-03-14</span></li>
<li><a href="#">阿里巴巴推商人</a><span>2010-03-14</span></li>
<li><a href="#">谷歌評(píng)估必應(yīng)搜索算法</a><span>2010-03-14</span></li>
<li><a href="#">谷歌評(píng)估必應(yīng)搜索算法谷歌評(píng)估必應(yīng)搜索算法</a><span>2010-03-14</span></li>
<li><a href="#">漢王創(chuàng)藝高手+無(wú)線0604數(shù)位板…</a><span>2010-03-14</span></li>
<li><a href="#">跨過(guò)后臺(tái)開發(fā)的那道檻</a><span>2010-03-14</span></li>
<li><a href="#">09年國(guó)外100大最佳設(shè)計(jì)博客網(wǎng)站</a><span>2010-03-14</span></li>
<li><a href="#">阿里巴巴推商人</a><span>2010-03-14</span></li>
</ul>
</div>

再來(lái)看下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(http://blog.owncsser.com/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;
}

再來(lái)看下顯示效果：

　可以看出，標(biāo)題中多余的字?jǐn)?shù)已經(jīng)沒有顯示出來(lái)了，而html代碼中的標(biāo)題卻很完整。

標(biāo)簽： Blog com CSS CSS代碼 div

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。