Я внезапно подумал об этом методе, когда несколько дней назад писал трехколоночный макет с помощью CSS. Эта идея кажется мне немного безумной. Если с ней что-то не так, пожалуйста, дайте мне несколько советов.
Когда мне нужно написать макет из трех столбцов, я обычно использую следующий метод макета DIV:
Использование такого метода вложенности, несомненно, может значительно снизить вероятность ошибок кода, но в то же время такая компоновка также немного сложна и немного неудобна для последующего обслуживания. Метод, который мы часто используем при макетировании навигации, — это использование списка <ul>. Навигацию можно описать как многоколоночный макет. В этом случае мы также можем использовать <ul> для макетирования страницы. расположение столбцов.
Это макет с фиксированной шириной, что означает, что он не очень гибкий. Гибкий макет еще не тестировался. Когда у меня будет время, я попробую еще раз. Вставьте код этого макета ниже:
| <!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> <style type="text/css"> * {поле: 0; дополнение: 0;} тело { ширина: 100%; высота: 100%; фон:#ddedfb; } #mainContent { ширина: 600 пикселей; поле: 10 пикселей авто; } #header,#footer { фон: #8AC7FA; высота: 80 пикселей; ясно: оба; } #footer { ясно: оба; отступ-верх: 10 пикселей; } #содержание { высота: 300 пикселей; поле: 10 пикселей авто; } #contentul { стиль списка: нет; высота: 100%; } #contentulli{ ширина: 150 пикселей; высота: 100%; фон: #8AC7FA; плавать: влево; } #contentulli#li2 { ширина: 280 пикселей; поле: 0 10 пикселей; } #content ul li#li2 ul li { ширина: 270 пикселей; высота: 140 пикселей; поле: 5 пикселей; фон:#0581F0; } </стиль> </голова> <тело> |
Этот код нормально отображается в IE7 и FF3. Он не тестировался в других браузерах. Если у вас есть лучший метод, предложите его.