Практическая часть, Создание и описание сайта - Создание сайта на языке HTML

Создание и описание сайта

Главная страница - прямо по центру главной страницы расположены все последние новости про мобильные устройства и технологии.

HTML код:

<section id="middle">

<div class="mainside">

<div class="content">

<article class="post">

<img class="poster" src="Адрес файла с картинкой" alt="" />

<h3 class="title"><a href="Ссылка на страницу">Заголовок</a></h3>

<div class="text">Текст...</div>

<div class="more"><a href="Ссылка на страницу">Читать дальше</a></div>

<div class="clr"></div>

</article>

CSS код:

#middle {background: #fafafa; - Определяет цвет фона.

Border: solid 2px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Border-top: none;

Border-radius: 0px 0px 20px 20px; - Устанавливает радиус скругления уголков рамки.}

.mainside {background: #fafafa; - Определяет цвет фона.

Border-radius: 0px 0px 0px 20px; - Устанавливает радиус скругления уголков рамки.

Border-right: solid 2px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Margin-right: 300px; - Устанавливает величину отступа от каждого края.

Padding: 20px 0px; - Устанавливает значение полей вокруг содержимого элемента.}

.content {width: 660px; - Устанавливает ширину блочных или заменяемых элементов.

Float: left; - Выравнивает элемент по левому краю.

Padding: 0 10px; - Устанавливает значение полей вокруг содержимого элемента.}

.post {border-bottom: solid 2px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Margin-bottom: 20px; - Устанавливает величину отступа от каждого края.

Padding-bottom: 10px; - Устанавливает значение полей вокруг содержимого элемента.}

.post. poster {float: left; - Выравнивает элемент по левому краю.

Border: solid 2px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Padding: 3px; - Устанавливает значение полей вокруг содержимого элемента.

Margin: 0 10px 10px 0; - Устанавливает величину отступа от каждого края.

Width: 205px; - Устанавливает ширину блочных или заменяемых элементов.

Height: 145px; - Устанавливает высоту блочных или заменяемых элементов}

.post. title {color: #1a9ad0;

Font-size: 16px; - Определяет размер шрифта.

Font-weight: bold; - Устанавливает насыщенность шрифта. bold -- полужирное начертание.

Margin: 0 10px; - Устанавливает величину отступа от каждого края.}

.post. text {margin: 10px; - Устанавливает величину отступа от каждого края.

Color: #888888; - Определяет цвет текста.

Font-size: 16px; - Определяет размер шрифта.

Font-family: Tahoma; - Устанавливает семейство шрифта.}

.post. text a {text-decoration: underline; - Устанавливает подчеркнутый текст.}

.post. more {text-align: right;

Padding: 5px; - Устанавливает значение полей вокруг содержимого элемента.

Margin: 5px; - Устанавливает величину отступа от каждого края.

Float: right; - Выравнивает элемент по правому краю.}

.post. more a {background: #2aaae0; - Определяет цвет фона.

Display: inline-block;

Line-height: 20px;

Height: 20px; - Устанавливает высоту блочных или заменяемых элементов

Padding: 2px 10px; - Устанавливает значение полей вокруг содержимого элемента.

Text-decoration: none; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Color: #fff; - Определяет цвет текста.

Font-size: 12px; - Определяет размер шрифта.

Font-weight: bold; - Устанавливает насыщенность шрифта. bold -- полужирное начертание.

Border: solid 1px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Border-radius: 2px; - Устанавливает радиус скругления уголков рамки.

Float: right; - Выравнивает элемент по правому краю.}

