Гибкое применение класса CSS в макете веб-страницы.

Я думаю, что все друзья, изучавшие CSS, знают CLASS. Я не знаю, как вы используете его при создании веб-страниц. Вот как я создаю код макета DIV. Не знаю понятно или нет, давайте разберемся,

макета

и класс стиля — это скелет, а класс стиля — это одежда

. Столбец в макете

сначала имеет свои атрибуты: это левый столбец, ширина, цвет фона, цвет шрифта и т. д.

1. Сначала будет определен класс, например: .layout, который в основном используется для управления всем размером страницы

. layout{width:98%;margin:0 auto;text-align:left;}

2. Затем 3 базовых макета Class(l,m,r)

.l{float:left}

.m{width:auto}

.r{float:right}

Я также классифицирую макет с 2 столбцами на макет с 3 столбцами, потому что в макет с тремя столбцами, когда ширина левого и правого столбцов равна 0 соответственно, 3 столбца становятся 2 столбцами.

Когда мы пишем базовый код макета, лучше всего писать его в формате трех столбцов.

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. id для определения.

Другие Некоторые часто используемые классы стилей также могут быть записаны как универсальные. Например, неявный может быть определен как

.hide{display:none}.

В этом случае на него можно напрямую ссылаться с помощью class="xxx close". полезные места, не правда ли, очень удобно? Вы также можете записать свои хорошие впечатления и поделиться ими.