HTML KISMI
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<link href="stil.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="genel">
<header>BURASI HEADER</header>
<div class="orta ">
<div class="sol ">
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
</div>
<div class="sag ">
<ul>
<li><a href="#">Liste1</a></li>
<li><a href="#">Liste1</a></li>
<li><a href="#">Liste1</a></li>
</ul>
</div>
<div class="temizle"></div>
</div>
<footer>BURASI FOOTER</footer>
</div>
</body>
</html>
CSS KISMI
#genel header{
border-width:1px ;
border-style:solid;
border-color:red;
padding:50px;
}
#genel div.orta{
border:1px solid red;
padding:10px;
}
#genel footer{
border:1px solid blue;
padding:20px;
}
div .orta div.sol{
background-color: yellow;
float:left;
width: 900px;
}
div .orta div.sag{
border:1px solid green;
float:right;
width:300px;
}
div .temizle{
clear:both;
}
div .orta .kutu{
background-color: pink;
width:200px;
float:left;
margin:10px;
}
NOTLARIM etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
NOTLARIM etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
28 Haziran 2016 Salı
CSS CLEAR ÖZELLİĞİ
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
background-color: #b5bac0;
}
.urun{
width: 326px;
height: 360px;
background-color: #2c6dbc;
float:left;
}
.urun.farkli{
background-color: aquamarine;
}
.urun.farkli2{
background-color: bisque;
}
.alt-bilgi{
background-color: deeppink;
width: 900px;
height: 200px;
clear:both;
}
</style>
</head>
<body>
<div class="urun">BİRİNCİ ÜRÜN</div>
<div class="urun farkli">iKİNCİ ÜRÜN</div>
<div class="urun farkli2">ÜÇÜNCÜ ÜRÜN</div>
<div class="alt-bilgi">Buraya altbilgiler gelecek</div>
</body>
</html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
background-color: #b5bac0;
}
.urun{
width: 326px;
height: 360px;
background-color: #2c6dbc;
float:left;
}
.urun.farkli{
background-color: aquamarine;
}
.urun.farkli2{
background-color: bisque;
}
.alt-bilgi{
background-color: deeppink;
width: 900px;
height: 200px;
clear:both;
}
</style>
</head>
<body>
<div class="urun">BİRİNCİ ÜRÜN</div>
<div class="urun farkli">iKİNCİ ÜRÜN</div>
<div class="urun farkli2">ÜÇÜNCÜ ÜRÜN</div>
<div class="alt-bilgi">Buraya altbilgiler gelecek</div>
</body>
</html>
26 Haziran 2016 Pazar
Css'de Clear Kullanımı
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<style>
.anadiv{
width:650px;
border:2px solid red;
padding:15px;
}
.oyuncek{
width:100px;
height:100px;
background-color: blue;
color:#fff;
font:16px arial;
text-align: center;
float:left;
margin-right:6px;
margin-bottom: 5px;
}
.temizlesol{
clear:left;
}
</style>
</head>
<body>
<div class="anadiv">
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="temizlesol"></div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<style>
.anadiv{
width:650px;
border:2px solid red;
padding:15px;
}
.oyuncek{
width:100px;
height:100px;
background-color: blue;
color:#fff;
font:16px arial;
text-align: center;
float:left;
margin-right:6px;
margin-bottom: 5px;
}
.temizlesol{
clear:left;
}
</style>
</head>
<body>
<div class="anadiv">
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="oyuncek">OYUN</div>
<div class="temizlesol"></div>
</div>
</body>
</html>
Css'de Float Kullanımı 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<style>
.kirmizidiv{
width:811px;
border:3px solid red;
}
.yesildiv{
width:529px;
border:3px solid green;
float:left;
}
.mavidiv{
width:262px;
border:3px solid blue;
float:right;
}
.anaicerik{
width:490px;
height:600px;
border:3px solid #666;
}
.yandiv{
width:200px;
margin-bottom: 15px;
height:170px;
border:3px solid #000;
}
</style>
</head>
<body>
<div class="kirmizidiv">
<div class="yesildiv">
<div class="anaicerik"></div>
</div>
<div class="mavidiv">
<div class="yandiv"></div>
<div class="yandiv"></div>
<div class="yandiv"></div>
<div class="yandiv"></div>
<div class="yandiv"></div>
</div>
<div id="temizle" style="clear:left;"></div>
<div id="temizle2" style="clear:right;"></div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<style>
.kirmizidiv{
width:811px;
border:3px solid red;
}
.yesildiv{
width:529px;
border:3px solid green;
float:left;
}
.mavidiv{
width:262px;
border:3px solid blue;
float:right;
}
.anaicerik{
width:490px;
height:600px;
border:3px solid #666;
}
.yandiv{
width:200px;
margin-bottom: 15px;
height:170px;
border:3px solid #000;
}
</style>
</head>
<body>
<div class="kirmizidiv">
<div class="yesildiv">
<div class="anaicerik"></div>
</div>
<div class="mavidiv">
<div class="yandiv"></div>
<div class="yandiv"></div>
<div class="yandiv"></div>
<div class="yandiv"></div>
<div class="yandiv"></div>
</div>
<div id="temizle" style="clear:left;"></div>
<div id="temizle2" style="clear:right;"></div>
</div>
</body>
</html>
Css'de Float Kullanımı
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<style>
.kutu{
width: 100px;
height:100px;
border:1px solid #000;
background-color:#666666;
font:26px arial;
color:#FFFFFF;
margin-left:5px;
float: left;
}
</style>
</head>
<body>
<div class="kutu">KUTU</div>
<div class="kutu">KUTU</div>
<div class="kutu">KUTU</div>
<div class="kutu">KUTU</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<style>
.kutu{
width: 100px;
height:100px;
border:1px solid #000;
background-color:#666666;
font:26px arial;
color:#FFFFFF;
margin-left:5px;
float: left;
}
</style>
</head>
<body>
<div class="kutu">KUTU</div>
<div class="kutu">KUTU</div>
<div class="kutu">KUTU</div>
<div class="kutu">KUTU</div>
</body>
</html>
Kaydol:
Kayıtlar (Atom)