Макет блога на чистом CSS будет состоять из заголовка, меню навигации, основной области содержимого и нижнего колонтитула. Заголовок обычно содержит название блога и, возможно, логотип. Меню навигации позволит пользователям легко перемещаться по различным разделам блога. В основной области контента будут отображаться сообщения блога. Нижний колонтитул обычно содержит дополнительную информацию, такую как ссылки на профили блога в социальных сетях и уведомление об авторских правах.
Используемые классы:
- pure-g: создает контейнер для сетки, и все прямые дочерние элементы контейнера будут рассматриваться как элементы сетки.
- pure-u-1-3: указывает, что элемент должен занимать 1/3 доступной ширины в сетке.
- pure-menu: это класс для создания навигационного меню.
- pure-menu-heading: это класс для заголовка навигационного меню.
- pure-menu-list: это класс для создания неупорядоченного списка пунктов меню.
- pure-menu-item: это класс для каждого элемента списка в меню.
- pure-menu-link: это класс для элементов привязки в пунктах меню.
- pure-button: это класс для создания кнопки.
- pure-button-primary: этот класс используется для создания основной кнопки.
- pure-u-1: этот класс используется для создания ячейки сетки, которая охватывает всю ширину контейнера.
- pure-u-md-1-2: этот класс используется для создания ячейки сетки, которая занимает половину ширины контейнера на экранах среднего размера и выше.
Синтаксис:
<div class="pure-g">
<div class="pure-form">
...
</div>
</div> Пример 1. Макет состоит из заголовка, содержащего заголовок и подзаголовок блога, и раздела для отображения сообщений блога. Каждое сообщение в блоге включает заголовок, дату и содержание. Сообщения в блоге располагаются в две колонки с использованием сетки Pure.css.
HTML
<!DOCTYPE html><html><head><linkrel="stylesheet"href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"><style>/* Custom styles */.blog {margin: 0 auto;max-width: 800px;}.blog-header {text-align: center;padding: 20px;}.blog-title {font-size: 36px;font-weight: bold;}.blog-subtitle {font-size: 24px;color: gray;}.blog-post {margin-bottom: 20px;padding: 20px;border: 1px solid lightgray;}.blog-post-title {font-size: 28px;margin-bottom: 10px;}.blog-post-date {font-size: 18px;color: gray;margin-bottom: 20px;}.blog-post-content {font-size: 18px;line-height: 1.5;}</style></head><body><divclass="blog"><headerclass="blog-header pure-g"><divclass="pure-u-1"><h1class="blog-title">Welcome to GFG</h1><pclass="blog-subtitle">Thoughts and musings on various topics</p></div></header><divclass="blog-posts pure-g"><divclass="pure-u-1 pure-u-md-1-2"><articleclass="blog-post"><h2class="blog-post-title">Feature 1</h2><pclass="blog-post-date">January 1, 2021</p><pclass="blog-post-content">The website offers a variety of articlesand tutorials on different programminglanguages, data structures, and algorithms,making it a great resource for anyonelooking to improve their coding skills.The website also provides a platform forusers to test their skills by solvingpractice problems, which are accompaniedby detailed solutions and explanations.</p></article></div><divclass="pure-u-1 pure-u-md-1-2"><articleclass="blog-post"><h2class="blog-post-title">Feature 2</h2><pclass="blog-post-date">January 2, 2021</p><pclass="blog-post-content">The website is well-organized and easyto navigate, making it easy for usersto find the information they need. Thearticles and tutorials are well-writtenand easy to understand, making themaccessible to users of all skill levels.The website also has a search bar, whichallows users to quickly find specificinformation or topics.</p></article></div></div></div></body></html>
Выход:
Пример 2. Этот код создаст базовый макет блога с использованием библиотеки Pure CSS. Макет использует классы сетки для разделения страницы на столбцы и строки, а также использует классы для стилизации меню, кнопок и текста.
HTML
<!DOCTYPE html><html><head><linkrel="stylesheet"href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"><title>My Blog</title></head><body><divclass="pure-g"><divclass="pure-u-1-3"><divclass="pure-menu"><aclass="pure-menu-heading"href="#">Blog Categories</a><ulclass="pure-menu-list"><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Technology</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Design</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Travel</a></li></ul></div></div><divclass="pure-u-2-3"><divclass="pure-g"><divclass="pure-u-1"><h1>Welcome to GFG</h1></div></div><divclass="pure-g"><divclass="pure-u-1-3"><divclass="l-box"><h2>Feature 1</h2><p>The website offers a varietyof articles and tutorialson different programminglanguages,data structures, andalgorithms, making it a greatresource for anyone lookingto improve their coding skills.The website also provides aplatform for users to testtheir skills by solvingpractice problems, which areaccompanied by detailedsolutions and explanations.</p><ahref="#"class="pure-button">Read More</a></div></div><divclass="pure-u-1-3"><divclass="l-box"><h2>Feature 2</h2><p>Additionally, GeeksforGeeks hasa large and active communityof users who can share theirknowledge and help otherswith their coding problems.Another great functionalityof GeeksforGeeks is its user-friendly interface andeasy navigation.</p><ahref="#"class="pure-button">Read More</a></div></div><divclass="pure-u-1-3"><divclass="l-box"><h2>Article 3</h2><p>The website is well-organizedand easy to navigate, makingit easy for users to find theinformation they need. Thearticles and tutorials arewell-written and easy tounderstand, making themaccessible to users of allskill levels. The website alsohas a search bar, which allowsusers to quickly find specificinformation or topics.</p><ahref="#"class="pure-button">Read More</a></div></div></div></div></div><divclass="pure-g"><divclass="pure-u-1"><divclass="l-box"><h2>About the Author</h2><p>GFG Writers</p><ahref="#"class="pure-button pure-button-primary">Learn More</a></div></div></div></body></html>
Выход:
