Css ile web tasarımı şablonu oluşturma

Css

Css ile web tasarımda kullanılan şablonların tasarımı hakkında kısa ve öz anlatımlı kodları sizlerle paylaşacağız.

Beş adet tasarımı istediğiniz şekilde değiştirip kendi sitenizde kullana bilirsiniz.


Örnek uygululama1
görsel kısım

 
kod kısmı


<!DOCTYPE html>
<html>
        <head>
                <title>bilgisayardersi.net CSS ile şablon</title>
                <style type="text/css">
                        #ust{
                                width:100%;
                                min-width:960px;
                                margin:auto;
				height:100px;
				background-color:#CDCBCB;
				margin-bottom:2px;
                        }
                        #orta{
                                width:960px;
                                margin:auto;
								height:auto;
								background-color:#CDCBCB;
								margin-bottom:2px;
                        }
                        #alt{
                                width:100%;
                                min-width:960px;
                                margin:auto;
				height:25px;
				background-color:#CDCBCB;
                        }
                </style>
        </head>
        <body>
                <div id="ust">                
                    <!-- üst kısımda yer alan içerikler yer alacak-->
                    bilgisayardersi.net / header kısmı
                </div>
                <div id="orta">
                     <!-- orta kısımda yer alan içerikler yer alacak-->
                      bilgisayardersi.net / içerik  kısmı
                      
                </div>
                <div id="alt">
                     <!-- alt kısımda yer alan içerikler yer alacak-->
                     bilgisayardersi.net / footer kısmı
                </div>
        </body>
</html>

Örnek uygululama2
görsel kısım

kod kısmı

<!DOCTYPE html>
<html>
        <head>
                <title>bilgisayardersi.net CSS ile şablon</title>
                <style type="text/css">
                        #ust{
                                width:100%;
				margin:auto;
				height:100px;
				background-color:#CDCBCB;
				margin-bottom:2px;
                        }
                        #sol{
                                width:19%;
				height:150px;
				background-color:#CDCBCB;
				margin-right:1%;	
                                float:left;
                        }
                        #sag{
                                width:80%;
				margin:auto;
				height:250px;
				background-color:#CDCBCB;
                                float:right;
                        }
                </style>
        </head>
        <body>
              <div id="ust">                
                    <!-- üst kısımda yer alan içerikler yer alacak-->
                    bilgisayardersi.net / header kısmı
                </div>
                <div id="sol">
                  <!-- solkısımda yer alan içerikler yer alacak.genelde menüler bu kısımda yer alır-->
                      bilgisayardersi.net / menülerin yer alacağı  kısım
                </div>
                <div id="sag">
                     <!-- sag kısımda yer alan içerikler yer alacak-->
                     bilgisayardersi.net / içerik kısmı
                </div>
        </body>
</html>

Örnek uygululama 3
görsel kısım

kod kısmı


<!DOCTYPE html>
<html>
        <head>
                <title>bilgisayardersi.net CSS ile şablon</title>
                <style type="text/css">
                        #ust{
                                width:100%;
								margin:auto;
								height:100px;
								background-color:#CDCBCB;
								margin-bottom:2px;
                        }
                        #sag{
                                width:19%;
								height:150px;
								background-color:#CDCBCB;
								margin-left:1%;
								float:right;
							;
                        }
                        #sol{
                                width:80%;
								margin:auto;
								height:250px;
								background-color:#CDCBCB;
                                float:left;
                        }
                </style>
        </head>
        <body>
              <div id="ust">                
                    <!-- üst kısımda yer alan içerikler yer alacak-->
                    bilgisayardersi.net / header kısmı
                </div>
                <div id="sag">
                     <!-- sağ kısımda yer alan içerikler yer alacak.genelde menüler bu kısımda yer alır-->
                      bilgisayardersi.net / menülerin yer alacağı  kısım
                      
                </div>
                <div id="sol">
                     <!-- sol kısımda yer alan içerikler yer alacak-->
                     bilgisayardersi.net / içerik kısmı
                </div>
        </body>
</html>

Örnek uygululama 4
görsel kısım

kod kısmı

<!DOCTYPE html>
<html>
        <head>
                <title>bilgisayardersi.net CSS ile şablon</title>
                <style type="text/css">
                        #ust{
                                width:100%;
                                background-color:#CDCBCB;
				margin-bottom:2px;
				height:150px;
								
                        }
                        #sol{
                                width:28%;
                                float:left;
                                height:250px;
				margin-right:2%;
				background-color:#CDCBCB;
                        }
			#orta{
				float:left;
                                width:40%;
                                background-color:#CDCBCB;
				height:400px;
                        }
                        #sag{
                                float:left;
                                width:28%;
                                margin-left:2%;
				background-color:#CDCBCB;
				height:250px;
												
                        }
                       #alt{
						        
				clear:both;
				width:100%;
				background-color:#CDCBCB;
				height:25px;
                        }
                </style>
        </head>
        <body>
                <div id="ust">
                     <!-- üst kısımda yer alan içerikler yer alacak-->
                    bilgisayardersi.net / header kısmı
                </div>
                <div id="sol">
                    <!-- sol kısımda yer alan içerikler yer alacak.genelde menüler bu kısımda yer alır-->
                      bilgisayardersi.net / menülerin yer alacağı  kısım
                </div>
                <div id="orta">
                    <!-- orta kısımda yer alan içerikler yer alacak.genelde menüler bu kısımda yer alır-->
                      bilgisayardersi.net / içeriklerin yer alacağı  kısım
                </div>
                <div id="sag">
                   <!-- sağ kısımda yer alan içerikler yer alacak-->
                      bilgisayardersi.net / genelde duyuru en çok okunanalr vs. bu kısımda yer alır
                </div>
                <div id="alt">
                     <!-- alt kısımda yer alan içerikler yer alacak-->
                     bilgisayardersi.net / footer kısmı
                </div>
        </body>
</html>

Örnek uygululama 5
görsel kısım

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload the CAPTCHA.