How to Create: Responsive Header
- Kisha huzushi: Picha ya hali ya mbili Kisha huzushi: Nafasi ya kina ya kina
- Kisha huzushi: Picha ya hali ya nne Kisha huzushi: Mawingu ya kina ya kina
Mwongozo wa kufanya: Kichwa cha kikagumia
Kichwa cha kikagumia
Muungu wa kipimo cha msingi kwa kuhusiana na ukurabu wa ekranu. Huzungumza kubadilisha ukurabu wa ufunguo wa wasafiri wa intaneti kwa kuchoma tabia.
Kuangalika ya jina la kiwango cha utawala
Mwongozo wa kwanza - Ongeza HTML:
<div class="header">
<a href="#default" class="logo">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
Mwongozo pili - Ongeza CSS:
/* Kuingiza mabara ya mwezi na ujenzi wa nje kwa kiwango cha jina cha utawala */
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
/* Kuingiza muundo wa kiwango cha jina cha utawala */
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
/* Kuingiza muundo wa kiwango cha logo - unazidi kusaidia kuwa huzunguka kwa kiwango kikubaliani cha juu, hata fonti inafikia ukubwa */
.header a.logo {
font-size: 25px;
font-weight: bold;
}
/* Kuingiza rangau ya mabara kama uwanasikia mabara */
.header a:hover {
background-color: #ddd;
color: black;
}
/* Kuingiza muundo wa kiwango kimeharibika au kinachozunguka */
.header a.active {
background-color: dodgerblue;
color: white;
}
/* Kuingiza kiwango kikubaliani kimezunguka kushinda kiwango cha juu */
.header-right {
float: right;
}
/* Kuingiza media query ili kusaidia katika muharibifu - wakati kikubaliani cha ekranu ni 500px au kidogo zaidi, zingia kiwango kwa pamoja */
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
Kisha huzushi: Mawingu ya kina ya kina
Kisha huzushi: Mafunzo:Kisha huzushi: kina cha kina cha CSS
- Kisha huzushi: Picha ya hali ya mbili Kisha huzushi: Nafasi ya kina ya kina
- Kisha huzushi: Picha ya hali ya nne Kisha huzushi: Mawingu ya kina ya kina
