ÖRNEK CSS PROGRAM KODLARI


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

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;

}

 

 
DİĞER YAZILIM KONULARI İÇİN TIKLAYINIZ




İLGİLİ MAKALELER










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