Налаштування окремих елементів
- Шапка сайту. У верхньому колонтитулі <header> додайте кілька елементів:
логотип – <a class=”logo”>
кнопка приховати меню – <div class=”nav-toggle”>
головне меню – <ul id=”menu”>
пошук сайту – <form id=”searchform”>
- Блок зі змістом тексту. Скористайтеся елементом <article id=”post-1″ class=”post”> для обгортання статті.
- Бічна колонка. Скористайтеся <aside> для розташування переліку категорій, кліка для розсилки та останніх публікацій.
- Як зробити адаптивне меню для сайту? Додайте в розмітку </body> елемент <jQuery>. Цей код змінює висоту меню, підганяючи вміст під необхідні розміри.
Створення міні-галереї
Знаючи, як зробити адаптивний сайт html, css, можна наповнити свій ресурс корисним і цікавим контентом, відповідним для будь-яких гаджетів, наприклад, міні-галереєю.
Для поповнення HTML кількома картинками скористайтеся такими елементами:
<img src=”../images/1.jpg” title=”Дерева</em><em> листочки</em><em>…” />
</div>
<div>
<img src=”../images/2.jpg” title=”Зима</em><em>” />
</div>
А для того, щоб кожне зображення взаємодіяло з різними дозволами і змінювало свій розмір, скористайтесь CSS3:
div.image_gallery {
margin: 0 auto;
width: 1000px;
min-width: 500px;
}
img {
max-width: 48%;
padding: 1%; /* невеликі відступи для зображень */
}
На цьому все, ваша міні-галерея готова. Тепер ви знаєте, як зробити сайт адаптивним для різних пристроїв.
