Radebaugh
Hectopat
- Katılım
- 5 Mayıs 2020
- Mesajlar
- 2.049
- Makaleler
- 1
- Çözümler
- 6
Örnek 1:
Örnek 2 :
Eğer bunları beğenmediyseniz, buraya bakabilirsiniz.
www.w3schools.com
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Navbar Örnekleri.</title>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Keşfet</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkımızda</a></li>
</ul>
</body>
</html>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Navbar Örnekleri.</title>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Keşfet</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkımızda</a></li>
</ul>
</body>
</html>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}Eğer bunları beğenmediyseniz, buraya bakabilirsiniz.
CSS Navigation Bar
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
