Rambler's Top100

ОФОРМЛЯЕМ ПРАВЫЙ БЛОК

И так наша страница сайта на данном этапе выглядит ТАК, и нам нужно заполнить правый блок. Что можно вставить в этот блок? Можно расположить форму подписки, можно блок новостей на сайте, рекламные баннеры и объявления, если вы учавствуете в каких-либо партнёрских программах

Разместим блок новостей сайта, где можно написать что планируете сделать и так далее. А чтобы блок смотрелся привлекательнее сделаем ему закруглённые края, в файле CSS для этого блока присвоим идентификатор #new_site и пропишем ему следующие свойсва:

#new_site{
width:210px;
height:320px;
background:#CCD67D;
border: 3px #C5AC2E solid;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius:10px;
border-radius: 10px;
margin-top: 45px;
}

Затем в HTML файле в правом блоке обозначенном тегами <div id="right"> </div>, после открывающего тега пишем код:

<div id="right">
<div id="new_site">
</div>
</div>

В результате у наc появится такой вот блок , в файле css, в свойствах для этого блока, вы сами можете установить радиус закруглений углов, у нас стоит 10 пикселей, так же можете установить фоновый цвет блока, цвет бордюра и размеры всего блока

Далее нужно в этом блоке написать заголовок и текст. Заголовок заключим в теги <h3></h3>

<div id="right">
<div id="new_site">
<h3>
Новости сайта</h3>
</div>
</div>

А в файле CSS напишем свойства для тега <h3> Отступ от верхнего края блока дадим 5 пикселей , цвет текста и расположение заголовка посредине блока

#right h3 {
padding-top: 5px;
color: #C70006;
text-align:center;
}

И теперь будет ТАК, далее пишем сам текст новостей, который заключим в теги <p></p> и пропишем для него в файле CSS следующие свойства:

#right p.new{
font-family: arial,verdana, sans-serif;
text-align:justify;
PADDING-left:5px;
PADDING-right:3px;
PADDING-top:5px;
font-size: 12px;
color: #8B0000;
}

И в файле HTML добавляем текст новостей разделённый на абзацы

<div id="right">
<div id="new_site">
<h3>
Новости сайта</h3>
<p>
Абзац текста новости</p>
<p>
Второй абзац текста новости</p>
</div>
</div>

На странице это будет выглядеть ТАК Ниже блока новостей, можно вставить баннер , а в левый блок, после блока меню? можно вставить форму подписки. В общем что и как располагать на странице решайте сами/ Все это будет смотреться где-то ТАК

 

Rambler's Top100 Яндекс цитирования