Разместить меню и логотип в одну строку и правильно выровнять их внутри блока




Разбить Боди на блоки

Ввести в бодиheader+tab

Ввести в бодиsection+таб столько раз, сколько блоков кроме футера и хедера

Ввести footer+таб в конце

В section, в header и footer ввести div+таб и указать внутри divседующееclass="container"

Вычеслить ширину неизменяемого контента через линию в фотошоп

В css-файле указать ширину получившийся линии, а так же центрировать контейнер по горизонтали, вот так:

.container {

width: 930px; - ширина

margin: 0 auto; - центрировать элемент по горизонтали (контейнер центрируется по горизонтали страницы)

}

Вcssbody написать: - это уберет рамочку вокруг страницы, по сути боди – это страница

body {

padding: 0; - отступы внутрь элемента. количество пикселей внутрь элемента рамочкой за счет пикселей самого элемента (элемент не увеличивается)

margin: 0; - отступы наружу элемента}

Указать, в divcss свойство box-sizing: border-box; - применяется чтобы коммандыпаддинг и маргинне расширяли элемент настолько, насколько должны забрать пикселей.

Например я указываю высоту и ширину в 500 пикселей, если я делаю паддинг или марджин на 10 пикселей, то блок автоматически увеличится, игнорируя заданную высоту и длину на 10 пикселей, если не применить это свойство.

 

Сделать фоновую картинку на первом экране и сам первый экран

Вsection, вheaderиfooterввестифоновые картинки или цвета. Для этого в css файле указать

header {background: url(../img/first-bg.jpg) no-repeat center top / cover;}

то же самое для футера, а в каждом section указать classв html иcss. И каждому классу так же как и в хедере добавить фоновую картинку.

Расшировка:

no-repeat - не повторять картинку при уменьшении масштаба в браузере (т.е. не замощать)

center - положение картинки по горизонтали по центру

top - положение картинки по вериткали (прикрепить к верхнему краю)

cover - чтобы картинка расширялась на всю ширину экрана, растягивалась

! Из заотсутсвия контента (высоты) фоновая картика не будет отображаться

Для того, чтобы сделать высоту фоновой картинки на весь экран нужно написать в css:

height: 100vh; - обращаю внимание на vh ! (по сути это процент области экрана по высоте)

Пример:

header {

background: url(../img/first-bg.jpg) no-repeat center top / cover;

height: 100vh;

}

Так же можно в ручную задать количество пикселей, той же коммандой, только использовать не vh, а px

 

 

Заполнение блоков

Разбить на крупные элементы – строки и блоки

Логотип и меню – как правило в одну строку, их оба стоит написать внутри одного div

 

 

nav - тег меню (обычно внутри хедера и див), внутри него уже открывается список.

в нем всегда есть стандартные паддинги (рамки), которые нужно обнулить

для создания пунктов меню:

ul– список, врнутри него пункты – li

a – ссылки, если не знаю адресс ссылки, пишу #

Пример:

<nav>

<ul>

<li><a href="#">home</a></li>

<li><a href="#">services</a></li>

<li><a href="#">portfolio</a></li>

<li><a href="#">about</a></li>

<li><a href="#">contact</a></li>

</ul>

</nav>

 

display: inline; – преобразует блочный элемент в строчный, так можно пункты меню преобразовать в строку

Для этого это свойство нужно применить ко все li в ul

Так же для того, чтобы убрать подчеркивания ссылоки придать нужные свойства тексту меню в css ввести применительно к ссылкам aследующее:

.menua {

color: #fff; - задает цвет отображаемой ссылки в данном случае указан белый цвет

text-decoration: none; - убирает подчеркивания в меню (при строке)

text-transform: uppercase; - делаеттекстбольшимибуквами

font-size: 14px; - указывает размер шрифта}

 

Для того, чтобы слделать в меню отступы нужного размера между словами используется команда в css для li

margin-right: 41px; - отступы справа между каждым пунктом списка (в данном случае строки меню)

 

Для того, чтобы выровнять текстовый блок по центру используется команда cssвнутри div

text-align: center; - выравнивание текста по центру

Так же для того, чтобы сделать полноценную строку или блок, в котором будет только его содержимое, и следующие элементы вне этого блока из за расположения контента блока справа и слева не будут заполнять пустое пространстов по центру или где нибудь еще в блоке.

.clearfix:after { - для этого блоку задать еще один класс clearfix (через пробел) или logomenu_clearfix, обязательно написать вдоеточие и афтер и то, что написано ниже

content:'';

display: table;

width: 100%;

clear: both;}

