Погружение в базы данных PostgreSQL

Данный курс является консолидацией теоретических основ и практических примеров, которые демонстрируют работу операторов и функций SQL в системе управления базами данных PostgreSQL.

Промокод на скидку: SALE_202410

Подробнее

Регулярные выражения в Python

В этом курсе вы освоите синтаксис регулярных выражений, научитесь создавать сложные шаблоны для поиска и обработки текста, а также изучите мощные функции модуля re в Python.

Пройти курс

Модуль psycopg2 в Python

Модуль psycopg2 позволяет взаимодействовать с базами данных PostgreSQL в скриптах Python.

Пройти курс

Модуль SQLite3 в Python

Встроенный модуль SQLite3 позволяет работать с базами данных SQLite в ваших приложениях, которые написаны на языке программирования Python.

Пройти курс

Погружение в базы данных Oracle

Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.

Купить книгу

SQL без слёз

Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.

Скачать книгу

 ›  ›  ›  › Урок #8. Вёрстка страницы поиска. Создание темы WordPress.

Урок #8. Вёрстка страницы поиска. Создание темы WordPress.

Вёрстка страницы поиска. Создание темы WordPress.

Поиск — это немаловажный элемент на любом сайте, благодаря поиску пользователь сможет найти интересующую его информацию за считанные секунды. Сейчас мы будем создавать страницу поиска для нашей темы, которая будет адаптироваться длясистемы управления содержимым сайта WordPress.

Подготовка к вёрстке

0. Создаём копию файла index.html и переименовываем её в search.html.

HTML каркас

Открываем файл search.html для внесения изменений.

После открытия блока div с классом content вставляем новый div с классом search-result.

	<!-- Область для вывода контента -->
	<div class="content">

		<!-- Результаты поиска -->
		<div class="search-result">

		</div>

В блок search-result вставляем две строки, которые будут выводить название страницы и результаты поиска.

	<div class="content">

		<!-- Результаты поиска -->
		<div class="search-result">
			<h1>Результаты поиска</h1>
			<p>Вы искали "<strong>wordpress</strong>", результатов найдено: "<strong>28</strong>".</p>
		</div>

Готовый каркас страницы search.html.

<!DOCTYPE html>
<html>
<head>
	<!-- Charset -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!-- Page info -->
	<title>Страница поиска</title>
	<meta name="language" content="ru">
	<!-- Favicon -->
	<link rel="shortcut icon" href="favicon/favicon.png" type="image/png">
	<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon">
	<link rel="apple-touch-icon" sizes="60x60" href="favicon/favicon_apple_60.png">
	<link rel="apple-touch-icon" sizes="76x76" href="favicon/favicon_apple_76.png">
	<link rel="apple-touch-icon" sizes="120x120" href="favicon/favicon_apple_120.png">
	<link rel="apple-touch-icon" sizes="152x152" href="favicon/favicon_apple_152.png">
	<!-- Style CSS-->
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="style.css">
	<!-- JQuery Library -->
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>

<!-- Обёртка -->
<div id="wrapper">

	<!-- Шапка -->
	<div class="header">
		<!-- Название блога и описание -->
		<div class="bloginfo">
			<h1><a href="">Блог Артёма Санникова</a></h1>
			<p>Подробные пошаговые обучающие уроки по сайтостроению и продвижению.</p>
		</div>
		<!-- Навигация -->
		<div class="nav">
			<ul>
				<li class="current_page_item"><a href="">Главная</a></li>
				<li><a href="">Об авторе</a></li>
				<li><a href="">Контакты</a></li>
				<li><a href="">Карта сайта</a></li>
			</ul>
		</div>
	</div>

	<!-- Область для вывода контента -->
	<div class="content">

		<!-- Результаты поиска -->
		<div class="search-result">
			<h1>Результаты поиска</h1>
			<p>Вы искали "<strong>wordpress</strong>", результатов найдено: "<strong>28</strong>".</p>
		</div>

		<!-- Вид записи -->
		<div class="box-post">
			<!-- Миниатюра записи-->
			<div class="thumbnail-post">
				<img src="//artemsannikov.ru/wp-content/uploads/2017/07/install-xampp-windows-130x130.jpg" width="130" height="130">
			</div>
			<!-- Описание записи-->
			<div class="description-post">
				<h2><a href="">Установка локального web-сервера Xampp</a></h2>
				<p class="info-post">Категория: Xampp / Опубликовано: 2017-07-24 / Просмотров: 30</p>
				<p>Xampp — кроссплатформенный web-сервер поддерживающий множество готовых библиотек, которые позволяют развернуть полноценный web-сервер на вашем компьютере.</p>
				<a href="" class="readmore">Читать далее..</a>
			</div>
		</div>

		<!-- Постраничная навигация-->
		<div id="page-navi">
			<span class="page-numbers current">1</span>
			<a class="page-numbers" href="">2</a>
			<a class="page-numbers" href="">3</a>
			<a class="page-numbers" href="">4</a>
			<a class="page-numbers" href="">5</a>
			<a class="page-numbers" href="">6</a>
			<a class="page-numbers" href="">7</a>
			<span class="page-numbers dots">…</span>
			<a class="page-numbers" href="">42</a>
			<a class="next page-numbers" href="">»</a>
		</div>
	</div>

	<!-- Боковая колонка -->
	<div class="sidebar">
		<div id="title-widget">
			<h6>CMS системы</h6>
		</div>
		<div class="widget_nav_menu">
			<ul>
				<li><a href="">Wordpress</a>
					<ul class="sub-menu">
						<li><a href="">Настройки</a></li>
						<li><a href="">Функции</a></li>
						<li class="current-menu-item"><a href="">Плагины</a></li>
						<li><a href="">Хаки</a></li>
						<li><a href="">Создание темы</a></li>
					</ul>
				</li>
				<li><a href="">Программы</a>
					<ul class="sub-menu">
						<li><a href="">Google Chrome</a></li>
						<li><a href="">Balsamiq Mockups</a></li>
						<li><a href="">Sublime Text</a></li>
						<li><a href="">Adobe Photoshop</a></li>
					</ul>
				</li>
			</ul>
		</div>

		<div id="title-widget">
			<h6>Текстовый блок</h6>
		</div>
		<div class="textwidget">
			<p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он <a href="">веб-дизайнерами</a> для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. </p>
		</div>

		<div id="title-widget">
			<h6>Изображение</h6>
		</div>
		<div class="textwidget">
			<center><img src="//artemsannikov.ru/mc/40collage-instagram/images/box.png" width="200"></center>
		</div>

	</div>

	<!-- Подвал-->
	<div class="footer">
		<p>Использование и копирование материалов сайта без согласия автора категорически запрещено.</p>
		<p>Артём Санников © 2014 - 2017</p>
	</div>

</div>

</body>
</html>

CSS стили

Ниже предоставлен css код для оформления блока search-result и его дочерних элементов.

Вставьте код в файл style.css.

		/*Результаты поиска*/
		.search-result {
			width: 670px;
			height: auto;
			margin: 0 0 50px 0;
			overflow: hidden;
		}
			.search-result h1 {/*Заголовок страницы поиска*/
				font-weight: bold;
				font-size: 16px;
				color: #333;
				line-height: 1;
				margin: 0 0 20px 0;
			}
			.search-result p {/*текст с результатам поиска*/
				font-size: 14px;
				color: #666;
				line-height: 1.5;
			}

С уважением, Артём Санников

Сайт: ArtemSannikov.ru

Метки: , .

Записи по теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *