Mobil Görünüm Geliştirme:
Evet arkadaşlar biliyorsunuz ki css ile her şey mümkün. Css imkansızı size sunar. Sizlere basit bir şekilde mobil görünümü değiştirmeyi göstereceğim ve kodlarını vereceğim. Ben basit bir görünüm yaptım. Siz geliştirirsiniz. Sitemin mobil görünümünü resim olarak veriyorum ki reklam yapıyor demesinler.
Evet arkadaşlar resimde gördüğünüz gibi arkaplanı rengini kaldırıp resmi ekledim. Beatbox Türkiye yazan yerin arkaplanı normalde renk ancak ben rengi kaldırıp oraya da bir arkaplan resmi ekledim.
Önemli Not: Kodlar nereye eklenecek >> "Text above the content of a subpage" bölümüne.
Sol üstte yer alan çirkin menüyü kaldırdım. Simge duruyor ama tıklayınca bir şey açılmıyor. İptal ettim yani. Onun yerine basit bir üst menü ekledim. Birçok şey eklenip geliştirilebilir. Sıra kodlara geldi..
Başlık Arkaplan Resmi Kodu:
<style>.header {
background-color: none;
background-image:url(https://img.webme.com/pic/b/beatbox-turkiye/arka.png);
}</style>
İçerik Arkaplan Resmi Kodu:
<style>.ui-content {
background-image:url(http://b1303.hizliresim.com/17/w/ljql3.png);
}</style>
Başlıktaki Menüyü Kaldırma Kodu:
<style>.my-nav-item {display:none;}
[data-role="panel"] {display:none;}</style>
Basit Menü İçin Kod:
<div id="mobilmenu">
<a href="/ana-sayfa.htm">Ana Sayfa</a> -
<a href="/hakkimizda.htm">Hakkimizda</a> -
<a href="/defter.htm">Ziyaretci Defteri</a> -
<a href="/iletisim.htm">Bize Ulasin</a>
</div>
<br>
<style>
#mobilmenu {
background-color: #D4E9F3;
text-align: center;
border: solid 1px #000;
padding: 3px;
width: 100%;
}
#mobilmenu a {
color: #000;
text-decoration: none;
}
#mobilmenu a:hover {
color: #1c86ee;
text-decoration: underline;
}
</style>
|
