örnek1:opacitiy
<!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=iso-8859-1" />
<title>opacitiy ödev</title>
<style type="text/css">
.mnz img{width:150px;height:100px;}
</style>
</head>
<body>
<h1>En güzel resimim...</h1>
<div class="mazara">
<img src="mnz.jpg" style="opacity:0.8; filter:alpha(opacity=80)"
onmouseover="this.style.opacity=2;this.filters.alpha.opacity=150"
onmouseout="this.style.opacity=6;this.filters.alpha.opacity=80"/>
</div>
</body>
</html>
örnek2:padding
<!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=iso-8859-1" />
<title>padding ödevimm</title>
<style>
p{color:#CC0033;font-size:42px;padding:23px;}
h1{font-size:25px;color:red;}
</style>
</head>
<body>
<p> padding </p>
<h1> Anlami nedir ögren bakalim...</h1>
</body>
</html>
örnek3:position-absolute
<!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=iso-8859-1" />
<title>position absolute</title>
<style type="text/css">
.ktu{width: 350px; overflow:hidden; background: green; padding: 10px;}
.kut1{width: 50px; height: 150px; background: red;float:left; margin: 10px;}
.kut2{width: 40px; height: 60px; background: pink;float:left; margin: 10px;}
.kut3{width: 30px; height: 100px; background: yellow;float:left; margin: 10px;}
.kut3{width: 30px; height: 100px; background: yellow;float:left; margin: 10px; position:absolute;}
</style>
</head>
<body>
<div class="ktu">
<div class="kut1"></div>
<div class="kut2"></div>
<div class="kut3"></div>
</div>
</body>
</html>
örnek4:relative
<!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=iso-8859-1" />
<title>position relavite</title>
<style type="text/css">
.ktu{width: 350px; overflow:hidden; background: green; padding: 10px;}
.kut1{width: 50px; height: 150px; background: red;float:left; margin: 10px;}
.kut2{width: 40px; height: 60px; background: pink;float:left; margin: 10px;}
.kut3{width: 30px; height: 100px; background: yellow;float:left; margin: 10px;}
.ktu{width: 350px; overflow:hidden; background: green; padding: 10px; position: relative;}
.kut3{width: 70px; height: 70px; background: yellow;float:left; margin: 10px; position: absolute; top: 30px; left: 40px;}
</style>
</head>
<body>
<div class="ktu">
<div class="kut1"></div>
<div class="kut2"></div>
<div class="kut3"></div>
</div>
</body>
</html>
örnek5:z-index
<!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=iso-8859-1" />
<title>z-index ödevim</title>
<style type="text/css">
.dis{width: 500px; height: 300px; background: blue; margin:110px auto; position: relative;}
.katman1{width: 150px; height: 150px; background: pink; position: absolute; right: 15px; top: 15px; z-index: 3;}
.katman2{width: 125px; height: 125px; background: red; position: absolute; right: 80px; top: 35px; z-index: 2;}
</style>
</head>
<body>
<div class="dis">
<div class="katman1"></div>
<div class="katman2"></div>
</div>
</body>
</html>
Ödevlerim tamamdır :)
Hiç yorum yok:
Yorum Gönder