Skip to content

Instantly share code, notes, and snippets.

@h4

h4/01.index.html

Created February 28, 2012 12:25
Show Gist options
  • Save h4/1932233 to your computer and use it in GitHub Desktop.
Save h4/1932233 to your computer and use it in GitHub Desktop.
Download ZIP
Вёрстка макета страницы
Raw
01.index.html
<!DOCTYPE html>
<head>
<title>Star Wars</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Шапка сайта. Горизонтальный пояс -->
<div class="header">
<!-- Блок-обёртка для центрирования содержимого -->
<div class="wrapper">
<!-- Логотип -->
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<!-- Форма логина -->
<div class="login-form">
<form action="login">
<div class="form-row-set">
<p class="form-row">
<label>Логин</label>
<input type="text" name="login">
</p>
<p class="form-row">
<label>Пароль</label>
<input type="password" name="password">
</p>
</div>
<div class="form-row-set">
<p class="form-row form-row-links">
<a href="/resetpass/">Напомнить пароль</a>
<a href="/register/">Регистрация</a>
</p>
</div>
<p class="form-row form-row-controls">
<input type="submit" value="&rarr;">
</p>
</form>
</div>
</div>
</div>
<!-- Основная навигация. Горизонтальный пояс -->
<div class="main-nav">
<!-- Блок-обёртка для центрирования содержимого -->
<div class="wrapper">
<ul class="main-menu">
<li class="main-menu-item"><a href="#">Главная</a></li>
<li class="main-menu-item"><a href="#">Фильмы</a></li>
<li class="main-menu-item"><a href="#">Персонажи</a></li>
<li class="main-menu-item"><a href="#">Вселенная</a></li>
<li class="main-menu-item"><a href="#">Магазин</a></li>
</ul>
<!-- Форма поиска -->
<div class="search">
<form action="/search/">
<p class="form-row">
<input type="text" name="q">
</p>
<p class="form-row form-row-controls">
<input type="submit" value="&rarr;">
</p>
</form>
</div>
</div>
</div>
<!-- Блок основного содержимого. Горизонтальный пояс -->
<div class="content-box">
<!-- Блок-обёртка для центрирования содержимого -->
<div class="wrapper">
<!-- Боковая колонка. Идёт до контента, поскольку будет плавающей -->
<div class="sidebar">
<div class="sidebar-item">
<h2>Фильмы</h2>
<ul>
<li>Скрытая угроза</li>
<li>Атака клонов</li>
<li>Месть ситхов</li>
<li>Новая надежда</li>
<li>Империя наносит ответный удар</li>
<li>Возвращение джедая</li>
</ul>
</div>
<div class="sidebar-item">
<h2>Персонажи</h2>
<ul>
<li>Энакин Скайуокер</li>
<li>Бэйл Органа</li>
<li>Боба Фетт</li>
<li>C-3PO</li>
<li>Чубакка</li>
<li>Граф Дуку</li>
<li>Дарт Мол</li>
<li>Дарт Сидиус</li>
<li>Дарт Вейдер</li>
<li>Генерал Гривус</li>
<li>Хан Соло</li>
<li>Джабба Хатт</li>
<li>Джанго Фетт</li>
<li>Лэндо Калриссиан</li>
<li>Люк Скайуокер</li>
<li>Мейс Винду</li>
<li>Оби-Ван Кеноби</li>
<li>Падме Амидала</li>
<li>Палпатин</li>
<li>Принцесса Лея</li>
<li>Куай-Гон Джинн</li>
<li>R2-D2</li>
<li>Йода</li>
</ul>
</div>
</div>
<!-- Вторая боковая колонка. Идёт до контента, поскольку будет плавающей -->
<div class="additional-info">
<div class="additional-info-item">
<h2>Галерея</h2>
<div class="gallery-small">
<img src="img/pic/01.jpg" alt="" >
<img src="img/pic/02.jpg" alt="" >
<img src="img/pic/03.jpg" alt="" >
<img src="img/pic/04.jpg" alt="" >
<img src="img/pic/05.jpg" alt="" >
</div>
</div>
</div>
<!-- Основное содержимое. Идёт после плавающих блоков -->
<div class="content">
<h1>Звёздные войны</h1>
<p>Надпись «A long time ago, in a galaxy far, far away…»
(Давным-давно, в далёкой-далёкой галактике...), которая
появляется в начале каждого эпизода Звёздных войн, сразу
устанавливает временной период, в котором происходили все
события в Галактике и их соотношение к нашему времени. Эта фраза
отсылает нас к не раз слышанной в детстве «Давным-давно, в
далёкой-далёкой стране...» и другим, подобным ей вариантам (Для
русского человека более привычный вариант: «В тридевятом
царстве, в тридесятом государстве, за тридевять земель, за
тридесять морей».). Вероятно, таким способом говоря нам, что
фильмы могут быть истолкованы как мифы о будущем, а не буквально
произошедшие события. Лукас намеренно оставил нам возможность
додумывать детали.</p>
<p>Сага повествует о существовании «древней» цивилизации, о
вселенной, совершенно не относящейся ни к Земле ни нашей
галактике. И хотя в галактике Звёздных войн есть напоминающие
нас люди, они не являются выходцами с нашей планеты. Цивилизация
в галактике звёздных войн умеет путешествовать через бескрайние
просторы космоса, заниматься терраформированием, строить
экуменополисы и основывать колонии, так продолжается на
протяжение 200 000 лет.</p>
<p>Кроме обычных, свойственных научной фантастике, вещей, в этой
вселенной вполне спокойно уживаются с техническим прогрессом
сверхъестественные: рыцари, магия, ведьмы, принцессы и
причудливые виды, такие как эвоки, висти и другие.</p>
<p>Фильмы саги охватывают лишь два поколения, однако история
галактики растянулись на много больший период (от Сказаний о
джедаях до Наследия).</p>
<p>Последние романы серии Новый Орден джедаев рассказывает нам о
новой расе — юужань-вонгах, пришедших из другой галактики, хотя
до этого, большая часть пришельцев была только из этой.</p>
</div>
</div>
</div>
<!-- Подвал страницы. Горизонтальный пояс -->
<footer class="footer">
<!-- Блок-обёртка для центрирования содержимого -->
<div class="wrapper">
<!-- Отдельная колонка подвала. Задаёт ширину блока -->
<section class="footer-item">
<!-- Внутренний блок колонки. Задаёт поля и отступы блока -->
<div class="footer-item-content">
<h3>EXPLORE</h3>
<p>Episode I 3D</p>
<p>Encyclopedia</p>
<p>The Movies</p>
<p>The Clone Wars</p>
<p>Video Games</p>
</div>
</section>
<section class="footer-item">
<div class="footer-item-content">
<h3>PLAY</h3>
<p>Games</p>
<p>Activities</p>
<p>Soundboards</p>
</div>
</section>
<section class="footer-item">
<div class="footer-item-content">
<h3>WATCH</h3>
<p>Behind the Scenes</p>
<p>The Clone Wars</p>
<p>The Movies</p>
<p>Video Games</p>
<p>Humor</p>
<p>Products</p>
</div>
</section>
<section class="footer-item">
<div class="footer-item-content">
<h3>CONNECT</h3>
<p>Star Wars Blog</p>
<p>Fan Sites</p>
<p>Around the Web</p>
</div>
</section>
<section class="footer-item">
<div class="footer-item-content">
<h3>SHOP</h3>
<p>Products</p>
<p>Where to Buy</p>
<p>Licensees</p>
</div>
</section>
</div>
</footer>
</body>
</html>
Raw
base.css
body {
font:normal 13px/1.4 "Helvetica Neue", Verdana, sans-serif;
margin:0;
padding:0;
background:#000 url(http://cache.lego.com/upload/contentTemplating/StarWars2Dictionary/images/picD3F3FB82A2470EB83E9C353994C9B7B4.jpg) bottom center no-repeat fixed;
color:#EEC;
}
a:link {
color:#FF9;
}
a:hover {
color:#900;
}
h1,
h2,
h3,
h4 {
font-weight:normal;
margin-top:0;
}
Raw
layout.css
/*
Блок-обёртка для центрирования
*/
.wrapper {
min-width:800px;
max-width:1200px;
margin:0 auto;
}
/*
Шапка страницы.
Фиксированная высота.
Зачистка обтекания
*/
.header {
position:relative;
height:70px;
overflow:hidden;
background:#FF9;
border:1px solid #993;
border-width:0 0 1px;
}
.logo {
float:left;
margin-top:5px;
}
.login-form {
float:right;
position:relative;
color:#333;
}
/*
Форма логина. Абсолютное позиционирования для защиты от переполнения
*/
.login-form form {
position:absolute;
width:400px;
right:0;
top:5px;
text-align:right;
}
/*
«Строка» формы. Запрет переносов
*/
.login-form .form-row {
white-space:nowrap;
}
.login-form .form-row-set .form-row {
display:inline;
}
.form-row-links a {
color:#009;
}
.form-row-controls {
position:absolute;
right:-30px;
top:0;
margin:0;
}
/*
Основная навигация
*/
.main-nav {
height:40px;
background:#66F;
}
.main-nav .wrapper {
position:relative;
}
.main-menu {
margin:0;
padding:10px 0;
}
.main-menu-item {
display:-moz-inline-block;
display:inline-block;
margin:0 10px;
padding:0;
list-style:none;
}
/*
Поиск. Абсолютное позиционирование для предотвращения «сползания»
*/
.search {
position:absolute;
right:0;
top:10px;
}
.search .form-row {
margin:0;
}
.content-box {
padding-top:16px;
}
/*
Зачистка обтекания
*/
.content-box:after {
content:".";
clear:both;
overflow:hidden;
height:0;
display:block;
}
/*
Основное содержимое. Поля для формирования псевдо-колонки
*/
.content-box .content {
margin:0 300px 0 260px;
padding:8px;
background:#000;
border-radius:8px;
box-shadow:0 0 8px #FF9;
}
.content-box .sidebar {
float:left;
width:240px;
}
.content-box .sidebar-item {
padding:8px;
margin-bottom:16px;
background:#000;
border-radius:8px;
box-shadow:0 0 8px #FF9;
}
.content-box .additional-info {
float:right;
width:280px;
}
.content-box .additional-info-item {
padding:8px;
margin-bottom:16px;
background:#000;
border-radius:8px;
box-shadow:0 0 8px #FF9;
}
.footer {
margin-top:10px;
padding-top:10px;
padding-bottom:20px;
border-top:1px solid #990;
}
/*
Колонка подвала. Одна пятая ширины
*/
.footer-item {
width:20%;
float:left;
}
.footer-item-content {
margin:8px;
padding:8px;
background:#090909;
border-radius:8px;
}
Raw
style.css
@import url(base.css);
@import url(layout.css);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment