Как сделать вот такой макет через html и css (div и css)

@vano793 · Регистрация: 29.10.2009

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

Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на весь экран вот тот серый цвет и меню тоже на весь экран.По центру два блока они должны быть по середине.Нижний зелёный фон должен тоже растягиваться как всё лого с меню как это сделать ? Буду очень благодарен.

Как сделать вот такой макет через html и css (div и css)

@SkyWalker · 25.04.2010, 19:16

это тебе поможет.

@boong · 26.04.2010, 04:41

http://csstemplater.com/

@Alorian · 30.04.2010, 12:48

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

Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на весь экран вот тот серый цвет и меню тоже на весь экран.По центру два блока они должны быть по середине.Нижний зелёный фон должен тоже растягиваться как всё лого с меню как это сделать ? Буду очень благодарен.

Суть верстки довольно простая. Разбиваем макет на блоки и позиционируем их.

Какие блоки мы видим на твоем макете?

Видим шапку, видим меню, видим область с основным контентом, видим футер. Ок. Увидели основные области начинаем верстать:

HTML5
1
2
3
4
<div id="header"></div>
<div id="menu"></div>
<div id="center"></div>
<div id="footer"></div>

Разметили основные области. Смотрим в шапке у нас есть форма для ввода логина. В контентной части у нас есть две большие области. Дополняем предыдущую верстку:

HTML5
1
2
3
4
5
6
7
8
9
<div id="header">
    <div id="loginform"></div>
</div>
<div id="menu"></div>
<div id="center">
    <div id="content"></div>
    <div id="sidebar"></div>
</div>
<div id="footer"></div>

Проблема! Контент и сайд бар будут друг под другом, а нам надо чтобы они были в одной линии. Что делать? Подключаем элементарный css к вышеприведенной верстке:

HTML5
1
2
3
4
<style>
    #content{width:60%;float:left;}
    #sidebar{width:40%;}
</style>

Таким образом разбивая и разбивая макет на блоки а затем нужным образом их позиционируя мы создадим готовую верстку.

Фон у элементов <div> задается через css свойство background, почитайте его описание там все понятно.

P.S. Желательно что нибудь почитать самому, прежде чем спрашивать "как сверстать сайт?". Удачи

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@vano793 11 / 11 / 1 Регистрация: 29.10.2009 Сообщений: 91

	Как сделать вот такой макет через html и css (div и css) 25.04.2010, 15:46. Показов 11756. Ответов 3 Метки нет (Все метки) Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на весь экран вот тот серый цвет и меню тоже на весь экран.По центру два блока они должны быть по середине.Нижний зелёный фон должен тоже растягиваться как всё лого с меню как это сделать ? Буду очень благодарен. 0

@SkyWalker Cyber-Tracing 346 / 71 / 3 Регистрация: 27.04.2009 Сообщений: 554
	25.04.2010, 19:16
	это тебе поможет. 1

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434
	26.04.2010, 04:41
	http://csstemplater.com/ 1