CSS ve DIV Kullanarak Web Sayfası Örneği -2-

CSS ve Div kullanımını inceleyebileceğiniz web sayfası tasarımı. Örneğe ait html ve CSS kodlarını inceleyerek dosyaları indirebilirsiniz.

index.html kodları:


<!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://yazilimkodlama.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>

100

101

<!doctype html>

<html>

<head>

<title>site yapımı</title>

</head>

<body>

<h1>BİLİSİM</h1>

</a>

</div>

<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>

<h1>WEB TASARIM </h1>

</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>

<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>

<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>

<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>

<h1 class="panel-baslik">özellikler</h1>

<h2>özet başlık</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. tıklattığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz</p>

</div>

<h1 class="panel-baslik">özellikler</h1>

<h2>özet başlık</h2>

</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</p>

</div>

<p>Tüm Haklar Saklıdır <a href="http://yazilimkodlama.com">Web Tasarım</a></p>

</div>

</body>

</html>

tasarim2.css dosyası :


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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

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;

}

CSS ve DIV Kullanarak Web Sayfası Örneği -2-

Örneği İNDİR

Yorum yap X

Örneği İNDİR

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X