lr5, веб-технології

Лабораторна робота №5
Тема: «Позиціювання елементів. position:relative/absolute;»
Рис.1. Завдання перше

Лістинг сайту:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.firstPerson{
background-color: coral;
margin:10px;
padding: 10px;
border-radius: 10px;
border-bottom-left-radius: 0px;
width: 200px;
margin: 10px auto;
position: relative;
left:0px;
top:0px;
}
.secondPerson{
background-color: mediumslateblue;
margin:10px;
padding: 10px;
border-radius: 10px;
border-bottom-right-radius: 0px;
width: 200px;
margin: 10px auto;
position: relative;
left:0px;
top:0px;
}
.men{
width:150px;
font-size: 12px;
text-align: right;
position: absolute;
top:0;
left: -170px;
}
.men img{
float: right;
width: 45px;
}
.name{
margin: 0;
padding: 0;
}
.time{
color: grey;
margin: 0;
padding: 0;
}
.waiter{
width:150px;
font-size: 12px;
position: absolute;
top:5px;
left: 100%;
}
.waiter img{
float: left;
width: 45px;
}
</style>
</head>
<body>
<div>
<div class = "firstPerson">Good evening. I'd like to book a table
in your restaurant, please.
<div class = "men">
<img src = "man_person_people_avatar_icon_230017.png" alt
= "">
<p class = "name">Tom</p>
<p class = "time">1 hours ago</p>
</div>
</div>
<div class = "secondPerson">I will be happy to help you. When
would you like a table for?
<div class = "waiter">
<img src =
"waiters_man_avatar_waiter_barman_icon_210167.png" alt = "">
<p class = "name">Smith</p>
</div>
</div>
<div class = "firstPerson">For Wednesday evening, at 6 p. m.
<div class = "men">
<img src = "man_person_people_avatar_icon_230017.png" alt
= "">
</div>
</div>
<div class = "secondPerson">Wednesday evening, October 13. For
how many people?
<img src =
</div>
</div>
<div class = "firstPerson">For five people.
<div class = "men">
<img src = "man_person_people_avatar_icon_230017.png"
alt = "">
<p class = "time">40 minutes ago</p>
</div>
</div>
<div class = "secondPerson">Sure. Can I get your name please?
<img src =
</div>
</div>
<div class = "firstPerson">Tom.
<div class = "men">
alt = "">
</div>
</div>
<div class = "secondPerson">Could you give me your contact
number?
<img src =
</div>
</div>
<div class = "firstPerson">Sure, it's 7589634129.
<div class = "men">
alt = "">
</div>
</div>
<div class = "secondPerson"> So, that's a table for 5 people
for Wednesday evening, October 13. Thank you, Mr. Smit. We are
waiting for you.
<img src =
</div>
</div>
<div class = "firstPerson">Thank you. Goodbye!
<div class = "men">
alt = "">
</div>
</div>
</div>
</body>
</html>
Результат виконання:
Рис.2. Результат виконання першого завдання

Рис.3. Завдання друге
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
.rewiews{
border: 1px solid;
float:left;
width: 25%;
height: 100%;
margin: 5px;
padding:5px;
position: relative;
box-shadow: 0px 0px 5px orange;
transition: 1s;
}
.rewiews:hover{
box-shadow: 0px 0px 15px orangered;
}
.img img{
width: 100%;
border-radius: 50%;
width: 60px;
height: 60px;
box-shadow: 0px 0px 5px orange;
transition: 1s;
}
.img img:hover{
box-shadow: 0px 0px 10px black;
}
.img{
width: 60px;
position: absolute;
top:calc(100% - 30px);
left:calc(50% - 30px);
}
h1{
text-align: center;
margin-top: 10px;
margin-bottom: 0;
}
p{
text-align: center;
margin-bottom: 5%;
margin-top: 0px;
margin-left: 30px ;
margin-right:30px ;
}
.name{
margin-bottom: 10%;
}
</style>
</head>
<body>
<div class = "rewiews">
<h1><b>”</b></h1>
<p>
The Singhasari, just remember this name for the best hotel
in Batu. I have stay for a few days for Congress at this hotel.
They always greeting and smiling to us. The breakfasts were
amazing.</p> <p> The room was wonderful, clean, and perfect to
celebrate a birthday weekend. The staff throughout the hotel were
very professional, friendly</p></p>
<p class = "name"><b>Olly Nice</b></p>
<div class = "img">
<img src = "images.jpeg">
</div>
</div>
<h1><b>”</b></h1>
<p >Nice, small hotel, with a few small restaurants within
walking distance. The bunk bed, for the twin was uncomfortable
because it was so low. It turned out not to be that convenient for
transport. </p>
<p>We had to go to another location for a day tour to Poas and
Doka, and also to meet up with the transport for Tortuguero. the
location is most appropriate for those renting their own
vehicle.</p>
<p class = "name"><b>Ben Tide</b></p>
<div class = "img">
<img src = "aa0139b260f3edebb46dc1bd2e7a1117.jpg">
</div>
</div>
<h1><b>”</b></h1>
<p>We thought this was a lovely hotel, and a great place to
stay at the end or beginning of the holiday - only about 20
minutes away from the airport. <p>The hotel was lovely and clean,
the staff were super-friendly and the food and drink was delicious
and also very competitively priced. We wouldn't hesitate to stay
here again.</p></p>
<p class = "name"><b>Ann Berry</b></p>
<div class = "img">
<img src = "завантаження.jpeg">
</div>
</div>
</div>
</body>
</html>
Рис.4. Без наведення на блоки

