Уровень сложности исполнения: нужны навыки css hmlt
Весь интернет гудит о адаптивных сайтах, все хотят, чтобы их сайт хорошо отображался на разных устройствах. В этой статье раскажу как создавать очень простой шаблон «универсального» сайта.
Будем писать наш код на HTML5, поэтому можно использовать новые элементы, такие как header, footer и т. д. Лучше подключить плагин html5 shiv для корректного отображения сайта в IE и файл reset.css, чтобы сбросить ненужные стили. 1.Скачать исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
. 2.Сначала создадем блок «wrapper», секцию для хэдера с названием сайта, слоганом и навигацией. Блок с основным содержимым включает в себя раздел со статьями, раздел с последними новостями, раздел с дополнительной информацией и футер. Мы не создаём ничего особенного, просто делаем структуру страницы и добавляем названия классов и идентификаторов css, чтобы затем подключить стили.
<h2>Tagline <span>&</span> Some clever comment about the company</h2>
25
<nav>
26
<ahref="#">Home</a>
27
<ahref="#">About</a>
28
<ahref="#">Portfolio</a>
29
<ahref="#">Blog</a>
30
<ahref="#">Contact</a>
31
<divclass="clearfix"></div>
32
</nav>
33
</header>
34
35
<sectionid="main-content">
36
<divid="featured">
37
<h3>Featured Article :</h3>
38
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> <ahref="#">Continue Reading →</a></p>
39
</div> <!-- END Featured -->
40
<hr/>
41
<divid="latest">
42
<sectionclass="left-col">
43
<h3>Latest Articles :</h3><br/>
44
<h4><ahref="#">Blog 1</a></h4>
45
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <ahref="#">Continue Reading →</a></p>
46
<h4><ahref="#">Blog 2</a></h4>
47
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <ahref="#">Continue Reading →</a></p>
48
<h4><ahref="#">Blog 3</a></h4>
49
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <ahref="#">Continue Reading →</a></p>
50
</section> <!-- END Left Column -->
51
52
<asideclass="sidebar">
53
<h4><ahref="#">Archives</a></h4>
54
<ul>
55
<li><ahref="#">July 2010</a></li>
56
<li><ahref="#">August 2010</a></li>
57
<li><ahref="#">September 2010</a></li>
58
</ul>
59
<br/>
60
<h4><ahref="#">Categories</a></h4>
61
<ul>
62
<li><ahref="#">Articles</a></li>
63
<li><ahref="#">Tutorials</a></li>
64
<li><ahref="#">Roundups</a></li>
65
</ul>
66
<br/>
67
<h4><ahref="#">Social</a></h4>
68
<ul>
69
<li><ahref="#">Facebook</a></li>
70
<li><ahref="#">Twitter</a></li>
71
<li><ahref="#">RSS</a></li>
72
<li><ahref="#">Google+</a></li>
73
</ul>
74
</aside>
75
</div> <!-- END Latest -->
76
<divclass="clearfix"></div>
77
<hr/>
78
<divid="about">
79
<h3>About</h3>
80
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.<br/><br/>
81
82
Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
3.Добавим CSS Как вы заметили, в разделе head подключили шрифт Droid serif из Google Web Fonts API. Теперь установим общие стили и стили для типографики
Давайте добавим стили для #wrapper, установим ему резиновую ширину 90% и максимальную ширину (значение max-width). Добавим остальные стили, чтобы сделать нашу страницу более привлекательной для посетителей. В основной секции у нас две колонки, помните, что любая ширина должна задаваться в процентах, чтобы быть резиновой. Свойство CSS transitions, которое здесь прописано, не будет работать, пока мы не подключим media queries.
Теперь наша страница должна выглядеть таким образом:
4.Подключим к HTML-документу ещё один CSS-файл с названием media-queries.css. В него поместим свойства для различных размеров экранов устройств, это будут свойства для заголовков h1 , h2 и для колонок.
Благодаря свойству CSS transitions, которое добавили в файл CSS, название сайта, слоган и другие текстовые элементы будут изменять свой размер плавно, без резких «скачков». Это не единственный способ создания адаптивного дизайна, а всего лишь вариант автора статьи.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.