ÖRNEK CSS PROGRAM KODLARI

c-CSS ile tooltip şekillendirme:

 

 

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>Kariyervideo.com</title>

</head>

<body>

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

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

        <div>

        <a href="#" class="tooltip">aradiginibulduran.com<span>CSS ile ipucu belirtme</span></a>

        </div>

    </form>

</body>

</html>

CSS KODU:

body {

}

a.tooltip

{

      position:relative

}

a.tooltip span

{

      display:none;

}

a.tooltip:hover span

{

      display:block;

      position:absolute;

      top:18px;

      left:20px;

      padding:2px 6px;

      width:200px;

      border:1px solid #963;

      background-color:#ff6;

      text-decoration:none;

      color:#000;

     

     

}

d-CSS ile yatay 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" />

    <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

{

      text-decoration:none;

}

ul.menu li

{

      display:inline;

}

ul.menu a

{

      text-decoration:none;

      padding: .2em 1em;

      color:#1f1f1f;

      background-color:#efefef;

     

 

}

ul.menu li a:hover

{

      background-color:#afafaf;

}

e-Dikey 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">

  

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

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

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

ul

{

      list-style:none;

      padding:0;

      margin:0;

      width:150px;

      border-bottom:1px solid #000;

 

}

/*

ul li   buraya ayarlayabilirsen daha düzgün çıkacak ama bu kısımda tahminim bir asp.net le ilgili uyuşmazlık var

{

      position:relative;

      float:left;

      height:1%;

}*/

 

li ul

{

      position:absolute;

      left:149px;

      top:0;

      display:none;

}

ul li a

{

      text-decoration:none;

      display:block;

      background-color:#e2e2e2;

      color:#000;

      padding:5px;

      border:1px solid #000;

      border-bottom:0;

      height:1%;

     

     

}

ul li a:hover

{

      background-color:#efefef;

      color:red;

}

li:hover ul, li:over ul

{

      display:block;

}

 

 


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


BENZER KONULARI SİTE İÇİNDE ARAYIN










  • SİTE İÇİ ARAMA
  • Kariyerdersleri.com
  • KATEGORİLER
  • HAKKIMIZDA
Mutlu olmayı yarına bırakmak, karşıya geçmek için nehrin durmasını beklemeye benzer ve bilirsin, o nehir asla durmaz.
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