Галантерея Реализация различных типовых макетов + анализ примеров известных сайтов

Общие макеты различных страниц + анализ примеров известных веб-сайтов + соответствующие рекомендации по чтению

Обязательно прочтите перед прочтением: в этой статье обобщаются различные распространенные реализации компоновки, а анализ преимуществ и недостатков каждого метода будет добавлен на github в будущем. Есть и другие макеты, не упомянутые в этой статье, и я обновлю их на github, когда подумаю или столкнусь с ними позже.
Из-за длины статьи оформление немного запутанное, надеюсь, вы не возражаете. ПК-сторона Nuggets автоматически сгенерирует каталог.Для облегчения чтения мобильного терминала специально сделан якорный каталог, а заголовки переписаны один за другим.Я реально устал! (== Позже выяснилось, что название статьи было обработано наггетсами, и точка привязки не сработала. На других сайтах это не проблема, и мобильный терминал может перейти на онлайн-демо github, чтобы читать). Если читатели обнаружат какие-либо проблемы или у них есть какие-либо комментарии, пожалуйста, не стесняйтесь присылать их! - Добро пожаловать в коллекцию! Добро пожаловать Звезда!

from github GitHub.com/sweet-KK/На данный момент…
Данная статья является оригинальной, просьба указывать источник для перепечатки, а абстрактный дренаж необязателен.

содержание

Примечание: ▲ добавляется после рекомендуемого использования на стороне ПК.Что касается мобильного терминала, flex имеет приоритет, если позволяет совместимость.

1. Горизонтальный центр
(1) Текстовые/строчные элементы/строчные блочные элементы▲
(2) Одиночный элемент блочного уровня▲
(3) Несколько элементов блочного уровня
(4) Используйте абсолютное позиционирование для достижения▲
(5) Любое количество элементов (flex)
★ Краткое содержание этой главы:

2. Вертикальное центрирование
(1) Однострочный текст/строчный элемент/строчный блочный элемент▲
(2) Многострочный текст/строчные элементы/строчные блочные элементы
(3) Изображение▲
(4) Один элемент блочного уровня
--(1) Реализовано с помощью table-cell:
--(2) Используйте абсолютное позиционирование для достижения:▲
--(3) Реализовано с помощью flex:
(5) Любое количество элементов (flex)
★ Краткое содержание этой главы:

Три, горизонтальное и вертикальное центрирование
(1) Встроенный/встроенный блочный уровень/изображение▲
(2)table-cell
(3) кнопка в качестве родительского элемента
(4) Абсолютное позиционирование▲
(5) Абсолютно по центру▲
(6)flex
(7) Окно центрировано
★ Краткое содержание этой главы:

Четыре, двухколоночный макет
4.1 Левый столбец фиксированной ширины, правый столбец адаптивный
--(1) Реализовано с использованием float+margin
--(2) Реализовано с помощью float+margin(fix)
--(3) Используйте float+overflow для достижения▲
--(4) Используйте таблицу для достижения▲
--(5) Реализовано с использованием абсолютного позиционирования
--(6) Реализовано с помощью flex
--(7) Реализация с использованием Grid
4.2 Левый столбец адаптивный, а правый столбец фиксированной ширины
--(1) Реализовано с использованием float+margin
--(2) Используйте float+overflow для достижения▲
--(3) Используйте таблицу для достижения▲
--(4) Используйте абсолютное позиционирование для достижения
--(5) Реализовано с помощью flex
--(6) Реализация с использованием Grid
4.3 Один столбец неопределенный, один столбец адаптивный
--(1) Используйте float+overflow для достижения▲
--(2) Реализовано с помощью flex
--(3) Реализовано с использованием сетки

Пять, трехколоночный макет
5.1 Две колонки фиксированной ширины, одна колонка адаптивная
--(1) Реализовано с использованием float+margin
--(2) Используйте float+overflow для достижения▲
--(3) Используйте таблицу для достижения▲
--(4) Реализовано с помощью flex
--(5) Реализация с использованием Grid
5.2 Фиксированная ширина с обеих сторон, адаптивная посередине
5.2.1 Метод компоновки спаренных крыльев
5.2.2 Метод макета Святого Грааля
5.2.3 Реализация с сеткой
5.2.4 Другие методы
--(1) Используйте таблицу для достижения▲
--(2) Реализовано с помощью flex
--(3) Используйте положение для достижения▲

6. Многоколоночный макет
6.1 Моноширинный макет
6.1.1 Четыре столбца одинаковой ширины
--(1) Используйте float для достижения▲
- (2) Используйте таблицу для достижения ▲
- (3) использование гибкости достижения
6.1.2 Несколько столбцов одинаковой ширины
--(1) Используйте float для достижения▲
--(2) Используйте таблицу для достижения▲
--(3) Реализовано с помощью flex
--(4) Реализация с использованием Grid
6.2 Схема Цзюгунге
--(1) Используйте таблицу для достижения▲
--(2) Реализовано с помощью flex
--(3) Реализовано с использованием сетки
6.3 Система сетки▲
--(1) Создано с меньшими затратами

Семь, полноэкранный режим
(1) Используйте абсолютное позиционирование для достижения▲
(2) Реализовать с помощью Flex
(3) Используйте сетку для достижения

Восемь, анализ макета примера веб-сайта:
8.1 Официальный сайт Сяоми
8.1.1 Метод, совместимый с IE9+
--(1) Общая страница
--(2) Частичный -- заголовок
--(3) Частично --top
--(4) Местный --центр
--(5) Частично -- снизу
--(6) Частично -- нижний колонтитул
--(7) Весь код (после оптимизации)
8.1.2 Использование Flexbox+Grid (будущее...)

9. Другие добавки:
9.1 Мобильное окно просмотра
--Установить область просмотра:
--Рекомендация по чтению:
9.2 Медиа-запросы
--пример кода:
--Рекомендация по чтению:
9.3 REM
--Рекомендация по чтению:
9.4 Flexbox
--Рекомендация по чтению:
9.5 CSS Grid
--Рекомендация по чтению:

Конец: спасибо

1. Горизонтальный центр

Главы 1, 2 и 3 представляют собой простые структуры родитель+сын, html-код и визуализация не будут опубликованы, только после главы 4.

(1) Текстовые/строчные элементы/строчные блочные элементы▲

Принцип: text-align контролирует только то, как встроенный контент (текст, встроенные элементы, встроенные элементы уровня блока) выравнивается относительно родительского элемента блока.

#parent{
    text-align: center;
}

Преимущества и недостатки

Преимущества: просто и быстро, легко понять, очень хорошая совместимость
Недостатки: действует только для встроенного содержимого; свойства будут наследоваться и влиять на встроенное содержимое потомков; если ширина дочернего элемента больше ширины родительского элемента, это недопустимо, только когда ширина встроенного содержимого потомка меньше, чем ширина элемента с установленным атрибутом text-align, он будет центрирован по горизонтали

(2) Одиночный элемент блочного уровня▲

Принцип: согласноТехнические характеристикиВступление очень понятное.Есть такая ситуация: при наличии поля в поле, если левое и правое поля установлены на авто, оставшееся пространство будет разделено поровну. Кроме того, если для верхнего и нижнего полей установлено значение auto, расчетное значение равно 0.

#son{
    width: 100px; /*必须定宽*/
    margin: 0 auto;
}

Преимущества и недостатки

Достоинства: простота, хорошая совместимость
Недостатки: ширина должна быть фиксированной, и значение не может быть автоматическим; ширина должна быть меньше, чем у родительского элемента, иначе она недействительна.

(3) Несколько элементов блочного уровня

#parent{
    text-align: center;
}
.son{
    display: inline-block; /*改为行内或者行内块级形式，以达到text-align对其生效*/
}

Преимущества и недостатки

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

(4) Используйте абсолютное позиционирование для достижения▲

Принцип: дочерний элемент абсолютно такой же, как и отец.Значения top, right, bottom и left относятся к размеру родительского элемента, а затем margin или transform относятся к его собственному размеру. использование достигает цели горизонтального центрирования.

#parent{
    height: 200px;
    width: 200px;  /*定宽*/
    position: relative;  /*父相*/
    background-color: #f00;
}
#son{
    position: absolute;  /*子绝*/
    left: 50%;  /*父元素宽度一半,这里等同于left:100px*/
    transform: translateX(-50%);  /*自身宽度一半,等同于margin-left: -50px;*/
    width: 100px;  /*定宽*/
    height: 100px;
    background-color: #00ff00;
}