Разместить меню и логотип в одну строку и правильно выровнять их внутри блока

Узнать предназначение:

.clearfix:after { - что такое клеарфикс понятно – для него это меню и логотип, но что такое after?

content:''; - особенно что это такое

display: table;

width: 100%; - видимо это ширина 100% от экрана

clear: both;}

Узнать:Указать в bodycssшрифты, а так же убрать стандартные паддинги у указать фоновый цвет

body {

font-family: Arial, sans-serif;

padding: 0;

margin: 0;

color: #222222;}

font-family: Arial, - запрашиваем на компьютере пользователя шрифт Ариал, если его нету, то будет использовано свойство:

sans-serif; - группа шрифтов без засечек (любой шрифт из этой группы)

 

 

Структурировать конспект

· Стандартные вводимые значения: сделать у бодиморнинг 0 и паддинг 0 и т.п.

· Методы управления блоками и строками, ориентации элементов в пространстве

· Текстовые операторы

· Правила верстки в целом

· Операторы ссылок, кнопок и форм, списки.Специальные операторы.

· Операторы управления изображениями

· Подключение библиотек, шрифтов, языки – то что в хеад

· ДжаваСкрипт

· SEO - операторы

 

Правила верстки в целом

· Там, где используется float лучше всего обарачивать в общий контейнер и присваивать ему класс clearfix

· Можно в css писать в классах конкретные элементы к котрорым применяется правило, не обязательно указывая всю последовательность вложенности, например .menuli

· Принцип наследования – дочерние элементы (не все и не всегда) присваивают свойства тех, в которые они вложены. Это позволяет сильно упрощать код.

· Можно очень быстро задать класс для тега вот так: имятега.класстега

· Порядок верстки. От больших элементов к их деталям. Сверху-вниз, слева-направо.

· Обрати внимание на то, какой цвет текста и шрифт преобладает (и другие свойства текста) на сайте, затем опиши эти свойства в body

· Не нужно задавать блокам с разным содержимым но одинаковыми стилевыми свойствами разные классы (классы мы указываем для стилей а не по смыслу)

· Можно задать несколько классов одному тегу, для этого нужно указать их через пробел в одном class

· Нужно разбивать однотипные элементы на блоки

· Лучше сразу в боди прописать наиболее распрастраненный цвет текста, размер шрифта и другие текстовые параметры

 

Операторы ссылок, кнопок и форм, списки.

Специальные операторы.

· Все меню всегда делаются тегом списков – так принято. Так же принято всегда окружать список ul тегом nav, обозначающим меню.

· Уul и liпо-умолчаниюdisplay: list; Чтобы не было проблем со свойствами, нужно превратить их в блок, применяется display: block;А затем, чтобы сделать элемент строчным применяется float: left; (или right).

· Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>.При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.

· list-style-type изменяет вид маркера для каждого элемента списка.

Маркированный список – свойства:

circle Маркер в виде кружка.

disc Маркер в виде точки.

square Маркер в виде квадрата.

 

Нумерованный список – свойства:

armenian Традиционная армянская нумерация.

decimal Арабскиечисла (1, 2, 3, 4,...).

decimal-leading-zero Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).

georgian Традиционная грузинская нумерация.

lower-alpha Строчные латинские буквы (a, b, c, d,...).

lower-greek Строчные греческие буквы (α, β, γ, δ,...).

lower-latin Это значение аналогично lower-alpha.

lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v,...).

upper-alpha Заглавные латинские буквы (A, B, C, D,...).

upper-latin Это значение аналогично upper-alpha.

upper-roman Римские числа в верхнем регистре (I, II, III, IV, V,...).

 

Общие свойства:

noneОтменяет маркеры для списка.

InheritНаследует значение родителя.

 

· Для создания форм пишется тег form в html, внутри него помещаются теги input,

 

Операторы управления изображениями

· background:

#fff – можно указать цветбекграунда без свойства коллор

...





Читайте также:
Новые русские слова в современном русском языке и их значения: Менсплейнинг – это когда мужчина что-то объясняет...
Пример оформления методической разработки: Методическая разработка - разновидность учебно-методического издания в помощь...
Основные понятия туризма: Это специалист в отрасли туризма, который занимается...
Социальные науки, их классификация: Общество настолько сложный объект, что...

Поиск по сайту

©2015-2022 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2017-11-19 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту:


Мы поможем в написании ваших работ!
Обратная связь
0.028 с.