Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle DIV Kullanımı Uygulaması programını aktaracağız. Css ve Html de kodlama nasıl gerçekleşir? Css ve Html İle DIV Kullanımı Uygulaması nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.
Css ve Html İle DIV Kullanımı Uygulaması Kod Alanı
Css ve Html web programlama dilinde DIV Kullanımı Uygulaması kod metnini oluşturduk. Bu uygulamamızda css ve div kullanımı ile incelenebilir bir web sayfası tasarımı oluşturacağız. Uygulamamızda hem html hem de css kod metin alanı bulunmaktadır. Uygulamamız div ile css kullanımıyla web tasarımı işlemleri için örnek teşkil etmektedir.
Uygulamanın html kod metin alanı aşağıdaki gibidir:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>site yapımı</title>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet">
<link href="tasarim2.css" rel="stylesheet">
</head>
<body>
<div class="ust">
<div class="ortala">
<div class="logo">
<a href="index2.html">
<h1>BİLİSİM</h1>
</a>
</div>
<nav class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">Referans</a></li>
<li><a href="#">Sayfalar</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</div>
</div>
<div class="temizle"></div>
<div class="icerik">
<div class="ortala">
<div class="slider">
<img src="site_dosyalar/images/great-hairstyle.jpg" alt="resim">
<h1>WEB TASARIM </h1>
<div class="temizle"></div>
</div>
<div class="satır">
<div class="ozet">
<div class="resim"><img src="site_dosyalar/images/hairstyle1.jpg" alt="resim"></div>
<h2>saç stili</h2>
<p>Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'yu tıklattığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz.</p>
</div>
<div class="ozet">
<div class="resim"><img src="site_dosyalar/images/hairstyle2.jpg" alt="resim2"></div>
<h2>saç stili</h2>
<p>Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'yu tıklattığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz.</p>
</div>
<div class="ozet">
<div class="resim"><img src="site_dosyalar/images/hairstyle3.jpg" alt="resim3"></div>
<h2>saç stili</h2>
<p>Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'yu tıklattığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz.</p>
</div>
<div class="ozet">
<div class="resim"><img src="site_dosyalar/images/hairstyle4.jpg" alt="resim4"></div>
<h2>saç stili</h2>
<p>Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'yu tıklattığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz.</p>
</div>
<div class="temizle"></div>
<div class="satir">
<div class="sutun2">
<div class="panel">
<h1 class="panel-baslik">özellikler</h1>
<img src="site_dosyalar/images/featured.jpg">
<h2>özet başlık</h2>
<div class="temizle"></div>
<p>Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'yu tıklattığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. tıklattığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz</p>
</div>
</div>
<div class="sutun2">
<div class="panel sagbosluk">
<h1 class="panel-baslik">özellikler</h1>
<h2>özet başlık</h2>
<div class="temizle"></div>
<p>Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'yu tıklattığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. tıklattığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz</p>
</div>
<div class="panel sagbosluk">
<img id="keladam" src="site_dosyalar/images/skinhead.png">
<p>Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'yu tıklattığınızda</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="temizle"></div>
<div class="alt">
<div class="ortala">
<p>Tüm Haklar Saklıdır <a href="http://programlamahocam.com">Web Tasarım</a></p>
<div class="sosyal">
<a href="#"><i class="fa fa-facebook-square fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter-square fa-lg"></i></a>
<a href="#"><i class="fa fa-instagram fa-lg"></i></a>
<a href="#"><i class="fa fa-google-plus-square fa-lg"></i></a>
</div>
</div>
</div>
</body>
</html>
Uygulamanın css kod metin alanı aşağıdaki gibidir:
body,h1,h2,ul,li{
margin: 0;
padding: 0;
}
.ortala{
width: 945px;
margin: 0 auto;
}
.ust{
height: 180px;
background: #4c8f96;
}
.ust .logo{
float: left;
margin-top: 70px;
padding: 40px 30px;
background: #212740;
}
.ust .logo a{
text-decoration: none;
color: #fff;
}
nav.menu{
float: right;
margin-top: 100px;
}
nav.menu ul{
list-style: none;
}
nav.menu ul li{
float: left;
}
nav.menu ul li a{
text-decoration: none;
background: #212740;
color: white;
padding: 8px 16px;
margin-left: 20px;
border-radius: 8px;
}
.icerik{
margin-top: 100px;
}
.satir{
margin-top: 40px;
}
.slider{
border: 1px solid #212740;
}
.slider h1{
margin: 100px 0 0 50px;
float: left;
font-size: 2.8em;
color: #1a1e33;
font-family: sans-serif;
}
.slider img{
float: left;
}
.ozet{
width: 221px;
margin-right: 19px;
float: left;
margin-top: 20px;
}
.ozet:nth-child(4){
margin-right: 0;
}
.ozet .resim{
background: url(site_dosyalar/images/frame.png);
width: 220px;
height: 204px;
padding: 5px;
box-sizing:border-box;
}
.icerik .sutun2{
float: left;
}
.icerik .panel{
border: 5px solid #5fb3bd;
width: 420px;
padding:10px;
margin-right:20px;
margin-bottom:20px;
}
.sagbosluk{
margin-right: 0px !important;
margin-left:20px;
background: #519194;
color:#fff;
height: 198px;
}
#keladam{
margin-top:-18px;
}
.panel .panel-baslik{
background: #1d2339;
padding: 18px 36px;
width: 180px;
color: #fff;
margin-top: -40px;
margin-bottom:30px;
}
.panel img{
float:left;
margin:0 20px 10px 0;
}
.alt{
padding:30px 0;
background: #519194;
text-align: center;
}
.alt .sosyal{
background: #387A82;
float: right;
margin-top:-40px;
padding:10px 20px;
}
.alt .sosyal a{
color:#fff;
text-decoration: none;
margin:0 5px;
opacity: .5;
}
.alt .sosyal a:hover{
opacity: 1;
}
.temizle{
clear: both;
}Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.