Рис.5.Наведення на блок тексту
Рис.6.Наведення на іконку
Рис.7. Завдання третє

<!DOCTYPE html>
<html>
<head>
<title>Подорожник</title>
<style>
.main_menu {
list-style-type: none;
display: flex;
}
.main_menu li {
float: left;
background-color: #EAE7DC;
padding: 15px;
color: #E85A4F;
transition: 1s;
position: relative;
}
.main_menu li:hover {
background-color: #D8C3A5;
}
.main_menu ul li {
float: none;
position: relative;
}
.submenu {
padding:0;
display: none;
position: absolute;
top: 100%;
left: 0;
}
li:hover .submenu {
display: block;
}
.submenu li {
float: none;
color: red;
position: relative;
color: #E98074;
}
.sub-sub-menu {
padding: 0;
display: none;
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
.sub-sub-menu li {
float: none;
color: #8E8D8A;
}
li:hover > .sub-sub-menu {

display: block;
}
li {
float: none;
}
body {
min-height: 100vh;
overflow: hidden;
}
</style>
</head>
<body>
<ul class="main_menu">
<li>Каталог товарів
<ul class="submenu">
<li>Лікарські
<ul class="sub-sub-menu">
<li>Знеболююче</li>
<li>Від куріння</li>
<li>Алергія та синусит</li>
</ul>
</li>
<li>Для нервової системи
<li>Вітаміни та добавки
<li>Мультивітаміни</li>
<li>Мінерали</li>
<li>Біодобавки</li>
</ul>
</li>
<li>Особиста гігієна
<li>Дитяча гігієна</li>
<li>Захист від сонця</li>
<li>Догляд за губами</li>
</ul>
</li>
</ul>
</li>
<li>Вибір міста
<li>Київська область
<li>Київ</li>
<li>Ірпінь</li>
<li>Буча</li>
<li>Ворзель</li>
</ul>
</li>
<li>Житомирська область
<li>Житомир</li>
<li>Овруч</li>
<li>Коростень</li>
<li>Коростишів</li>
</ul>
</li>
<li>Дніпропетровська область
<li>Дніпро</li>
<li>Запоріжжя</li>
<li>Павлоград</li>
</ul>
</li>
</ul>
</li>
<li>Кошик
<li>Переглянути обрані товари</li>
<li>Додати до товарів</li>
</ul>
</li>
</ul>
<p>Інтернет-аптека Подорожник — це інформаційна онлайн-система для

пошуку широкого спектру лікарських засобів та медичних виробів у
всіх містах України. Оптимальні ціни на медичні товари, зручна
система для онлайн замовлень та швидка доставка ліків у будь-яку
точку Вашого міста.</p>
<p>Аптечна мережа Подорожник все далі розширюється, внаслідок чого
спрощує придбання мед. товарів все ближче до Вашого розташування.
Також у нашій аптеці є кур'єрська доставка, яка дозволяє отримати
товар у зручну для Вас дату, час та місце.</p>
<p>Основна мета онлайн аптеки Подорожник — забезпечити людей
якісними лікарськими препаратами та медичними виробами на найбільш
вигідних умовах для кожного споживача.
Онлайн система аптеки Подорожник дозволяє зробити пошук ліків

розбитих на категорії та підкатегорії для кращого орієнтиру на
сайті, також запропонує Вам всілякі аналоги або підкаже іншу
аптеку нашої аптечної мережі, якщо необхідного Вам товару немає в
наявності або ціна Вас не влаштовує. Крім цього на сайті є
сортування товару за ціною, рейтингом, формою випуску препарату,
способу введення та виду відпустки його з аптеки (рецептурний або
безрецептурний).
Замовлення медикаментів можна здійснити в один клік, натиснувши

на кнопку купити, після чого товар переміщується в кошик, де Ви
можете звірити та оформити замовлення. Далі Ви можете обрати
спосіб доставки. Це може бути самовивіз, доставка кур'єром чи
поштою. У разі самовивезення Вам потрібно буде вказати адресу
найближчої до Вас аптеки, де буде зручно забрати товар.
Нашій аптеці притаманний розумний пошук медичних товарів. Це

означає, що при пошуку лікарських засобів або мед. виробів з
введенням їх назв з друкарською помилкою, наш пошуковий запит
запропонує автовиправлення або знайде найбільш схожий варіант
виходячи з Вашого запиту.
Наш сайт дозволяє здійснити замовлення та пошук медикаментів у
таких містах України, як Львів, Київ, Івано-Франківськ, Луцьк,
Чернівці, а також у багатьох інших містах та областях.</p>
</body>
</html>
Рис.8.Результат виконання третього завдання

Рис.9. Другий результат виконання третього завдання
Рис.10. Завдання четверте

<!DOCTYPE html>
<html lang="en">
<head>
<title>Рослини</title>
<style>
.plants {
border: 3px solid;
border-color: forestgreen;
border-radius: 10%;
float: left;
width: 20%;
height: 100%;
margin: 1%;
padding: 5px;
position: relative;
background-color: #e2ffd6;
transition: background-color 1s linear;
}
.plants:hover {
background-color: forestgreen;
}
.img img{
width: 100%;
border-radius: 50%;
width: 60px;
height: 60px;
transition: 1s;
}
.img1 img:hover{
box-shadow:10px 0px 10px red;
}
.img2 img:hover{
box-shadow:10px 0px 10px deeppink;
}
.img3 img:hover{
box-shadow:10px 0px 10px darkviolet;
}
.img4 img:hover{
box-shadow:10px 0px 10px orange;
}
.img{
width: 60px;
position: absolute;
bottom:calc(100% - 30px);
left:calc(0% - 15px);
top:calc(0% + 10px);
}
header h1{
text-align: left;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15px;
color: forestgreen;
}
p{
text-align: center;
margin-bottom: 5%;
margin-top: 0px;
margin-left: 50px ;
margin-right:50px ;
margin-bottom:50px ;
}
.name {
margin-bottom: 10%;
margin-top: 9%;
}
.icons {
width: 30px;
position: absolute;
bottom: calc(100% - 30px);
left: calc(100% - 50px);
top: calc(0% + 25px);
transition: 1s;
}
.icons:hover{
transform: rotate(1turn);
}
header{
margin: 1.5%;
}
.main_text{
text-align: left;
}
</style>
</head>
<body>
<header>
<h1>Садові рослини</h1>
</header>
<div class = "plants">
<p class = "name"><b>Троянда "Mary Rose"</b></p>
<img src="rose_101950.ico" class = "icons">
<p class = "main_text" > Це одна з ранніх і рясноквітучих
англійських троянд, що залишається популярною завдяки красивим
квітам.</p>
<div class = "img">
<div class = "img1">
<img src = "7e16aafb6b172cdd81d71ba29a7ca1a0.jpg">
</div>
</div>
</div>
<p class = "name"><b>Бузок "Le Notre"</b></p>
<img
src="spring_flower_plant_garden_nature_floral_blossom_icon_133301.
ico" alt="rose" class = "icons">
<p class = "main_text"> Характерною особливістю сорту є
лілові, дуже великі квіти, махрові, діаметром до 2,7 см,
інтенсивно запашні, що не вигоряють.</p>
<div class = "img">

<img src = "abb1d51f208fc89af3d4f36493fbba32.jpg">
</div>
</div>
</div>
<p class = "name"><b>Вишня "Норд Стар"</b></p>
<img src="Cherry_icon-icons.com_68770.ico" alt="rose" class =
"icons">
<p class = "main_text">Самозапильний сорт, пізного терміну
дозрівання.Його особливість скороплідність,в плодоношення вступає
вже на 2 рік після посадки.</p>
<div class = "img">

<img src = "77e836ba39b11ebceec8a89b6d06f424.jpg">
</div>
</div>
</div>
<p class = "name"><b>Амариліc Gold Medal</b></p>
<img src="pollen_flower_vegetation_climate_pole_1462.ico"
alt="rose" class = "icons">
<p class = "main_text">Амариліc цвіте взимку, коли потреба в
яскравих враженнях висока.Рослина прекрасно себе почуває в
теплих,освітлених місцях.<p/>
<div class = "img">
<img src = "amarylliss-gold-medal.jpg">
</div>
</div>
</div>
</body>
</html>
Рис.11. Результат виконання четвертого завдання
Рис.12. Наведення на блок
Рис.13.Наведення на одну картинку

Рис.14.Наведення на іншу картинку
Рис.15.Виконання властивості transform

lr5, веб-технології

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

lr5, веб-технології

Uploaded by

Copyright:

Available Formats

Лабораторна робота №5

Тема: «Позиціювання елементів. position:relative/absolute;»

Рис.1. Завдання перше

Рис.2. Результат виконання першого завдання

Рис.4. Без наведення на блоки

Рис.7. Завдання третє

li:hover > .sub-sub-menu {

<p>Інтернет-аптека Подорожник — це інформаційна онлайн-система для

Онлайн система аптеки Подорожник дозволяє зробити пошук ліків

Замовлення медикаментів можна здійснити в один клік, натиснувши

Нашій аптеці притаманний розумний пошук медичних товарів. Це

Рис.8.Результат виконання третього завдання

Рис.10. Завдання четверте

<div class = "img">

<div class = "img">

Рис.11. Результат виконання четвертого завдання

Рис.12. Наведення на блок

Рис.13.Наведення на одну картинку

Рис.15.Виконання властивості transform

You might also like