Построение макета в CSS

Question

Как мне собрать и объединить каждый div?

Я учусь кодировать в CSS, и я новичок, и я хочу собрать 3 - 8 частей div вкаждый ряд.После того, как я собрал некоторые из них, они выглядят неравномерно внутри IDE Dreamweaver (а также внутри дисплея браузера).

Кроме того, как мне изменить их размер автоматически?Я пробовал ширину: 100%;но все, что я получаю, это странные измененные размеры и размеры.

Если вы не понимаете, что я имею в виду, технически моя веб-страница выглядит следующим образом

----------------------------------------------------------------------------------
|                                                                                |
|                               background image 1                               |
|--------------------------------------------------------------------------------|
|                       |            |                    |                      |
|     bg img 2          |   bg img 3 |  bg img 4          |    bg img 5          |
|                       |            |                    |                      |
|--------------------------------------------------------------------------------|
|                                                                                |
|                           background image 5                                   |
|                                                                                |
|--------------------------------------------------------------------------------|

, но каждый раз, когда я помещаю свои divв той же строке с содержащим div для каждой строки, то есть

<div class="container">
    <div id="bg1" width:100; height:20;>
        <div id="bg2" width:150; height:20;>
            <div id="bg3" width: 250; height:20; >
                <div id="bg4" width:130; height:20;>
                </div>
            </div>
        </div>
    </div>
</div>

, все перемешивается в одном и том же месте.Я делаю что-то не так?

Буду признателен, если кто-нибудь скажет мне пошаговое решение ...

Еще раз, я хочу сделать следующее:

1. Создание веб-сайта с CSS для макета.
2. Автоматическое изменение размера всей страницы в соответствии с размером веб-браузера.

Спасибо.

Answer 1

Вы можете использовать тег <header> для верхней части и тег <footer> для нижней части.Ясно, что он работает и с divs, но, на мой взгляд, он чище.

Это означает, что у вас будет следующий код:

HTML:

 <header id="img1">
 </header>
 <div id="img2">
     &nbsp;
 </div>
 <div id="img3">
     &nbsp;
 </div>
 <div id="img4">
     &nbsp;
 </div>
 <div id="img5" class="newrow">
     &nbsp;
 </div>
 <footer id="img6">
 </footer>

, который может достаточно хорошо представлять желаемую структуру.Чтобы стилизовать это, вы можете использовать CSS, и есть много возможных решений проблемы.Одним из простых решений было бы установить <header> и <footer> на 100% ширины и переместить все <div> с, кроме последнего, влево, чтобы оставшееся содержимое (остальные <div> с, в этомслучай) будет справа от него.Тогда вам просто нужно установить ширину для всех <div> s, если вы хотите, чтобы вы могли даже установить ее в процентах, просто убедитесь, что она добавляет до 100, иначе у вас будет пробел справа.Кроме того, вы должны поместить margin-left в последний div, чтобы обеспечить правильное размещение контента.

Это может быть закодировано следующим образом:

CSS

body > header,
body > footer {
    width: 100%;
    clear: both;
}

body > div {
    float: left;
}

#img2 {
    width: 30%;
}

#img3 {
    width: 10%;
}

#img4 {
    width: 30%;
}

#img5 {
    width: 30%;
}

body > div.newrow {
    float: none;
    margin-left: 70%;
}

Вы можете увидеть небольшой пример этого кода здесь , и вы можете взять его код и поиграть с ним здесь .

, но, какЯ сказал, что есть много способов достичь желаемого макета, это только один пример.

Answer 2

Во-первых, не используйте встроенные стили для создания прототипов, когда вы новичок.Их слишком сложно редактировать вживую.Это замедлит процесс.

Вы звучите плохо для этого, но это круто!Мы все начали где-то.

Сначала создайте свои 5 делений и присвойте каждому уникальный идентификатор.Идентификаторы предназначены для вещей, которые появляются на странице только один раз.Классы предназначены для вещей, которые появляются более одного раза или могут в будущем появиться более одного раза.

Затем свяжите файл CSS, который является отдельной декларацией для каждого элемента div.Вы находитесь на правильном пути с шириной = 100% для адаптивного дизайна, хотя на практике это часто что-то вроде 92% даже для "полной ширины" div, потому что небольшой интервал хорош, а границы и отступы добавляют к общемуширина.Div ширины 90% с заполнением 6% всегда шире самого окна (больше 100%), что приводит к странному поведению, поэтому помните о блочной модели с самого начала.

Вот несколько советов, которые яЖаль, что кто-то рано сломал меня:

В наше время все намного проще, чем раньше для быстрого прототипирования CSS.Лучший способ понять это - отредактировать таблицу стилей вживую в Chrome Developer Tools.Загрузите и установите Chrome, если вы его еще не используете.Control нажмите на ваш div и выберите «Осмотреть элемент».Поиграйте в инспекторе и посмотрите, как все стили CSS можно редактировать в реальном времени, дважды щелкнув по ним и введя новые значения.Если вы щелкнете по вкладке «ресурсы», вы сможете сразу увидеть всю таблицу стилей, а также отредактировать свойства и даже добавить новые.Лучший способ увидеть, что происходит с изменением размеров, - это временно объявить контур, например:

#mydiv1 {outline: 2px dashed red;}

, потому что контуры не увеличивают ширину элемента, в отличие от границ.Затем, когда вы закончите, вы можете удалить описание схемы.Также имейте в виду, что любые изменения в CSS документа в Chrome Dev Tools будут потеряны при удалении.Так что копируйте и вставляйте свою работу в текстовый редактор по ходу дела.

Если вы заинтересованы в адаптивном дизайне, и это здорово, как только вы освоите все вышеперечисленное, пристегнитесь и прочитайте ИтанаКнига Маркотта:

http://www.abookapart.com/products/responsive-web-design

Инструктивный подход Маркотта состоит в том, чтобы начать с пикселей, а затем перевести их в проценты и эмс в таблице стилей, но это не обязательно должно быть так.Вы можете создавать «живые» переменные в браузере.

надеюсь, это поможет!

Answer 3

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

Во-вторых, глядя на ваш пример, я вижу шаблон для старого фотошопа "slice-n-dice" в методологии таблиц.Копировать это с DIVs в CSS довольно бессмысленно.

Третье.Если вам действительно нужна таблица (данные), держите ее в таблице.В этом нет ничего плохого.

Четвертый.Ключ ко всему этому - понимание поплавков и того, что в них содержится.Большинство грид-систем CSS основаны на этом.Я бы посмотрел на 960.css и немного начал с этим играть.Это должно помочь вам правильно понять, что происходит.

Answer 4

В соответствии с вашим макетом, что вы хотите, лучше иметь семантическую разметку HTML.

Пример

<div class="containerWrap">
<div class="fullWidth"><img src="/imagePath"/></div>
<ul class="container">
<li id="bg1"><img src="/imagePath"/></li>
<li id="bg2"><img src="/imagePath"/></li>
<li id="bg3"><img src="/imagePath"/></li>
<li id="bg4"><img src="/imagePath"/></li>
</ul>
<div><img src="/imagePath"/></div>
<div>

CSS Would be 

.fullWidth{
width:100%;
}
.containerWrap ul li{
list-style-type: none;
height:20px;
float:left;
}
#bg1{
width:100px;
}
#bg2{
width:150px;
}
#bg3{
width:250px;
}
#bg4{
width:130px;
}