Синтаксис HTML. Маркированные списки, таблицы в HTML. Синтаксис CSS, подключение файла стилей

Содержание

Слайд 2

Содержание:

Начало работы. Синтаксис HTML
Маркированные списки, таблицы в HTML
Синтаксис CSS, подключение файла стилей
Классы

Содержание: Начало работы. Синтаксис HTML Маркированные списки, таблицы в HTML Синтаксис CSS,
в CSS
Градиент в CSS
Вёрстка структуры Landing Page
Вложенные селекторы в CSS
Псевдокласс: Hover в CSS
Выпадающее меню на CSS
Позиционирование элементов
Медиа - запросы
Хостинг и CMS

Слайд 3

Начало работы. Синтаксис HTML

Начало работы. Синтаксис HTML

Слайд 4

Начало работы. Синтаксис HTML

Начало работы. Синтаксис HTML

Слайд 5

Маркированные списки, таблицы в HTML

Маркированные списки, таблицы в HTML

Слайд 6

Синтаксис CSS, подключение файла стилей

body {
background: #FFED73; }
h1 {
color: blue;
text-decoration: underline;
text-shadow: 5px

Синтаксис CSS, подключение файла стилей body { background: #FFED73; } h1 {
5px 5px #333; }
p {
font-family: arial;
font-style: italic; }
img {
border: 2px solid red;
border-radius: 20px;
box-shadow: 5px 5px 5px #000; }

Слайд 7

Классы в CSS

Классы в CSS

Слайд 8

Градиент в CSS

body {
background: rgb(238,95,213);
background: radial-gradient(circle, rgba(238,95,213,1) 0%, rgba(130,244,242,1) 21%, rgba(200,132,228,1) 55%,

Градиент в CSS body { background: rgb(238,95,213); background: radial-gradient(circle, rgba(238,95,213,1) 0%, rgba(130,244,242,1)
rgba(85,155,238,1) 100%); }
div.red {
background: rgb(48,70,190);
background: linear-gradient(0deg,
rgba(48,70,190,1) 10%,
rgba(56,253,29,1) 51%,
rgba(217,252,69,1) 85%);
color: black; }

Слайд 9

Вёрстка структуры Landing Page



ИСТОРИЯ…


Вёрстка структуры Landing Page ИСТОРИЯ… width="200"> высокое … … надёжность История ВАЗ
src="12.jpg" width="200"> width="200">



  • высокое …

  • надёжность



История ВАЗ




  1. ВАЗ-2108 ...

  2. LADA Granta ...



Контакты




Слайд 10

Вёрстка структуры Landing Page

div.all {
width: 800px;
margin: 0px auto;
background: white;
min-height: 800px; }
div.header {
border:

Вёрстка структуры Landing Page div.all { width: 800px; margin: 0px auto; background:
1px solid red;
min-height: 100px; }
div.slider {
text-align: center;
border: 0px solid green;
min-height: 100px; }
div.preim {
border: 0px solid blue;
min-height: 100px; }

Слайд 11

Вёрстка структуры Landing Page

div.algoritm {
border: 0px solid purple;
min-height: 200px; }
div.contact {
text-align: center;
border:

Вёрстка структуры Landing Page div.algoritm { border: 0px solid purple; min-height: 200px;
1px solid blue;
min-height: 30px;
font-size: 12px; }

Слайд 12

Вложенные селекторы в CSS

div.preim div {
width: 24%;
border: 0px solid blue;
display: inline-block;
text-align: center;
font-size:

Вложенные селекторы в CSS div.preim div { width: 24%; border: 0px solid
20px; }
div.preim div img {
width: 50%
height: auto;
display: block;
margin: 3px auto; }

Слайд 13

Псевдокласс :Hover в CSS

div.preim div:hover img{
width: 70px;
margin: 5px auto 5px; }
div.preim div:hover

Псевдокласс :Hover в CSS div.preim div:hover img{ width: 70px; margin: 5px auto
{
color: red; }
div.algoritm li:hover {
color: blue;
font-size: 20px;
background: #FFF940; }

Слайд 15

Позиционирование элементов

div.consult {
width: 300px;
height: 30px;
padding: 10px;
background: #fff;
box-shadow: -5px -5px 5px #666;
position: fixed;
bottom:

Позиционирование элементов div.consult { width: 300px; height: 30px; padding: 10px; background: #fff;
0;
right: 0;
border-radius: 10px 0 0 0; }

Слайд 16

Медиа-запросы

@ media screen and (min-width: 400px) {
div.all {
width: 100%;
div.algoritm

Медиа-запросы @ media screen and (min-width: 400px) { div.all { width: 100%;
li:hover {
color: blue;
font-size: 20px;
background: #FFF940; }
}
div.preim div:hover img{
width: 48%px; }
div.preim div {
width: 48%;
font-size: 40px; }
div.menu ul li a {
font-size: 40px; }
}

Слайд 17

Хостинг и CMS

Хостинг и CMS

Слайд 18

Хостинг и CMS

Хостинг и CMS

Слайд 19

Хостинг и CMS

Хостинг и CMS

Слайд 20

Хостинг и CMS

Хостинг и CMS

Слайд 21

Хостинг и CMS

Хостинг и CMS

Слайд 22

Хостинг и CMS

Хостинг и CMS

Слайд 23

Хостинг и CMS

Хостинг и CMS

Слайд 24

Хостинг и CMS

Хостинг и CMS

Слайд 25

Готовый сайт

http://tk1la.beget.tech/

Готовый сайт http://tk1la.beget.tech/
Имя файла: Синтаксис-HTML.-Маркированные-списки,-таблицы-в-HTML.-Синтаксис-CSS,-подключение-файла-стилей.pptx
Количество просмотров: 116
Количество скачиваний: 0