Использование тэгов aside, main при создании адаптивной страницы

  1   2   3   4   5   6   7   8   9

пред след

        Далее вставим теги: aside (для меню), aside для рекламы,  main (для основного контента), aside (для рекламы справа). При вводе первой буквы тэга появляется список возможных тэгов на соответствующую букву (рис.22):

 
Рис. 22. Список предлагаемых тэгов при вводе буквы а

       Распределим ширину aside и main в процентах 17 и 60 соответственно . Создадим для всех 4-х тэгов селекторы: .aside_menu,  .goriz_adap1, .main, .right_aside. По имени рекламы в Adsense  я так назвала селектор .goriz_adap1. Не забываем: в конструкторе в «селекторы» создаем с такими же названиями селекторы. Зададим им свойства в «Свойства». Они автоматически занесутся в файл со стилями  (web.ss). Привожу соответствующий фрагмент из web.ss:

.aside_menu {width: 17%;
float: left;       
чтобы рядом с предыдущим тэгом
margin-right: 0px;
text-align: left;     
расположение текста к левому краю
border: 1px solid #077837; 
padding-right: 5px;
padding-left: 0px;
color: black;
font-size: 16px;
font-weight: bold;
display: inline;
background- : url(/piknad/images/FON/bl4.gif);
}
.vertnav { width: 100%;}
во всю ширину aside

.vertnav ul li {
list-style-type: none;
display: block;
text-align: left;}

.vertnav ul li a {
color: blue;
font-weight: bold;
font-size: 14px;
margin-bottom: 20px;}

.zv_ram { border: 1px solid blue;}
цвет рамки

.vertnav ul li a:hover{
при наведении на текст он становтся  черным, а фон белым
color: #000;background: #fff;}

.a_vert {
расстояние между пунктами меню
margin-bottom: 5px;}

.goriz_adap1 {
рамка для горизонтальной рекламы
display: inline-block;
float: left;
border: 1px solid blue; }

.main {
width:60%;
text-align: left;
float: left;
color: black;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 16px;
padding-bottom: 15px;
border: 1px solid blue;
padding-right: 0px;
padding-left: 2px;
height: auto;
background- : url(/piknad/images/FON/bl4.gif);}

.main .h1 {
для заголовка
color: blue;
font-size: 14px;
text-align: center;}

.gir_text {
выделение текста жирным
color: black;
font-style: normal;
font-weight: bold;}

.right_aside {
width: 160px;
float: left;
height: 600px;
margin-left: 10px;
margin-bottom: 5px;
background- : url(/piknad/images/FON/bl4.gif);
border: 1px solid blue;}

  1   2   3   4   5   6   7   8   9