Сетка из девяти квадратов — относительно старая конструкция. Ее основные характеристики на самом деле напоминают таблицу с тремя строками и тремя столбцами. Фактически, изначально он использовался больше в структуре окна C/S. Например, мы часто видим в программном обеспечении форму, которая на самом деле представляет собой типичное применение сетки из девяти квадратов, поскольку форму необходимо растянуть. в восьми направлениях, т.е. в Эта технология широко используется в программном обеспечении C/S для проектирования макетов. В современном обществе, где системы B/S популярны, этот макет постепенно используется некоторыми веб-дизайнерами на веб-страницах. Наиболее часто используется макет с закругленными углами.
На следующем рисунке показана базовая схема Сетки Девяти Дворцов:
Как видно на рисунке выше, каждая строка включает в себя три столбца, где синий квадрат — это верхний угол, эти четыре блока — это области с фиксированной шириной и высотой, а четыре желтые области — это четыре стороны, которые должны быть горизонтальными. или вертикальное расположение плиток, а оранжевая область посередине — это основная область для загрузки контента.
Такая структура наиболее способствует автоматическому расширению ширины и высоты области контента в соответствии с различными разрешениями экрана. Такая структура также является структурой макета, которая больше всего нужна веб-дизайнерам. Она является гибкой и спокойной.
Давайте реализуем это ниже:
Структурный слой :
Поскольку он должен адаптироваться к растяжению в восьми направлениях, каждое направление реализуется с помощью элемента div. Если один из них отсутствует, гибкости будет недостаточно. Тогда по этому принципу можно получить следующую структуру:
Слой стиля :
По структуре можно написать основной стиль. Основной принцип реализации заключается в том, чтобы установить для TotalContainer.box относительное позиционирование и установить overflow:hidden; чтобы все области за его пределами были обрезаны, а для элементов div в восьми направлениях внутри него было установлено абсолютное позиционирование, а их z -. Индексу присваивается значение 2, а затем четыре угловых контейнера присваиваются четырем углам соответственно.
.box{переполнение:скрытый;позиция:относительная;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {позиция:абсолютная;z-индекс:2;}