Адаптивный веб-дизайн - Grid View
Что такое вид сетки?
Многие веб-страницы дизайн сетки на основе, а это означает, что страница создана на основе макета столбца.
Используйте вид сетки помогают нам создавать веб-страницы. Это позволяет добавить элемент страницы становится легче.
Отзывчивый вид сетки, как правило, 12, шириной 100%, когда окно браузера изменяется автоматически убирающейся.
Как создать адаптивный вид сетки
Далее мы создаем адаптивный вид сетки.
Сначала убедитесь , что все HTML элементы имеют свойствокоробчатой размеров и установите границы коробки.
Убедитесь, что поля и границы, содержащиеся между шириной и высотой элемента.
Добавьте следующий код:
* { box-sizing: border-box; }
Смотрите больше коробка расчета размера , пожалуйста , нажмите: CSS3 окно расчета размера имущества .
Следующий пример демонстрирует простой адаптивный веб-страницу, которая содержит два столбца:
Примеры включают в себя выше двух.
Система 12 Сетка может лучше контролировать адаптивный веб-сайт.
Во-первых, мы можем вычислить процент каждой колонки: 100% / 12 = 8,33%.
Указано в каждомклассе столбца, класс = "сталкивающихся" используется для определения каждого столбца имеет несколько диапазон:
CSS:
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
Попробуйте »
Все столбцы оставили плавающей, интервал (отступы) для 15px:
CSS:
плавать: слева;
обивка: 15px;
границы: 1px сплошной красный;
}
Каждая строка с помощью пакета <div>. Все столбцы должны добавить до 12:
<Div класс = "Col-3 "> ... </ DIV>
<Div класс = "Col-9 "> ... </ DIV>
</ Div>
Поведение левой колонке с плавающей, и добавьте прозрачное флоат:
CSS:
Содержание: "";
ясно: то и другое;
Дисплей: блок;
}
Мы можем добавить некоторый стиль и цвет, пусть он выглядит лучше:
примеров
семейство шрифтов: "Lucida Sans" , без засечек;
}
.header {
цвет фона: # 9933cc;
цвет: #ffffff;
обивка: 15px;
}
.menu уль {
Список стиле типа: нет;
Запас: 0;
обивка: 0;
}
.menu Li {
обивка: 8px;
краю дна: 7px;
цвет фона: # 33b5e5;
цвет: #ffffff;
коробка-тень: 0 1px 3px RGBA (0,0,0,0.12), 0 1px 2px RGBA (0,0,0,0.24);
}
.menu Ли: Hover {
цвет фона: # 0099cc;
}
Попробуйте »