Если вы используете табличный метод оформления, то обычно это трехстрочный макет с верхними, средними и нижними рядами. 
. Если вы используете DIV, я рассматриваю возможность использования трех столбцов для макета, например: 
.
2. Определите стиль кузова
Сначала определите стиль тела всей страницы. Код выглядит следующим образом:
тело {МАРГИН: 0 пикселей;
ЗАПОЛНЕНИЕ: 0 пикселей;
ФОНОВАЯ ИНФОРМАЦИЯ: url(../images/bg_logo.gif) #FEFEFE без повтора справа внизу;
СЕМЕЙСТВО ШРИФТОВ: «Lucida Grande», «Lucida Sans Unicode», «宋体», «新宋体», arial, verdana, sans-serif;
ЦВЕТ: #666;
РАЗМЕР ШРИФТА: 12 пикселей;
ВЫСОТА СТРОКИ: 150% }
Функция приведенного выше кода была подробно объяснена в уроке предыдущего дня, и каждый должен понять ее с первого взгляда. Поле границы определяется как 0, цвет фона — #FEFEFE, фоновое изображение — bg_logo.gif, а изображение располагается в правом нижнем углу страницы, без повторений; размер шрифта определяется как 12 пикселей; цвет #666, высота строки — 150%.
3. Определите основной div
В первый раз, когда я использовал макет CSS, я решил использовать макет с тремя столбцами фиксированной ширины (который проще, чем дизайн с адаптивным разрешением, хо-хо, не говорите, что я ленив, сначала реализуйте простой макет, чтобы обрести некоторую уверенность). !). Определите ширину левого, среднего и правого края как 200:300:280 соответственно, как это определено в CSS:
/*Определяем стиль левого столбца страницы*/
#left{ ШИРИНА: 200 пикселей;
ПОЛЯ: 0 пикселей;
ЗАПОЛНЕНИЕ: 0 пикселей;
ПРЕДЫСТОРИЯ: #CDCDCD;
}
/*Определение стилей столбцов на странице*/
#middle{ ПОЛОЖЕНИЕ: абсолютное;
СЛЕВА: 200 пикселей;
ВЕРХ: 0 пикселей;
ШИРИНА: 300 пикселей;
ПОЛЯ: 0 пикселей;
ЗАПОЛНЕНИЕ: 0 пикселей;
ПРЕДЫСТОРИЯ: #ДАДАДА;
}
/*Определяем стиль правого столбца страницы*/
#right{ ПОЛОЖЕНИЕ: абсолютное;
СЛЕВА: 500 пикселей;
ВЕРХ: 0 пикселей;
ШИРИНА: 280 пикселей;
ПОЛЯ: 0 пикселей;
ЗАПОЛНЕНИЕ: 0 пикселей;
ФОН: #FFF }
Примечание. Я использовал POSITION: Absolute; при определении элементов div среднего и правого столбцов, а затем определил LEFT:200px;TOP:0px; и LEFT:500px;TOP:0px; соответственно. Это ключ к этому макету. абсолютное позиционирование слоя. Определите средний столбец на расстоянии 200 пикселей от левой границы страницы и 0 пикселей от верха; определите правый столбец на расстоянии 500 пикселей от левой границы страницы и 0 пикселей от верха;
На данный момент код всей страницы следующий:
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
<голова>
<title>Добро пожаловать в новый раздел «Веб-дизайнер»: учебные пособия и реклама по веб-стандартам</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿杰" />
<meta name="Авторское право" content=" www.w3cn.org , свободное авторское право, любое воспроизведение" />
<meta name="description" content="Новый веб-дизайнер, обучающий сайт по веб-стандартам, пропагандирующий применение веб-стандартов в Китае." />
<meta content="веб-стандарты, учебные пособия, сеть, стандарты, xhtml, css, удобство использования, доступность" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="значок ярлыка" href=" http://www.w3cn.org/favicon.ico " type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</голова>
<тело>
<div id="left">Левый столбец страницы</div>
<div id="middle">Средний столбец страницы</div>
<div id="right">Правый столбец страницы</div>
</тело>
</html>
В настоящее время эффект страницы может видеть только три рядом расположенных серых прямоугольника и фоновое изображение. Но я хочу, чтобы высота была на весь экран, что мне делать?
4.100% адаптивная высота?
Чтобы сохранить одинаковую высоту трех столбцов, я попытался установить «height:100%;» в #left, #middle и #right, но обнаружил, что ожидаемого эффекта адаптивной высоты вообще не было. После нескольких попыток мне пришлось присвоить каждому div абсолютную высоту: «height:1000px;», и по мере увеличения содержимого мне нужно было постоянно корректировать это значение. Нет возможности отрегулировать высоту? По мере углубления собственного исследования Аджи обнаружил гибкое решение. На самом деле, нет никакой необходимости устанавливать 100 %. Мы слишком глубоко заточены в плену табличного мышления. Этот метод будет подробно рассмотрен в следующем разделе исследования.