Преимущества и недостатки

Преимущества: использование margin-left имеет хорошую совместимость; его можно реализовать как на блочном, так и на встроенном элементе.
Недостатки: много кода; вне потока документов; при использовании margin-left необходимо знать значение ширины; использование преобразования несовместимо (т.е. 9+)

(5) Любое количество элементов (flex)

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

#parent{
    display: flex;
    justify-content: center;
}

Преимущества и недостатки

Достоинства: мощный, простой и удобный, понятный
Минусы: сторона ПКплохая совместимость, мобильный терминал (Android4.0+)

краткое содержание главы:

Для горизонтально центрированных, мы должны сначала рассмотреть, какие элементы имеют встроенный эффект, должен быть первой мысльюtext-align:center, но это справедливо только для встроенного контента, поэтому мы должны использоватьtext-align:centerвы должны установить дочерний элемент вdisplay: inline;илиdisplay: inline-block;;
Во-вторых, рассмотреть, можно ли его использовать.margin: 0 auto;, потому что это можно сделать одной-двумя строчками кода, а добиться этого с абсолютным позиционированием практически невозможно.
Если вы можете использовать flex на мобильном терминале, вы можете использовать flex, который прост, удобен, гибок и мощен, он достоин того, чтобы быть отличным инструментом для верстки веб-страниц!

2. Вертикальное центрирование

(1) Однострочный текст/строчный элемент/строчный блочный элемент▲

Принцип: окончательная производительность line-height достигается встроенным блоком, и независимо от того, насколько высоким является встроенный блок (независимо от того, больше он или меньше текста), пространство, которое он занимает, является горизонтальной вертикальной линией, разделяемой с текстом. содержание.

#parent{
    height: 150px;
    line-height: 150px;  /*与height等值*/
}

Преимущества и недостатки

Достоинства: простота, хорошая совместимость
Недостатки: можно использовать только для однострочного встроенного контента; нужно знать значение высоты

(2) Многострочный текст/строчные элементы/строчные блочные элементы

Тот же принцип, что и выше

#parent{  /*或者用span把所有文字包裹起来，设置display：inline-block转换成图片的方式解决*/
    height: 150px;
    line-height: 30px;  /*元素在页面呈现为5行,则line-height的值为height/5*/
}

Преимущества и недостатки

Достоинства: простота, хорошая совместимость
Недостатки: Можно использовать только для встроенного контента, нужно знать высоту и сколько строк окончательно отрисовывается, чтобы рассчитать значение line-height, рекомендуется оборачивать многострочный текст в span

(3) Изображение▲

принцип:Дружба между vertical-align и line-height

#parent{
    height: 150px;
    line-height: 150px;
    font-size: 0;
}
img#son{vertical-align: middle;} /*默认是基线对齐，改为middle*/

Преимущества и недостатки

Достоинства: простота, хорошая совместимость
Недостатки: нужно добавить font-size: 0; чтобы он был полностью центрирован по вертикали; но должен быть основным, html#parent пакет img должен иметь разрывы строк или пробелы между ними.

(4) Один элемент блочного уровня

html-код:

<div id="parent">
    <div id="son"></div>
</div>

(4-1) Реализовано с использованием ячейки таблицы:

Принцип: таблица CSS, сделайте выравнивание содержимого таблицы посередине

#parent{
    display: table-cell;
    vertical-align: middle;
}

Преимущества и недостатки

Преимущества: простота, переменная ширина и высота, хорошая совместимость (ie8+)
Недостатки: Установка элемента tabl-cell, установка значения ширины и высоты в процентах недействительна, вам нужно установить display: table; Это также сделает его незнающим о высоте; Установка float или position приведет к повреждению макета по умолчанию , вы можете добавить родительский элемент div для определения таких атрибутов, как float; когда содержимое переполняется, родительский элемент будет автоматически растягиваться.

(4-2) Используйте абсолютное позиционирование для достижения:▲

/*原理：子绝父相，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到水平居中的目的*/
#parent{
    height: 150px;
    position: relative;  /*父相*/
}
#son{
    position: absolute;  /*子绝*/
    top: 50%;  /*父元素高度一半,这里等同于top:75px;*/
    transform: translateY(-50%);  /*自身高度一半,这里等同于margin-top:-25px;*/
    height: 50px;
}

/*优缺点
- 优点：使用margin-top兼容性好；不管是块级还是行内元素都可以实现
- 缺点：代码较多；脱离文档流；使用margin-top需要知道高度值；使用transform兼容性不好（ie9+）*/

或

/*原理：当top、bottom为0时,margin-top&bottom会无限延伸占满空间并且平分*/
#parent{position: relative;}
#son{
    position: absolute;
    margin: auto 0;
    top: 0;
    bottom: 0;
    height: 50px;
}

/*优缺点
- 优点：简单;兼容性较好(ie8+)
- 缺点：脱离文档流*/

(4-3) Реализовано с помощью flex:

Принцип: flex задает выравнивание, см. рекомендацию по прочтению flex в конце статьи.

#parent{
    display: flex;
    align-items: center;
}

或

#parent{display: flex;}
#son{align-self: center;}

或
/*原理：这个尚未搞清楚，应该是flex使margin上下边界无限延伸至剩余空间并平分了*/
#parent{display: flex;}
#son{margin: auto 0;}

Преимущества и недостатки

Преимущества: простой и гибкий, мощный
Минусы: сторона ПКплохая совместимость, мобильный терминал (Android4.0+)

(5) Любое количество элементов (flex)

Принцип: flex задает выравнивание, см. рекомендацию по прочтению flex в конце статьи.

#parent{
    display: flex;
    align-items: center;
}

或

#parent{
    display: flex;
}
.son{
    align-self: center;
}

或 

#parent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Преимущества и недостатки

Преимущества: простой и гибкий, мощный
Минусы: сторона ПКплохая совместимость, мобильный терминал (Android4.0+)

★ Краткое содержание этой главы:

Для вертикального центрирования первой мыслью должно бытьline-height, но это можно использовать только для встроенного контента;
Во-вторых, рассмотреть, можно ли его использовать.vertical-align: middle;, но это должно быть знакомо с принципом, чтобы использовать его плавно, рекомендуется прочитатьДружба между vertical-align и line-height;
Тогда есть абсолютное позиционирование.Хотя код немного больше, он лучше подходит для разных ситуаций;
Если позволяет мобильная совместимость, используйте flex, если вы можете использовать flex

Три, горизонтальное и вертикальное центрирование

(1) Встроенный/встроенный блочный уровень/изображение▲

принцип:text-align: center;Управляйте горизонтальным центрированием встроенного содержимого относительно родительского элемента блока, затемline-heightа такжеvertical-alignдружба делает его вертикально центрированным,font-size: 0;заключается в устранении ошибки приблизительного центрирования

#parent{
    height: 150px;
    line-height: 150px;  /*行高的值与height相等*/
    text-align: center;
    font-size: 0;   /*消除幽灵空白节点的bug*/
}
#son{
    /*display: inline-block;*/  /*如果是块级元素需改为行内或行内块级才生效*/
    vertical-align: middle;
}

Преимущества и недостатки

Преимущества: простой код, хорошая совместимость (ie8+)
Недостатки: действует только для встроенного контента; необходимо добавитьfont-size: 0;Он может быть полностью центрирован по вертикали, однако вам нужно обратить внимание на необходимость разрывов строк или пробелов между #parent и #son в html; знакомый сline-heightа такжеvertical-alignДружба это сложно

(2)table-cell

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

#parent{
    height: 150px;
    width: 200px;
    display: table-cell;
    vertical-align: middle;
    /*text-align: center;*/   /*如果是行内元素就添加这个*/
}
#son{
    /*margin: 0 auto;*/    /*如果是块级元素就添加这个*/
    width: 100px;
    height: 50px;
}

Преимущества и недостатки

Достоинства: простой, подходит для неизвестной ширины и высоты, хорошая совместимость (ie8+)
Недостатки: установка элемента tabl-cell, установка значения ширины и высоты в процентах недействительна, и ее необходимо установить на родительский элемент.display: table;Только вступают в силу; table-cell не воспринимает поля, а установка table-row и других атрибутов для родительского элемента также заставит его не знать высоту; установка float или position приведет к повреждению макета по умолчанию, вы можете рассмотреть возможность добавления родителя div для определения float и других атрибутов; когда содержимое переполняется, родительский элемент будет автоматически растягиваться

