Question

我正在为一位设计师朋友制作一个网站，他可以很好地设计内容，但不知道如何编写网站代码。他对专业人士来说太便宜了。：P

他想要一个如下所示的摘要：

Summary

这必须集中在页面容器中（固定为800px宽）。

我认为最好/最有效的方法是使用缩进单元格的表格，如下所示：

<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的负载？（页面容器已经修复）

Answer 1

是的，尽量不要使用表格。 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/

如何使这个摘要工作？

1 个答案: