企業(yè)與個(gè)人網(wǎng)絡(luò )營(yíng)銷(xiāo)一站式服務(wù)商
網(wǎng)站建設 / SEO優(yōu)化排名 / 小程序開(kāi)發(fā) / OA
0731-88571521
136-3748-2004
136-3748-2004
在進(jìn)行網(wǎng)站前端開(kāi)發(fā)設計的時(shí)候，如何做到用戶(hù)與SEO兼得，是每個(gè)站長(cháng)都要考慮的問(wèn)題，很多時(shí)候要做到確實(shí)不易，下面整理幾個(gè)小技巧，大家可以看下。
一、文字替換圖片
這種手法在LOGO的處理上最為常見(jiàn)，很多時(shí)候人們會(huì )把首頁(yè)的LOGO加上<H1>標簽，可是<H1>標簽里如果沒(méi)有文字的話(huà)，效果肯定不好，因此很多人會(huì )在logo上加上alt描述，但是肯定還是沒(méi)有直接文字或者錨文本來(lái)的效果好，這個(gè)時(shí)候我們就需要用到這個(gè)技巧了，我們來(lái)看一下一般人的做法：
|
<h1 class="main-logo"> <a href="#"> <img src="images/header-image.jpg" alt="淘客站長(cháng)網(wǎng)" /> </a> </h1> |
下面我們來(lái)看下如何運用CSS實(shí)現文字替換圖片：
|
<h1 id="tk"> <span>淘客站長(cháng)網(wǎng)</span> </h1> |
下面是CSS代碼：
|
h1#tk { width: 250px; height: 25px; background-image: url(logo.gif); } |
通過(guò)這種方法，我們就可以很好的兼顧用戶(hù)體驗和SEO。
二、文章列表字數截取問(wèn)題
這是所有網(wǎng)站都會(huì )遇到的問(wèn)題，如上圖所示，文章列表如果字數太多，就會(huì )分成兩排或者把列表擠變形，這個(gè)時(shí)候就需要截取標題的字數，這樣一來(lái)對SEO是很不利的，這個(gè)時(shí)候我們可以用CSS來(lái)控制，不截取字數，但是顯示的依然是截取字數的，這樣一來(lái)，在美觀(guān)及SEO上都能兼顧到。
我們來(lái)看下網(wǎng)頁(yè)代碼：
| <div class="list"> <ul> <li><a href="#">多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設計多個(gè)啟發(fā)多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設計多個(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)站設計多個(gè)啟發(fā)多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設計多個(gè)啟發(fā)站</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="#">漢王創(chuàng )藝高手+無(wú)線(xiàn)0604數位板…</a><span>2010-03-14</span></li> <li><a href="#">跨過(guò)后臺開(kāi)發(fā)的那道檻</a><span>2010-03-14</span></li> <li><a href="#">09年國外100大最佳設計博客網(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)看下顯示效果：
可以看出，標題中多余的字數已經(jīng)沒(méi)有顯示出來(lái)了，而html代碼中的標題卻很完整。
三、用CSS來(lái)控制網(wǎng)頁(yè)的布局
大家都知道在一個(gè)網(wǎng)頁(yè)中，越重要的東西越靠前越好，而在實(shí)際的網(wǎng)頁(yè)設計中，有的時(shí)候因為考慮到用戶(hù)體驗而不得不把重要的內容放到后面，其實(shí)，我們還是把重要性強的內容靠前，次要的東西放置靠后一些，然后用CSS來(lái)定位實(shí)際顯示的位置。
上下布局：
|
<html> <head> <style> #navigation {position: absolute;top: 10px;left: 50%;width: 800px;margin-left: −400px;text-align: left;} #content {position: absolute;top: 150px;left: 50%;width: 800px;margin-left: −400px;text-align: left;} body { text-align: center; min-width: 600px;} </style> </head> <body> <div id="content">content<!-- SEO optimized content text goes here.--></div> <div id="navigation">navigation<!-- navigational elements, ads go here--></div> </body> </html> |
左右布局：
|
<html> <head> <style> #navigation {position: absolute;top: 0px;left: 400;width: 200px;margin-left: −400px;text-align: left;} #content {position: absolute;top: 0px;left: 600;width: 600px;margin-left: −400px;text-align: left;} body { text-align: center; min-width: 800px;} </style> </head> <body> <div id="content">SEO optimized content text goes here.</div> <div id="navigation">navigational elements, ads go here</div> </body> </html> |
混合布局：
|
<html> <head> <style> #top {position: absolute;top: 10px;left: 50%;width: 800px;margin-left: −400px;text-align: left;} #left {position: absolute;top: 150px;left: 50%;width: 200px;margin-left: −400px;text-align: left;} #main {position: absolute;top: 150px;left: 50%;width: 600px;margin-left: −200px;text-align: left;} #right {position: absolute;top: 150px;left: 50%;width: 200px;margin-left: 0px;text-align: left;} body { text-align: center; min-width: 800px;} </style> </head> <body> <div id="main">optimized main body</div> <div id="left">left panel</div> <div id="top">top panel</div> <div id="right">right panel</div> </body> </html> |
湘公網(wǎng)安備 43010302000270號 統一社會(huì )信用代碼：92430103MA4LAMB24R 網(wǎng)站ICP備案號：湘ICP備13006070號-2 
