基本的 xhtml/css 模型？答案

【问题标题】：Basic xhtml/css models?基本的 xhtml/css 模型？
【发布时间】：2010-05-02 12:26:35
【问题描述】：

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

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

我进行了一些谷歌搜索，但我很难评估到处宣传的“免费模板”的质量。

那么这里有没有任何网络开发人员有很好的参考，甚至有这样的模型/模板 ?

编辑：我确实看过 Joomla，但它确实有点矫枉过正，所以如果你的答案是 CMS，它应该与 Joomla 完全不同。

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

YAML 似乎正是我想要的。

【解决方案2】：

您可能应该投资一个 CMS，比如 wordpress。随着时间的推移，您会发现它比单纯的静态网站更容易维护。

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

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

【讨论】：

【解决方案3】：

简答：

看看Faux Columns trick，然后你可以概括to three columns too。

长答案

如果您真的想自己学习做这件事，请确保您知道inline elements 和block level elements 之间的区别。一旦你知道了区别，并且可以识别一些内联 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 trick，然后你可以概括to three columns too。

如果你再进一步，开始使用CSS positioning...

<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基础知识”一步步提升到“精通”了。

【讨论】：