2012-01-14 72 views
0

我正在爲一位設計師朋友製作一個網站,他可以很好地設計一些東西,但不知道如何編寫一個網站。而且他對於專業人士來說太便宜了。 :P如何去做這個總結工作?

他想要的總結,看起來像這樣:

Summary

和具有在頁容器爲中心(其被固定在800像素寬)。

我認爲最好的/最有效的方式做到這將是與縮進單元格的表,如下所示:

<html> 
<head> 
    <style type="text/css"> 
     body {background:#141318} 
     td  {min-width:266px;padding-top:10px;font-style:italic} 
     th  {font-size:14pt;font-family:sans-serif;text-align:left;color:#FFF} 
     td div {text-indent:20px;color:#999FAD} 
     td div a{color:#FFF} 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <th>DESIGN</th> 
      <th>MEDIA</th> 
      <th>ART</th> 
     </tr> 
     <tr> 
      <td><div>- 123</div><div>- <a href="#">456</a></div></td> 
      <td><div>- 789</div><div>- <a href="#">012</a></div></td> 
      <td><div>- <a href="#">345</a></div><div>- 678</div></td> 
     </tr> 
    </table> 
</body> 
</html> 

但我也不太清楚,看到很多人看到一個表這被用於任何不是表格數據的行爲,因爲這是不好的做法。

那麼,最好的方法是什麼?也許三個DIV彼此相鄰,固定寬度和內部的div負載? (頁面容器已經固定)

回答

3

是的,儘量不要使用表格。 div和列表的組合可以很好地工作。

<html> 
<head> 
    <style type="text/css"> 
     #example {width:800px;} 
     #a {float: left; width: 250px;} 
     #b {float: left; width: 250px;} 
     #c {float: left; width: 250px;} 
    </style> 
</head> 
<body> 
    <div id="example"> 
    <div id="a"> 
     <h1>parent</h1> 
     <ul> 
      <li>child</li> 
      <li>child</li> 
     </ul> 
    </div> 
    <div id="b"> 
     <h1>parent</h1> 
     <ul> 
      <li>child</li> 
      <li>child</li> 
     </ul> 
    </div> 
    <div id="c"> 
     <h1>parent</h1> 
     <ul> 
      <li>child</li> 
      <li>child</li> 
     </ul> 
    </div> 
</div> 
</body> 
</html> 

在CSS中設計列表很容易。

這裏是一些有用的信息 - http://www.alistapart.com/articles/taminglists/

+0

偉大工程(與添加明確的:兩者),謝謝! – 2012-01-14 04:21:53