Нажмите Tab, чтобы продолжить
→
01. <a href="#" target="_top"> 02. <h1 class="logotype" target="_blank">W3C Стандарты</h1> 03. <p>Нажмите, что бы светлое будущее открылось в новом окне.</p> 04. </a>
...
01. <!DOCTYPE HTML>
02. <html lang="ru">
03. <head>
04. <meta charset="UTF-8">
05. <title>HTML 5 layout</title>
06. </head>
07. <body>
08. <section>
09. <!--Содержимое основной секции сайта-->
10. </section>
11. <section>
12. <!--Содержимое дополнительной секции сайта-->
13. </section>
14. <aside>
15. <!--Реклама-->
16. </aside>
17. </body>
18. </html>
01. <section class="comments">
02. <header>
03. <h1>HTML5</h1>
04. <nav>
05. <ol>
06. <li><a href="uri1">Пункт 1</a></li>
07. <li><a href="uri2">Пункт 2</a></li>
08. </ol>
09. </nav>
10. </header>
11. <article>
12. <time pubdate datetime="2010-03-20">22.03.2010</time>
13. <p>Мы добавили тесты.</p>
14. </article>
15. <article>
16. <time pubdate datetime="2010-03-22">20.03.2010</time>
17. <p>Мы приняли решение о внедрении TDD</p>
18. </article>
19. <footer>
20. <p class="copyright">© Web Saints</p>
21. </footer>
22. </section>
01. <form action="" method="post">
02. <fieldset>
03. <label for="datalist">datalist:</label>
04. <input type="url" name="datalist" list="urls">
05. <datalist id="urls">
06. <option label="comment 1" value="http://www.cite1.com">
07. <option label="comment 2" value="http://www.cite2.com">
08. </datalist>
09. </fieldset>
10. </form>
01. <!--[if IE]>
02. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
03. <![endif]-->
01. <!--[if IE]>
02. <script type="text/javascript">
03. document.createElement('header');
04. document.createElement('nav');
05. document.createElement('section');
06. document.createElement('article');
07. document.createElement('aside');
08. document.createElement('footer');
09. document.createElement('time');
10. </script>
11. <![endif]-->
.container{display: "a.b"
"..." /1em
"c.d"
* 1em *
}
.block_1 { position: a; }
.block_2 { position: b; }
.block_3 { position: c; }
.block_4 { position: d; }
<div class="container">
<div class="block_1">A</div>
<div class="block_2">B</div>
<div class="block_3">C</div>
<div class="block_4">D</div>
</div>
.flex{
display: box;
box-orient: horizontal;
box-align: stretch;
width:100%;
}
.flex>div{
box-flex: 1;
}
.flex>div+div{
box-flex: 0;
}
.flex>div+div+div{
box-flex: 1;
}
-moz-column-count:3;
-moz-column-rule:1px solid #ccc;
-moz-column-gap:30px;
-webkit-column-count:3;
-webkit-column-gap:30px;
-webkit-column-rule:1px solid #ccc;
По неизвестной причине телекран в комнате был установлен не так, как принято. Он помещался не в торцовой стене, откуда мог бы обозревать всю комнату, а в длинной, напротив окна. Сбоку от него была неглубокая ниша, предназначенная, вероятно, для книжных полок, – там и сидел сейчас Уинстон. Сев в ней поглубже, он оказывался недосягаемым для телекрана, вернее, невидимым. Подслушивать его, конечно, могли, но наблюдать, пока он сидел там, – нет. Эта несколько необычная планировка комнаты, возможно, и натолкнула его на мысль заняться тем, чем он намерен был сейчас заняться.
Но кроме того, натолкнула книга в мраморном переплете. Книга была удивительно красива. Гладкая кремовая бумага чуть пожелтела от старости – такой бумаги не выпускали уже лет сорок, а то и больше. Уинстон подозревал, что книга еще древнее. Он приметил ее на витрине старьевщика в трущобном районе (где именно, он уже забыл) и загорелся желанием купить. Членам партии не полагалось ходить в обыкновенные магазины (это называлось «приобретать товары на свободном рынке»), но запретом часто пренебрегали: множество вещей, таких, как шнурки и бритвенные лезвия, раздобыть иным способом было невозможно. Уинстон быстро оглянулся по сторонам, нырнул в лавку и купил книгу за два доллара пятьдесят. Зачем – он сам еще не знал. Он воровато принес ее домой в портфеле. Даже пустая, она компрометировала владельца.
Намеревался же он теперь – начать дневник. Это не было противозаконным поступком (противозаконного вообще ничего не существовало, поскольку не существовало больше самих законов), но если дневник обнаружат, Уинстона ожидает смерть или, в лучшем случае, двадцать пять лет каторжного лагеря. Уинстон вставил в ручку перо и облизнул, чтобы снять смазку. Ручка была архаическим инструментом, ими даже расписывались редко, и Уинстон раздобыл свою тайком и не без труда: эта красивая кремовая бумага, казалось ему, заслуживает того, чтобы по ней писали настоящими чернилами, а не корябали чернильным карандашом. Вообще-то он не привык писать рукой. Кроме самых коротких заметок, он все диктовал в речепис, но тут диктовка, понятно, не годилась. Он обмакнул перо и замешкался. У него схватило живот. Коснуться пером бумаги – бесповоротный шаг. Мелкими корявыми буквами он вывел:
.body{
columns:3;
column-gap:0.5in;
}
.img{float:page top right; width:3gr;}
@font-face {
font-family: 'LemonChickenRegular';
src: url('LEMONCHI-webfont.eot');
src: local('LemonChickenRegular'), url('LEMONCHI-webfont.woff') format('woff'),
url('LEMONCHI-webfont.ttf') format('truetype'),
url('LEMONCHI-webfont.svg#webfont') format('svg')
}
h1{
text-align:center;
font: 160px/170px 'LemonChickenRegular', Arial, sans-serif;
}
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:url("ass.png") 25% 100% no-repeat,
url("happy.png") 75% 100% no-repeat;
border-width: 0 5 0 5;
-webkit-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;
-moz-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;
border-image: url(toolButton.png) 0 5 0 5 stretch stretch;
text-shadow:1px 1px 0 #999,
-5px -25px 20px #e0e0e0;
box-shadow:0 0 20px #400;
-webkit-box-shadow: 0 0 40px #999;
-moz-box-shadow: 0 0 40px #999;
background-color:rgba(255,255,255,.75);
opacity:.75
.page{
background-color:#fff;
outline:none;
height:0;
opacity:0;
overflow:hidden;
-webkit-transition:opacity .5s ease-in;
-moz-transition:opacity .5s ease-in;
}
.page:focus{
opacity:1;
height:100%;
width:100%;
}
-o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-webkit-transform: rotateY(30deg);
.plane{
background:url("plane.png") 0 0 no-repeat;
-webkit-animation: fly 3s infinite linear;
}
@-webkit-keyframes fly {
from { -webkit-transform: translate(200px,400px); }
to { -webkit-transform: translate(900px,-400px); }
}