Верстка адаптивной страницы по макету

@mixa_il · Регистрация: 03.05.2018

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

Доброго дня.

Сегодня наконец взялся за изучение HTML i CSS (вернее вспоминаю, последний раз дело было лет 7 назад), теперь все смотрю немного по другому)).

Собственно по мере моей "ознакомлености" могу ли я спрашивать мнение, совет, наставление - на этом форуме?

Мне для работы, нужно сделать некий онлайн аналог, записной книги, по моему это называется сейчас еще блогом. Не хочу использовать соц.сети и прочее. Просто набрал адрес домена, выбрал статью, прочел, вспомнил.

Поскольку зачастую с мобилы приходится работать, буду осваивать адаптивную верстку. Чтоб на мобиле блок 2 переезжал под блок 1 и меню вместо значков просто словами было, а текст шол ниже.

@Raqwp · 03.05.2018, 19:12

Если не хотите особо напрягаться, то думаю можно использовать bootstrap. Там как раз все окей с этим делом.

@mixa_il · 03.05.2018, 20:08 **[ТС]**

Я слышал про бутстрап, но если честно, мне блокнот куда ближе)). Да и был в своё время опыт написания несложных страниц. Просто тогда адаптивности не было)).

@galawar · 03.05.2018, 20:18

Bootstrap это не редактор кода, а набор инструментов (фреймворк) для верстки сайтов.

@Raqwp · 03.05.2018, 20:25

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

Я слышал про бутстрап, но если честно, мне блокнот куда ближе)). Да и был в своё время опыт написания несложных страниц. Просто тогда адаптивности не было)).

http://bootstrap-4.ru/ советую почитать.
На самом деле удобная штука и легка в освоении. Для этой задачи прекрасно подойдет.
И да, это не редактор

@mixa_il · 07.05.2018, 23:17 **[ТС]**

Туплю с float, не могу разобраться как лучше реализовать:
черный и красный блоки спозиционированы абсолютно, а зеленый блок с контентом, должен при скролинге уходить наверх под черный.

Кто подскажет - поможет?

@galawar · 08.05.2018, 00:22

черному блоку задать position: fixed;

@boilzzz · 08.05.2018, 08:53

mixa_il, Абсолютное позиционирование лучше не использовать если блоки несут структурный характер, абсолютная позиция обычно используется для дизайнерских элементов или для pop-up окон.

Я так понимаю зеленый блок тоже должен двигаться при скроле? тогда как то так

https://codepen.io/boilzzz/pen/yjpywo

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
body{
  margin: 0;
  padding: 0;
  height: 2000px;
}
.menu{
  height: 50px;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.left-block{
  width: 100px;
  background: green;
  height: 400px;
  position: fixed;
  top: 50px;
}
.right-block{
  width: 80%;
  background: red;
  height: 1000px;
  float: right;
  margin-top: 120px;
}

HTML5
1
2
3
4
5
6
<nav class="menu">
</nav>
<div>
  <div class="left-block"></div>
  <div class="right-block"></div>
</div>

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

, мне блокнот куда ближе)).

и по поводу вот этого советую освоить хотя бы notepad++ или в лучшем случае, sublime text, дело пойдет куда быстрее, тем более если вы хотите сделать блог то вам еще и cms(система управления сайтом), или что то самописное, потом потребуется, что бы не вносить каждый раз статью в код сайта.

Добавлено через 1 минуту
Опишу что я сделал в примере, position:fixed; фиксирует элемент в видимом окне браузера не давая ему скролится, соотвтсвето top и left задают место расположение. все остальное вроде должно быть понятно

@mixa_il · 08.05.2018, 10:04 **[ТС]**

Спасибо за помощь.

Нотпад?, но я пользуюсь gedit под линукс, он вроде тоже подсвечивает теги. CMS мне не понадобится, поскольку "блог" это громко сказано. Просто некоторые редкие записи для работы. Аналоговые методы(ручками) проще в памяти сохраняться))))

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. 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 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@mixa_il 0 / 0 / 0 Регистрация: 03.05.2018 Сообщений: 8

	Верстка адаптивной страницы по макету 03.05.2018, 18:54. Показов 831. Ответов 8 Метки нет (Все метки) Доброго дня. Сегодня наконец взялся за изучение HTML i CSS (вернее вспоминаю, последний раз дело было лет 7 назад), теперь все смотрю немного по другому)). Собственно по мере моей "ознакомлености" могу ли я спрашивать мнение, совет, наставление - на этом форуме? Мне для работы, нужно сделать некий онлайн аналог, записной книги, по моему это называется сейчас еще блогом. Не хочу использовать соц.сети и прочее. Просто набрал адрес домена, выбрал статью, прочел, вспомнил. Поскольку зачастую с мобилы приходится работать, буду осваивать адаптивную верстку. Чтоб на мобиле блок 2 переезжал под блок 1 и меню вместо значков просто словами было, а текст шол ниже. 0

@Raqwp 28 / 28 / 12 Регистрация: 30.03.2018 Сообщений: 129
	03.05.2018, 19:12
	Если не хотите особо напрягаться, то думаю можно использовать bootstrap. Там как раз все окей с этим делом. 1

@mixa_il 0 / 0 / 0 Регистрация: 03.05.2018 Сообщений: 8
	03.05.2018, 20:08 [ТС]
	Я слышал про бутстрап, но если честно, мне блокнот куда ближе)). Да и был в своё время опыт написания несложных страниц. Просто тогда адаптивности не было)). 0

@galawar 154 / 123 / 90 Регистрация: 09.04.2018 Сообщений: 351
	03.05.2018, 20:18
	Bootstrap это не редактор кода, а набор инструментов (фреймворк) для верстки сайтов. 0

@mixa_il 0 / 0 / 0 Регистрация: 03.05.2018 Сообщений: 8
	07.05.2018, 23:17 [ТС]
	Туплю с float, не могу разобраться как лучше реализовать: черный и красный блоки спозиционированы абсолютно, а зеленый блок с контентом, должен при скролинге уходить наверх под черный. Кто подскажет - поможет? 0

@galawar 154 / 123 / 90 Регистрация: 09.04.2018 Сообщений: 351
	08.05.2018, 00:22
	черному блоку задать `position: fixed;` 0

@mixa_il 0 / 0 / 0 Регистрация: 03.05.2018 Сообщений: 8
	08.05.2018, 10:04 [ТС]
	Спасибо за помощь. Нотпад?, но я пользуюсь gedit под линукс, он вроде тоже подсвечивает теги. CMS мне не понадобится, поскольку "блог" это громко сказано. Просто некоторые редкие записи для работы. Аналоговые методы(ручками) проще в памяти сохраняться)))) 0