Сегодня мы напишем первый сайт, использую все то что мы узнали из прошлых статей. Начнем!
В HTML создадим несколько блоков.
- Блок шапки сайта "head"
- Блок подвала сайта "down"
- Блок страницы с информацией "page"
- Три текстовых блока "text1, text2,text3"
- Один блок с картинкой "img"
<div class="head">Мой первый сайт</div>
<div class="page">
<div class="text1">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Deleniti earum soluta dolore iusto eius molestiae veniam corrupti,
eligendi tenetur eaque sapiente voluptate vel culpa nostrum? Sequi
repudiandae molestias dolorem soluta?</div>
<div class="img"></div>
<div class="text2">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Deleniti earum soluta dolore iusto eius molestiae veniam corrupti,
eligendi tenetur eaque sapiente voluptate vel culpa nostrum? Sequi
repudiandae molestias dolorem soluta?</div>
<div class="text3">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Deleniti earum soluta dolore iusto eius molestiae veniam corrupti,
eligendi tenetur eaque sapiente voluptate vel culpa nostrum? Sequi
repudiandae molestias dolorem soluta?</div>
</div>
<div class="down"></div>
В блоки с названием text напишем любую информацию, на данный момент не важно. В head предположительное название сайта.
И у вас получиться так:
Даже и близко не похоже на сайт. Согласен.
Если вы читали прошлые статьи, то уже поняли что сейчас нам будет необходимо сделать. А именно - работа со стилями.
CSS
Информации сейчас будет много, но большинство тем уже были разобраны в ранних статьях.
.head{
max-width: 1920px;
max-height: 150px;
width: 100%;
height: 100%;
background-color: rgb(23, 152, 161); \\rgba это тот же выбор цвета блока
font-size: 50px; \\размер букв
text-align: center; \\Расположение текста - центр
padding-top: 50px;
}
.page{
max-width: 1024px;
max-height: 2000px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.img{
max-width: 1024px;
max-height: 768px;
width: 100%;
height: 100%;
background-image: url(/IMG/img_kot.jpg);
border: solid 1px black; \\это границы блока, я сделал их в 1px, цвет черный
border-radius: 15px; \\закругление границы блока
margin-top: 2%;
}
.text1{
font-size: 40px;
padding: 5px;
}
.text2{
font-size: 25px;
padding: 5px;
margin-top: 2%;
margin-bottom: 2%;
text-align: center;
}
.text3{
font-size: 15px;
max-width: 500px;
max-height: 100px;
width: 100%;
height: 100%;
border: solid 2px black;
border-radius: 15px;
padding: 15px;
background: rgba(0, 0, 0, 0.295);
}
.down{
margin-top: 300px;
max-width: 1920px;
max-height: 150px;
width: 100%;
height: 100%;
background-color: rgb(23, 152, 161);
}
Скрин HTML
Скрины CSS
Подробное описание незнакомого кода выше описано подробнее, ну а у нас получилось..
Текст специально был настроен вод разный шрифт. Что бы наглядно посмотреть на разный вид. Можете поэксперементировать. Добавить свою картинку или несколько. Использовать различные цвета и другие настройки масштабирования.
Если остались вопросы пишите комментарии
Всего доброго!