29 ноября 2018г.
Обучение html и css с нуля бесплатный курс адаптивный дизайн уроки онлайн создание гибкой сетки
Многие веб-страницы основаны на сетке вида, это означает, что страница разделена на столбцы.
Использование представления сетки-вида может быть очень полезной при разработке веб-страниц. Это облегчает размещать элементы на странице сайта.
Чуткий сетка-вид часто имеет 12 столбцов, и имеет общую ширину 100%, а также будет сжиматься и расширяться при изменении размеров окна браузера.
Начнем с CSS построения гибкой сетки-вид …
Сначала убедитесь, что все HTML элементы имеют свойство box‐sizing с значением border‐box. Это гарантирует, что заполнение и рамка включены в общую ширину и высоту элементов.
Так как мы хотим использовать адаптивную сетку-вид с 12 колоннами, чтобы иметь больше контроля на веб-страницей
Во-первых, мы должны вычислить процент для одной колонки: 100% / 12 столбцов = 8,33%.
Тогда мы делаем один класс для каждой из 12 колонн, class="col-" а число, определяющее, сколько столбцов секции они должны охватывать:
* {
box-sizing: border-box;
}
.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:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Каждая строка должна быть заключена в оболочку <div>. Число столбцов внутри строки должны всегда добавлять до 12:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Столбцы внутри строки всегда направлены влево, и следовательно, извлекаются из потока страницы, и другие элементы будут размещены так, как будто столбцов не существует. Чтобы предотвратить это, мы добавим стиль, который будет очищать поток:
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font‐family: "Lucida Sans", sans‐serif;
}
.header {
background‐color: #ffc1ce;
color: #000;
padding: 15px;
}
.menu ul {
list‐style‐type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background‐color: #e67a9e;
color: #000;
box‐shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background‐color: #c8d6fb;
}
1 Давайте откроем наш текстовой редактор, создайте новый файл с именем main.css. Затем я собираюсь создать папку в корне odnostranichnyj-sayt и назову ее style, в ней я создам еще 2-е папки и назову их css, images, не стесняйтесь делать то же самое.
2 Откройте файл index.html в текстовом редакторе и в следующую строку после <meta name="viewport" content="width=device‐width, initial‐scale=1.0"> вставьте строку <link rel="stylesheet" href="style/css/main.css"> с указанием пути к файлу CSS стиля нашего одностраничника, не забудьте сохранить изменения.
3 Откройте файл main.css в текстовом редакторе, начнем прописывать стиль нашей веб-страницы.
Каждый веб-браузер имеет свои собственные стили по умолчанию для различных элементов. Для обеспечения единого стиля для всех веб-браузеров, мы вверху нашего стиля пропишем сброс Эрика Мейера, который был адаптирован для включения стиля новых элементов для HTML5. Введите в адресной строке веб-браузера http://meyerweb.com/eric/tools/css/reset/ выделите (ctrl+A) и скопируйте полностью (ctrl+С), затем вставьте (ctrl+V) в файл main.css полностью.
/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
4 Посмотрите на макет одностраничного сайта, чтобы визуально оценить стиль CSS который мы дальше будем записывать в файл main.css. Сразу после сброса Эрика Мейера продолжаем записывать пользовательский стиль для нашего одностраничника.
/* Пользовательский стиль */
html {
font-family: "Lucida Sans", sans-serif;
font: 300 16px/22px;
}
h1 {
font-size: 36px;
line-height: 44px;
}
h2 {
font-size: 24px;
line-height: 44px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
h1, h3, h4, h5, p {
margin-bottom: 22px;
}
img {
max-width: 100%;
height: auto;
}
video {
max-width: 100%;
height: auto;
}
.header {
background-color: #ffc1ce;
color: #000;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #e67a9e;
color: #000;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #c8d6fb;
}
.aside {
background-color: #801e85;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #664a95;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
/* Медиа Запросы */
@media only screen and (max-width: 500px) {
body {
background-color: white;
}
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.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%;}
}
@media only screen and (orientation: landscape) {
body {
background-color: #ecfbdc;
}
}
Давайте немного отдохнем от CSS, и вернемся на HTML верстку. Напомню что HTML определяет содержание и структуру нашей веб-страницы. Переходите в следующий урок в содержании которого вы узнаете еще кое-что о CSS, а также продолжим html верстку нашего одностраничного сайта розового цвета бесплатно адаптивный дизайн.
Учебник адаптивный веб-дизайн скачать полностью, с его помощью Вы уже буквально через несколько часов сможете создать одностраничный сайт на подвижной сетке, любой тематики.
Готовые шаблоны html легкий способ сделать сайт самому. Помогу разработать сайт под ключ вплоть до загрузки на хостинг. Адаптивная верстка для смартфонов и планшетов. В галерее готовых сайтов можно выбрать и купить шаблон html недорого.
