Жорстка html| & css| верстка блоками
Приклад блокової верстки сайту:
|
<html|> <head|> <title>Пример| блоковою верстки</title> <Style| type="text/css"> div#block| {width:600px|; margin:0| auto|; background-color:#dddddd|} div|.header {width:600px|; height:100px|; background-color:#717dc9|} div|.left_col {width:148px|; height:350px|; float:left|; border-right:2px| dashed| #717dc9|} div|.right_col {width:450px|; float:left|} div|.footer {width:600px|; height:70px|; background-color:#717dc9|; clear:both|} </style> </head> <body|> <div| id="block"|> <Div| class="header"><h1| align="center">Верстка| сайта</h1></div> <div| class="left_col"><p| align="center">Меню</p></div> <Div| class="right_col"|> <h2| align="center">CSS| верстка сайта</h2> <h4| align="center">Жесткая| верстка блоками</h4> </div> <div| class="footer"><p>©| 2014</p></div> </div> </body> </html> |
Результат:
Атрибути і значення
-
background-color|: – визначає колір фону.
-
margin:0| auto| – визначає центрування блоку.
-
width|: – визначає ширину в пікселях або у відсотках.
-
height|: – визначає висоту.
-
float:left| – визначає обтікання зліва.
-
border-right|: – визначає властивості правої межі.
-
clear:both| – відміняє обтікання з обох боків.
Звернете увагу на пунктирну межу лівої колонки, яка чомусь не доходить до низу. Подібні проблеми| легко усуваються за допомогою від’ємного| значення атрибуту margin|. Наприклад, margin-bottom:-15px| обрізатиме зайве (дивитеся наступний приклад).
Жорстка html| & css| верстка блоками в три колонки
Приклад жорсткої блокової верстки сайту в три колонки:
|
<html|> <head|> <title>Пример| жорсткої блокової верстки сайту в три колонки</title> <Style| type="text/css"> div#block| {width:750px|; margin:0| auto|; background-color:#dddddd|} div|.header {width:750px|; height:100px|; background-color:#717dc9|} div|.left_col {width:148px|; height:350px|; float:left|; border-right:2px| dashed| #717dc9|; margin-bottom:-15px|} div|.center_col {width:450px|; float:left|} div|.right_col {width:148px|; height:350px|; float:left|; border-left:2px| dashed| #717dc9|; margin-bottom:-15px|} div|.footer {width:750px|; height:70px|; background-color:#717dc9|; clear:both|} </style> </head> <body|> <div| id="block"|> <Div| class="header"><h1| align="center">Верстка| сайта</h1></div> <div| class="left_col"><p| align="center">Меню</p></div> <Div| class="center_col"|> <h2| align="center">CSS| верстка сайта</h2> <h4| align="center">Жесткая верстка блоками</h4> </div> <div class="right_col"><p align="center">Ссылки</p></div> <Div class="footer"><p>© 2014</p></div> </div> </body> </html> |
Результат:
Блокова верстка переважно табличної верстки. Верстка сайту блоками надає більше можливостей для форматування і дизайну. Верстка блоками вимагає уміння працювати з атрибутами margin|, padding|, float|, clear|.
Наприклад, атрибут float дозволяє розташувати декілька, наступних один за одним, блоків по горизонталі, щоб розділити web-страницу| по вертикалі.