Професионална програма
Loading...
+ Нов въпрос
justbuddy09 avatar justbuddy09 3 Точки

HTML Structure/Navigation Bar - промяна в изгледа при наименуване на тагове и блокове

Здравейте,

реших да си поиграя с навигационния бар от тази лекция https://softuni.bg/trainings/resources/officedocument/12263/presentation-web-fundamentals-html5-january-2017/open (стр. 14) и имам следните случки и запитвания:

* Това е кодът, с който работя: https://codepen.io/anon/pen/ejoyaa

* Извинявам се ако бъркам терминологията, моля поправяйте ме ако забележите грешки.

1) Правилно и препоръчително ли е да наименувам таговете като например примерът отдолу, за да се конкретизира за коя навигация става въпрос, тъй като може да има и лява или дясна.

<nav class="nav-top">

2) Правилно и препоръчително ли е да наименувам и другите тагове като <ul> и <li> ако вземем предвид, че в кодът има също други листове и не искаме да обхващаме всички. Пример:

<ul class="nav-top-list">
	<li class="nav-top-list-item"><a href="#">Home</a></li>
</ul>

3) Ако горните 2 точки са правилни и/или верни как ги декларираме правилно в CSS-файла без да променяме изгледа на html-файла, тъй като забелязах, че при промяна на имената на блоковете в CSS-a изгледът се променя, а всъщност са правилни и двата вариянта. Променете това, за да видите или просто декларирайте листовете с имената по-горе в CSS-a и ще се промени изгледа:

li:hover {

----->

li:hover а {
Ще се получи това(линкът отдолу) с разликата, че при картинката отляво в момента не мога да сложа черен цвят на текста като минавам отгоре с мишката докато отдясно мога, но искам изгледът на тази отляво:

http://prikachi.com/images.php?images/252/9384252c.png

4) Може ли да ми преправите базовият код по-горе да изглежда така както в момента, но когато минавам с мишката отгоре без да кликам и текстът да става черен, и също така изцяло да е правилно написан, за да видя как би изглеждал.

 

Благодаря предварително!

0
Web Basics 14/08/2018 14:41:38
Alex0 avatar Alex0 1 Точки

Здравей,

За да смениш цвета на текста трябва да избереш хипер-връзката в самия li елемент.
 

li:hover > a {
  color: #000;
}

Така ще можеш да променяш цвета на текста в li елемента.

0