Форум Работа и услуги для вебмастера Дизайн

Дешевая качественная верстка

L
На сайте с 23.10.2009
Offline
9
larik
418

Качественная HTML-верстка от 10$

Валидно, кроссбраузерно.

Пример кода:

-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" xml:lang="en" lang="en">	

<head>

<title>title</title>

	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

	<body>

		<div id="main">

			<div id="header">

				<div class="header">

					<div class="main_logo"><a href="#"></a></div>

					<ul>

						<li><a href="#">О компании</a></li>

						<li><a href="#">Новости</a></li>

						<li><a href="#">Отраслевые<br /> решения</a></li>

						<li><a href="#">Выполненые<br /> проекты</a></li>

						<li><a href="#">Методические<br /> материалы</a></li>

						<li><a href="#">Прайс-лист</a></li>

						<li><a href="#">Нашы<br /> партнеры</a></li>

						<li><a href="#">Контыкты</a></li>

					</ul>

				</div>	

			</div>		

			<div id="content">

				<div class="col_main">

					<div class="first_block">

						<h1>Наши новости</h1>

						<dl class="news_list">

							<dt>8.04.2008</dt>

								<dd><a href="#">Расписание технических тренингов на апрель</a><img src="images/blue_arrow.gif" alt="" /></dd>

							<dt>8.04.2008</dt>

								<dd><a href="#">Расписание технических тренингов на апрель</a><img src="images/blue_arrow.gif" alt="" /></dd>

							<dt>8.04.2008</dt>

								<dd><a href="#">Расписание технических тренингов на апрель</a><img src="images/blue_arrow.gif" alt="" /></dd>

						</dl>

						<a href="#" class="more_a">все новости</a>

						<h1>Вопрос/Ответ</h1>

						<dl class="question_block">

							<dt>Побережье, как бы это ни казалось парадоксальным, иллюстрирует живописный цикл, для этого необходим заграничный паспор?</dt>

								<dd>Побережье, как бы это ни казалось парадоксальным, иллюстрирует живописный цикл, для этого необходим заграничный паспор...</dd>

						</dl>

						<a href="#" class="more_a">подробнее</a>

					</div>

					<div class="block">

						<h1>О компании</h1>

						<p>

							Побережье, как бы это ни казалось парадоксальным, иллюстрирует живописный цикл, для этого необходим заграничный паспорт, действительный в течение трех месяцев с момента завершения поездки со свободной страницей для визы. В турецких банях не принято купаться раздетыми, поэтому из полотенца сооружают юбочку, а визовая наклейка жизненно превышает попугай, местами ширина достигает 100 метров. Очаг многовекового орошаемого земледелия однородно берёт холодный комбинированный тур, а также необходима справка о прививке против бешенства и результаты анализа на бешенство через 120 дней и за 30 дней до отъезда. 

						</p>

						<p>

							Озеро Титикака выбирает шведский кустарничек, конечно, путешествие по реке приятно и увлекательно. Акцентируется не красота садовой дорожки, а отгонное животноводство связывает особый вид куниц, а Хайош-Байа славится красными винами. 

						</p>

						<a href="#" class="more_a">подробнее</a>

						<h1>Выполненые проекты</h1>

						<div class="project_list">

							<ul>

								<li><span>1</span><a href="#">Название проекта и пара слов срока-ссылка дальше</a></li>

								<li><span>2</span><a href="#">Название проекта и пара слов срока-ссылка дальше</a></li>

								<li><span>3</span><a href="#">Название проекта и пара слов срока-ссылка дальше</a></li>

								<li><span>4</span><a href="#">Название проекта и пара слов срока-ссылка дальше</a></li>

								<li><span>5</span><a href="#">Название проекта и пара слов срока-ссылка дальше</a></li>

							</ul>

							<a href="#" class="more_a">все проекты</a>

						</div>

					</div>	

				</div>

				<div class="last_block">

					<h1>Прайс-лист</h1>

					<div class="price_block">

						<div class="price_block_corner">

							<div class="price">

								<div class="price_size">225mb</div>

								Прайс-лист от 8.04.09

								<a href="#">скачать</a>

							</div>

						</div>

					</div>

				</div>	

			</div>

	 		<div class="footer_push"></div>

	  </div>

	  <div id="footer">

	  	<div class="footer_content">

	    	<div class="copyrt_block">

	    		копирайты и контакты

	  	  </div>

				<ul class="banner_block">

					<li><a href="#"><img src="images/baner_1.gif" alt="" /></a></li>

					<li><a href="#"><img src="images/baner_1.gif" alt="" /></a></li>

					<li><a href="#"><img src="images/baner_1.gif" alt="" /></a></li>

				</ul>

	    </div>

		</div>

	</body>

</html>

-CSS 


/* -------------------------------

	Reset style 

------------------------------- */



body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,blockquote,table,th,td,dl,dt,dd{margin:0; padding:0;} 

	

img{border:0;}



ul,ol{list-style:none;}

 

table{border:0px; border-collapse:collapse;}



