Задание:
1.Создать таблицу Достоинства и недостатки
| Достоинства: | Недостатки |
|---|---|
| Привлекательный внешний вид. | Нелегко дрессировать и воспитывать. |
| Не лают много. | Могут быть агрессивны к животным, нужно приучать к ним. |
| Привязчивы | Охотничьи инстинкты. Нужно всерьёз заниматься обучением. |
2. Создать кнопку наверх и задать ему позиционирование fixed
3. Блоку контент задать прозрачность 0.7
4. На странице контакты создать форму связаться с нами и добавить яндекс карту
яндекс карта https://tech.yandex.ru/maps/tools/constructor/
Позиционирование элементов
При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.В этом уроке мы обсудим следующее:
— Принципы CSS-позиционирования
— Абсолютное позиционирование
— Относительное позиционирование
Принципы CSS-позиционирования
Представим окно браузера как систему координат:
Принципы CSS-позиционирования — в том, что вы можете расположить бокс в
системе координат где угодно.
Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см.
Урок 9) заголовок выглядит так:
Если мы хотим расположить его на 100px от верхней границы документа и на 200px
слева, мы должны ввести следующий код CSS:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
Вот результат:
Как видите, Позиционирование с помощью CSS — очень точная техника приразмещении элементов. Это намного проще, чем использовать таблицы, прозрачные изображения или ещё что-нибудь подобное.
Абсолютное позиционирование
Элемент, позиционированный абсолютно, не получает никакого пространства в
документе. Это означает, что после позиционирования он не оставляет после себя
пустое пространство.
Для абсолютного позиционирования элемента свойство position
должно иметь значение absolute. Вы можете использовать значения left, right, top
и bottom для размещения бокса.
В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах
документа:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
Относительное позиционирование
Чтобы позиционировать элемент относительно, установите в свойстве position
значение relative. Разница между относительным абсолютным
позиционированием состоит в том, как обсчитывается позиционирование.
Позиция элемента, размещаемого относительно, обсчитывается
относительно его оригинальной позиции в документе. Это означает, что вы
смещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент всё ещё
занимает в документе пространство после позиционирования.
Как пример относительного позиционирования попробуем разместить три рисунка
относительно их оригинального расположения на странице. Обратите внимание, что
рисунки оставили после смещения пустое пространство на своих оригинальных
позициях в документе:
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
Наслоение с помощью z-index (Слои)
CSS оперирует в трёх измерениях — высота, ширина и глубина. Мы работали в
двух измерениях на протяжении всех предшествующих уроков.
В этом уроке мы научимся создавать слои/layers. Коротко говоря — упорядочивать
элементы так, чтобы они перекрывались.
Для этого вы можете присвоит каждому элементу номер (z-index).
Элемент с бóльшим номером перекрывает элемент с меньшим номером.
Скажем, мы играем в покер и у нас — royal flush. Наша «рука» должна быть
представлена так, чтобы каждая карта имела z-index:
При этом номера идут подряд (1-5), но того же результата можно добиться и при
использовании 5 различных номеров. Важна хронологическая последовательность
номеров (порядок).
Вот код примера с картами:
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
Это относительно простой метод, но в нём заложены большие возможности. Вы
можете размещать текст над изображением, изображение над текстом и т. д.
Слои можно использовать в различных ситуациях. Например, попробуйте
использовать z-index для эффектов с заголовками вместо создания
этих заголовков как графических элементов. С одной стороны, текст загружается
быстрее, а с другой — потенциально улучшается работа поисковых машин.
Создаем таблицы <TABLE><TR><TD>
Описание
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>,<tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Синтаксис
<table> <tr> <td>…</td> </tr></table>
Закрывающий тег обязателен.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Таблица размеров обуви</title>
</head>
<body>
<table border="1">
<caption>Таблица размеров обуви</caption>
<tr>
<th>Россия</th>
<th>Великобритания</th>
<th>Европа</th>
<th>Длина ступни, см</th>
</tr>
<tr>
<td>34,5</td><td>3,5</td><td>36</td><td>23</td>
</tr>
<tr>
<td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td>
</tr>
<tr>
<td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td>
</tr>
<tr>
<td>36,5</td><td>5</td><td>38</td><td>24</td>
</tr>
<tr>
<td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td>
</tr>
<tr>
<td>38</td><td>6</td><td>39⅓</td><td>25</td>
</tr>
<tr>
<td>38,5</td><td>6,5</td><td>40</td><td>25,5</td>
</tr>
<tr>
<td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td>
</tr>
<tr>
<td>40</td><td>7,5</td><td>41⅓</td><td>26</td>
</tr>
<tr>
<td>40,5</td><td>8</td><td>42</td><td>26,5</td>
</tr>
<tr>
<td>41</td><td>8,5</td><td>42⅔</td><td>27</td>
</tr>
<tr>
<td>42</td><td>9</td><td>43⅓</td><td>27,5</td>
</tr>
<tr>
<td>43</td><td>9,5</td><td>44</td><td>28</td>
</tr>
<tr>
<td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td>
</tr>
<tr>
<td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td>
</tr>
<tr>
<td>44,5</td><td>11</td><td>46</td><td>29</td>
</tr>
<tr>
<td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td>
</tr>
<tr>
<td>46</td><td>12</td><td>47⅓</td><td>30</td>
</tr>
<tr>
<td>46,5</td><td>12,5</td><td>48</td><td>30,5</td>
</tr>
<tr>
<td>47</td><td>13</td><td>48⅔</td><td>31</td>
</tr>
<tr>
<td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td>
</tr>
</table>
</body>
</html>
Форма <FORM> </FORM> и поля ввода данных
Рассмотрим простейший вариант взаимодействия с пользователем и создадим форму с полями ввода.
Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению. Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга. Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование. Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию. По умолчанию для отправки данных используется метод GET.
Синтаксис
<form action=»URL»>
…
</form>
Для того чтобы дать возможность пользователю вводить данные используем тег <input>
Тег <input>
Описание
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
<input type=»button|checkbox|file|hidden|image|password|radio|reset|submit|text»>
Значения type
button Кнопка.
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных.
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице.
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset Кнопка для возвращения данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер.
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
color Виджет для выбора цвета.
date Поле для выбора календарной даты.
datetime Указание даты и времени.
datetime-local Указание местной даты и времени.
email Для адресов электронной почты.
number Ввод чисел.
range Ползунок для выбора чисел в указанном диапазоне.
search Поле для поиска.
tel Для телефонных номеров.
time Для времени.
url Для веб-адресов.
month Выбор месяца.
week Выбор недели.
Пример
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег FORM</title> </head> <body> <form action="handler.php"> <p><b>Как по вашему мнению расшифровывается аббревиатура ОС?</b></p> <p><input type="radio" name="answer" value="a1">Офицерский состав<Br> <input type="radio" name="answer" value="a2">Операционная система<Br> <input type="radio" name="answer" value="a3">Большой полосатый мух</p> <p><input type=" radio "></p> </form> </body> </html>