CSS ile yukarıdaki gibi sayfa içi link bağlantılı basit bir tek sayfa tasarım yapmaya çalışalım. Öncelikle, karşımıza gelen tüm uygulamalarda olduğu gibi , tasarımı analiz etmeliyiz..
Sayfayı incelediğimizde tasarımın 7 bölümden oluştuğunu görebiliriz..
Header için <header> , Footer için <footer> semantik etiketlerini , diğerleri için bölüm etiketi olan <section> etiketini kullanabiliriz..
Ayrıca sayfada;
Sayfanın kenar boşlukları , yazı tipi , link geçişi özellikleri ile , tüm bölümlerde aynı şekilde kullanacağımız butonların CSS özelliklerini ekleyelim..
html {scroll-behavior: smooth; } /* linkler için yumuşak geçiş */
body {
padding:0; /* sayfa boşlukları */
margin:0;
font-family: calibri; /* sayfa yazı tipi */
}
/* Sayfada kullanılacak butonlar */
.btn {
padding: .5rem 1rem;
background-color:skyblue;
color: #000;
font-weight: bold;
border-radius: 1rem;
transition: .5s;
text-decoration: none;
font-size:.8rem;
cursor:pointer;
}
.btn:hover { background-color:#fff; } /* buton üzerine gelince.. */
Header bölümü için <header> etiketini kullancağız. Bölüm içerisinde LOGO , MENÜ (NAV) ve BUTONLAR olmak üzere 3 alan var. Alanları HEADER içindeki yerleşimlerini header'a flex yapısı vererek yatayda space-around , dikeyde ise ortalanmaları için alim-items : center vererek ayarlayabiliriz..
Bölümün diğer özellikeri :
<a name="giris"></a> <!-- giriş'e dönmek için yer işareti -->
<header>
<!-- LOGO-->
<span class="logo"> </span>
<!-- MENÜ -->
<nav> </nav>
<!-- BUTONLAR-->
<div class="butons"> </div>
</header>
header {
background: #000; padding: .5rem; color:#fff ;
display: flex; justify-content: space-around; align-items: center;
}
LOGO alanı için .logo class'lı bir span oluşturalım. Bu alanda bir resim , WEB TASARIM yazısı (P) ve küçük bir açıklama yazısı (small) var. Yazıları tek bir div içerisinde düşünebiliriz. Resim ve DIV yerleşimi için "logo" class'ına flex verelim ve gap ile aralarındaki boşluğu ayarlayalım.
<!-- LOGO-->
<span class="logo">
<img src="resim/logocss.png" alt="">
<div>
<p>WEB TASARIM</p>
<small> HTML CSS JS PHP </small>
</div>
</span>
header .logo {
display: flex;
align-items: center;
gap:.3rem;
}
/* Logo resmi ve WEB TASARIM yazı özellikleri */
header .logo img { width:70px; }
header .logo p { margin:0; font-size: 1.8rem; font-weight:bold; color: skyblue; }
Menü alanı için NAV etiketini kullanıyoruz.. Linkler beyaz ve üzerine gelindiğinde mavi oluyor. Ayrıca linklerin href'lerine sayfa içinde gitmesi gereken yer işaretlerini ekliyoruz. Aşağıda, bölümleri hazırlarken bu yer işaretlerini ekleyeceğiz..
<!-- MENÜ -->
<nav>
<ul>
<li><a href="#giris">GİRİŞ</a></li>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#js">JAVASCRIPT</a></li>
<li><a href="#php">PHP</a></li>
</ul>
</nav>
header nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap:2rem;
}
header nav ul li a { /* menü linkleri */
color:#fff;
font-weight: bold;
text-decoration: none;
font-size: 1.3rem;
transition: .5s;
}
header nav ul li a:hover { /* linklerin üzerine gelince */
color:#379ad6;
}
Butonar alanını .butons class'lı div ile hazırlıyoruz. Alan içinde 1 arama ikonu ve 2 butonumuz var. Butonlar içerisinde de ikon kullanılmış. Yukarıda, Genel Özelliklerde butonlar için kullanacağımız .btn class'ını biçimlendirmiştik. İkonlar için Fontawesome bağlantısını head içerisinde ekleyip , alan için HTML ve CSS kodlarını ekleyelim. Yine flex kullanarak butonların aralrını gap ile ayarlayabilriiz. Ancak arama ikonu'nu margin-right ile biraz daha sola almamız gerekiyor..
<head>
<!-- fontawesome bağlantısı -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- BUTONLAR-->
<div class="butons">
<span class="search"> <i class="fa fa-search fa-2x"> </i> </span>
<button class="btn"><i class="fa fa-plus"></i> <span> KAYIT </span></button>
<button class="btn"><i class="fa fa-sign-in"></i><span> GİRİŞ</span> </button>
</div>
header .butons { display: flex; gap:.5rem; }
header .butons .search {
cursor: pointer;
margin-right:2rem;
transition: .5s;
}
header .butons span:hover { <!-- arama ikonunu üzerine gelince -->
color:aqua;
}
Giriş , HTML , CS, JS ve PHP bölümlerini oluşturmak için SECTION etiketi kullanacağız... Bölümlerdeki içerikler belirli bir genişlikte yatay ve dikeyde ortalanmış. Bunu SECTION içerisinde bir div ile .CONTAINER (aşağıdaki gri div) sağlayabiliriz. Tüm bölümlerde CONTAINER içinde resim , yazı ve buton var. Başlıklar (H2) ise giriş bölümü dışında section içerisinde container'ın üzerinde duruyor.. (içinde değil)
Ayrıca HTML ve JS bölümlerinde resim solda iken , CSS ve PHP bölümlerinde sağa alınmış. Aşağıda bölümlerin HTML kodlarını yazarken dikkat edeceğiz..
Bölüm içeriğinin yerleşimini daha iyi anlamak için taslaklarına bakalım..
GİRİŞ BÖLÜMÜ TASLAĞI
HTML, CSS, JS, PHP BÖLÜMLERİ TASLAĞI
<section>
<div class="container">
.
.
</div>
</section>
SECTION ORTAK OZELLİKLERİ
.CONTAINER ORTAK OZELLİKLERİ
IMG ORTAK ÖZELLİKLERİ
P ORTAK ÖZELLİKLERİ
section { /* bölüm ortak özellikler */
color:#fff;
padding: 7rem;
border-bottom: 5px solid #000;
}
section h1 { /* bölüm içindeki P'ler */
margin: 0;
font-size:2.5rem;
text-align: center;
font-family: verdana;
margin-bottom: 3rem;
}
section .container { /* container ortak özellikler */
margin: 0rem auto; /* ortalama */
padding: 2rem;
width:70%;
display: flex;
justify-content: center;
align-items: center;
gap:3rem;
}
section .container img { /* bölüm içindeki resimler */
border-radius : 1rem;
width:50%;
border:1px solid #fff;
padding: 1rem;
}
section .container p { /* bölüm içindeki yazılar */
margin:2rem 0;
font-size: 1.3rem;
color:#ddd;
}
h1 , img ve P etiketleri .container div içinde olduğu için , CSS özellklerini yazarken seçicilerin başına section ve .container class'ını ekledik...
Giriş bölümü için Section etiketine ".giris" class'ı ekliyoruz. Dİğer bölümlerden farklı olarak , bu bölümde H2 yerine, container içindeki yazının (P) üzerinde H3 başlığı kullandık. Dolayısıyla bunu CSS'te ayrıca belirtmeliyiz... Ayrıca giriş bölümüne yükseklik uygulanmış. İçeriğin dikeyde ortalanabilmesi için sadece bu bölüme FLEX yapı uygulayacağız..
<section class="giris">
<div class="container">
<img src="resim/web.jfif" alt="">
<div>
<h3> WEB TABANLI UYGULAMA GELİŞTİRME </h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit harum officiis similique voluptas unde quas fugiat nobis ullam commodi quasi consectetur doloribus dolore placeat sequi, esse voluptatum rerum et, dignissimos.</p>
<a href="#html" class="btn"> HTML </a>
</div>
</div>
</section>
section.giris {
height:70%;
background-color: #4682b4 ;
display: flex;
justify-content: center;
align-items: center;
}
section.giris h3 {
text-align: left;
font-size:2rem;
margin:0;
}
Giriş bölümündeki HTML butonunun linkine "#html" yer işaretini yazarak tıklandığında HTML bölümüne gitmesini sağlıyoruz..
HTML bölümü için Section etiketine ".html" class'ı ekliyoruz. Bu bölümde H1 başlığı ve onun altında container div'i var.. Her iksiinin ortak CSS özellklerini yukarıda belirtmiştik.. Yükseklik uygulamadığımız için flex yapı kullanmadan CONTAINER div'i margin:0 auto ile ortalıyoruz..
HTML section etiketi başlamadan hemen önce "html" isminde yer işareti ekliyoruz. GİRİŞ butonunun linkine ise "#giris" yer işaretini yazarak tıklandığında GİRİŞ bölümüne gitmesini sağlıyoruz..
Bölümlerinin ortak özelliklerinden farklı olarak sadece arka plan için CSS eklemeliyiz...
<!-- HTML -->
<a name="html"></a> <!-- html bölümü için yer işareti -->
<section class="html">
<h1> HTML </h1>
<div class="container">
<img src="resim/html.jpg" alt="">
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit harum officiis similique voluptas unde quas fugiat nobis ullam commodi quasi consectetur doloribus dolore placeat sequi, esse voluptatum rerum et, dignissimos.</p>
<a href="#giris" class="btn"><i class="fa fa-chevron-up"></i> GİRİŞ </a>
</div>
</div>
</section>
section.html { background-color: #151515; }
CSS bölümü için Section etiketine ".css" class'ı ekliyoruz. Bu bölümde H1 başlığı ve onun altında container div'i var.. Her iksiinin ortak CSS özellklerini yukarıda belirtmiştik.. Yükseklik uygulamadığımız için flex yapı kullanmadan CONTAINER div'i margin:0 auto ile ortalıyoruz..
CSS section etiketi başlamadan hemen önce "css" isminde yer işareti ekliyoruz. GİRİŞ butonunun linkine ise "#giris" yer işaretini yazarak tıklandığında GİRİŞ bölümüne gitmesini sağlıyoruz..
Bölümlerinin ortak özelliklerinden farklı olarak sadece arka plan için CSS eklemeliyiz...
<!-- CSS -->
<a name="css"></a> <!-- css bölümü için yer işareti -->
<section class="css">
<h1> CSS (CASCADING STYLE SHEETS) </h1>
<div class="container">
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit harum officiis similique voluptas unde quas fugiat nobis ullam commodi quasi consectetur doloribus dolore placeat sequi, esse voluptatum rerum et, dignissimos.</p>
<a href="#giris" class="btn"><i class="fa fa-chevron-up"></i> GİRİŞ </a>
</div>
<img src="resim/css.jpg" alt="">
</div>
</section>
section.css { background-color: #111; }
JAVASCRIPT bölümü için Section etiketine ".js" class'ı ekliyoruz. Bu bölümde H1 başlığı ve onun altında container div'i var.. Her iksiinin ortak CSS özellklerini yukarıda belirtmiştik.. Yükseklik uygulamadığımız için flex yapı kullanmadan CONTAINER div'i margin:0 auto ile ortalıyoruz..
JS section etiketi başlamadan hemen önce "js" isminde yer işareti ekliyoruz. GİRİŞ butonunun linkine ise "#giris" yer işaretini yazarak tıklandığında GİRİŞ bölümüne gitmesini sağlıyoruz..
Bölümlerinin ortak özelliklerinden farklı olarak sadece arka plan için CSS eklemeliyiz...
<!-- JS -->
<a name="js"></a> <!-- js bölümü için yer işareti -->
<section class="js">
<h1> JAVASCRIPT </h1>
<div class="container">
<img src="resim/js.jpeg" alt="">
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit harum officiis similique voluptas unde quas fugiat nobis ullam commodi quasi consectetur doloribus dolore placeat sequi, esse voluptatum rerum et, dignissimos.</p>
<a href="#giris" class="btn"><i class="fa fa-chevron-up"></i> GİRİŞ </a>
</div>
</div>
</section>
section.js { background-color: #151515; }
PHP bölümü için Section etiketine ".php" class'ı ekliyoruz. Bu bölümde H1 başlığı ve onun altında container div'i var.. Her iksiinin ortak CSS özellklerini yukarıda belirtmiştik.. Yükseklik uygulamadığımız için flex yapı kullanmadan CONTAINER div'i margin:0 auto ile ortalıyoruz..
JS section etiketi başlamadan hemen önce "php" isminde yer işareti ekliyoruz. GİRİŞ butonunun linkine ise "#giris" yer işaretini yazarak tıklandığında GİRİŞ bölümüne gitmesini sağlıyoruz..
Bölümlerinin ortak özelliklerinden farklı olarak sadece arka plan için CSS eklemeliyiz...
<!-- PHP -->
<a name="php"></a> <!-- php bölümü için yer işareti -->
<section class="php">
<h1> PHP (PERSONAL HOME PAGE) </h1>
<div class="container">
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit harum officiis similique voluptas unde quas fugiat nobis ullam commodi quasi consectetur doloribus dolore placeat sequi, esse voluptatum rerum et, dignissimos.</p>
<a href="#giris" class="btn"><i class="fa fa-chevron-up"></i> GİRİŞ </a>
</div>
<img src="resim/php.jpg" alt="">
</div>
</section>
section.php { background-color: #111;}
Footer bölümünde sadece ortalanmış linkler mevcut. Section etiketi kullanamdan doğrudan <footer> etiketi içerisinde linkleri yazıp biçimlendirebilriz.
<footer>
<a href="#giris">GİRİŞ</a>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JAVASCRIPT</a>
<a href="#php">PHP</a>
</footer>
CSS
footer {
background: #000;
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem;
gap:2rem;
}
footer a { color:#ddd; text-decoration:none; }
footer a:hover{ color:aqua; }
Görüşmek üzere..
Toplam 16 Makale
Lütfen yorumlarınızda saygılı, yapıcı ve anlaşılır bir dil kullanın.
Küfür, hakaret ya da spam içerikler onaylanmaz.