Я вдруг подумал об этом методе, когда я писал трехколонный макет в CSS в течение нескольких дней. Я чувствовал себя немного без ума от этой идеи. Если с этим что -то не так, дайте мне несколько советов.
Когда мне нужно написать макет с тремя столбцами, я обычно решите использовать следующий метод макета Div:
Рисунок 1 макет Div
Использование таких методов гнездования может, несомненно, может значительно снизить вероятность ошибок кода, но в то же время такая макет немного сложна и немного неудобна для последующего обслуживания. Когда мы планируем навигацию, мы часто используем метод, который должен использовать список ϩ UL сотрудны для макета, а навигация может быть описана как многоцелевой макет. Поскольку это так, мы также можем использовать «UL» для расположения нескольких столбцов страницы.
Рисунок 2 макет Div
Это макет с фиксированной шириной, что означает, что ликвидность не сильна. Схема ликвидности еще не была проверена. Я попробую, когда у меня будет время. Ниже приведен код для этого макета:
<! Doctype html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml>
<голова>
<meta http-equiv = content-type content = text/html; charset = utf-8 ″ />
<Title> Используйте UL для многоцелевого макета </title>
<стиль типа = текст/css>
* {маржа: 0; Надо: 0;}
тело {
Ширина: 100%;
высота: 100%;
Фон: #ddedfb;
}
#maincontent {
Ширина: 600px;
Маржа: 10px Auto;
}
#заголовок,#нижний колонтитул {
Фон:#8AC7FA;
Высота: 80px;
ясно: оба;
}
#footer {
ясно: оба;
надоеволок: 10px;
}
#содержание {
Высота: 300px;
Маржа: 10px Auto;
}
#content ul {
Список стиля: нет;
высота: 100%;
}
#content ul li {
Ширина: 150px;
высота: 100%;
Фон:#8AC7FA;
Плавание: осталось;
}
#content ul li#li2 {
Ширина: 280px;
Покрас: 0 10px;
}
#content ul li#li2 ul li {
Ширина: 270px;
Высота: 140px;
Маржа: 5px;
Фон:#0581F0;
}
</style>
</head>
<тело>
<div id = maincontent>
<div id = заголовок> Это голова </div>
<div id = content>
<ul>
<li> Это левый </li>
<li id = li2 ″>
<ul>
<li> Это верхняя часть середины </li>
<li> Это нижняя часть в середине </li>
</ul>
</li>
<li> Это правильное </li>
</ul>
</div>
<div id = нижний колонтитул> это нижняя </div>
</div>
</body>
</html>
Этот код может отображаться обычно в IE7 и FF3. Другие браузеры не проверили это. Если у вас есть лучший метод, вы также можете предложить его.