[CSS] Домашно CSS Overview - 3 задача - сезон 2012/2013


14

Нека тук коментираме задача 3та ( стилизирането по готова снимка ) от CSS Overview.

Ето моето решение:

https://www.dropbox.com/s/6e946hspnmq2gs9/03.%20SimpleWebPage.rar

Относно решението:

Не съм добавял никакви допълнителни класове или id - та, а съм използвал единствено каквото ни е било предоставено като HMTL файл.

Тук обаче имам един въпрос: Задължително ли е да използваме всички 4 псевдо селектори на "a" (:link, :visited, :hover, :active) или може само които ни трябват ?




Отговори



3

Това е моето решение:

Задача 3

Не съм променял HTML кода, като единствено съм добавил три id-та,предполгам, че може да се направи и по елегентен начин. Направил съм последният линк от навигацията с псевдо селектор hover.Като премествам монитора на лаптопа си цветовете на h1 и неномерираният списък се променят от бяло до бледожълто.


от KaloyanBobev (330 точки)


0
Аз реших да не пипам изобщо дадения ни код,използвах и псевдо селектори.Начинаещ съм,но взеха да ми се изясняван нещата :)Моето виждане е да се постигне с по-малко код(CSS) по-вече функционалност! Но засега не ми се получава:) Ето моето решение- http://jsfiddle.net/9a4YH/

от martinski (171 точки)


2
Здравейте,
За менюто използвам само два от четирите селектора за таг а:
nav a:hover { text-decoration: underline; } nav a.current { background: #ccc; }
Останалите два (visited и lang) засега са излишни.
Тъй като ми се струва, че текстът на футерите на всеки article е по-дребен, определям:
article footer {font-size:12px;}
Задавам таг а във футера на страницата да наследи цвета на фонта от своя родител: article footer a { color: inherit;}
Не съм променила нищо в .html файла.

от ellapt (6303 точки)


1

Линк към моето решение.


от gradev (1661 точки)


0

Добавих един глас current на навигацията, вместо да ползвам nth-of-type(2) - с идеята, че като се избира различно li от навигацията то ще придобива този клас (с малко js).


от dzhenko (3893 точки)


0

Здравейте колеги,

Бих искал да споделя и моят подход и код върху задачата. smiley

Решение: https://github.com/MiroslavSimeonovIvanov/TelerikAcademy/tree/master/CSS_Styling_Course/CSS_Overview

Визия: https://drive.google.com/file/d/0B4osYVb7v4eRLW1vbVM5QmNGeG8/edit?usp=sharing

Не съм променял нищо по HTML-а и го оставих така както си е - добавил съм само <meta> и <link> таговете. Относно CSS-а - подреждам си във всеки един CSS файл селекторите по азбучен ред и по нивото на тежест. Използвам съм само селектори и псевдоселектори.