пособие для чайников
Файлы template.css и menu.css. Урок 5 |
Вы познакомились с файлом index.php и теперь знаете, что этот файл определят расположение элементов сайта в соответствующих блоках <DIV>. У каждого блока определен свой уникальный ID – идентификатор. На основании этих идентификаторов и будет задаваться уникальное визуальное оформление каждого блока при помощи каскадных таблиц стилей CSS. В каждом шаблоне должен находится файл содержащий таблицы стилей для оформления сайта. В шаблоне Likom, таких файлов два - template.css и menu.css. CSS – код шаблона был разделен на два файла для удобства пользования и работы. Template.css содержит таблицы стилей для всех элементов сайта, кроме меню, которые находятся в файле menu.css.Подобных файлов CSS в шаблоне может быть различное количество. Если вы решили разделить CSS – код на несколько файлов, обязательно пропишите их названия в index.php и templateDetails.xml. Необходимо отметить, что в таблицах прописан не только стиль оформления блоков и их позиционирование, но и стиль модулей, элементов и компонентов сайта, которые выводятся в этом блоке. Описывать код файлов template.css и menu.css в статье, я не буду, он достаточно подробно прокомментирован в самих файлах. Откройте файлы в программе Dreamweaver и изучите код. Если вы не обладаете хорошими знаниями в области CSS, то узнать, что обозначает тот или иной параметр элемента, вам поможет полезный справочник «HTML, CSS, PHP». Основное достоинство таблиц стилей CSS , заключается в том, что вы можете полностью поменять дизайн всего сайта в короткие сроки, при этом, не изменяя код страницы. Попробуйте поэкспериментировать с кодом и посмотрите, что у вас получится.Как быстро изменить дизайн шаблона мы поговорим на следующем уроке.
|
Комментарии
#topmenu {
overflow:hidden ;
height:30px;
}
/*оформление модуля меню*/
.moduletabletabs {
font:bold 14px Arial, Helvetica, sans-serif;
text-transform: uppercase;
overflow:hidden ;
text-align:center;
background-color:#3b98b0;
}
componentheadin g.
У меня вот какой вопрос,хочу сделать древовидное меню в верхнем меню,расположен ным user2. Главное меню получается древовидным,а вот с верхнем проблемы.
в menu.css описала класс .moduletableTABS ul li.parent ul
.moduletabletabs ul li.parent ul {
font:bold 14px Arial, Helvetica, sans-serif;
text-transform: uppercase;
overflow:hidden ;
text-align:center;
background-color:#d1d5d6;
}