В моем предыдущем уроке « Нерушимая сетка из девяти гонгов » я представил относительно совершенный метод компоновки сетки из девяти квадратов, который позволяет полностью гибко регулировать ее ширину и высоту для достижения более гибкого стиля компоновки.
Однако за то, чтобы идеально отразить эластичную функцию, приходится платить очень высокую цену. С структурной точки зрения структура относительно раздута, но каждый узел незаменим и не может быть оптимизирован, иначе это приведет к ее гибкости. недостаточно.
В практических приложениях многим дизайнерам может не нравиться такая структура макета, и они считают ее излишней.
Идеальная сетка из девяти квадратов должна представлять собой трехслойную разделенную структуру. Идеальная сетка из девяти квадратов, которую я хочу получить, должна быть такой:
Поэтому в этой статье я постараюсь максимально приблизить данный макет к этому идеализированному состоянию, сделав его более пригодным для применения в различных аспектах.
Что касается первого и второго пунктов, если вы хотите сохранить его гибкость и добиться оптимизированного эффекта, то есть если вы хотите «съесть свой пирог и съесть его», то нет другого пути, кроме использования js-инкапсуляции. Можно сказать, что это своего рода подход «заткнуть уши и украсть звонок». Да, я должен признать, что этот метод инкапсуляции с помощью JS по сути не упрощает его структуру, а лишь использует динамический способ его инкапсуляции. Structure. Create, но он оказывает немедленный эффект на избыточные структуры HTML, и все избыточные структуры становятся невидимыми одним махом.
Давайте узнаем, как улучшить нашу сетку из девяти квадратов с помощью подхода трехслойного разделения.
Структурный слой :
Это ключевая область, которую мы хотим максимально упростить. Мы используем js для динамического создания ее структуры, поэтому текущая структура должна быть наиболее оригинальной, как показано ниже:
<div class="box">Первый квадрат из девяти квадратов</div>
<div class="box" id="one">Второй квадрат из девяти квадратов</div>
<div class="box" id="two">Третий квадрат из девяти квадратов</div>
Единственная модификация, которую я сделал, заключалась в том, чтобы добавить разные идентификаторы для каждого поля, что оставляет возможность вызова таблицы стилей для создания разных цветов позже. Используйте этот идентификатор для создания различных изображений или цветовых стилей в таблице стилей.
Нам нужно только добавить class="box" в контейнер div, и макет сетки из девяти квадратов будет успешно создан. Это достаточно просто!
Слой стиля:
Только что мы похоронили прорывную точку настройки стиля (другого идентификатора) на уровне структуры, чтобы стало проще писать стиль. Мы переопределяем и сбрасываем стили всех девяти мест, где стиль нужно изменить, чтобы получить разные стили.
Конечно, в качестве фона можно наносить разные картинки. Я просто назвал значение цвета для удобства демонстрации. Конкретный стиль интерфейса зависит от ваших дизайнерских навыков.
/*Цветовая схема первая*/
#one .t_l{background:blue;}
#one .t_r{background:blue;}
#one .t_m{background:orange;}
#one .m_l{background:orange;}
#one .m_r{background:orange;}
#one .b_l{background:blue;}
#one .b_r{background:blue;}
#one .b_m span{background:orange;}
#one .context{background:#666;}
/*Цветовая схема вторая*/
#two .t_l{background:red;}
#two .t_r{background:red;}
#two .t_m{background:black;}
#two .m_l{background:black;}
#two .m_r{background:black;}
#two .b_l{background:red;}
#two .b_r{background:red;}
#two .b_m span{background:black;}
#two .context{background:#999;}