Блочная модель верстки
В этом уроке рассказывается о блочной модели верстки. Существуют два подхода к верстке веб-страниц — блочная верстка и табличная верстка. Табличная верста уже не пользуется высокой популярностью, она достаточно неудобна.
Блочная верстка сайтов очень удобна, гибкая и понятная. Основной элемент верстки — тег
Блочная верстка сайтов очень удобна, гибкая и понятная. Основной элемент верстки — тег
. У блоков есть основные параметры — ширина и высота. Также в этом уроке разбираются такие понятия как внешний (margin) и внутренний (padding) отступы. Во время урока у меня не получилось отцентровать ссылку, сделав ее блочным элементом. Но на самом деле это сделать можно. Код выкладываю с учетом вышесказанного. Важно сказать, что padding и margin применимы ко всем видам элементов — и строчным, и блочным.
Код урока (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="firstClass">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat reiciendis at amet debitis delectus. Quia ullam corporis, ea eos, quos molestias dicta delectus quibusdam dolor placeat illum debitis commodi esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam tempore consequatur harum optio laboriosam vero veniam praesentium quis voluptates, excepturi, esse atque eius, fugit iste at nulla quasi alias consequuntur.</p>
</div>
<a href="#">ссылка</a>
</body>
</html>Код урока (CSS)
firstClass {
width: 300px;
height: 300px;
background-color: #e1e1e1;
/*margin: 10px 20px 30px 40px;*/
/*margin: 0 auto;*/
padding: 10px 15px;
}
a {
display: block;
background-color: red;
padding: 10px 20px;
width: 250px;
margin: 0 auto;
}
0 Comments