(3) кнопка в качестве родительского элемента

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

button#parent{  /*改掉button默认样式就好了,不需要居中处理*/
    height: 150px;
    width: 200px;
    outline: none;  
    border: none;
}
#son{
    display: inline-block; /*button自带text-align: center,改为行内水平居中生效*/
}

Преимущества и недостатки

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

(4) Абсолютное позиционирование

Принцип: дочерний элемент является абсолютно отцом, значения top, right, bottom и left относятся к размеру родительского элемента, а затем поле или преобразование относятся к его собственному размеру, и используется комбинация для достижения геометрического горизонтального и вертикального центрирования

#parent{
    position: relative;
}
#son{
    position: absolute;
    top: 50%;
    left: 50%;
    /*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/
    transform: translate(-50%,-50%); 
}

Преимущества и недостатки

Преимущества: хорошая совместимость с маржой; могут быть достигнуты блочные или строчные элементы.
Недостатки: много кода; не в потоке документов; при использовании поля необходимо знать ширину и высоту; использование преобразования несовместимо (т.е. 9+)

(5) Абсолютно по центру

Принцип: когда top и bottom равны 0, если для margin-top&bottom установлено значение auto, оно будет бесконечно расширяться, чтобы заполнить пространство и разделить его поровну; когда left и right равны 0, если для margin-left&right установлено значение auto, оно будет расширяться бесконечно заполнить пространство и разделить его поровну.

#parent{
    position: relative;
}
#son{
    position: absolute;
    margin: auto;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Преимущества и недостатки

Достоинства: нет необходимости обращать внимание на ширину и высоту, лучшая совместимость (т.е.8+)
Недостатки: больше кода, вне документооборота

(6)flex

Принцип: flex задает выравнивание, см. рекомендацию по прочтению flex в конце статьи.

#parent{
    display: flex;
}
#son{
    margin: auto;
}

或

#parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

或

#parent{
    display: flex;
    justify-content: center;
}
#son{
    align-self: center;
}

Преимущества и недостатки

Преимущества: простой и гибкий, мощный
Минусы: сторона ПКплохая совместимость, мобильный терминал (Android4.0+)

(7) Окно центрировано

Принцип: vh — это единица измерения области просмотра, область просмотра — это видимая часть документа, 50vh — это 50/100 высоты области просмотра, установите верхнее поле 50vh, а затем

#son{
	/*0如果去掉，则会多出滚动条并且上下都是50vh的margin。如果去掉就给body加上overflow:hidden;*/
    margin: 50vh auto 0;  
    transform: translateY(-50%);
}

Преимущества и недостатки

Преимущества: простота, легкость понимания, две строки кода могут центрировать экран по горизонтали и вертикали.
Недостатки: плохая совместимость (ie9+, Android4.4+)

★ Краткое содержание этой главы:

В обычных условиях, горизонтальное и вертикальное центрирование, мы чаще всего используем абсолютное позиционирование и отрицательные поля, недостатком является то, что вам нужно знать ширину и высоту, вам не нужно использовать преобразование, но совместимость не очень хорошая (т.е. 9+) ;
Второй - абсолютное центрирование, абсолютное позиционирование устанавливается сверху, слева, справа, снизу на 0, а затемmargin:auto;Позвольте браузеру автоматически разделить поля пополам для достижения цели горизонтального и вертикального центрирования;
Если это встроенный/встроенный блочный уровень/изображение, ему может быть присвоен приоритетline-heightа такжеvertical-alignиспользуется в сочетании, не забудьте также иметьtext-align, Кода для этого метода не так много, но принцип немного сложен для понимания, и его нужно хорошо изучить, если вы хотите иметь опыт работы с различными ситуациями;
Используйте flex, если это позволяет мобильная совместимость.

Четыре, двухколоночный макет

4.1 Левый столбец фиксированной ширины, правый столбец адаптивный

Эффект:

(1) Орудие с плавающей запятой + маржа

html-код:

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css-код:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    margin-left: 100px; /*大于等于#left的宽度*/
}

(2) Используйте float+margin(fix) для достижения

html-код:

<body>
<div id="left">左列定宽</div>
<div id="right-fix">
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right-fix {
    float: right;
    width: 100%;
    margin-left: -100px; /*正值大于或等于#left的宽度,才能显示在同一行*/
}
#right{
    margin-left: 100px; /*大于或等于#left的宽度*/
    background-color: #0f0;
    height: 500px;
}

(3) Реализовано с помощью float+overflow

html-код:

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css-код:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden; /*触发bfc达到自适应*/
}

Преимущества и недостатки:

Достоинства: Код простой и понятный, не нужно обращать внимание на ширину фиксированной ширины, и использовать bfc для достижения адаптивного эффекта
Недостатки: Поплавок отделен от потока документов, и поплавок нужно очищать вручную, иначе это приведет к высокой степени коллапса, ie6 не поддерживается

(4) Используйте табличную реализацию

html-код:

<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>

css-код:

#parent{
    width: 100%;
    display: table;
    height: 500px;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    background-color: #0f0;
}
#left,#right{
    display: table-cell;  /*利用单元格自动分配宽度*/
}

Преимущества и недостатки:

Достоинства: Код прост и понятен, не нужно обращать внимание на ширину фиксированной ширины, а для достижения адаптивного эффекта используется автоматическое выделение ячеек
Недостатки: неверная маржа, проблематично установить интервал, не поддерживает ie8-

(5) Используйте абсолютное позиционирование для достижения

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#parent{
    position: relative;  /*子绝父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    left: 100px;  /*值大于等于#left的宽度*/
    right: 0;
    background-color: #0f0;
    height: 500px;
}

(6) Реализовано с использованием flex

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#parent{
    width: 100%;
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    flex: 1; /*均分了父元素剩余空间*/
    background-color: #0f0;
}

(7) Используйте сетку для достижения

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#parent {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto;  /*设定2列就ok了,auto换成1fr也行*/
}
#left {
    background-color: #f00;
}
#right {
    background-color: #0f0;
}

4.2 Левый столбец адаптивный, а правый столбец фиксированной ширины

Эффект:

(1) Реализовано с использованием float+margin

html-код:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css-код:

#parent{
    height: 500px;
    padding-left: 100px;  /*抵消#left的margin-left以达到#parent水平居中*/
}
#left {
    width: 100%;
    height: 500px;
    float: left;
    margin-left: -100px; /*正值等于#right的宽度*/
    background-color: #f00;
}
#right {
    height: 500px;
    width: 100px;
    float: right;
    background-color: #0f0;
}

(2) Реализовано с использованием float+overflow

html-код:

<body>
<div id="parent">
    <div id="right">右列定宽</div>
    <div id="left">左列自适应</div>   <!--顺序要换一下-->
</div>
</body>

css-код:

#left {
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #f00;
}
#right {
    margin-left: 10px;  /*margin需要定义在#right中*/
    float: right;
    width: 100px;
    height: 500px;
    background-color: #0f0;
}

Преимущества и недостатки:

Достоинства: Код простой и понятный, не нужно обращать внимание на ширину фиксированной ширины, и использовать bfc для достижения адаптивного эффекта
Недостатки: Поплавок отделен от потока документов, и поплавок нужно очищать вручную, иначе это приведет к высокой степени коллапса, ie6 не поддерживается

(3) Используйте табличную реализацию

html-код:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css-код:

#parent{
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    background-color: #f00;
    display: table-cell;
}
#right {
    width: 100px;
    background-color: #0f0;
    display: table-cell;
}

Преимущества и недостатки:

Достоинства: Код прост и понятен, не нужно обращать внимание на ширину фиксированной ширины, а для достижения адаптивного эффекта используется автоматическое выделение ячеек
Недостатки: неверная маржа, проблематично установить интервал, не поддерживает ie8-

(4) Используйте абсолютное позиционирование для достижения

html-код:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css-код:

#parent{
    position: relative;  /*子绝父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    right: 100px;  /*大于等于#rigth的宽度*/
    background-color: #f00;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #0f0;
    width: 100px;
    height: 500px;
}

(5) Реализовано с использованием flex

html-код:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css-код:

#parent{
    height: 500px;
    display: flex;
}
#left {
    flex: 1;
    background-color: #f00;
}
#right {
    width: 100px;
    background-color: #0f0;
}

(6) Используйте сетку для достижения

html-код:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css-код:

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: auto 100px;  /*设定2列,auto换成1fr也行*/
}
#left {
    background-color: #f00;
}
#right {
    background-color: #0f0;
}

