CSS İçerik Bölümü ve Yan Menünün Oluşturulması

İçerik bölümü ve yan menü oluşturmak için genellikle bir ana içerik bölümü (<main> veya <div>), bir yan menü bölümü (<aside> veya <div>), ve içerik elemanları kullanılır. İşte basit bir HTML ve CSS örneği:

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS İçerik ve Yan Menü Örneği</title> <style> body { font-family: 'Arial', sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; display: flex; } main { flex: 1; padding: 20px; } aside { width: 200px; background-color: #444; color: #fff; padding: 20px; } nav { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; color: #fff; display: block; padding: 10px 0; font-size: 1.2em; } nav a:hover { background-color: #555; } </style> </head> <body> <main> <h1>İçerik Başlığı</h1> <p>Bu içerik bölümü, web sitenizin ana içeriğini temsil eder.</p> </main> <aside> <h2>Yan Menü Başlığı</h2> <nav> <ul> <li><a href="#menu1">Menü 1</a></li> <li><a href="#menu2">Menü 2</a></li> <li><a href="#menu3">Menü 3</a></li> </ul> </nav> </aside> </body> </html>

Bu örnekte:

  • main etiketi içinde ana içerik bölümü oluşturulmuştur.
  • aside etiketi içinde yan menü bölümü oluşturulmuştur.
  • Flexbox kullanılarak ana içerik ve yan menü yan yana yerleştirilmiştir.
  • Yan menü içindeki bağlantılara :hover pseudo-class eklenerek üzerine gelindiğinde stil değişikliği sağlanmıştır.

Bu temel yapıyı kendi projenize uyarlayarak içerik ve yan menü bölümlerini dilediğiniz gibi özelleştirebilirsiniz.



Yorum Ekle