- Konuyu Başlatan
- AdminCP
- #1
- Katılım
- 9 Haziran 2018
- Konular
- 1,645
- Mesajlar
- 5,891
- Çözümler
- 1
- Reaksiyon puanı
- 1,771
- Puanları
- 113
- Konum
- Adana
- Forum Yaşı
- 8 Yıl 148 Gün
- Cinsiyet
- Erkek
İndex yapan arkadaşlar için hazırladığım beyaz, kırmızı, mavi ve pembe renklerinden oluşan 4 adet html ve css üst menü kodları.
Beyaz demo ve kodları:
Beyaz renk menü ön izleme linki => Header - Üst Kısım Html Kodlaması
Kodları:
Kırmızı demo ve kodları:
Kırmızı renkli menü ön izleme linki => Header - Üst Kısım Html Kodlaması
Kırmızı renkli menü kodları:
Mavi demo ve kodları:
Mavi renkli menü ön izleme linki => Header - Üst Kısım Html Kodlaması
Mavi renki menü kodları:
Pembe menü demo ve kodları:
Pembe renkli menü ön izleme linki => Header - Üst Kısım Html Kodlaması
Pembe renkli menü kodları:
Hangi rengi eklemek istiyorsanız o renk kodlarını buradan kopyalayarak indexinizde eklemek istediğiniz yere yapıştırarak düzenleyebilirsiniz.
Not: Ekte bulunan header-bg.png adlı resmi indexinizin images klasörüne yüklemeyi unutmayınız
Beyaz demo ve kodları:
Beyaz renk menü ön izleme linki => Header - Üst Kısım Html Kodlaması
Kodları:
Kod:
<style type="text/css">
* {margin:0 auto;padding:0;}
#header {background: url(images/header-bg.png);width:100%; height:70px;}
.content {width:80%;}
.content h1 {font-family:'Ranga', cursive;line-height:70px;color:#fff;cursor:default;}
.menu {margin-right:0;float:right;font-family:'Tahoma';}
.menu ul {position:relative;top:-70px;}
.menu ul li {list-style:none;float:left;margin-left:1px;}
.menu ul li a {color: #fff; padding: 25px 5px;text-decoration:none;display:block;}
.menu ul li a:hover {background:#fff;color:black;}
</style>
<body>
<div id="header">
<div class="content"><h1>www.trturka.com</h1>
<div class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Dj Girişi</a></li>
<li><a href="#">Nick Al</a></li>
<li><a href="#">Aktivex</a></li>
<li><a href="https://www.trturka.com">www.trturka.com</a></li>
<li><a href="#">Yayıncılarımız</a></li>
<li><a href="#">Kurallarımız</a></li>
</ul>
</div>
<div>Kırmızı demo ve kodları:
Kırmızı renkli menü ön izleme linki => Header - Üst Kısım Html Kodlaması
Kırmızı renkli menü kodları:
Kod:
<style type="text/css">
* {margin:0 auto;padding:0;}
#header {background: url(images/header-bg.png);width:100%; height:70px;}
.content {width:80%;}
.content h1 {font-family:'Ranga', cursive;line-height:70px;color:red;cursor:default;}
.menu {margin-right:0;float:right;font-family:'Tahoma';}
.menu ul {position:relative;top:-70px;}
.menu ul li {list-style:none;float:left;margin-left:1px;}
.menu ul li a {color:red; padding: 25px 5px;text-decoration:none;display:block;}
.menu ul li a:hover {background:red;color:black;}
</style>
<body>
<div id="header">
<div class="content"><h1>www.trturka.com</h1>
<div class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Dj Girişi</a></li>
<li><a href="#">Nick Al</a></li>
<li><a href="#">Aktivex</a></li>
<li><a href="https://www.trturka.com">www.trturka.com</a></li>
<li><a href="#">Yayıncılarımız</a></li>
<li><a href="#">Kurallarımız</a></li>
</ul>
</div>
<div>Mavi demo ve kodları:
Mavi renkli menü ön izleme linki => Header - Üst Kısım Html Kodlaması
Mavi renki menü kodları:
Kod:
<style type="text/css">
* {margin:0 auto;padding:0;}
#header {background: url(images/header-bg.png);width:100%; height:70px;}
.content {width:80%;}
.content h1 {font-family:'Ranga', cursive;line-height:70px;color:#56aaff;cursor:default;}
.menu {margin-right:0;float:right;font-family:'Tahoma';}
.menu ul {position:relative;top:-70px;}
.menu ul li {list-style:none;float:left;margin-left:1px;}
.menu ul li a {color: #56aaff; padding: 25px 5px;text-decoration:none;display:block;}
.menu ul li a:hover {background:#56aaff;color:black;}
</style>
<body>
<div id="header">
<div class="content"><h1>www.trturka.com</h1>
<div class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Dj Girişi</a></li>
<li><a href="#">Nick Al</a></li>
<li><a href="#">Aktivex</a></li>
<li><a href="https://www.trturka.com">www.trturka.com</a></li>
<li><a href="#">Yayıncılarımız</a></li>
<li><a href="#">Kurallarımız</a></li>
</ul>
</div>Pembe menü demo ve kodları:
Pembe renkli menü ön izleme linki => Header - Üst Kısım Html Kodlaması
Pembe renkli menü kodları:
Kod:
<style type="text/css">
* {margin:0 auto;padding:0;}
#header {background: url(images/header-bg.png);width:100%; height:70px;}
.content {width:80%;}
.content h1 {font-family:'Ranga', cursive;line-height:70px;color:#ff56ff;cursor:default;}
.menu {margin-right:0;float:right;font-family:'Tahoma';}
.menu ul {position:relative;top:-70px;}
.menu ul li {list-style:none;float:left;margin-left:1px;}
.menu ul li a {color: #ff56ff; padding: 25px 5px;text-decoration:none;display:block;}
.menu ul li a:hover {background:#ff56ff;color:black;}
</style>
<body>
<div id="header">
<div class="content"><h1>www.trturka.com</h1>
<div class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Dj Girişi</a></li>
<li><a href="#">Nick Al</a></li>
<li><a href="#">Aktivex</a></li>
<li><a href="https://www.trturka.com">www.trturka.com</a></li>
<li><a href="#">Yayıncılarımız</a></li>
<li><a href="#">Kurallarımız</a></li>
</ul>
</div>
<div>Hangi rengi eklemek istiyorsanız o renk kodlarını buradan kopyalayarak indexinizde eklemek istediğiniz yere yapıştırarak düzenleyebilirsiniz.
Not: Ekte bulunan header-bg.png adlı resmi indexinizin images klasörüne yüklemeyi unutmayınız
