Основные модели xhtml / css?

Question

Мне нужно создать очень простой веб-сайт (без динамического контента, 2 столбца, верхнего и нижнего колонтитула), и у меня есть базовые знания по xhtml / css / php.

Таким образом, я мог бы прийти с чем-то с нуля, но это, вероятно, не будет работать во "всех" браузерах.

Я немного погуглил, но мне сложно оценить качество "бесплатных шаблонов", рекламируемых повсеместно.

Итак, есть ли здесь веб-разработчик, у которого есть хорошие ссылки или даже такие модели / шаблоны?

edit: Я посмотрел на Joomla, но это было действительно излишне, поэтому, если ваш ответ - CMS, он должен сильно отличаться от Joomla.

Answer 1

Краткий ответ:

Взгляните на трюк 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 2

В качестве отправной точки для статического сайта без CMS я бы порекомендовал взглянуть на одну из нескольких доступных фреймворков CSS. Вы можете найти список здесь . Они обычно касаются кросс-браузерной совместимости и многоколоночных макетов. Большинство из них поставляются с полезными шаблонами, которые вы можете легко настроить, и вам не нужно создавать страницу с нуля. Мой любимый это YAML (еще один многоколонный макет) CSS.

Answer 3

Вы, вероятно, должны инвестировать в CMS, возможно, что-то вроде WordPress. Со временем вы обнаружите, что поддерживать его проще, чем прямой статический сайт.

Существует также преимущество большой библиотеки тем, которая подключается и работает.

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