4.3 Один столбец неопределенный, один столбец адаптивный

(Ширина поля изменяется по мере увеличения или уменьшения содержимого, а другое поле адаптируется)

Рендеринг:

После изменения:

(1) Реализовано с помощью float+overflow

html-код:

<body>
<div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#left {
    margin-right: 10px;
    float: left;  /*只设置浮动,不设宽度*/
    height: 500px;
    background-color: #f00;
}
#right {
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #0f0;
}

Преимущества и недостатки:

Преимущества: простой код, понятный, не нужно обращать внимание на ширину, используйте bfc для достижения адаптивного эффекта
Недостатки: Поплавок отделен от потока документов, и поплавок нужно очищать вручную, иначе это приведет к высокой степени коллапса, ie6 не поддерживается

(2) Реализовано с использованием flex

html-код:

<body>
<div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#parent{
    display: flex;
}
#left { /*不设宽度*/
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
    flex: 1;  /*均分#parent剩余的部分*/
}

(3) Используйте сетку для достижения

html-код:

<body>
<div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#parent{
    display: grid;
    grid-template-columns: auto 1fr;  /*auto和1fr换一下顺序就是左列自适应,右列不定宽了*/
}
#left {
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
}

Левый столбец является самоадаптирующимся, а правый столбец имеет переменную ширину (см. соответствующие примеры кода в 4.1 и 4.3).

Пять, трехколоночный макет

5.1 Две колонки фиксированной ширины, одна колонка адаптивная

Рендеринг:

(1) Реализовано с использованием float+margin

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#parent{
    min-width: 310px; /*100+10+200,防止宽度不够,子元素换行*/
}
#left {
    margin-right: 10px;  /*#left和#center间隔*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center{
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}
#right {
    margin-left: 320px;  /*等于#left和#center的宽度之和加上间隔,多出来的就是#right和#center的间隔*/
    height: 500px;
    background-color: #0f0;
}

(2) Реализовано с использованием float+overflow

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#parent{
    min-width: 320px; /*100+10+200+20,防止宽度不够,子元素换行*/
}
#left {
    margin-right: 10px; /*间隔*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center{
    margin-right: 10px; /*在此定义和#right的间隔*/
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}
#right {
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #0f0;
}

Преимущества и недостатки:

Достоинства: Код простой и понятный, не нужно обращать внимание на ширину фиксированной ширины, и использовать bfc для достижения адаптивного эффекта
Недостатки: Поплавок отделен от потока документов, и поплавок нужно очищать вручную, иначе это приведет к высокой степени коллапса, ie6 не поддерживается

(3) Используйте табличную реализацию

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#parent {
    width: 100%; 
    height: 520px; /*抵消上下间距10*2的高度影响*/
    margin: -10px 0;  /*抵消上下边间距10的位置影响*/
    display: table;
    /*左右两边间距大了一点,子元素改用padding设置盒子间距就没有这个问题*/
    border-spacing: 10px;  /*关键!!!设置间距*/
}
#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    width: 200px;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    background-color: #0f0;
}

Преимущества и недостатки:

Достоинства: Код прост и понятен, не нужно обращать внимание на ширину фиксированной ширины, а для достижения адаптивного эффекта используется автоматическое выделение ячеек
Недостатки: неверная маржа, проблематично установить интервал, не поддерживает ie8-

(4) Реализовано с использованием flex

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#parent {
    height: 500px;
    display: flex;
}
#left {
    margin-right: 10px;  /*间距*/
    width: 100px;
    background-color: #f00;
}
#center {
    margin-right: 10px;  /*间距*/
    width: 200px;
    background-color: #eeff2b;
}
#right {
    flex: 1;  /*均分#parent剩余的部分达到自适应*/
    background-color: #0f0;
}

(5) Используйте сетку для достижения

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css-код:

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: 100px 200px auto; /*设置3列,固定第一第二列的宽度,第三列auto或者1fr*/
}
#left {
    margin-right: 10px;  /*间距*/
    background-color: #f00;
}
#center {
    margin-right: 10px;  /*间距*/
    background-color: #eeff2b;
}
#right {
    background-color: #0f0;
}

5.2 Фиксированная ширина с обеих сторон, адаптивная посередине

5.2.1 Метод компоновки спаренных крыльев

Рендеринг:

html-код:

<body>
<div id="header"></div>
<!--中间栏需要放在前面-->
<div id="parent">
    <div id="center">
        <div id="center_inbox">中间自适应</div>
        <hr>  <!--方便观察原理-->
    </div>
    <div id="left">左列定宽</div>
    <div id="right">右列定宽</div>
</div>
<div id="footer"></div>
</body>

css-код:

#header {
    height: 60px;
    background-color: #ccc;
}
#left {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -100%; /*调整#left的位置,值等于自身宽度*/
    background-color: #f00;
    opacity: 0.5;
}
#center {
    height: 500px;
    float: left;
    width: 100%;
    background-color: #eeff2b;
}
#center_inbox{
    height: 480px;
    border: 1px solid #000;
    margin: 0 220px 0 120px;  /*关键!!!左右边界等于左右盒子的宽度,多出来的为盒子间隔*/
}
#right {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使right到指定的位置,值等于自身宽度*/
    background-color: #0f0;
    opacity: 0.5;
}
#footer {
    clear: both;  /*注意清除浮动!!*/
    height: 60px;
    background-color: #ccc;
}

5.2.2 Метод макета Святого Грааля

Рендеринг:

html-код:

<body>
<div id="header"></div>
<div id="parent">
    <!--#center需要放在前面-->
    <div id="center">中间自适应
        <hr>
    </div>
    <div id="left">左列定宽</div>
    <div id="right">右列定宽</div>
</div>
<div id="footer"></div>
</body>

css-код:

#header{
    height: 60px;
    background-color: #ccc;
}
#parent {
    box-sizing: border-box;
    height: 500px;
    padding: 0 215px 0 115px;  /*为了使#center摆正,左右padding分别等于左右盒子的宽,可以结合左右盒子相对定位的left调整间距*/
}
#left {
    margin-left: -100%;  /*使#left上去一行*/
    position: relative;
    left: -115px;  /*相对定位调整#left的位置,正值大于或等于自身宽度*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
    opacity: 0.5;
}
#center {
    float: left;
    width: 100%;  /*由于#parent的padding,达到自适应的目的*/
    height: 500px;
    box-sizing: border-box;
    border: 1px solid #000;
    background-color: #eeff2b;
}
#right {
    position: relative;
    left: 215px; /*相对定位调整#right的位置,大于或等于自身宽度*/
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使#right上去一行*/
    float: left;
    background-color: #0f0;
    opacity: 0.5;
}
#footer{
    height: 60px;
    background-color: #ccc;
}

5.2.3 Реализация с сеткой

Рендеринг:

html-код:

<body>
<div id="parent">
    <div id="header"></div>
    <!--#center需要放在前面-->
    <div id="center">中间自适应
        <hr>
    </div>
    <div id="left">左列定宽</div>
    <div id="right">右列定宽</div>
    <div id="footer"></div>
</div>
</body>

css-код:

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto 200px; /*设定3列*/
    grid-template-rows: 60px auto 60px; /*设定3行*/
    /*设置网格区域分布*/
    grid-template-areas: 
        "header header header" 
        "leftside main rightside" 
        "footer footer footer";
}
#header {
    grid-area: header; /*指定在哪个网格区域*/
    background-color: #ccc;
}
#left {
    grid-area: leftside;
    background-color: #f00;
    opacity: 0.5;
}
#center {
    grid-area: main; /*指定在哪个网格区域*/
    margin: 0 15px; /*设置间隔*/
    border: 1px solid #000;
    background-color: #eeff2b;
}
#right {
    grid-area: rightside; /*指定在哪个网格区域*/
    background-color: #0f0;
    opacity: 0.5;
}
#footer {
    grid-area: footer; /*指定在哪个网格区域*/
    background-color: #ccc;
}

5.2.4 Другие методы

Рендеринг:

(1) Использовать табличную реализацию

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css-код:

#parent {
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    width: 200px;
    background-color: #0f0;
}

Преимущества и недостатки:

Достоинства: Код лаконичный и понятный;
Недостатки: недопустимое поле, и интервал с обеих сторон таблицы интервалов между границами не может быть устранен; не поддерживает ie8-

(2) Реализовано с использованием flex

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css-код:

