Вы находитесь на странице: 1из 5

Министерство образования и науки Украины

Государственное высшее учебное заведение

«Приазовский государственный технический университет»

Кафедра компьютерных наук

Лабораторная работа №2

ВЕРСТКА СТРАНИЦЫ ПРИ ПОМОЩИ CSS

Выполнила:
студентка КМ-16
Терещенко Валерия
Принял:
Ст.преподаватель
Сергиенко А. В.

Мариуполь 2020
Вариант №5

Цель работы – получение умений и навыков работы со стилями css.

1.2 Задание на выполнение


Сверстайте изображенные на картинках примеры. Если где-то ширина не
указана, она должна зависеть от ширины окна браузера или содержащегося в
блоке текста (а не быть жестко заданной). Если где-то не указана ширина
отступа/полей, ставь 10px. Цвет блоков должен быть как на картинке (чтобы
определить цвет, используй функцию «пипетка» в графическом редакторе,
или отдельную программу-пипетку).
Вариант 5

Рисунок1 – Задание: вариант 5

Листинг:

<!DOCTYPE html>

<html>

<head>

<title>ЛР 2, Терещенко</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css"


href="style.css">

</head>

<body>

<div>
<h1>ООО "Агросервис"</h1>

<section>

<ul>

<li><a href="#">Главная</a></li>

<li><a href="#">Продкуты </a></li>

<li><a href="#">О нас</a></li>

<li><a href="#">Контакты</a></li>

</ul>

<article>

Lorem ipsum dolor sit amet, consectetur


adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore


magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris


nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in


reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur.


Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia


deserunt mollit anim id est laborum.

</article>

</section>

</div>

</body>
</html>

body

margin: 0px;

padding: 0px;

font-family: "Trebuchet MS";

div

padding: 0px 10px;

width: 460px;

margin: auto;

h1

margin: 10px 0px;

ul

float: left;

list-style: none;

margin: 0px 10px 0px 0px;

padding: 0px;

width: 200px;

}
article

float: left;

max-width: 230px;

section::after

{ clear: both;}

Вывод: Я приобрела навыки верстки используя стили CCS.