基本的xhtml / css模型？

Question

我需要创建一个非常简单的网站（没有动态内容，2列，页眉和页脚），我对xhtml / css / php有基本的了解。

所以我可能从头开始提供一些东西，但它可能不适用于“所有”浏览器。

我已经做了一些谷歌搜索，但我很难评估到处广告的“免费模板”的质量。

那么这里的网络开发者是否有很好的参考资料甚至是这样的模型/模板？

编辑：我确实看过Joomla，但它确实有点过分，所以如果你的答案是CMS，它应该是与Joomla截然不同的。

Answer 1

您应该投资CMS，也许像wordpress。 随着时间的推移，您会发​​现它比直接静态站点更容易维护。

还有一个即插即用的大型主题库的好处。

http://wordpress.org/extend/themes/

Answer 2

简答：

看看Faux Columns技巧 ，然后你也可以将它推广到三列 。

答案很长

如果你真的想要自己学会这样做，请确保你知道内联元素和块级元素之间的区别。 一旦你知道了差异，并且能够识别出一些内联HTML元素和块级HTML元素，请查看display CSS属性，并确保你永远不会做这样的事情：

<!-- monumental fail -->
<a href="#">
    <div style="height:200px;width:200px;">
        They wanted the anchor to have height/width
        And didn't realize that a `display:block` CSS property
        would allow the anchor element a height/width
    </div>
</a>

我还建议对CSS属性float和clear以及float和margin和overflow-y之间的关系建立一个可靠的向前和向前理解。 以此示例开始更改这三个属性的值，看看会发生什么：

<div style="background:yellow;overflow-y:hidden;">
    <div style="width:100px;float:left;">
        Left Column
    </div>
    <div style="height:500px;margin-left:101px;background:blue;">
        Main Column
    </div>
</div>

...一旦你理解了，看看Faux Columns的技巧 ，然后你也可以将它推广到三列 。

如果你再进一步，开始玩CSS定位 ......

<div style="border:2px solid black;margin:50px;border:2 px solid yellow;height:1500px;width:500px;">
    <div style="height:50px;border:2px solid red;position:absolute;top:0px;">
        Absolute; Top (take note that its parent element is statically positioned...)
    </div>
    <div style="border:2px solid blue;position:relative;left:100px;height:200px;padding-top:50px;">
        Relative; see how it's just offset from where it is normally?
        <div style="height:50px;border:2px solid red;position:absolute;top:0px;">
            Absolute; Top (take note that its parent element is NOT statically positioned hence why it's not in the same place as the last absolutely positioned div)
        </div>
    </div>
    <div style="height:50px;border:2px solid green;position:fixed;bottom:0px;">
        Fixed; bottom (even there when you scroll)
    </div>
</div>

...然后我认为你可以从“CSS的基本知识”升级到“精通”。

Answer 3

作为静态非CMS网站的起点，我建议您查看几个可用的CSS框架之一。 你可以在这里找到一个清单。 它们通常用于解决跨浏览器兼容性和多列布局问题。 它们中的大多数都带有有用的模板，您可以轻松自定义，而无需从头开始构建页面。 我最喜欢的是YAML （又一个多列布局）CSS。