Вот как я создаю код макета DIV. Не знаю, понятно или нет. Давайте посмотрим.
Моя идея состоит в том, что в будущем мы сможем использовать стандартные детали для сборки макета DIV веб-страницы.
Я разделяю классы на два типа: класс макета и класс стиля. Класс макета — это скелет, а класс стиля — это одежда.
Например:
Например, левый столбец в макете
Прежде всего, его свойства: левый столбец, ширина, цвет фона, цвет шрифта и т. д.
1． Сначала будет определен класс, например: .layout, который в основном используется для управления всем размером страницы.
.layout{width:98%;margin:0 auto;text-align:left;}
2. Затем будут определены 3 базовых класса макета (l,m,r).
.l{float:left}
.m{ширина:авто}
.r{float:right}
Я также отношу макет с двумя столбцами к макету с тремя столбцами, потому что в макете с тремя столбцами, когда ширина левого и правого столбцов равна 0, три столбца становятся двумя столбцами.
Когда мы пишем базовый код макета, лучше всего писать его в формате трех столбцов.
3. В соответствии с классом макета определите необходимый класс стиля, например ширину, высоту, цвет фона и т. д. Все это элементы стиля.
.class_l{background:#ff0;margin-right: -150px;width:150px;}
.class_m{background:#f00;margin:0 140px 0 150px;}
.class_r{background:#00f;margin-left: -140px;width:140px;}
Существует только один набор классов макета, но можно определить множество классов стилей.
Например, вы хотите сделать небольшой макет из двух столбцов в средней колонке.
Вы можете определить другой класс стиля
.mid_l{background:#ff0;margin-right: -100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}
4. Объедините класс макета и класс стиля и ссылайтесь на них в коде следующим образом.
<div class=l class＿l></div>
<div class=l Mid_l></div>
Заключите оба класса в кавычки, разделив их пробелами. Первый — это класс макета, а второй — класс стиля. Вы можете продолжать заключать эти два класса в кавычки с пробелами. Если вам нужно определить его специально, вы можете указать этому элементу div. идентификатор для определения.
Некоторые другие часто используемые классы стилей также могут быть записаны как универсальные, например, неявный может быть определен как
.hide{дисплей:нет}
Затем, когда необходимо, используйте скрытие class=xxx для ссылки на него, что очень удобно.
Код: