导航.active
[英]Navigation .active
问题描述
我在尝试将主动悬停导航时遇到一些问题。 我已将导航创建为div，而不是<li>因此我在W3Schools上找到了解决方案，但对我不起作用。 ：P
有人有兴趣帮助我吗？ 这是我的代码，谢谢。
body { background-color: #DCDCDC; box-sizing: border-box; margin-left: 20px; margin-right: 20px; margin-top: 0px; margin-bottom: 0px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-right:solid rgb(200, 101, 103); border-left: solid rgb(200, 101, 103); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; } h1 { font-size: 120px; text-align: center; font-family: "Jockey One"; color: rgb(200, 101, 103); box-sizing: border-box; } h2 { font-family: "Jockey One"; font-size: 50px; color: rgb(200, 101, 103); } p { font-family: "Allerta Stencil"; font-size: 25px; } #header { height: 50px; box-sizing: border-box; width: auto; } #navigacija { right: 20px; left: 20px; height: 50px; overflow: hidden; text-align: right; background-color: #089DE3; z-index: 9999; box-sizing: border-box; border-radius: 25px; position: fixed; border-top: solid rgb(200, 101, 103); border-bottom: solid rgb(200, 101, 103); } .navitem { background: #089DE3; color: white; line-height: 50px; font-size: 30px; font-family: "Fjalla One"; display: inline-block; padding-left: 50px; padding-right: 50px; box-sizing: border-box; } .home:hover { background: #00C5CD; box-sizing: border-box; } .gallery:hover { background: #00C5CD; box-sizing: border-box; } .contact:hover { box-sizing: border-box; background: #00C5CD; } .info:hover { box-sizing: border-box; background: #00C5CD; } img { float: right; } .footer { background-color: #089DE3; height: 100px; border-top: 2px solid rgb(200, 101, 103); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; border-bottom: solid rgb(200, 101, 103); } #p1 { color: white; font-size: 50px; font-family: "Fjalla One"; text-align: center; line-height: 100px; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML i CSS</title> <link rel="stylesheet" href="Home.css" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css" /> <style type="text/css"> /*<![CDATA[*/ img.c1 {width:200px; height:200px;} /*]]>*/ </style> </head> <body> <div id="header"> <div id="navigacija"> <a class="active" href="Home.html"> <div class="navitem home"><strong>HOME</strong></div></a> <a href="#"></a> <div class="navitem gallery"><strong>GALLERY</strong></div> <a href="#"></a> <div class="navitem contact"><strong>CONTACT</strong></div> <a href="#"></a> <div class="navitem info"><strong>INFO</strong></div> </div> </div> <h1><strong>HTML i CSS</strong></h1> <h2>HTML</h2> <p><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html logo" class="c1" /> HTML (engl. HyperText Markup Language, jezik za oznacavanje hiperteksta) je opisni jezik specijalno namenjen opisu veb stranica. Pomocu njega se jednostavno mogu odvojiti elementi kao sto su naslovi, paragrafi, citati i slicno. Pored toga, u HTML standard su ugradjeni elementi koji detaljnije opisuju sam dokument kao sto su kratak opis dokumenta, kljucne reci, podaci o autoru i slicno. Ovi podaci su opstepoznati kao meta podaci i jasno su odvojeni od sadrzaja dokumenta. Aktuelna verzija standarda je HTML 4.01, a sam standard odrzava Konzorcijum za Veb (W3C, World Wide Web Consortium).HTML je nastao uproscavanjem SGML (Standard Generalized Markup Language, standardizovani uopsteni jezik za oznacavanje) standarda sa svrhom opisa dokumenta koji se objavljuju na vebu.U pocetku je bio prilicno ogranicen sto se oznacavanja sadrzaja tice i pruzao je uglavnom elementarne stvari za oznacavanje i formatiranje teksta (paragrafi, naslovi, citati itd.). Kako je veb rastao tako je rasla i potreba za bogatijim sadrzajem te je u tom smeru razvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika, slojeva, napredno formatiranje teksta itd.Svi HTML dokumenti bi trebalo da pocinju sa definicijom tipa dokumenta DTD, Document Type Definition koji pregledacu definise po kom standardu je dokument pisan.Ovaj kod govori pregledacu da je dokument pisan po strogom HTML 4.01 standardu. Ovaj konkretan standard iskljucuje koriscenje prezentacionih elemenata da bi se sto bolje odvojila prezentacija od sadrzaja.</p> <h2>CSS</h2> <p><img src="http://www.blackbirdsolutions.com.au/sites/default/files/styles/medium/public/blog/css3-logo.png?itok=r8kt8WZA" alt="css logo" class="c1" />CSS (engl. Cascading Style Sheets) je jezik formatiranja pomocu kog se definise izgled elemenata veb-stranice. Prvobitno, HTML je sluzio da definise kompletan izgled, strukturu i sadrzaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture i sadrzaja.CSS je u odredjenoj formi postojao jos u zacecima SGML-a 1970-ih godina. Kako je HTML postajao komplikovaniji, davao je sve vise mogucnosti za definiciju izgleda elemenata, ali je istovremeno postajao necitljiviji i tezi za odrzavanje. Razliciti brauzeri su prikazivali dokumente na razlicite nacine, i postojala je potreba za doslednom tehnikom definisanja prikaza elemenata na stranici. Da bi se ovo postiglo, devet razlicitih metoda je predlozeno na zvanicnom forumu W3C-a. Od devet, dve metode su izabrane kao temelj onoga sto je kasnije postalo CSS: CHSS (engl. Cascading HTML Style Sheets) i SSP (engl. Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada sef tehnicke sluzbe kompanije Opera) predlozio CHSS u oktobru 1994, jezik koji je imao dosta slicnosti sa danasnjim CSS-om. Bert Bos je radio na brauzeru po nazivu Argo, koji je imao sopstveni nacin definisanja stilova, SSP. Li i Bos su radili zajedno da bi osnovali CSS standard (slovo H je izbaceno iz skracenice CHSS jer se CSS mogao odnositi i na druge jezike pored HTML-a).</p> <div class="footer" id="p1"><strong>Uradio: Marko Ribic Ia</strong></div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2017-05-03 19:34:17
您需要确保将active类添加到页面上的适当元素。 从你的代码中，要添加的类的a元素，而不是div的菜单项。
<a href="Home.html">
<div class="navitem home active"><strong>HOME</strong></div>
</a>
然后，您需要为active类添加CSS：
.active {
background-color: pink;
}
这是您的代码已更新的小提琴： https : //fiddle.jshell.net/rk9n242L/
滚动式主动导航
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.