/* -------------------------------

	Base font 

------------------------------- */



body{font: normal 11px Tahoma; color:#262626;}



h1{margin:0 0 25px 0; padding:0 0 10px 0;  background:url('../images/title_line.gif') no-repeat 0 100%; color:#E02C03; font-size:15px; font-family:Arial;}

h2,h3,h4,h5,h6,strong,th{font-weight:bold;}



a{color:#2A7CD9; text-decoration:underline;}

a:visited{}

a:hover{text-decoration:none;}

a:active{}



p{padding:0 0 15px 0;}



/* -------------------------------

	Base style 

------------------------------- */



html, body{width:100%; height:100%; text-align:center;}



#main{min-width:800px; max-width:1280px;	min-height:100%; height:auto !important; height:100%; margin:0 auto -85px;  text-align:left;

	background:url('../images/main_bg.jpg') no-repeat 6% 100%;

	width: expression(document.body.clientWidth > 800 ? "100%" : "1000px")}



	#header{height:370px; background:url('../images/head_bg.jpg') repeat-x 0 100%; border-top:solid #007DA9 4px;}

	.header{height:370px; background:url('../images/head_bg_left.jpg') no-repeat 0 100%;}

	

	#content{clear:both; padding:20px 0 0 0;}

		

		.col_main{float:left; width:75%;}

			.first_block{float:left; width:38%; padding:0 0 100px 0;}

			.block{margin-left:38%; padding:0 0 100px 0;}

		.last_block{float:right; width:25%; padding:0 0 100px 0;}

								

#footer{clear:both; min-width:800px; max-width:1280px; height:85px; margin:0 auto;

	width: expression(document.body.clientWidth > 800 ? "100%" : "1000px")}

.footer_push{clear:both; width:100%; height:85px; margin:0 auto; background:url('../images/footer_bg_1.jpg') repeat-x 50% 100%;}

	.footer_content{width:100%; height:85px; margin:0 auto; text-align:left; background: url('../images/footer_bg.jpg') no-repeat 100% 100%;}



/* -------------------------------

	Menu 

------------------------------- */



#header ul{float:right; margin:61px 0 0 0; padding:0 0 268px 0; background:url('../images/head_bg_right.jpg') no-repeat 100% 100%;}

#header li{float:left; margin:0 0 0 32px;}

#header li a{float:left; height:36px; border-bottom:solid #FDD444 5px; color:#D17202; font-size:13px; text-decoration:none; font-weight:bolder; line-height:13px;}

#header li a:hover{border-bottom:solid #AD912E 5px; color:#F83206;}



/* -------------------------------

	Form 

------------------------------- */



/* -------------------------------

	Template style

------------------------------- */

.first_block h1{margin-left:55px;}

.first_block .more_a{margin-left:55px;}



.main_logo a{position:absolute; width:288px; height:86px; margin:140px 0 0 30%; background:url('../images/main_logo.gif') no-repeat 0 0;}



.news_list{margin:0 10px 0 55px;}

	.news_list dt{padding:0 0 10px 0; font-weight:bolder;} 

	.news_list dd{margin:0 0 20px 0;} 

	.news_list img{margin:0 0 0 10px;}



.more_a{display:block; padding:0 0 30px 0; font-weight:bolder;}



.question_block{margin:0 30px 0 55px;} 

	.question_block dt{padding:0 0 15px 0;}

	.question_block dd{padding:0 0 15px 0; color:#898989; font-style:italic;}



.project_list{margin:0 0 30px 0; padding:30px 0 0 20px; background:#EBEBE9 url('../images/yellow_line.gif') repeat-x 0 0;}	

	.project_list li{margin:0 0 15px 0; padding:4px 0 10px 9px; background:url('../images/red_bulet.jpg') no-repeat 0 0;}	

	.project_list li span{padding:0 25px 0 0; color:#fff; font-size:15px;}

	.project_list li a{color:#262626; text-decoration:none; font-weight:bolder;}

	.project_list li a:hover{text-decoration:underline;}

	.project_list .more_a{padding:0 0 20px 0;}



.last_block h1{margin-left:30px;}



.price_block{ margin:0 0 0 30px; border-top:solid #C2BFC6 6px; background:#FBD949 url('../images/yellow_bg.jpg') repeat-y 0 0;}	

	.price_block_corner{padding:20px 0 35px 15px; background:url('../images/yellow_corner.jpg') no-repeat 0 100%;}

	.price{padding:20px 40px 20px 50px; background:url('../images/archiv_ico.jpg') no-repeat 0 0; font-weight:bolder;}

	.price_size{position:absolute; margin:33px 0 0 -45px; font-weight:normal !important;}

	.price a{display:block; padding:5px 0 0 0; text-align:right; color:#CE3F2E; font-weight:bolder;}



.copyrt_block{float:left; margin:0 auto; padding:40px 0 0 75px;}



.banner_block{float:right; padding:30px 50px 0 0;}

	.banner_block li{float:left; margin:0 0 0 15px;}

ICQ:576857770

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий