С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
1187 / 757 / 127
Регистрация: 10.03.2012
Сообщений: 4,865

Блочная верстка

21.05.2018, 23:08. Показов 561. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем привет.
Подскажите как сделать смещение со всех сторон на странице, вложить все содержимое в div у меня не получилось
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="homework1.css">
</head>
<body>  
       <div class="wrapper">
        <div class="link">Ссылка 1</div>
        <div class="link">Ссылка 2</div>
        <div class="link">Ссылка 3</div>
        <div class="link">Ссылка 4</div>
        <div class="link">Ссылка 5</div>
        <div class="link">Ссылка 6</div>
    </div>
    <div class="outer">
        <div class="inner">
            <h3>Заголовок 1</h3>
            <span class="super"></span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt unde quibusdam eaque quam, iste laudantium adipisci fugit perspiciatis aperiam non nam corporis ab? In incidunt distinctio vitae, delectus, deleniti expedita?</p>
        </div>
        <div class="inner">
            <h3>Заголовок 2</h3>
            <span class="super"></span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus perspiciatis fuga natus ex nobis tempora velit consequuntur suscipit, exercitationem consequatur magni, repellendus numquam aliquid commodi dolorum corrupti, cum et dolor.</p>
        </div>
        <div class="inner">
            <h3>Заголовок 3</h3>
            <span class="super"></span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At amet, ullam asperiores. Commodi quod quibusdam dolores, illum minima nam officiis explicabo nulla? Voluptatum dolor repellat, soluta deleniti animi. Commodi, consequatur.</p>
        </div>
    </div>
</body>
</html>
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
* {
    margin: 0;
    padding: 0;
    outline: none;
}
 
main {
    width: 70%;
}
.wrapper {
    text-align: center;
    background: grey;
    height: 50px;
}
.link {
    display: inline-block;
    font-size: 18px;
    width: 300px;  
}
.inner {
    width: calc(30% - 40px);
    margin: 20px;
    display: inline-block;
}
.outer {
    padding-top: 20px;
    
}
h3 {
    font-size: 1.2rem;
    text-align: center;
    line-height: 1rem;
}
.inner p {
    font-size: 1rem;
    line-height: 1.1rem;
    margin-top: 15px;
}
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
21.05.2018, 23:08
Ответы с готовыми решениями:

Блочная верстка
Вот фото журнала, нужно сделать такую же страничку! Мне бы шаблон хоть, а то незнаю с чего начать!

Блочная верстка.
Прошу помощи, подскажите что неправильно. Пытаюсь сделать шаблон, вот код: &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0...

Блочная верстка
Здравствуйте, обзавелся такой проблемой - не получается сделать так, чтобы картинка в png была растягивающейся на 1024х768. Есть такой код...

3
 Аватар для Mailo
248 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,312
26.05.2018, 23:46
html, body {ну смести меня куда: padding/margin:90 60 90}
0
 Аватар для Freeze_Breeze
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
27.05.2018, 11:05
Invincible, Тебе нужно было так? https://codepen.io/Freeze_Breeze/pen/Vxodqr
HTML5
1
<div class="container"></div>
CSS
1
2
3
4
5
6
.container {
    max-width: 1000px;
    background-color: #448752;
    height: 200px;
    margin: 0 auto;
}
0
1187 / 757 / 127
Регистрация: 10.03.2012
Сообщений: 4,865
27.05.2018, 14:06  [ТС]
Я уже сам разобрался, спасибо
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
27.05.2018, 14:06
Помогаю со студенческими работами здесь

Блочная верстка
Просьба не судить строго. Изучаю HTML и CSS неделю. Когда писал сайт на табличной верстке все было отлично, но вот сейчас пробую на...

Блочная верстка
Всем привет! Занимаюсь изучением блочной версткой и столкнулся вот с такой проблемой. Хочу разместить внутри блока обертки еще два блока...

Блочная верстка
Здравствуйте. Остановился на шестом этапе по тестовому заданию, решил проверить себя и возник вопрос. Текущий результат моей верстки: ...

Блочная верстка
Помогите пожалуйста сделать так, чтобы DIVы выводились не по вертикали, а по горизонтали. @foreach ($tasks as $task) &lt;div...

Блочная верстка
помогите начинающему, что не так в коде. блоки перекошены


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Изучаю 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
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru