Web sitelerinde arka plan çizgisi oluşturmak için CSS kullanabilirsiniz. İşte temel bir örnek:
HTML kodu:
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Arka Plan Çizgisi</title>
</head>
<body>
<div class="background-line"></div>
<h1>Web Sitem</h1>
</body>
</html>
CSS kodu (styles.css):
cssCopy code
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.background-line {
position: absolute;
width: 100%;
height: 1px;
background-color: #333;
top: 50%;
transform: translateY(-50%);
}
Bu örnek, web sitenizin arka planında ortada bir yatay çizgi oluşturacaktır. Çizgi rengini ve kalınlığını istediğiniz gibi ayarlayabilirsiniz. Çizgiyi sayfanın ortasına yerleştirmek için position, top ve transform özelliklerini kullanıyoruz.
Daha karmaşık tasarımlar için, çizgilerin sayfada nasıl dağıldığını ve nasıl göründüğünü daha fazla CSS özelliği kullanarak ayarlayabilirsiniz. Örneğin, farklı renklerde çizgiler ekleyebilir, çizgileri farklı açılarda yerleştirebilir veya daha fazla arka plan elemanı ekleyerek tasarımı zenginleştirebilirsiniz.