Простенький шаблон

[Advokat48]

Итак, это мой первый шаблон, созданный без каких-либо побочных программ, и с таблицей стилей css.
Время работы: 3-4 часа вместе с освоением стилей css
Количество использованных картинок: 3-4

Демо:

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Ну и сам код:

html код:

<HTML>
<HEAD>
<title>PRP Games</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</HEAD>
<BODY background="http://s018.radikal.ru/i502/1201/94/fa114f5d47ff.jpg" text="#FF0000" link="#FF0000" vlink="#0000FF">
<div id="image2" style="position:absolute; overflow:hidden; left:232px; top:81px; width:904px; height:244px; z-index:0"><img src="http://s53.radikal.ru/i140/1201/30/771a42f88c1d.jpg" border=0 width=904 height=244></div> 
<div id="image1" style="position:absolute; overflow:hidden; left:234px; top:123px; width:900px; height:200px; z-index:0"><img src="shapka.jpg" border=0 width=900 height=200></div>
<div class="page" style="position:absolute; overflow:hidden; top:83px; left:234px; z-index:0">
  <ul>
    <li><a href="#">Меню 1</a></li>
    <li><a href="http://prorpgames.5nx.ru">Меню 2</a></li>
    <li class="active"><a href="samp://127.0.0.1:7777">Меню 3</a></li>
    <li><a href="#">Меню 4</a></li>
    <li><a href="#">Меню 5</a></li>
	<li><a href="#">Меню 6</a></li>
  </ul>
</div>
<div id="block" style="position:absolute; overflow:hidden; left:232px; top:323px;">
<div class="head">
Блок 1
</div>
<div class="body">
Тут ваш текст
</div>
<div class="down">
by Advokat48
</div>
</div>
<div id="block" style="position:absolute; overflow:hidden; left:232px; top:572px;">
<div class="head">
Блок 1
</div>
<div class="body">
Тут ваш текст
</div>
<div class="down">
by advokat48
</div>
</div>
<div id="center" style="position:absolute; overflow:hidden; left:430px; top:323px;">
<div class="head_center">
PRP Games
</div>
<div class="body_center">
Тут Ваш текст
</div>
<div class="body_down">
Copyright © advokat48
</div>
</div>
</BODY>
</HTML>

css код:

*{
	margin:0;
	padding:0;
}
.page{
	margin:0 auto;
	width:995px;
}
ul{
	list-style:none;
	width:90.5%;
	height:40px;
	background:#000 url(http://sampstar.ucoz.org/imge/bg-nav.gif) top left repeat-x;
}
ul li{
	float:left;
	border-right:1px solid #333;
}
ul li a{
	display:block;
	height:40px;
	padding:0 35px;
	float:left;
	text-transform: uppercase;
	font:70%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
	color:#fff;
	text-decoration:none;
	text-align:center;
}
ul li a:hover,
ul li.active a{
	background:url(bg-button.gif) top left repeat-x;
}
#block{
     width: 200px;
}

.head {
     text-align:center; 
     color: #fff;
     background-color: #0274b0;
	 background-image: url(block_1.jpg);
     border: 2px solid #FFF;
     font-size: 15px;
     font-weight:bold;
     padding: 10px 0 7px 0;
}


.body {
     color:#fff; 
     background-color: #1c1c1c;
     border: 2px solid #FFF;
     border-top-style: none;
     font-size: 12px; 
     padding: 5px;
	 height:180px;
	 text-align:center;
}
.down {
	color:#fff;
	background-color: #1c1c1c;
	border: 2px solid #fff;
	border-top-style:none;
	font-size:10px;
	padding:5px;
	height:10px;
	text-align:center;
}
#center{
	width:706px;
}
.head_center{
	text-align:center;
	color:#FFF;
	background-color: #1c1c1c;
	border: 2px solid #FFF;
	font-size: 15px;
	font-weight:bold;
	padding:10px 0 7px 0;
}
.body_center {
	color:#fff;
	background-color:#1c1c1c;
	border:2px solid #FFF;
	border-top-style: none;
	font-size:12px;
	padding:5px;
	height:429px;
	text-align:center;
}
.body_down {
	color:#fff;
	background-color:#1c1c1c;
	border:2px solid #fff;
	border-top-style: none;
	font-size:10px;
	padding:5px;
	height:10px;
	text-align:center;
}

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Вот собственно и все, комментируем.