* {margin:0;
padding:0;}
/*Общие значения для заголовков всех уровней на сайте*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{ font-weight: normal;
font-style: normal;
text-decoration: none;}
/*Оформление всех ссылок на сайте*/
a { text-decoration: underline;
color:#004f64;}
/*Непосещенные ссылки*/
a:link { color: #004f64;}
/*Посещенные ссылки*/
a:visited{ color:#3b98b0;}
/*Ссылка при наведении*/
a:hover{ text-decoration: none;
color: #fe1919;}
/*Оформление заголовков 1 уровня*/
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover{
font-size:22px;
color: #3b98b0;
text-align:left;
margin-bottom:5px;}
/*Оформление заголовков 2 уровня*/
h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover{
font-size:20px;
color: #004f64;
text-align:left;
border-bottom:1px solid #a7a6aa;
margin-bottom:5px;}
/*Оформление заголовков 3 уровня*/
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover{
font-size: 18px;
color: #30b2cf;
text-align:left;}
/*Оформление заголовков 4-6 уровня. Заголовки этих уровней используются редко,
но если вы хотите, то можете расписать оформление каждого уровня отдельно.*/
h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover,h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover,h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover{
font-size:16px;
color: #3b98b0;
text-align:left;}
/*Оформление изображений на сайте. Картинка как ссылка.*/
a img {border: none;}
Картинка в тексте. Далее, в статьях мы зададим один отступ, а в модулях другой.
p img {margin:0;}
Оформление абзацев в тексте.
p {margin: 0 0 10px 0;}
Теперь можно приступать к оформлению блоков. Чтобы сделать задний план нашей веб-странички, я нарисовала в Фотошопе градиент, вырезала из него сверху вниз полоску шириной 2px и сохранила в файле body_bg.png . Файл положила в папку images нашего шаблона.
.clerk{
width:100%;
height:1px;
margin:0 auto;
float:left;
}
body {
margin:0 auto;
padding:0;
font: Arial, Helvetica, sans-serif ;
line-height:1.3;
color:#000;
text-align:left;
background-color:#fffff;
background-image: url('../images/body_bg.png');
background-repeat:repeat-x;
font-size: 16px;
}
#telo{
width:1000px;
margin:auto;
overflow:hidden;
}
#hapka{
height:100px;
width:100%;
margin:0;
}
#zagolovok{
height:100px;
width: 700px;
float: left;
margin-top:26px;
}
#zagolovok p{
font-family: 'Jura', sans-serif;
text-align:left;
font-size:1.688em;
font-weight:600;
color:#2FB125;
}
#logo{
margin-top:20px;
height:100px;
width: 300px;
float: right;
}
#logo p{
text-align:left;
font-family: 'Orbitron', sans-serif;
color:#2FB125;
font-size:2.188em;
font-weight:500;
}
#logo img{
position:absolute;
}
#left1{
height:300px;
width: 400px;
float: left;
}
#devyhka{
height:300px;
width: 200px;
float: left;
}
#right1{
height:300px;
width: 400px;
float: left;
}
#center{
height:300px;
width: 100%;
float: left;
}
#podvall{
height:50px;
width: 100%;
float:lfet;
}
Простой
Простой
