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

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

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

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

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

Меню

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

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

</body> </html>