body{
background-color:#e2e2e2;
}
#main{
width:800px;
min-height:400px;
background-color:#fefefe;
margin:auto;
overflow:hidden;
border:1px solid #c0c0c0;
}
#head{
height:200px;
margin:1%;
background-color:#eaeaea;
border:1px solid #bfbfbf;
background:url("http://localhost/ampera.jpg");
background-repeat:no-repeat;
background-position:center;
}
#menu{
height:34px;
background-color:#4d4d4d;
margin-left:1%;
margin-right:1%;
border:1px solid #000;
}
#left,#center,#right{
float:left;
margin:1%;
background-color:#f3f3f3;
min-height:500px;
}
#left,#right{
width:24%;
}
#center{
width:46%;
}
.tab{
min-height:100px;
background-color:#e0e0e0;
border:1px solid #c0c0c0;
margin:10px;
padding:5px;
}
.tab h2{
font-size:14px;
line-height:24px;
margin:0;
}
.tab ol{
font-size:12px;
margin:0;
}
#menu a{
display:block;
float:left;
height:34px;
line-height:34px;
padding-left:25px;
padding-right:25px;
color:#e0e0e0;
text-decoration:none;
font-family:Verdana;
font-size:12px;
font-weight:bold;
border-right:1px solid #404040;
}
#menu a:hover{
background-color:#868686;
border-right:1px solid #5b5b5b;
color:#fff;
}
#menu a[data-pos="first"]{
background-color:#4d0000;
}
#menu a[data-pos="first"]:hover{
background-color:#860000;
}
#head h2{
font-family:Verdana;
font-size:24px;
text-shadow:#313f6c 2px 1px 1px;
line-height:200px;
margin:0;
margin-left:20px;
color:#e5e6e8;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mans dokuments</title>
<link rel="stylesheet" href="stils.css" type="text/css">
</head>
<body>
<div id="main">
<div id="head">
<h2>AMPERA</h2>
</div>
<nav id="menu">
<a href="#" data-pos="first">link1</a>
<a href="#" data-pos="sec">link2</a>
<a href="#" data-pos="tre">link3</a>
</nav>
<div id="left">
<div class="tab">
<h2>nosaukums</h2>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</div>
<div class="tab">
<h2>nosaukums</h2>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</div>
<div class="tab">
<h2>nosaukums</h2>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</div>
</div>
<div id="center">
<div class="tab">
<h2>nosaukums</h2>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</div>
<div class="tab">
<h2>nosaukums</h2>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</div>
<div class="tab">
<h2>nosaukums</h2>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</div>
</div>
<div id="right">
<div class="tab">
<h2>nosaukums</h2>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</div>
<div class="tab">
<h2>nosaukums</h2>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</div>
<div class="tab">
<h2>nosaukums</h2>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</div>
</div>
</div>
</body>
</html>
Комментариев нет:
Отправить комментарий