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

一、文字替換圖片

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

<h1 class="main-logo">

   <a href="#">

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

   </a>

</h1>

下面我們來看下如何運用CSS實現(xiàn)文字替換圖片：

<h1 id="tk">

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

</h1>

下面是CSS代碼：

h1#tk {

        width: 250px;

        height: 25px;

        background-image: url(logo.gif);

        }

通過這種方法，我們就可以很好的兼顧用戶體驗和SEO。

二、文章列表字數(shù)截取問題

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

 我們來看下網(wǎng)頁代碼：

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

再來看下顯示效果：

　可以看出，標題中多余的字數(shù)已經(jīng)沒有顯示出來了，而html代碼中的標題卻很完整。

標簽： Blog com CSS CSS代碼 div

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