Простой сайт на html через блокнот

@gotovets · Регистрация: 12.02.2020

Студворк — интернет-сервис помощи студентам

Приветствую!Прошу вашего совета. Пишу сайт с нуля. Не могу найти инфу,которая будет работать на блокноте. Сделать разметку картинок и подписать их. Пробовала по разному, не получается. Будет типа интернет-магазина цветов, нужно красиво сделать галерею с подписями. Буду рада любому совету.

Вот код html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title> Интернет-магазин Мята </title>
 
<title></title>
    <link rel="stylesheet" href="text.css">
</head>
 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 
<body 
bgcolor="#000" background="fon.jpg">
 
<nav class="top-menu">
  <a class="navbar-logo" href=""><img src="https://i.pinimg.com/236x/e5/89/6a/e5896adf1184ee46e07aa97f340834a1.jpg"></a>
  <ul class="menu-main">
    <li><a href="">Главная</a></li>
    <li><a href="">Доставка</a></li>
    <li><a href="">О нас</a></li>
    <li><a href="">Контакты</a></li>
  </ul>
</nav>
 
<p>
    <img src="букет1.jpg" alt="photo" "width="350" height="350">
    <img src="букет2.jpg" alt="photo" width="350" height="350">
    <img src="букет3.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет4.jpg" alt="photo" "width="350" height="350">
    <img src="букет5.jpg" alt="photo" width="350" height="350">
    <img src="букет6.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет7.jpg" alt="photo" "width="350" height="350">
    <img src="букет8.jpg" alt="photo" width="350" height="350">
    <img src="букет9.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет10.jpg" alt="photo" "width="350" height="350">
    <img src="букет11.jpg" alt="photo" width="350" height="350">
    <img src="букет12.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет13.jpg" alt="photo" "width="350" height="350">
    <img src="букет14.jpg" alt="photo" width="350" height="350">
    <img src="букет15.jpg" alt="photo" width="350" height="350">
</p>
 
</body>
</html>

Вот код css для менюшки( на всякий случай)

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
@import url('https://fonts.googleapis.com/css?family=Arimo');
.top-menu {
  background: rgba(255,255,255,.5);
  box-shadow: 3px 0 7px rgba(0,0,0,.3);
  padding: 20px;
}
.top-menu:after {
  content: "";
  display: table;
  clear: both;
}
.navbar-logo {display: inline-block;}
.menu-main {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
.menu-main li {display: inline-block;}
.menu-main a {
  text-decoration: none;
  display: block;
  position: relative;
  line-height: 61px;
  padding-left: 20px;
  font-size: 30px;
  letter-spacing: 2px;
  font-family: 'Arimo', sans-serif;
  font-weight: bold;
  color: #ff5c77;
  transition:.3s linear;
}
.menu-main a:before {
  content: "";
  width: 9px;
  height: 9px;
  background: #ff5c77;
  position: absolute;
  left: 50%;
  transform: rotate(45deg) translateX(6.5px);
  opacity: 0;
  transition: .3s linear;
}
.menu-main a:hover:before {opacity: 1;}
@media (max-width: 660px) {
.menu-main {
  float: none;
  padding-top: 20px;
}
.top-menu {
  text-align: center;
  padding: 20px 0 0 0;
}
.menu-main a {padding: 0 10px;}
.menu-main a:before {transform: rotate(45deg) translateX(-6px);}
}
@media (max-width: 600px) {
.menu-main li {display: block;}
}

@kyvaldenius · 14.02.2020, 16:02

Сообщение от gotovets

Сделать разметку картинок и подписать их. Пробовала по разному, не получается. Будет типа интернет-магазина цветов, нужно красиво сделать галерею с подписями. Буду рада любому совету.

задание очень не понятное

Если "Сделать разметку картинок и подписать их" то надо включать CSS и писать правила для стилей
"Будет типа интернет-магазина цветов" -- на блокноте с чистым HTML это очень громкое название

Интернет-магазин ... Интернет-магазин (англ. online shop или e-shop) — сайт, торгующий товарами посредством сети Интернет. Позволяет пользователям онлайн, в своём браузере или через мобильное приложение, сформировать заказ на покупку, выбрать способ оплаты и доставки заказа, оплатить заказ.

для этого необходимо использовать технологии asp.net , javascript, php и все возможные другие для веб разработки, а также базы данных

если просто таблица с картинками и подписями то html и CSS (для красоты )

если нужен последний вариант " таблица с картинками и подписями" то либо поискать по интернету готовые примеры или на понравившихся сайтах через просмотр кода

@gotovets · 14.02.2020, 17:43 **[ТС]**

Это как макет, то есть прям полноценный сайт я делать не собираюсь. Я же написала как раз,что стили прописываю в css,но именно для картинок не могу. Пыталась по разному,почему-то не работает)

Добавлено через 6 минут
А на счет поискать по интернету...говорю же пробовала по разному, с разных сайтов,почему то не работает. Может делаю что-то не так.

@yurickas · 14.02.2020, 18:41

Не по теме:

надо сделать мем: инфа по html для блокнота.

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@gotovets 0 / 0 / 0 Регистрация: 12.02.2020 Сообщений: 4
	14.02.2020, 17:43 [ТС]
	Это как макет, то есть прям полноценный сайт я делать не собираюсь. Я же написала как раз,что стили прописываю в css,но именно для картинок не могу. Пыталась по разному,почему-то не работает) Добавлено через 6 минут А на счет поискать по интернету...говорю же пробовала по разному, с разных сайтов,почему то не работает. Может делаю что-то не так. 0

@yurickas
	14.02.2020, 18:41
	Не по теме: надо сделать мем: инфа по html для блокнота. 0