Latest web development tutorials
×

CSS курс

CSS курс CSS Краткое введение CSS грамматика CSS Id и Class селектор CSS создать CSS фон(background) CSS текст(text) CSS шрифты(Fonts) CSS ссылка(link) CSS стили списка(ul) CSS таблица(table) CSS Box модель CSS рамка(border) CSS контур(outline) CSS маржа(margin) CSS начинка(padding) CSS Группировка и вложенность CSS размер(Dimension) CSS дисплей(display) CSS разместить(position) CSS терка(float) CSS выравнивать(align) CSS Сочетание селекторов CSS Псевдо-классы CSS Псевдо-элемент CSS Панель навигации CSS Выпадающее меню CSS Галерея изображений CSS Прозрачное изображение/непрозрачный CSS технологии мозаики изображения CSS Тип носителя CSS селекторы атрибутов CSS резюме CSS примеров

CSS3 курс

CSS3 курс CSS3 Краткое введение CSS3 рамка(border) CSS3 фон CSS3 постепенное изменение CSS3 Текстовые эффекты CSS3 шрифты CSS3 2D изменение CSS3 3D изменение CSS3 переход CSS3 анимация CSS3 Multi-колонки CSS3 Пользовательский интерфейс

CSS Адаптивный дизайн

Viewport Grid View Медиа-запросы изображение видео(video) рамка

CSS справочное руководство

CSS справочное руководство CSS селектор CSS Речь Ссылка CSS Web Безопасные шрифты CSS анимация CSS блок CSS цвет CSS значения цвета CSS название цвета CSS шестнадцатеричный цвет

Адаптивный веб-дизайн - Grid View

Что такое вид сетки?

Многие веб-страницы дизайн сетки на основе, а это означает, что страница создана на основе макета столбца.

Используйте вид сетки помогают нам создавать веб-страницы. Это позволяет добавить элемент страницы становится легче.

Отзывчивый вид сетки, как правило, 12, шириной 100%, когда окно браузера изменяется автоматически убирающейся.

Отзывчивый вид сетки


Как создать адаптивный вид сетки

Далее мы создаем адаптивный вид сетки.

Сначала убедитесь , что все HTML элементы имеют свойствокоробчатой размеров и установите границы коробки.

Убедитесь, что поля и границы, содержащиеся между шириной и высотой элемента.

Добавьте следующий код:

* {
    box-sizing: border-box;
}

Смотрите больше коробка расчета размера , пожалуйста , нажмите: CSS3 окно расчета размера имущества .

Следующий пример демонстрирует простой адаптивный веб-страницу, которая содержит два столбца:

примеров

.menu {
ширина: 25%;
плавать: слева;
}
.main {
ширина: 75%;
плавать: слева;
}

Попробуйте »

Примеры включают в себя выше двух.

Система 12 Сетка может лучше контролировать адаптивный веб-сайт.

Во-первых, мы можем вычислить процент каждой колонки: 100% / 12 = 8,33%.

Указано в каждомклассе столбца, класс = "сталкивающихся" используется для определения каждого столбца имеет несколько диапазон:

CSS:

.col-1 { width: 8.33%; }
.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 класс = "строка">
<Div класс = "Col-3 "> ... </ DIV>
<Div класс = "Col-9 "> ... </ DIV>
</ Div>

Поведение левой колонке с плавающей, и добавьте прозрачное флоат:

CSS:

.row: после того, как {
Содержание: "";
ясно: то и другое;
Дисплей: блок;
}

Мы можем добавить некоторый стиль и цвет, пусть он выглядит лучше:

примеров

HTML {
семейство шрифтов: "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;
}

Попробуйте »