Съдържание
- Създайте таблица в HTML
- Етап 1
- Стъпка 2
- Стъпка 3
- Стъпка 4
- Стъпка 5
- Персонализирайте календара
- Етап 1
- Стъпка 2
- thead календар {
- Стъпка 3
- пети календар,
- td календар {
- Стъпка 4
- td span календар {
Въпреки че таблиците не са в полза, когато става въпрос за изграждане на оформления на уеб страници, те все още работят добре за кодиране на HTML календари. Календарите показват таблични данни по начин, след като са организирани в мрежа от дати с колони, наречени, например, с дните от седмицата. Допълнителният CSS код ще направи досадна мрежа с имена и номера по-скоро като календар. Тъй като събитията в календара се нуждаят от пространство, както за броя на датите, така и за събитията, също така ще е необходимо да се използва CSS за форматиране на датите по начин, който поддържа и двете части информация четливи.
Създайте таблица в HTML
Етап 1
Създайте таблица за структуриране на календара. Тази таблица изисква заглавка със седем клетки, по една за всеки ден от седмицата. Също така е необходимо да се създадат шест реда редовни клетки на таблицата. Копирайте и поставете откъса в уеб страница с помощта на Notepad или редактор на код.
| Неделя | Понеделник | Вторник | Сряда | Четвъртък | Петък | Събота |
|---|
Този код ще създаде таблицата и заглавието. Таблицата използва идентификационно име, наречено „календар“, в случай че уебсайтът използва таблици на други страници.
Стъпка 2
Добавете чифт маркери на тялото под маркера "":
Стъпка 3
Копирайте следния код и го поставете между "
" шест пъти:Този код ще създаде всеки ред със седем клетки, така че като добавите шест от тях, календарът ще има всички необходими пространства за данни за всички месеци от годината.
Стъпка 4
Добавете дати в календара според месеца, който искате да покажете. Консултирайте се с истински календар и внимавайте да не пропуснете или повторите дата. Оградете всяка дата с "" маркерите, за да можете да персонализирате числата по-късно:
Стъпка 5
Обърнете внимание на събитията в клетките, които съдържат съответни дати. Събитията трябва да са извън "" маркерите, но вътре в ""
’:
Хелоуин парти!
Последен ден за регистрация.
Персонализирайте календара
Етап 1
Намерете „
Очертанията не са задължителни, но това е най-подходящият начин за добавяне на граници към таблици на текущите уеб страници.
Стъпка 2
Персонализирайте заглавието на таблицата с цвят за буквите и друг за фон:
thead календар {
цвят: #ffffff; цвят на фона: тъмносин; шрифт-тегло: получер; }
Възможно е да се използва шестнадесетичен код или името на цветовете. Това заглавие ще показва бял текст на тъмносин фон.
Стъпка 3
Попълване, граници, ширина и позиция спрямо клетките на таблицата:
пети календар,
td календар {
подплата: 20px; граница: 1px плътно черно; ширина: 100px; позиция: относителна; }
Относителното разположение позволява на програмиста да постави дати под формата на числа в ъглите на клетките на таблицата по-късно. Не задавайте височина, тъй като това ще ограничи колко текст можете да добавите към която и да е дата.
Стъпка 4
Създайте числата, като използвате запълването, цвета на фона и абсолютното позициониране:
td span календар {
шрифт-тегло: получер; позиция: абсолютна; отдолу: 0; вдясно: 0; дисплей: блок; подплата: 5px; фон-цвят: #eeeeee; }
Трябва да включите „display: block“, за да накарате маркерите да действат като полета на уеб страницата, в противен случай няма да можете да ги попълните. Този примерен код създава слабо сиво поле в долния ляв ъгъл на всяко пространство за дати, показващо номера на датата.