Шаблон:Test3 — различия между версиями

Материал из Integra-S Wiki
Перейти к: навигация, поиск
Строка 1: Строка 1:
 
<html>
 
<html>
 
<head>
 
<head>
<title>Пример блочной верстки</title>
+
<title>Пример жесткой блочной верстки сайта в три колонки</title>
 
<style type="text/css">
 
<style type="text/css">
div#block {width:600px; margin:0 auto; background-color:#dddddd}
+
div#block {width:750px; margin:0 auto; background-color:#dddddd}
div.header {width:600px; height:100px; background-color:#717dc9}
+
div.header {width:750px; height:100px; background-color:#717dc9}
div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9}
+
div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px}
div.right_col {width:450px; float:left}
+
div.center_col {width:450px; float:left}
div.footer {width:600px; height:70px; background-color:#717dc9; clear:both}
+
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>
 
</style>
 
</head>
 
</head>
Строка 14: Строка 15:
 
<div class="header"><h1 align="center">Верстка сайта</h1></div>
 
<div class="header"><h1 align="center">Верстка сайта</h1></div>
 
<div class="left_col"><p align="center">Меню</p></div>
 
<div class="left_col"><p align="center">Меню</p></div>
<div class="right_col">
+
<div class="center_col">
 
<h2 align="center">CSS верстка сайта</h2>
 
<h2 align="center">CSS верстка сайта</h2>
 
<h4 align="center">Жесткая верстка блоками</h4>
 
<h4 align="center">Жесткая верстка блоками</h4>
 
</div>
 
</div>
 +
<div class="right_col"><p align="center">Ссылки</p></div>
 
<div class="footer"><p>© 2010</p></div>
 
<div class="footer"><p>© 2010</p></div>
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Версия 18:58, 26 октября 2017

<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>

Верстка сайта

Меню

CSS верстка сайта

Жесткая верстка блоками

Ссылки

</body> </html>