Css Dersleri – Div Kullanım Örneği Site Şablonu 2

admin tarafından

9 Aralık 2014 1018 kez okundu Okuma süresi: 1dk, 34sn

Css Dersleri – Div Kullanım Örneği Site Şablonu 2

Css Derslerimize yeni bir div uygulaması ile devam ediyoruz aşağıda şablonu verilen sitenin css dökümü istenmektedir buna uygun html ve css kodlarımız ve ekran çıktısı aşağıdadır.

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.bilisimogretmeni.com Div Uygulaması</title>
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head>
<body>
<div id="genel">
	<div id="topnav"></div>
   	<div id="imageslider"></div>
    <div id="contentbox"></div>
    <div id="contentbox"></div>
    <div id="contentboxayri"></div>
    <div id="temizle"></div>
    <div id="maincontent"></div>
    <div id="topnav"></div>    
</div>
</body>
</html>

style.css

@charset "utf-8";
 /* www.bilisimogretmeni.com */
#genel
{
	width:960px;
	padding:10px;
	background-color:aqua;
	color:white;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	margin:auto;
}
#topnav
{
	width:940px;
	padding:10px;
	background-color:brown;
	height:80px;
}
/* www.bilisimogretmeni.com */
#imageslider
{
	width:960px;
	height:300px;
	background-color:brown;
	margin-top:10px;
	margin-bottom:20px;
}
#contentbox
{
	background-color:brown;
	width:310px;
	height:150px;
	float:left;
	margin-right:10px;
}
#contentboxayri
{
	background-color:brown;
	width:320px;
	height:150px;
	float:right;
}
#temizle
{
	clear:both;
}
#maincontent
{
	height:250px;
	width:940px;
	padding:10px;
	margin-bottom:5px;
	margin-top:10px;
	background-color:brown;
}
/* www.bilisimogretmeni.com */

[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/rg9h74og/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]

Bu İçeriğe Tepkin Ne Oldu?