Fantoma
Profesör
- Katılım
- 9 Ağustos 2008
- Mesajlar
- 2,506
- Reaksiyon puanı
- 27
- Puanları
- 228
Basit bir CSS (Katmanlı Stil Sayfası) örneği.
İki sütun üzerine yapılmış bu örnek şablonda, renkler, yazı tipleri ve benzeri öğeleri değiştirerek kendi beğendiğiniz biçimde kullanabilirsiniz.
CSS kodu aşağıdadır.
<html>
<head>
<style type="text/css"> #container
{
width: 100%;
margin: 10px auto;
background-color: #fff
color: #333
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 700px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 720px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333
background-color: #ddd
border-top: 1px solid gray;
}
#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }</style>
<meta http-*****="Content-Type" **********text/html; charset=ISO-8859-9">
<title>CSS Sayfam</title>
</head>
<body>
<div id="container">
<div id="top">
<h1>Başlık</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Yan Başlık</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Taban
</div>
</div>
</body>
</html>
Bu kodu <html> ile </html> dahil kopalayın ve Not Defterinize yapıştırın.
csssayfa1.txt soyadı ile kaydedin.
Ardından, adını da atıyorum, csssayfa1.html olarak, Farklı Kaydet'ten değiştirerek kaydedin, belirecek uyarıya Evet deyin.
Tarayıcınızdan bakın.
İki sütun üzerine yapılmış bu örnek şablonda, renkler, yazı tipleri ve benzeri öğeleri değiştirerek kendi beğendiğiniz biçimde kullanabilirsiniz.
CSS kodu aşağıdadır.
<html>
<head>
<style type="text/css"> #container
{
width: 100%;
margin: 10px auto;
background-color: #fff
color: #333
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 700px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 720px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333
background-color: #ddd
border-top: 1px solid gray;
}
#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }</style>
<meta http-*****="Content-Type" **********text/html; charset=ISO-8859-9">
<title>CSS Sayfam</title>
</head>
<body>
<div id="container">
<div id="top">
<h1>Başlık</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Yan Başlık</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Taban
</div>
</div>
</body>
</html>
Bu kodu <html> ile </html> dahil kopalayın ve Not Defterinize yapıştırın.
csssayfa1.txt soyadı ile kaydedin.
Ardından, adını da atıyorum, csssayfa1.html olarak, Farklı Kaydet'ten değiştirerek kaydedin, belirecek uyarıya Evet deyin.
Tarayıcınızdan bakın.
