CSS Web Sitesi Düzeni..

ByESiNTi · 23 Tem 2021

Web Sitesi Düzeni

Bir web sitesi genellikle üstbilgilere, menülere, içeriğe ve altbilgiye bölünür:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Aralarından seçim yapabileceğiniz tonlarca farklı düzen tasarımı var. Ancak, yukarıdaki yapı en yaygın olanlardan biridir ve bu derste ona daha yakından bakacağız.

başlık

Bir başlık genellikle web sitesinin en üstünde (veya bir üst gezinme menüsünün hemen altında) bulunur. Genellikle bir logo veya web sitesi adı içerir:

Kod:

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

SONUÇ:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

</body>
</html>

Gezinti çubuğu

Bir gezinme çubuğu, ziyaretçilerin web sitenizde gezinmesine yardımcı olacak bir bağlantı listesi içerir:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

</body>
</html>

İçerik

Bu bölümdeki düzen, genellikle hedef kullanıcılara bağlıdır. En yaygın düzen, aşağıdakilerden biridir (veya bunları birleştirir):

1 sütun (genellikle mobil tarayıcılar için kullanılır)
2 sütun (genellikle tabletler ve dizüstü bilgisayarlar için kullanılır)
3 sütunlu düzen (yalnızca masaüstleri için kullanılır)

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

3 sütunlu bir düzen oluşturacağız ve bunu daha küçük ekranlarda 1 sütunlu bir düzene değiştireceğiz:

Örnek:

Kod:

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

----------------------------------------------------------------------------------------------------------------------------------------------

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
 
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
 
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
</div>

</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

Eşit Olmayan Sütunlar

Ana içerik, sitenizin en büyük ve en önemli parçasıdır.

Eşit olmayan sütun genişliklerinde yaygındır , bu nedenle alanın çoğu ana içerik için ayrılmıştır. Yan içerik (varsa) genellikle alternatif bir gezinme olarak veya ana içerikle ilgili bilgileri belirtmek için kullanılır. Genişlikleri istediğiniz gibi değiştirin, yalnızca toplamda %100'e kadar eklenmesi gerektiğini unutmayın:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

.column {
  float: left;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="row">
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
 
  <div class="column middle">
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
 
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>
 
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------

altbilgi

Altbilgi, sayfanızın en altına yerleştirilir. Genellikle telif hakkı ve iletişim bilgileri gibi bilgileri içerir:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Replicant · 25 Tem 2021

Paylaşım için teşekkürler

EsatOfficial · 25 Tem 2021

Paylaşım için teşekkürler

ByESiNTi · 25 Tem 2021

Replicant' Alıntı:
Paylaşım için teşekkürler

EsatOfficial' Alıntı:
Paylaşım için teşekkürler

CSS Web Sitesi Düzeni..

ByESiNTi

ByESiNTi TURKMMO

Web Sitesi Düzeni

başlık

Gezinti çubuğu

İçerik

Eşit Olmayan Sütunlar

altbilgi

Replicant

Ehlî olmuşum elemlerin

EsatOfficial

Kara Gül ... 🥀

ByESiNTi

ByESiNTi TURKMMO

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

CSS Web Sitesi Düzeni..

ByESiNTi

ByESiNTi TURKMMO

Web Sitesi Düzeni​

başlık​

Gezinti çubuğu​

İçerik​

Eşit Olmayan Sütunlar​

altbilgi​

Replicant

Ehlî olmuşum elemlerin

EsatOfficial

Kara Gül ... 🥀

ByESiNTi

ByESiNTi TURKMMO

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

Web Sitesi Düzeni

başlık

Gezinti çubuğu

İçerik

Eşit Olmayan Sütunlar

altbilgi