Помогите пожалуйста

VooDooSto · October 15, 2012

Ребят, помогите пожалуйста свестрать сайт с psd исходника. (html5)

Не как не могу понять, что и как.

Просто нужно что то, от чего можно оттолкунуться.

Ссылка на psd исходник: http://rghost.ru/40953515

Kray Storm · October 15, 2012

Тебе повезло! Бывает же...

Kray Storm · October 15, 2012

Глянул шаблон (ибо любопытный).

Возможно я ошибаюсь, но по-моему это тот случай, когда все настолько просто, что на поставленный вопрос даже нельзя нормально ответить.

А в чем сложность? Текст/фон/списки... Или я тут за деревом леса не увидел?

Будь я профи, то сказал бы - начни с изучения основ верстки.

ils · October 15, 2012

Держи. Сегодня я добрый.


<!doctype html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>My First Page</title>
		<style>
			* {
				margin:0;
				padding:0;
			}
			body {
				font-family: arial;
				font-size: 14px;
			}
			.wrapper {
				margin: 0 auto;
				width: 960px;
			}
			.header {
				background: #D8D8BF;
				color: #333333;
				padding: 30px 0;
			}
			.header h1 {
				font-size: 40px;
			}
			.header span {
				color: #A92608;
			}
			.header p {
				color: #999999;
			}
			.menu {
				margin: 1px 0 20px 0;
				background-image: -o-linear-gradient(top, #E7E6D8, #D9D9C0);
				background-image: -ms-linear-gradient(top, #E7E6D8, #D9D9C0);
				background-image: -webkit-linear-gradient(top, #E7E6D8, #D9D9C0);
				background-image: -moz-linear-gradient(top, #E7E6D8, #D9D9C0);
				background-image: linear-gradient(to bottom, #E7E6D8, #D9D9C0);
				overflow: hidden;
			}
			.menu ul {
				list-style-type: none;
			}
			.menu li {
				float: left;
				margin: 5px 10px 5px 0;
			}
			.menu a {
				color: #000000;
				text-decoration: none;
			}
			.content {
				float: left;
				width: 760px;
			}
			.content h2 {
				color: #A92608;
				font-size: 18px;
			}
			.about {
				font-size: 12px;
			}
			.content p {
				margin: 10px 0;
			}
			.sidebar {
				margin-left: 760px;
			}
			.sidebar h3 {
				background: #E8E8E8;
				border-radius: 5px;
				font-weight: normal;
				padding: 4px;
			}
			.sidebar ul {
				list-style-position: inside;
				margin-bottom: 10px;
			}
			.sidebar li {
				border-bottom: solid 1px #cccccc;
				padding: 4px;
			}
			.sidebar a {
				color: #A92608;
				text-decoration: none;
			}
			.footer {
				background: #e6e6e6;
				padding: 10px 0;
				clear: both;
				text-align: center;
				color: #676767
			}
		</style>
	</head>
        <body>
	<div class="header">
		<div class="wrapper">
			<h1>Заголовок <span>сайта<span></h1>
			<p>Описание</p>
		</div>
	</div>
	<div class="menu">
		<ul class="wrapper">
			<li><a href="">Один</a></li>
			<li><a href="">Два</a></li>
			<li><a href="">Три</a></li>
			<li><a href="">Четыре</a></li>
		</ul>
	</div>
	<div class="wrapper">
		<div class="content">
			<h2>Название статьи</h2>
			<div class="about">Бла-Бла-Бла</div>
			<p>Бла-Бла-Бла</p>
			<p>Бла-Бла-Бла</p>
			<p>Бла-Бла-Бла</p>
		</div>
		<div class="sidebar">
			<h3>Заголовок 1</h3>
			<ul>
				<li><a href="">Один</a></li>
				<li><a href="">Два</a></li>
				<li><a href="">Три</a></li>
				<li><a href="">Четыре</a></li>
			</ul>
			<h3>Заголовок 2</h3>
			<ul>
				<li><a href="">Один</a></li>
				<li><a href="">Два</a></li>
				<li><a href="">Три</a></li>
				<li><a href="">Четыре</a></li>
			</ul>
		</div>
	</div>
	<div class="footer">
		Copyright
	</div>
        </body>
</html>

Специально для ТС:

Начни с изучения основ верстки

Edited October 15, 2012 by ils

USF · October 15, 2012

ils · October 15, 2012

И что это означает?

Sign In

Помогите пожалуйста

Question

VooDooSto

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Kray Storm

Link to comment

Share on other sites

Kray Storm

Link to comment

Share on other sites

ils

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

ils

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information