Например, на рис. 11.3 четыре тега <di v> - banner, mai n, news и footer - охватывают
всю ширину своего контейнера (тега <body>) и расположены друг за другом
По вертикали. Это типичная ситуация для тегов уровня блока, и вам не нужно делать
ничего особенного, применяя CSS, чтобы расположить эти четыре <di v> таким
Образом.
Глава 11. Введение в разметку CSS
.. •s>ioo•""-~ Chla Vet в.uuи...,.,cш,.., ... ~ .. c"'.vtt '
1 <div id•"Ьanne,">
<div id="main">
- ..- (.. .) JU.UU
м....,~(IIIМ)t.JНtiJ - -,_...0.,
0.... ....... ..
\810/SD-1 ...
<div id=''signup">
~padding-top:1 ООрх
Padding-left:585px
1 <div id="tag"> 1
...
<div id-" news" >
<div id="news1"> <div id="news2"> <div id="newsЗ">
<div id="footer">
1 <div id="testimony"> 11 <div id="contact">
<div id= 1
"location">
Рис. 11 .3. Корректное расположение НТМL-элементов, необходимое для преобразования макета
Photoshop в код HTML и CSS, включает в себя видение структуры страницы и «уnаковку»
связанных групп НТМL-элементов в теги <div>
Помните о фоновых изображениях
Вы, несомненно, видели черепичные изображения, заnолняющие фон веб-страницы,
Или градиенты, добавляющие эффект глубины баннеру. Свойство background- image
Стратегии разметки 327