.post. more a:hover {background: #5ac0f0;} - Определяет цвет фона.

Справа на главной странице расположен меню сайта и три самых популярных новостей:

Новости - здесь пользователи могут прочитать о самых свежих новостях мобильных телефонов и смартфонов.

Цены - здесь пользователи могут узнать цены на мобильные устройства в Ташкенте.

Полезное - здесь расположены полезные статьи о мобильных устройствах.

Приложения - здесь расположена информация про самые популярные приложения для мобильных устройств.

HTML код:

<aside class="sidebar">

<nav class="side_menu">

<ul><li><a href="index. html">НОВОСТИ</a></li>

<li><a href="index6.html">ПРИЛОЖЕНИЯ</a></li>

<li><a href="index4.html">ЦЕНЫ</a></li>

<li><a href="index5.html">ПОЛЕЗНОЕ</a></li></ul></nav>

<div class="block">

<div class="title">Самое популярное</div>

<div class="text">

<a href="novosti008.html">Qualcomm может разработать обновленную версию Snapdragon 810 специально для Samsung</a><br></br>

<a href="novosti007.html">LG удалось продать 59,6 миллиона смартфонов за 2014 год</a><br></br>

<a href="novosti001.html">Слухи о веб-версии WhatsApp оказались правдой</a><br></br>

</div></div>

CSS код:

.sidebar {margin-right: -290px; - Устанавливает величину отступа от правого края.

Width: 275px; - Устанавливает ширину блочных или заменяемых элементов.

Padding: 0 5px; - Устанавливает значение полей вокруг содержимого элемента.

Float: right; - Выравнивает элемент по правому краю.}

.side_menu {border-bottom: solid 2px #1a9ad0;

Margin-bottom: 10px; - Устанавливает величину отступа от каждого края.}

.side_menu ul {padding-bottom: 10px; - Устанавливает значение полей вокруг содержимого элемента.

Overflow: hidden; - Отображается только область внутри элемента, остальное будет скрыто.}

.side_menu ul li {float: left; - Выравнивает элемент по левому краю,

Margin-bottom: 10px; - Устанавливает величину отступа от каждого края.}

.side_menu ul li:nth-last-child(2n+1) {margin-left: 4px; - Устанавливает величину отступа от каждого края.}

.side_menu ul li a {background: #2aaae0; - Определяет цвет фона.

Display: inline-block; - Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. компьютерный сайт гипертекстовый

Line-height: 25px; - Устанавливает межстрочный интервал текста, отсчет ведется от базовой линии шрифта.

Height: 30px; - Устанавливает высоту блочных или заменяемых элементов

Padding: 0 10px; - Устанавливает значение полей вокруг содержимого элемента.

Width: 112px; - Устанавливает ширину блочных или заменяемых элементов.

Text-decoration: none; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Color: #fff; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Font-size: 10px; - Определяет размер шрифта.

Font-weight: bold; - Устанавливает насыщенность шрифта. bold -- полужирное начертание.

Border: solid 1px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Border-radius: 10px; - Устанавливает радиус скругления уголков рамки.}

.side_menu ul li:nth-last-child(2n+1) a {border-radius: 10px; - Устанавливает радиус скругления уголков рамки.}

.side_menu ul li a:hover {background: #5ac0f0; - Определяет цвет фона.}

.block {margin-bottom: 25px; - Устанавливает величину отступа от каждого края.

Padding: 5px; - Устанавливает значение полей вокруг содержимого элемента.}

.block. title {padding-left: 0 10px; - Устанавливает значение полей вокруг содержимого элемента.

Font-weight: bold; - Устанавливает насыщенность шрифта. bold -- полужирное начертание.

Font-size: 14px; - Определяет размер шрифта.}

.block. text {margin-top: 5px; - Устанавливает величину отступа от каждого края.

Font-size: 12px; - Определяет размер шрифта.}

Cверху слева расположен логотип сайта и слоган

HTML код:

<header id="header">

<h1 class="logotype">

<a href="/">Все о мобильной технике и технологиях</a></h1>

<div class="clr"></div></header>

CSS код:

.logotype {float: left;} - Выравнивает элемент по левому краю;

.logotype a {background: url(../images/logo. png) no-repeat; - Устанавливает фоновое изображение. / Устанавливает одно фоновое изображение в элементе без его повторений,;

Padding: 30px 0 0 30px; - Устанавливает значение полей вокруг содержимого элемента.

Display: block; - Элемент показывается как блочный.

Min-height: 5px; - Задает минимальную высоту.

Min-width: 115px; - Устанавливает минимальную ширину.

Font-size: 14px; - Определяет размер шрифта.

Text-decoration: none; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Color: #1a9ad0; - Определяет цвет текста.}

.clr {clear: both;} - Отменяет обтекание элемента одновременно с правого и левого края.

Чуть снизу справа расположен форма поиска для того чтобы пользователи могли искать интересующую их новости и статьи

HTML код:

<div class="search"><form>

<input class="form" type="text" placeholder="Фраза для поиска" />

<input class="submit" type="submit" value="" /></form></div>

CSS код:

.search {background: #fff; - Определяет цвет фона

Float: right; - Выравнивает элемент по правому краю

Border: solid 2px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Margin: 5px 25px 0 0; - Устанавливает величину отступа от каждого края.

Border-radius: 5px; - Устанавливает радиус скругления уголков рамки.}

Search input {float: left; - Выравнивает элемент по левому краю.

Margin: 0; - Устанавливает величину отступа от каждого края.}

Search input. form {background: none;

Line-height: 20px; - Устанавливает межстрочный интервал текста.

Height: 20px; - Устанавливает высоту блочных или заменяемых элементов.

Width: 200px; - Устанавливает ширину блочных или заменяемых элементов.

Font-size: 10px; - Определяет размер шрифта.

Color: #888888; - Определяет цвет текста.

Padding: 0 5px; - Устанавливает значение полей вокруг содержимого элемента.}

Search input. submit {height: 20px; - Устанавливает высоту блочных или заменяемых элементов.

Width: 20px; - Устанавливает ширину блочных или заменяемых элементов.

Margin-left: 5px; Устанавливает величину отступа от левого края}

Снизу по центру есть возможность перейти на следующую или на предыдущую страницу на сайте:

HTML код:

<div style="text-align:center">

<div class="navi">

<span>1</span>

<a href="index2.html">2</a>

<a href="index3.html">3</a></div></div>

CSS код:

.navi {display: inline-block; - Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу.

Border-bottom: solid 2px #1a9ad0; - Свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Padding: 0 5px 5px 5px; - Устанавливает значение полей вокруг содержимого элемента.

Font-weight: bold; - Устанавливает насыщенность шрифта. bold -- полужирное начертание

Overflow: hidden; - Отображается только область внутри элемента, остальное будет скрыто.}

.navi a, .navi span {float: left; - Выравнивает элемент по левому краю,

Margin: 0 6px; - Устанавливает величину отступа от каждого края.}

.navi span {color: #1a9ad0;

Text-decoration: underline; - Устанавливает подчеркнутый текст }

.navi a, .navi span. nav_ext {color: #1a9ad0; - Определяет цвет текста.}

.navi span. nav_ext {text-decoration: none; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. }

Похожие статьи




Практическая часть, Создание и описание сайта - Создание сайта на языке HTML

Предыдущая | Следующая