KYMBAVV
Hectopat
- Katılım
- 20 Eylül 2020
- Mesajlar
- 61
Daha fazla
- Cinsiyet
- Erkek
- Meslek
- Öğrenci, Web Designer
Merhabalar, web site yaparken menüyü üste sabitleyedim yardım eder misiniz?
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO SAYFA</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">
</head>
<body>
<div style="text-align:center">
<ul class="ustMenu" >
<li><a href="#"> <i class="fas fa-home"></i>Ana Sayfa</a></li>
<li><a href="#"> <i class="fas fa-book"></i>Projelerimiz</a></li>
<li><a href="#"> <i class="fas fa-users"></i>Biten Projelerimiz</a></li>
<li> <img src="img/cafelogo.png" width="100px" </a></li>
<li><a href="#"> <i class="fas fa-users"></i>Referanslarımız</a></li>
<li><a href="#"> <i class="fas fa-users"></i>Hakkımızda</a></li>
<li><a href="#"> <i class="fas fa-users"></i>İletişim</a></li>
<div class="clear"></div>
</ul>
</div>
</body>
</html>
CSS:
/
{
margin:0px;
padding:0px;
}
.ustMenu li{
/* float:left;
padding:10px;*/
}
.ustMenu{
list-style-type:none;
border:2px solid #FFF;
margin:0px;
padding:0px;
border-bottom:#600;
}
.ustMenu li a{
display:block;
font-weight:bold;
color:#300;
text-decoration:none;
margin:0px;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
transition:background 0.5s ;
/*float:left;*/
display:inline-block;
}
.ustMenu li a:hover{
color: #FFF;
background-color: #300;
}