推薦：小網(wǎng)站大精彩 找特色就不懼發(fā)展瓶頸
最近看到幾篇都有這樣的思路，那些很小的網(wǎng)站，然后做出了一些其他網(wǎng)站并沒有的優(yōu)勢，比如說，放棄google的工作，然后回家創(chuàng)業(yè)，比如說那個專門賣襪子的網(wǎng)站，然后發(fā)展出了自己的潛力，讓更多的訂單出現(xiàn)而來，其實很多時候，在國內(nèi)的互聯(lián)網(wǎng)中，也慢慢的成熟起來，這種

        <dd>杰飛學校特色：實行家教式教學模式，小班教學的完美結(jié)合可隨到隨學，可預約上課，可完全根據(jù)學員實際情況教學，保證學會為止……</dd>

    </dl>

    <dl class="xinwen">

             <h5>學校新聞<a href="#"><img src="image/more.jpg"/></a></h5>

        <dd><a href="#">淺談平面設計中配色方案</a><span>2013-4-14</span></dd>

        <dd><a href="#">淺談平面設計中配色方案</a><span>2013-4-14</span></dd>

         <dd><a href="#">淺談平面設計中配色方案</a><span>2013-4-14</span></dd>

           <dd><a href="#">淺談平面設計中配色方案</a><span>2013-4-14</span></dd>

    </dl>

</div>

接著是最下邊產(chǎn)品部分的HTML編碼：

<div class="product clear">

<h5>精品課程<a href="#"><img src="image/more.jpg"/></a></h5>

<ul>

         <li><a href="#"><img src="image/css.gif"/></a></li>

    <li><a href="#"><img src="image/css.gif"/></a></li>

    <li><a href="#"><img src="image/css.gif"/></a></li>

    <li><a href="#"><img src="image/css.gif"/></a></li>

</ul>

</div>

現(xiàn)在開始完成CSS代碼的編寫：

首選是學校簡介與新聞，其實仔細觀察這兩個也是兩列布局，所以設定寬，并設置左浮動：

#main .container dl{

         width:300px;

         float:left;

         }

接著是欄目名稱：因為這兩個效果是一樣的。所以直接使用群組選擇符把兩個都選擇編寫就可以了。

#main .container dl h5,#main .product h5{

         border-bottom:1px #000 solid;

         margin-bottom:15px;

         font-size:17px;

         }

 

#main .container dl h5 a{

    padding-left:170px;

         }

先完成左側(cè)學校簡介，讓簡介浮在圖片右方：

#main .container dl dt{

         float:left;

         width:110px;

         }

#main .container dl dt img{

         border:1px solid #ccc;

         }

#main .container dl.xuexiao dd{

font-size:12px;

margin-left:25px;

float:left;

width:165px;

text-indent:2em;

         }

單獨設置新聞的DD標記

#main .container dl.xinwen dd{

         height:22px;

         line-height:22px;

         background:url(image/li.jpg) no-repeat 0 50%;

         }       

#main .container dl.xinwen dd a{

         color:#000;

         text-decoration:none;

         padding-left:20px;

         }

#main .container dl.xinwen dd  span{

         padding-left:25px;

         }       

#main .container  dl.xuexiao{

         margin-right:40px;

         }

現(xiàn)在我們開始完成產(chǎn)品的CSS代碼：

#main .product{

         padding-top:20px;

         }

讓其距頂部空出一定距離。

#main .product h5 a{

         padding-left:510px;

         }

#main .product ul li{

         float:left;

         padding-left:10px;

         }

讓LI進行左浮動即可。

最后一步：完成底部：

HTML代碼：

<div id="footer" class="clear">

<p>聯(lián)系我們：北京市石景山區(qū)皓月寫字樓328室;聯(lián)系電話:010-88685956;15910646335(陳老師)</p>

</div>

CSS代碼：

#footer{

         background:#d1dce3;

         height:50px;

         line-height:50px;

         text-align:center;

         }

到此我們已經(jīng)完成了一個頁面的切圖。

幾個錯誤：頭部標記在IE6中有下面表現(xiàn)。所以通過下邊代碼解決一下：

<!--[if IE 6]>

  <![endif]-->

上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。

<!--[if IE 6]>

 <style type"text/css">

 #header ul li{

         width:80px;

         float:left;

         padding:0px 10px;

         }

Header頭部右側(cè)加寬度值

  #main .container dl dt img{

         border:1px solid #ccc;

         }

#main .container dl.xuexiao dt{

         float:left;

         width:110px;

         }

#main .container dl.xuexiao dd{

font-size:12px;

margin-left:20px;

float:right;

width:145px;

text-indent:2em;

         }

#footer{

margin-top:-10px;

}   

 </style>

  <![endif]-->

其中里面還涉及了一些別的知識。在后續(xù)課程會去講解。

來源: http://www.ps868.com

分享：談SEO公司如何做好科學化SEO之數(shù)據(jù)篇
做科學化的SEO是一種趨勢，百度很難琢磨，至少從大量的數(shù)據(jù)中得出的結(jié)論比較靠譜，憑感覺做SEO會讓你很不自信，不過話又說回來了，面對大量的SEO數(shù)據(jù)切勿淪陷其中