ÖRNEK CSS PROGRAM KODLARI

Bu makalemizde basit css örnekleri, css kodları, css örnekleri ve kodları, html içinde css kullanımı, css örnek siteler gibi konuları ele alacağız.

f-Dikey menü yapımı:

 

HTML KODU:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />  <!--head head arasına yazılır-->

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

  

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

      

        <div>

     

        <ul class="menu">

       

        <li> <a href="index.htm"> Anasayfa</a></li>

        <li> <a href="index.htm"> Hakkımızda</a></li>

        <li> <a href="index.htm"> İletişim</a></li>

       

       

       

        </ul>

        </div>

    </form>

</body>

</html>

CSS KODU:

ul.menu

{

      list-style-type:none;

      padding:0;

      margin:0;

}

 

ul.menu a

{

      display:block;

      color:#1f1f1f;

      background-color:#efefef;

      width:8em;

      padding:.2em .8em;

      text-decoration:none;

     

}

ul.menu a:hover

{

      background-color:#afafaf;

     

}

ul.menu li

{

      margin:0 0 .2em 0;

     

}

g-Kullanıcı girişi hazırlama:

 

HTML KODU:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div>

       

        <fieldset>

       

        <legend>Kullanıcı Girişi</legend>

        <dl>

       

        <dt>

        <label for ="ad" class="yazım" >Kullanıcı Adı:</label>

        </dt>

       

        <dd>

        <input type= "text" id="ad" class="metinalanı" />

        </dd>

       

        <dt>

        <label for="eposta" class="yazım">E-posta</label>

        </dt>

       

        <dd>

        <input type="text" id="eposta" name="eposta" class="metinalanı" />

        </dd>

       

        <dt>

        <label for="hatırla" class="yazım">Beni Hatırla</label>

        </dt>

       

        <dd>

        <input type="checkbox" id="hatırla" name="hatırla" />

        </dd>

       

        <dt>

        <input type="submit" value="gönder" class="gönder" />

        </dt>

       

        </dl>

       

       

       

       

       

       

       

       

       

        </fieldset>

        </div>

    </form>

</body>

</html>

CSS KODU:

fieldset

{

      border:1px solid #31557f;

      width:15em;

      padding-bottom:0.5em;

}

legend

{

      color:#224059;

      background-color:#b5c9e2;

      border:1px solid #31557f;

}

input.gönder

{

      color:#224059;

      background-color:#b5c9e2;

      font:bold 12px Arial,Helvetica,sans-serif;

}

 

input.metinalanı

{

      color:#781351;

      background-color:#b5c9e2;

      border:1px solid #31557f;

      font:bold 12px Arial,Helvetica,sans-serif;

}

form dd

{

      margin-left:4.5em;

}

form dt

{

      font:bold 12px Arial,Helvetica,sans-serif;

      display:block;

      margin-left:0.5em;

      text-align:right;

      width:8em;

      float:left;

     

}

     

     

     

     

h-Yatay açılır menü yapımı:

 

 

 

HTML KODU:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <script type language="javascript">

    startList=function(){

    if(document.all&&document.getElementById){

    navRoot=document.getElementById("menu");

    for(i=0;i<navRoot.childNodes.lenght;i++){

    node=navRoot.childnodes[i];

    if(node.nodeName=="LI"){

    node.onmouseover=function(){

    this.className+=" over";}

    node.onmouseout=functtion(){

    this.className=this.className.replace(" over","");

    }

    }

    }

    }

    }

    window.onload=startList;

   

   

   

   

   

   

   

    </script>

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div>

        <ul id="menu">

        <li> <a href="#">Anasayfa</a></li>

         <li> <a href="#">Makaleler</a>

         <ul>

         <li><a href="#">C# makaleleri</a></li>

          <li><a href="#">ASP.Net makaleleri</a></li>

          <li><a href="#">VB. makaleleri</a></li>

           </ul>

           </li>

           <li> <a href="#">Videolar</a>

           <ul>

             <li><a href="#">C# videoları</a></li>

          <li><a href="#">ASP.Net videoları</a></li>

           <li><a href="#">VB. videoları</a></li>

            </ul>

           </li>

           </ul>

          

        

       

        </div>

    </form>

</body>

</html>

CSS KODU:

body {

}

ul#menu,ul#menu ul

{

      list-style:none;

      margin:0;

      padding:0;

     

}

ul#menu li

{

      float:left;

      position:relative;/*gruolama için*/

      width:150px;

}

ul#menu li ul{

      display:none;/*açılan menuleri saklı hale hetirmek için kullndık*/

}

ul#menu li a

{

      font:Arial,Helvetica,sans-serif;

      font-size:12px;/*yazının büyüklüğünün ayarı burda yapılır*/

      font-weight:bold;

      display:block;/*yazıların blok halinde görüntülenmesini sağlar*/

      border-width:1px;

      border-left-style:solid;

      border-color:#ccc #888 #555 #bbb;

      margin:0;

      padding:2px 3px;

      color:#000;

      background-color:#efefef;

      text-decoration:none;/*alt çizgileri kaldırırr yazıların altında*/

     

     

}

ul#menu li a:hover

{

      color:red;

      background-color:#Fff;

}

 

ul#menu li:hover ul,  ul#menu li.over ul

{

      display:block;

     

}




İLGİLİ MAKALELER

ÜCRETSİZ KPSS VİDEO DERSLER, TESTLER BURADA TIKLAYINIZ


BENZER KONULARI SİTE İÇİNDE ARAYIN










  • SİTE İÇİ ARAMA
  • Kariyerdersleri.com
  • KATEGORİLER
  • HAKKIMIZDA
İnsanları beraber gezerek, tozarak, konuşarak değil aynı evde beraber yaşayarak, özellikle bir işi beraber yaparak tanıyabilirsiniz.
KPSS MATEMATİK KPSS GEOMETRİ KPSS VATANDAŞLIK KPSS TÜRKÇE KPSS TARİH KPSS COĞRAFYA
İNGİLİZCE ALMANCA İTALYANCA KARİYER OYUN BİLGİSAYAR YAZILIM BİLGİSAYAR NETWORK
BİLGİSAYAR DONANIM BİLİŞİM TERİMLERİ CİLT VE CİLT BAKIMI HASTALIKLARIMIZ İNSAN VÜCUDU NEDİR