#parent {
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#center {
    flex: 1;  /*均分#parent剩余的部分*/
    background-color: #eeff2b;
}
#right {
    width: 200px;
    background-color: #0f0;
}

(3) Используйте положение для достижения

html-код:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css-код:

#parent {
    position: relative; /*子绝父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center {
    height: 500px;
    margin-left: 100px; /*大于等于#left的宽度,或者给#parent添加同样大小的padding-left*/
    margin-right: 200px;  /*大于等于#right的宽度,或者给#parent添加同样大小的padding-right*/
    background-color: #eeff2b;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 500px;
    background-color: #0f0;
}

Преимущества и недостатки:

Достоинства: простота понимания, хорошая совместимость
Недостатки: нужно вручную рассчитывать ширину для определения поля; выбивается из потока документов; много кода

6. Многоколоночный макет

6.1 Моноширинный макет

6.1.1 Четыре столбца одинаковой ширины

(1) Реализовано с использованием float

Рендеринг:

html-код:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
</div>
</body>

css-код:

#parent {
    margin-left: -20px; /*使整体内容看起来居中,抵消padding-left的影响*/
}
.column{
    padding-left: 20px;  /*盒子的边距*/
    width: 25%;
    float: left;
    box-sizing: border-box;
    border: 1px solid #000;
    background-clip: content-box; /*背景色从内容开始绘制,方便观察*/
    height: 500px;
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Преимущества и недостатки:

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

(2) Использовать табличную реализацию

Рендеринг:

html-код:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
</div>
</body>

css-код:

#parent {
    height: 540px;  /*抵消上下边20*2间距的高度影响*/
    display: table;
    margin: -20px 0;  /*抵消上下边20*2间距的位置影响*/
    /*两边离页面间距较大,改用子元素设置padding来当成间隔就不会有这样的问题*/
    border-spacing: 20px;  /*设置间距*/
}
.column{
    display: table-cell;
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Преимущества и недостатки:

Достоинства: Код простой и понятный, не нужно обращать внимание на ширину, ячейки автоматически делятся на равные части
Недостатки: неверная маржа, проблематично установить интервал, не поддерживает ie8-

(3) Реализовано с использованием flex

Рендеринг:

html-код:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
</div>
</body>

css-код:

#parent {
    margin-left: -15px;  /*使内容看起来居中*/
    height: 500px;
    display: flex;
}
.column{
    flex: 1; /*一起平分#parent*/
    margin-left: 15px; /*设置间距*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Несколько столбцов одинаковой ширины

Рендеринг:

(1) Реализовано с использованием float

html-код:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
</div>
</body>

css-код:

#parent {
    height: 500px;
}
.column{
    float: left;  /*添加浮动*/
    width: 16.66666666666667%;  /*100÷列数,得出百分比*/
    height: 500px;
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Преимущества и недостатки:

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

(2) Использовать табличную реализацию

HTML-код

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
</div>
</body>

css-код:

#parent {
    width: 100%;
    height: 500px;
    display: table;
}
.column{
    display: table-cell; /*无需关注列数,单元格自动平分*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Преимущества и недостатки:

Плюсы: Простой код, понятный, не нужно беспокоиться о ширине. Ячейки автоматически делятся
Недостатки: неверная маржа, проблематичная настройка интервала, несовместимость с ie8-

(3) Реализовано с использованием flex

html-код:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
</div>
</body>

css-код:

#parent {
    height: 500px;
    display: flex;
}
.column{
    flex: 1;  /*无需关注列数,一起平分#parent*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

(4) Используйте сетку для достижения

html-код:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我输文字我是文字我是文字</p></div>
</div>
</body>

css-код:

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: repeat(6,1fr);  /*6就是列数*/
}
.column{}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

6.2 Схема Цзюгунге

Рендеринг:

(1) Использовать табличную реализацию

html-код:

<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>

css-код:

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: table;
}
.row {
    display: table-row;
}
.item {
    border: 1px solid #000;
    display: table-cell;
}

Преимущества и недостатки:

Достоинства: Код лаконичный и понятный;
Недостатки: недопустимое поле, и интервал с обеих сторон таблицы интервалов между границами не может быть устранен; не поддерживает ie8-

(2) Реализовано с использованием flex

html-код:

<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>

css-код:

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
    flex: 1;
}
.item {
    flex: 1;
    border: 1px solid #000;
}

(3) Используйте сетку для достижения

CSS Grid очень мощен и может реализовывать различные трехмерные макеты.Вы можете обратиться к рекомендациям по чтению в конце этой статьи.

html-код:

<body>
<div id="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>

css-код:

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*等同于1fr 1fr 1fr,此为重复的合并写法*/
    grid-template-rows: repeat(3, 1fr);  /*等同于1fr 1fr 1fr,此为重复的合并写法*/
}
.item {
    border: 1px solid #000;
}

6.3 Сетка

Преимущества и недостатки:

Преимущества: код лаконичен и прост для понимания, улучшает плавность содержимого страницы и может быть адаптирован под различные устройства;

(1) Создано с меньшими затратами

/*生成栅格系统*/
@media screen and (max-width: 768px){
  .generate-columns(12);     /*此处设置生成列数*/
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-xs-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
@media screen and (min-width: 768px){
  .generate-columns(12);    /*此处设置生成列数*/
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-sm-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
div[class^="column-xs-"]{
	float: left;
}
div[class^="column-sm-"]{
	float: left;
}

Скомпилированный CSS-код:

@media screen and (max-width: 768px) {
  .column-xs-1 {  width: 8.33333333%;  }
  .column-xs-2 {  width: 16.66666667%;  }
  .column-xs-3 {  width: 25%;  }
  .column-xs-4 {  width: 33.33333333%;  }
  .column-xs-5 {  width: 41.66666667%;  }
  .column-xs-6 {  width: 50%;  }
  .column-xs-7 {  width: 58.33333333%;  }
  .column-xs-8 {  width: 66.66666667%;  }
  .column-xs-9 {  width: 75%;  }
  .column-xs-10 {  width: 83.33333333%;  }
  .column-xs-11 {  width: 91.66666667%;  }
  .column-xs-12 {  width: 100%;  }
}
@media screen and (min-width: 768px) {
  .column-sm-1 {  width: 8.33333333%;  }
  .column-sm-2 {  width: 16.66666667%;  }
  .column-sm-3 {  width: 25%;  }
  .column-sm-4 {  width: 33.33333333%;  }
  .column-sm-5 {  width: 41.66666667%;  }
  .column-sm-6 {  width: 50%;  }
  .column-sm-7 {  width: 58.33333333%;  }
  .column-sm-8 {  width: 66.66666667%;  }
  .column-sm-9 {  width: 75%;  }
  .column-sm-10 {  width: 83.33333333%;  }
  .column-sm-11 {  width: 91.66666667%;  }  
  .column-sm-12 {  width: 100%;  }
}
div[class^="column-xs-"]{
	float: left;
}
div[class^="column-sm-"]{
	float: left;
}

Семь, полноэкранный режим

Рендеринг:

(1) Используйте абсолютное позиционирование для достижения

html-код:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

css-код:

html, body, #parent {height: 100%;overflow: hidden;}
#parent > div {
    border: 1px solid #000;
}
#top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}
#left {
    position: absolute;
    top: 100px;  /*值大于等于#top的高度*/
    left: 0;
    bottom: 50px;  /*值大于等于#bottom的高度*/
    width: 200px;
}
#right {
    position: absolute;
    overflow: auto;
    left: 200px;  /*值大于等于#left的宽度*/
    right: 0;
    top: 100px;  /*值大于等于#top的高度*/
    bottom: 50px;  /*值大于等于#bottom的高度*/
}
#bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
}

Преимущества и недостатки:

Достоинства: легко понять
Недостатки: много кода, нужно вычислять ширину и высоту каждого бокса;

(2) Реализовано с использованием flex

html-код:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="middle">
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="bottom">bottom</div>
</div>
</body>

css-код:

*{
    margin: 0;
    padding: 0;
}
html,body,#parent{
    height:100%;
}
#parent {
    display: flex;
    flex-direction: column;
}
#top {
    height: 100px;
}
#bottom {
    height: 50px;
}
#middle {
    flex: 1;
    display: flex;
}
#left {
    width: 200px;
}
#right {
    flex: 1;
    overflow: auto;
}

(3) Используйте сетку для достижения

html-код:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

css-код:

*{
    margin: 0;
    padding: 0;
}
html, body, #parent {
    height: 100%;
}
#parent {
    width: 100%;
    height: 100%;
    display: grid;
    /*分成2列,第一列宽度200px,第二列1fr平分剩余的部分,此处换成auto也行*/
    grid-template-columns: 200px 1fr;  
    /*分成3行,第一行高度100px,第二行auto为自适应,此处换成1fr也行,第3行高度为50px*/
    grid-template-rows: 100px auto 50px; 
    /*定义网格区域分布*/
    grid-template-areas:
        "header header"
        "aside main"
        "footer footer";
}
#parent>div{
    border: 1px solid #000;
}
#top{
    grid-area: header;  /*指定在哪个网格区域*/
}
#left{
    grid-area: aside;  /*指定在哪个网格区域*/
}
#right{
    grid-area: main;  /*指定在哪个网格区域*/
}
#bottom{
    grid-area: footer;  /*指定在哪个网格区域*/
}

Восемь, анализ макета примера веб-сайта:

Так как есть много методов, я думаю, какой из них использовать при анализе.Пока производительность IE9 и Google соответствует, я не буду тестировать другие браузеры один за другим.Если у вас есть какие-либо вопросы или комментарии, пожалуйста, оставьте сообщение !

8.1 Официальный сайт Сяоми

https://www.mi.com/

8.1.1 Метод, совместимый с IE9+

(1) Общая страница

Всю страницу можно разделить на пять структур: верх, верх, середина, низ и низ, как показано на рисунке:

html-код:

<body>
<div class="header"></div>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
<div class="footer"></div>
</body>

css-код:

*{  /*为了方便,就这样清空默认样式了*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
body{
    background-color: #f5f5f5;
}
.header{
    margin-bottom: 20px;
    height: 40px;
    background-color: #333;
}
.top{
    height: 1210px;
    background-color: #fff;
}
.center{
    width: 1226px;
    margin: 0 auto;
    margin-bottom: 60px;
    height: 1791px;
    background-color: #fff;
}
.bottom{
    height: 274px;
    background-color: #fff;
}
.footer{
    margin: 0 auto;
    width: 1226px;
    height: 166px;
    border: 1px solid #000;
}

(2) Частично - заголовок

Заголовочная часть — это в первую очередь горизонтально центрированный контент, а блок контента можно разделить на левую и правую части, как показано на рисунке:

html-код:

<div class="header">
    <div class="container">
        <div class="header-left"></div>
        <div class="header-rigth"></div>
    </div>
</div>

css-код:

.container{  /*后面会继续用到*/
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #f00;
}
.header-left{
    width: 380px;
    height: 100%;
    float: left;
    background-color: #0f0;
}
.header-rigth{
    width: 260px;
    height: 100%;
    float: right;
    background-color: #0f0;
}

(3) Частично - сверху

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

html-код:

<div class="top">
    <div class="container">
        <div class="top-nav"></div>
        <div class="top-slider">
            <div class="slider-navbar"></div>
        </div>
        <div class="top-recommend">
            <div class="recommend-left"></div>
            <div class="recommend-right">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="top-flashsale">
            <div class="flashsale-title"></div>
            <div class="flashsale-content">
                <div class="content-timer"></div>
                <ul class="content-shops">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>

css-код:

.top {
    height: 1210px;
    background-color: #fff;
}
.top-nav {
    height: 100px;
    background-color: #f00;
}
.top-slider {
    margin-bottom: 14px;
    position: relative;
    height: 460px;
    background-color: #00f;
}
.slider-navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 234px;
    height: 100%;
    background-color: black;
    opacity: .5;
}
.top-recommend {
    margin-bottom: 26px;
    height: 170px;
    background-color: #0f0;
}
.recommend-left {
    float: left;
    height: 100%;
    width: 234px;
    background-color: skyblue;
}
.recommend-right {
    float: right;
    width: 978px;
    height: 100%;
    border: 1px solid #000;
}
.recommend-right > ul {
    height: 100%;
}
.recommend-right > ul li {
    float: left;
    width: 316px;
    height: 100%;
    background-color: deepskyblue;
}
.recommend-right > ul li + li {
    margin-left: 14px;
}
.top-flashsale {
    height: 438px;
    background-color: #ff4455;
}
.flashsale-title {
    height: 58px;
    background-color: purple;
}
.flashsale-content {
    border: 1px solid #000;
    padding-bottom: 40px;
    height: 380px;
}
.content-timer {
    margin-right: 14px;
    float: left;
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops {
    overflow: hidden;
    height: 100%;
    background-color: #6effb1;
}
.content-shops > li {
    float: left;
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops > li+li {
    margin-left: 12.5px;
}

(4) Местный - центр

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

html-код:

<div class="center">
    <div class="center-phone">
        <div class="phone-title"></div>
        <div class="phone-content">
            <div class="phone-left"></div>
            <ul class="phone-right">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <div class="center-household">
        <div class="household-title"></div>
        <div class="household-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>
                <p></p>
                <p></p>
            </li>
        </div>
    </div>

    <div class="center-video">
        <div class="video-title"></div>
        <ul class="video-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

css-код:

.center {
    margin: 0 auto;
    margin-bottom: 60px;
    padding-top: 60px;
    width: 1226px;
    height: 1791px;
    background-color: #fff;
}
.center-phone{
    margin-bottom: 8px;
    height: 686px;
    background-color: yellow;
}
.phone-title{
    height: 58px;
    background-color: black;
}
.phone-content{
    height: 628px;
    background-color: pink;
}
.phone-left{
    margin-right: 14px;
    float: left;
    width: 234px;
    height: 100%;
    background-color: darkseagreen;
}
.phone-right{
    overflow: hidden;
    height: 100%;
    background-color: #ccc;
}
.phone-right>li{
    margin-bottom: 28px;
    padding-left: 14px;
    float: left;
    width: 25%;
    height: 300px;
    border: 1px solid #000;
    background-color: #f00;
    background-clip: content-box;
}
.phone-right>li:nth-child(1),
.phone-right>li:nth-child(5){
    margin-left: 0;
}
.center-household{
    margin-bottom: 8px;
    height: 686px;
    background-color: yellow;
}
.household-title{
    height: 58px;
    background-color: black;
}
.household-content{
    height: 614px;
}
.household-content>li{
    position: relative;
    margin-left: 14px;
    margin-bottom: 28px;
    float: left;
    width: 234px;
    height: 300px;
    background-color: #d7d7d7;
}
.household-content>li:nth-child(1),
.household-content>li:nth-child(6){
    margin-left: 0;
}
.household-content>li:last-child p:first-child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 143px;
    border: 1px solid #000;
}
.household-content>li:last-child p:last-child{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 143px;
    border: 1px solid #000;
}
.center-video{
    height: 343px;
    background-color: pink;
}
.video-title{
    height: 58px;
    background-color: black;
}
.video-content{
    height: 285px;
}
.video-content>li{
    float: left;
    width: 296px;
    height: 100%;
    border: 1px solid #000;
}
.video-content>li+li{
    margin-left: 14px;
}

(5) Частичное — снизу

Нижняя часть — это сначала горизонтально центрированное содержимое, а затем содержимое можно разделить на верхнюю и нижнюю части, каждая часть — это плавающий li, как показано на рисунке:

html-код:

<div class="bottom">
    <div class="container">
        <div class="bottom-service">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="bottom-links">
            <div class="links-left">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="links-right"></div>
        </div>
    </div>
</div>

css-код:

.bottom {
    height: 274px;
    background-color: #fff;
}
.bottom-service{
    height: 80px;
    background-color: seagreen;
}
.bottom-service>ul{
    height: 100%;
}
.bottom-service>ul li{
    position: relative;
    padding: 0 50px;
    float: left;
    width: 20%;
    height: 100%;
    background-color: goldenrod;
    background-clip: content-box;
}
.bottom-service>ul li+li::before{
    position: absolute;
    top: 28px;
    left: 0;
    content: '';
    width: 1px;
    height: 24px;
    background-color: #999;
}
.bottom-links{
    height: 192px;
    background-color: #8545e0;
}
.links-left{
    float: left;
    width: 960px;
    height: 100%;
    background-color: yellow;
}
.links-left>ul{
    height: 100%;
}
.links-left>ul li{
    padding-right: 60px;
    float: left;
    width: 16.666666666666667%;
    height: 100%;
    border: 1px solid #000;
    background-color: #ff0000;
    background-clip: content-box;
}
.links-right{
    float: right;
    width: 252px;
    height: 100%;
    background-color: yellow;
}

(6) Частичное — нижний колонтитул

Нижний колонтитул разделен, как показано на рисунке:

html-код:

<div class="footer">
    <div class="footer-info">
        <div class="info-left"></div>
        <div class="info-right"></div>
    </div>
    <div class="footer-slogan"></div>
</div>

css-код:

.footer {
    margin: 0 auto;
    padding: 30px 0;
    width: 1226px;
    height: 166px;
    border: 1px solid #000;
}
.footer-info{
    height: 57px;
    background-color: #6effb1;
}
.info-left{
    float: left;
    width: 630px;
    height: 100%;
    border: 1px solid #000;
}
.info-right{
    float: right;
    width: 436px;
    height: 100%;
    border: 1px solid #000;
}
.footer-slogan{
    margin-top: 30px;
    height: 19px;
    background-color: #8545e0;
}

(7) Весь код (после оптимизации)

html-код:

<body>
<div class="header">
    <div class="container">
        <div class="header-left fl"></div>
        <div class="header-rigth fr"></div>
    </div>
</div>
<div class="top">
    <div class="container">
        <div class="top-nav"></div>
        <div class="top-slider">
            <div class="slider-navbar"></div>
        </div>
        <div class="top-recommend">
            <div class="recommend-left fl"></div>
            <div class="recommend-right fr">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="top-flashsale">
            <div class="flashsale-title common-title"></div>
            <div class="flashsale-content">
                <div class="content-timer fl"></div>
                <ul class="content-shops">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="center">
    <div class="center-phone module-box">
        <div class="phone-title common-title"></div>
        <div class="phone-content">
            <div class="phone-left fl"></div>
            <ul class="phone-right">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <div class="center-household module-box">
        <div class="household-title common-title"></div>
        <div class="household-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>
                <p></p>
                <p></p>
            </li>
        </div>
    </div>

    <div class="center-video">
        <div class="video-title common-title"></div>
        <ul class="video-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<div class="bottom">
    <div class="container">
        <div class="bottom-service">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="bottom-links">
            <div class="links-left fl">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="links-right fr"></div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-info">
        <div class="info-left fl"></div>
        <div class="info-right fr"></div>
    </div>
    <div class="footer-slogan"></div>
</div>
</body>

css-код:

/*-------------------抽取公共样式-----------------*/
* { /*为了方便,就这样清空默认样式了*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
body {
    background-color: #f5f5f5;
}
.container {  /*水平居中的内容盒子*/
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #f00;
}
.common-title {
    height: 58px;
    background-color: #000;
}
.fl {float: left;}
.fr {float: right;}
.recommend-right,
.flashsale-content,
.phone-right > li,
.household-content > li:last-child > p,
.video-content > li,
.links-left > ul li,
.footer,
.info-left,
.info-right {border: 1px solid #000;}  /*添加边框样式只是为了方便观察,不是布局必须,可删*/


/*-----header部分-----*/
.header {
    margin-bottom: 20px;
    height: 40px;
    background-color: #333;
}
.header-left {
    width: 380px;
    height: 100%;
    background-color: #0f0;
}
.header-rigth {
    width: 260px;
    height: 100%;
    background-color: #0f0;
}


/*--------top部分--------*/
.top {
    /*height: 1210px;*/
    background-color: #fff;
}
.top-nav {
    height: 100px;
    background-color: #f00;
}
.top-slider {
    margin-bottom: 14px;
    position: relative; /*父相*/
    height: 460px;
    background-color: #00f;
}
.slider-navbar {
    position: absolute; /*子绝*/
    top: 0;
    left: 0;
    width: 234px;
    height: 100%;
    background-color: black;
    opacity: .5;
}
.top-recommend {
    margin-bottom: 26px;
    height: 170px;
    background-color: #0f0;
}
.recommend-left {
    height: 100%;
    width: 234px;
    background-color: skyblue;
}
.recommend-right {
    width: 978px;
    height: 100%;
}
.recommend-right > ul {height: 100%;}
.recommend-right > ul li {
    float: left; /*三列等宽,浮动布局*/
    width: 316px;
    height: 100%;
    background-color: deepskyblue;
}
.recommend-right > ul li + li { margin-left: 14px;}  /*设置浮动间隔*/
.top-flashsale {
    height: 438px;
    background-color: #ff4455;
}
.flashsale-title {}
.flashsale-content {
    padding-bottom: 40px;
    height: 380px;
}
.content-timer {
    margin-right: 14px;
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops {
    overflow: hidden; /*触发bfc,以达到自适应*/
    height: 100%;
    background-color: #6effb1;
}
.content-shops > li {
    float: left; /*四列等宽,浮动布局*/
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops > li + li {margin-left: 12.5px;}  /*设置浮动间隔*/


/*--------center部分--------*/
.module-box {  /*类似的模块*/
    margin-bottom: 8px;
    height: 686px;
}
.center {
    margin: 0 auto;
    margin-bottom: 60px;
    padding-top: 60px;
    width: 1226px;
    /*height: 1791px;*/
    background-color: #fff;
}
.center-phone {background-color: yellow;}
.phone-title {}
.phone-content {
    height: 628px;
    background-color: pink;
}
.phone-left {
    width: 234px;
    height: 100%;
    background-color: darkseagreen;
}
.phone-right {
    overflow: hidden; /*触发bfc以达到自适应*/
    height: 100%;
    background-color: #ccc;
}
.phone-right > li {
    margin-bottom: 28px; /*设置下边距*/
    padding-left: 14px; /*用padding模拟盒子间隔*/
    float: left; /*四列等宽,浮动布局*/
    width: 25%;
    height: 300px;
    background-color: #f00;
    background-clip: content-box; /*背景色从content开始绘起*/
}
.center-household {background-color: yellow;}
.household-title {}
.household-content {height: 614px;}
.household-content > li {
    position: relative; /*父相*/
    margin-left: 14px; /*设置浮动间隔*/
    margin-bottom: 28px; /*设置下边距*/
    float: left; /*五列等宽,浮动布局*/
    width: 234px;
    height: 300px;
    background-color: #d7d7d7;
}
.household-content > li:nth-child(1),
.household-content > li:nth-child(6) {margin-left: 0; }  /*消除每行第一个的间隔*/
.household-content > li:last-child p:first-child {
    position: absolute; /*子绝*/
    top: 0;
    left: 0;
    right: 0;
    height: 143px;
}
.household-content > li:last-child p:last-child {
    position: absolute; /*子绝*/
    bottom: 0;
    left: 0;
    right: 0;
    height: 143px;
}
.center-video {
    height: 343px;
    background-color: pink;
}
.video-title {}
.video-content {height: 285px;}
.video-content > li {
    float: left; /*四列等宽,浮动布局*/
    width: 296px;
    height: 100%;
}
.video-content > li + li {margin-left: 14px; }   /*设定浮动间隔*/


/*--------bottom部分--------*/
.bottom {
    /*height: 274px;*/
    background-color: #fff;
}
.bottom-service {
    height: 80px;
    background-color: seagreen;
}
.bottom-service > ul {height: 100%;}
.bottom-service > ul li {
    position: relative; /*父相*/
    padding: 0 50px; /*用padding模拟盒子间隔*/
    float: left; /*五列等宽,浮动布局*/
    width: 20%;
    height: 100%;
    background-color: goldenrod;
    background-clip: content-box; /*背景色从content开始绘起*/
}
.bottom-service > ul li + li::before { /*用伪元素模拟分割线*/
    position: absolute; /*子绝*/
    top: 28px;
    left: 0;
    content: ''; /*伪元素必须有content*/
    width: 1px;
    height: 24px;
    background-color: #999;
}
.bottom-links {
    height: 192px;
    background-color: #8545e0;
}
.links-left {
    width: 960px;
    height: 100%;
    background-color: yellow;
}
.links-left > ul {height: 100%;}
.links-left > ul li {
    padding-right: 60px;
    float: left; /*六列等宽,浮动布局*/
    width: 16.666666666666667%;
    height: 100%;
    background-color: #ff0000;
    background-clip: content-box; /*背景色从content开始绘起*/
}
.links-right {
    width: 252px;
    height: 100%;
    background-color: yellow;
}


/*--------footer部分---------*/
.footer {
    margin: 0 auto;
    padding: 30px 0;
    width: 1226px;
    height: 166px;
}
.footer-info {
    height: 57px;
    background-color: #6effb1;
}
.info-left {
    width: 630px;
    height: 100%;
}
.info-right {
    width: 436px;
    height: 100%;
}
.footer-slogan {
    margin-top: 30px;
    height: 19px;
    background-color: #8545e0;
}

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

8.1.2 Использование Flexbox+Grid (будущее...)

html-код:

<body>
<div class="header">
    <div class="container">
        <div class="header-left"></div>
        <div class="header-rigth"></div>
    </div>
</div>
<div class="top">
    <div class="container">
        <div class="top-nav"></div>
        <div class="top-slider">
            <div class="slider-navbar"></div>
        </div>
        <div class="top-recommend-left"></div>
        <div class="top-recommend-right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="top-flashsale-title"></div>
        <div class="top-flashsale-timer"></div>
        <ul class="top-flashsale-shops">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<div class="center">
    <div class="center-phone-title"></div>
    <div class="center-phone-content">
        <div class="phone-content-item1"></div>
        <div class="phone-content-item2"></div>
        <div class="phone-content-item3"></div>
        <div class="phone-content-item4"></div>
        <div class="phone-content-item5"></div>
        <div class="phone-content-item6"></div>
        <div class="phone-content-item7"></div>
        <div class="phone-content-item8"></div>
        <div class="phone-content-item9"></div>
    </div>

    <div class="center-household-title"></div>
    <div class="center-household-content">
        <div class="row">
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
        </div>
        <div class="row">
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item">
                <p></p>
                <p></p>
            </div>
        </div>


    </div>

    <div class="center-video-title"></div>
    <ul class="center-video-content">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="bottom">
    <div class="container">
        <div class="bottom-service">
            <div class="service-item"></div>
            <div class="service-item"></div>
            <div class="service-item"></div>
            <div class="service-item"></div>
            <div class="service-item"></div>
        </div>
        <div class="bottom-links-left">
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
        </div>
        <div class="bottom-links-right"></div>
    </div>
</div>
<div class="footer">
    <div class="footer-info">
        <div class="info-left"></div>
        <div class="info-right"></div>
    </div>
    <div class="footer-slogan"></div>
</div>
</body>

css-код:

/*-------------------抽取公共样式-----------------*/
* { /*为了方便,就这样清空默认样式了*/
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
    background-color: #f5f5f5;
    display: grid;
    /*整体布局 设置网格列,设置网格行,再设定网格区域*/
    grid-template-columns: 1fr 1226px 1fr;
    grid-template-rows: 40px 20px auto auto 274px 166px;
    grid-template-areas:
        "header header header"
        ". . ." 
        "top top top"
        ". center ."
        "bottom bottom bottom"
        ". footer .";
}
.container { /*水平居中的内容盒子*/
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #f00;
}
.top-recommend-right,
.top-flashsale-timer,
.top-flashsale-shops li,
.center-phone-content > div,
.center-household-content .row,
.household-content-item:last-of-type p,
.center-video-content li,
.service-item,
.links-left-item,
.info-left,
.info-right,
.info-right {border: 1px solid #000;}  /*添加边框样式只是为了方便观察,不是布局必须,可删*/


/*-----header部分-----*/
.header {
    grid-area: header; /*指定网格区域*/
    background-color: #333;
}
.header .container {
    display: flex;
    justify-content: space-between;
}
.header-left {
    width: 380px;
    background-color: #0f0;
}
.header-rigth {
    width: 260px;
    background-color: #0f0;
}


/*--------top部分--------*/
.top {
    grid-area: top; /*指定网格区域*/
    background-color: #fff;
}
.top .container {
    display: grid;
    /*top部分布局 设置网格行,设置网格列,再设定网格区域*/
    grid-template-rows: 100px 460px 14px 170px 26px 58px 340px 40px;
    grid-template-columns: auto 14px 978px;
    grid-template-areas:
        "top-nav top-nav top-nav"
        "top-slider top-slider top-slider"
        ". . ."
        "recommend-left . recommend-right"
        ". . ."
        "flashsale-title flashsale-title flashsale-title"
        "flashsale-timer . flashsale-shops"
        ". . .";
}
.top-nav {
    grid-area: top-nav;
    background-color: #f00;
}
.top-slider {
    position: relative;
    grid-area: top-slider;
    background-color: #00f;
}
.top-slider .slider-navbar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 234px;
    background-color: black;
    opacity: .5;
}
.top-recommend-left {
    grid-area: recommend-left;
    background-color: skyblue;
}
.top-recommend-right {grid-area: recommend-right;}
.top-recommend-right > ul {
    display: flex;
    justify-content: space-between;
    height: 100%;
}
.top-recommend-right li {
    width: 316px;
    background-color: deepskyblue;
}
.top-flashsale-title {
    grid-area: flashsale-title;
    background-color: #000;
}
.top-flashsale-timer {
    grid-area: flashsale-timer;
    background-color: #fff;
}
.top-flashsale-shops {
    display: flex;
    justify-content: space-between;
    grid-area: flashsale-shops;
    background-color: #6effb1;
}
.top-flashsale-shops li {width: 234px;}


/*--------center部分--------*/
.center {
    margin-bottom: 60px;  /*边距可以在网格分区的时候考虑进去,把边距设成一行或一列,不要放内容就好了*/
    padding-top: 60px;
    grid-area: center; /*指定网格区域*/
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
.center-phone-title {
    height: 58px;
    background-color: black;
}
.center-phone-content {
    margin-bottom: 8px;
    display: grid;
    /*这里用flex分格更好,代码更少更简洁*/
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
        "big1 normal2 normal3 normal4 normal5"
        "big1 normal6 normal7 normal8 normal9";
    grid-gap: 14px; /*网格间隔*/
    height: 628px;
    background-color: pink;
}
.phone-content-item1 {grid-area: big1;}
.phone-content-item2 {grid-area: normal2;}
.phone-content-item3 {grid-area: normal3;}
.phone-content-item4 {grid-area: normal4;}
.phone-content-item5 {grid-area: normal5;}
.phone-content-item6 {grid-area: normal6;}
.phone-content-item7 {grid-area: normal7;}
.phone-content-item8 {grid-area: normal8;}
.phone-content-item9 {grid-area: normal9;}
.center-household-title {
    height: 58px;
    background-color: black;
}
.center-household-content {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    height: 614px;
    background-color: pink;
}
.center-household-content .row {
    display: flex;
    justify-content: space-between;
    flex: 1;
}
.row .household-content-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 234px;
    background-color: #fff;
}
.household-content-item:last-of-type p {height: 143px;}
.center-video-title {
    height: 58px;
    background-color: black;
}
.center-video-content {
    display: flex;
    justify-content: space-between;
    height: 285px;
    background-color: pink;
}
.center-video-content li {width: 296px;}


/*--------bottom部分--------*/
.bottom {
    grid-area: bottom; /*指定网格区域*/
    background-color: #fff;
}
.bottom .container {
    display: grid;
    grid-template-columns: auto 252px;
    grid-template-rows: 80px auto;
    grid-template-areas: "service service" "links-left links-right";
}
.container .bottom-service {
    display: flex;
    grid-area: service;
    background-color: seagreen;
}
.service-item {flex: 1;}
.container .bottom-links-left {
    display: flex;
    grid-area: links-left;
    background-color: yellow;
}
.links-left-item {flex: 1;}
.container .bottom-links-right {
    grid-area: links-right;
    background-color: yellowgreen;
}


/*--------footer部分---------*/
.footer {
    padding: 30px 0;
    grid-area: footer; /*指定网格区域*/
}
.footer-info {
    display: flex;
    justify-content: space-between;
    height: 57px;
    background-color: #6effb1;
}
.info-left {width: 630px;}
.info-right {width: 436px;}
.footer-slogan {
    margin-top: 30px;
    height: 19px;
    background-color: #8545e0;
}

9. Другие добавки:

9.1 Мобильное окно просмотра

Установите область просмотра:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

9.2 Медиа-запросы

Пример кода:

@media (max-width: 767px) { ...css代码... }
@media (min-width: 768px) and (max-width: 991px) { ...css代码... }
@media (min-width: 992px) and (max-width: 1199px) { ...css代码... }
@media (min-width: 1200px) { ...css代码... }

9.3 REM

9.4 Flexbox

9.5 CSS Grid

Конец: спасибо

Спасибо за прочтение, если вам понравилось, нажмите «Избранное» или «Звезда»! Ваша поддержка - моя самая большая мотивация, спасибо!