Оглавление

Придание календарю свойственного ему вида

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

 

Примечание. Мы не будем вдаваться в детальные объяснения используемых правил стилевой разметки, поскольку CSS не является предметом рассмотрения данной книги.

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

 

Совет, Для получения более подробной информации о CSS3 http://css3.info/.

 
Создайте в папке css новый файл с именем  style.css (/public/assets/css/style.css) и введите в него следующий код CSS.

 


 body { 
    background-color: #789; 
    font-family: georgia, serif; 
    font-size: 13px; 
} 
 
#content { 
    display: block; 
    width: 812px; 
    margin: 40px auto 10px; 
    padding: 10px; 
    background-color: #FFF; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    border:2px solid black; 
    -moz-box-shadow: 0 0 14px #123; 
    -webkit-box-shadow: 0 0 14px #123; 
    box-shadow: 0 0 14px #123; 
} 
 
h2,p { 
    margin: 0 auto 14px; 
    text-align: center; 
} 
 
ul { 
    display: block; 
    clear: left; 
    height: 82px; 
    width: 812px; 
    margin: 0 auto; 
    padding: 0; 
    list-style: none; 
    background-color: #FFF; 
    text-align: center; 
    border: 1px solid black; 
    border-top: 0; 
    border-bottom: 2px solid black; 
} 
 
li { 
    position: relative; 
    float: left; 
    margin: 0; 
    padding: 20px 2px 2px; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    width: 110px; 
    height: 60px; 
    overflow: hidden; 
    background-color: white; 
} 
 
li:hover { 
    background-color: #FCB; 
    z-index: 1; 
    -moz-box-shadow: 0 0 10px #789; 
    -webkit-box-shadow: 0 0 10px #789; 
    box-shadow: 0 0 10px #789; 
} 
 
.weekdays { 
    height: 20px; 
    border-top: 2px solid black; 
} 
 
.weekdays li { 
    height: 16px; 
    padding: 2px 2px; 
    background-color: #BCF; 
} 
 
.fill { 
    background-color: #BCD; 
} 
 
.weekdays li:hover,li.fill:hover { 
    background-color: #BCD; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 
 
.weekdays li:hover,.today { 
    background-color: #BCF; 
} 
 
li strong { 
    position: absolute; 
    top: 2px; 
    right: 2px; 
} 
 
li a { 
    position: relative; 
    display: block; 
    border: 1px dotted black; 
    margin: 2px; 
    padding: 2px; 
    font-size: 11px; 
    background-color: #DEF; 
    text-align: left; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    z-index: 1; 
    text-decoration: none; 
    color: black; 
    font-weight: bold; 
    font-style: italic; 
} 
 
li a:hover { 
    background-color: #BCF; 
    z-index: 2; 
    -moz-box-shadow: 0 0 6px #789; 
    -webkit-box-shadow: 0 0 6px #789; 
    box-shadow: 0 0 6px #789; 
}

 

Сохраните таблицу стилей и закройте ее; в этой главе она не будет претерпевать изменений. В следующем разделе будут созданы общие для всех страниц файлы, которые, кроме всего прочего, будут включать эти стили в страницы.

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити