Верстать будем на основе обычного двухколоночного макета, где присутствуют четыре элемента: шапка, левая колонка, правая колонка и подвал. Верстка стандартная, поэтому особо комментировать тут нечего. Ели будут вопросы, то пишите.
Внутри тега body подключаем стили:
<link rel="stylesheet" type="text/css" href="style.css" />
Содержимое файла стилей:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 1px;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
body{
padding:4px 0;
background-color:#C9E7FA;
font:11px Verdana, Geneva, sans-serif;
text-align:center;
}
.container{
width:1004px;
margin:0 auto;
padding:0 0 20px 0;
text-align:left;
background:#ebf6fd url(img/bg_admin_under_header.gif) 0 0px repeat-x;
}
/* === HEADER === */
#header{
height:110px;
position:relative;
background: url(img/bg_admin_header.gif) 0 0 no-repeat;
color: #ff6c17;
}
#header .menu_top{
position: absolute;
top:4px;
right:10px;
}
#header .menu_top a{
font:bold 12px Verdana, Geneva, sans-serif;
color:#F00;
text-decoration:none;
}
#header .menu_top a:hover{
color:#00a5e5;
}
#header h1{
position:absolute;
top:42px;
left:180px;
font:bold 28px Verdana, Geneva, sans-serif;
}
#header h1 span{
color:#00a5e5;
}
#header p.person_top{
position:absolute;
top:72px;
right:10px;
font:bold 11px Verdana, Geneva, sans-serif;
color: #C0C0C0;
}
#header p.person_top .fiospan{
color:#999;
}
/* === MENU === */
#menu_left{
width:220px;
float:left;
margin:0 0 10px 7px;
}
#menu_left .top{
height:32px;
background: url(img/bg_admin_menu_top.gif) 0 0 no-repeat;
}
#menu_left .bottom{
height:32px;
background:url(img/bg_admin_menu_bottom.gif) 0 0 no-repeat;
}
#menu_left .midle{
padding:0 5px 0 10px;
background: url(img/bg_admin_menu_middle.gif) repeat-y;
}
/* === CONTENT === */
#cont_admin_content{
width:760px;
margin:0 0 0 235px;
}
#admin_content{
padding:0 4px;
}
/* === FOOTER === */
#admin_footer{
width:100%;
height:62px;
overflow:hidden;
background:#ebf6fd url(img/bg_admin_under_header.gif) left 2px repeat-x;
}
#admin_footer p{
font:bold 9px;
color:#999;
text-align:right;
}
Содержимое HTML-файла:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка каркаса CMS</title>
<!-- подключаем стили -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<!-- шапка -->
<div id="header">
<p class="menu_top">
<a id="id_admin_exit" href="#">Выход на сайт</a>
</p>
<h1>FAN<span>CODE</span>.CMS</h1>
<p class="person_top">
Пользователь: <span class="fiospan">ФИО пользователя</span>
</p>
</div>
<!-- menu -->
<div id="menu_left">
<div class="top"></div>
<div class="midle">
<!-- содержимое menu -->
</div>
<div class="bottom"></div>
</div>
<!-- content -->
<div id="cont_admin_content">
<div id="admin_content" class="admin_content">
<!-- содержимое content -->
</div>
</div>
<!-- footer -->
<div id="admin_footer">
<p><!-- содержимое footer --></p>
</div>
</div>
</body>
</html>
Если посмотреть на готовый пример, то слева у нас будет основное меню, а справа контент.
