Sayfalar - Pages

▼

9 Ocak 2014 Perşembe

Periyodik Tablonun CSS Kısmı


CSS Kısmı (Periyodik Tablo)

 body
 {
    font-size: 16px; background: url('resim3.jpg');
     background-repeat: no-repeat; color:white;
}
section
{
    width: 1500px; max-width: 90%; margin: 0px auto; color:white;
}
#container
{
    width: 1400px; color:white;
}
.box
{
    border: 3px solid black;  max-width: 50px; max-height: 50px; color:white;
    padding: 10px; line-height: 50px;  text-align: center;  font-size: 1.63em;
}

#panelOne
{
    float: left; color:white; background-color: lightblue; margin-top: 80px; margin-left: 180px;
}
#panelOne:hover
{
    font-style: italic; background-color: blue; opacity: 0.8;
}

#panelTwo
{
    float: left; position: relative; top: 75px; color:white; background-color: lightblue; margin-top: 80px;
}
#panelTwo:hover
{
    font-style: italic; background-color: blue; opacity: 0.8;
}

.panelThree
{
    float: left; position: relative; top: 225px; color:white; background-color: pink; margin-top: 80px;
}
.panelThree:hover
{
    font-style: italic; background-color: red; opacity: 0.8;
}

.panelFour
{
    float: left; position: relative; top: 75px; color:white; background-color: orange; margin-top: 80px;
}
.panelFour:hover
{
    font-style: italic; background-color: brown; opacity: 0.8;
}

#panelFive
{
    float: left; color:white; background-color: orange; margin-top: 80px;
}
#panelFive:hover
{
   font-style: italic; background-color: brown; opacity: 0.8;
}

#lowerContainer
{
    float: left; margin-top: 20px; color:white; margin-left: 300px;
}

.bottom
{
    float: left; color:white; background-color: green;
}
.bottom:hover
{
    font-style: italic; background-color: darkgreen; opacity: 0.8;
}
a
{
    text-decoration: none;color:white;
}
#all1 a
{
    text-decoration: none; color: white;
}
#boxinf
{
    width: 10px; height: 10px; float: right; margin-right: 100px; font-size: 26px; font-style: bold;
}
Hiç yorum yok:

Periyodik Tablonun HTML Kısmı


HTML KISMI (Periyodik Tablo)


<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="elements.css">
        <title>Elementler Tablosu</title>
    </head>
    <body>
        <section>
            <div id="container">
            <div id="panelOne">
                <a href="hidrojen.html"><div class="box"> H  </div></a>
                <a href="lityum.html"><div class="box"> Li </div></a> 
                <a href="sodyum.html"><div class="box"> Na </div></a> 
                <a href="potasyum.html"><div class="box"> K  </div></a> 
                <a href="#"><div class="box"> Rb </div></a> 
                <a href="#"><div class="box"> Cs </div></a>
                <a href="#"><div class="box"> Fr </div></a> 
            </div>
            <div id="panelTwo">
                <a href="berilyum.html"><div class="box"> Be </div></a>
                <a href="magnezyum.html"><div class="box"> Mg </div></a>
                <a href="kalsiyum.html"><div class="box"> Ca </div></a>
                <a href="#"><div class="box"> Sr </div></a>
                <a href="#"><div class="box"> Ba </div></a>
                <a href="#"><div class="box"> Ra </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Sc </div></a>
                <a href="#"><div class="box"> Y  </div></a>
                <a href="#"><div class="box"> X*  </div></a>
                <a href="#"><div class="box"> X*  </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Ti </div></a>
                <a href="#"><div class="box"> Zr </div></a>
                <a href="#"><div class="box"> Hf </div></a>
                <a href="#"><div class="box"> Rf </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> V  </div></a>
                <a href="#"><div class="box"> Nb </div></a>
                <a href="#"><div class="box"> Ta </div></a>
                <a href="#"><div class="box"> Db </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Cr </div></a>
                <a href="#"><div class="box"> Mo </div></a>
                <a href="#"><div class="box"> W  </div></a>
                <a href="#"><div class="box"> Sg </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Mn </div></a>
                <a href="#"><div class="box"> Tc </div></a>
                <a href="#"><div class="box"> Re </div></a>
                <a href="#"><div class="box"> Bh </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Fe </div></a>
                <a href="#"><div class="box"> Ru </div></a>
                <a href="#"><div class="box"> Os </div></a>
                <a href="#"><div class="box"> Hs </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Co </div></a>
                <a href="#"><div class="box"> Rh </div></a>
                <a href="#"><div class="box"> Ir </div></a>
                <a href="#"><div class="box"> Mt </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Ni </div></a>
                <a href="#"><div class="box"> Pd </div></a>
                <a href="#"><div class="box"> Pt </div></a>
                <a href="#"><div class="box"> Ds </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Cu </div></a>
                <a href="#"><div class="box"> Ag </div></a>
                <a href="#"><div class="box"> Au </div></a>
                <a href="#"><div class="box"> Rg </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Zn </div></a>
                <a href="#"><div class="box"> Cd </div></a>
                <a href="#"><div class="box"> Hg </div></a>
                <a href="#"><div class="box"> Cn </div></a>
            </div>
            <div class="panelFour">
                <a href="bor.html"><div class="box"> B  </div></a>
                <a href="aluminyum.html"><div class="box"> Al </div></a>
                <a href="#"><div class="box"> Ga </div></a>
                <a href="#"><div class="box"> In </div></a>
                <a href="#"><div class="box"> Ti </div></a>
                <a href="#"><div class="box"> Uut </div></a>
            </div>
            <div class="panelFour">
                <a href="karbon.html"><div class="box"> C </div></a>
                <a href="silisyum.html"><div class="box"> Si </div></a>
                <a href="#"><div class="box"> Ge </div></a>
                <a href="#"><div class="box"> Sn </div></a>
                <a href="#"><div class="box"> Rb </div></a>
                <a href="#"><div class="box"> Fl </div></a>
            </div>
            <div class="panelFour">
                <a href="azot.html"><div class="box">N </div></a>
                <a href="fosfor.html"><div class="box">P </div></a>
                <a href="#"><div class="box">As </div></a>
                <a href="#"><div class="box">Sb </div></a>
                <a href="#"><div class="box"> Bi </div></a>
                <a href="#"><div class="box"> Uup </div></a>
            </div>
            <div class="panelFour">
                <a href="oksijen.html"><div class="box"> O </div></a>
                <a href="kukurt.html"><div class="box"> S </div></a>
                <a href="#"><div class="box"> Se </div></a>
                <a href="#"><div class="box"> Te </div></a>
                <a href="#"><div class="box"> Po </div></a>
                <a href="#"><div class="box"> Lv </div></a>
            </div>
            <div class="panelFour">
                <a href="flor.html"><div class="box"> F </div></a>
                <a href="klor.html"><div class="box"> Cl </div></a>
                <a href="#"><div class="box"> Br </div></a>
                <a href="#"><div class="box"> I </div></a>
                <a href="#"><div class="box"> At </div></a>
                <a href="#"><div class="box"> Uus </div></a>
            </div>
            <div id="panelFive">
                <a href="helyum.html"><div class="box"> He </div></a>
                <a href="neon.html"><div class="box"> Ne </div></a>
                <a href="argon.html"><div class="box"> Ar </div></a>
                <a href="#"><div class="box"> Kr </div></a>
                <a href="#"><div class="box"> Xe </div></a>
                <a href="#"><div class="box"> Rn </div></a>
                <a href="#"><div class="box"> Uuo </div></a>
            </div>
        </div>
        <div id="lowerContainer">
            <div class="bottom">
                <div class="box"> * </div>
                <div class="box"> * </div>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> La </div></a>
                <a href="#"><div class="box"> Ac </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Ce </div></a>
                <a href="#"><div class="box"> Th </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Pr </div></a>
                <a href="#"><div class="box"> Pa </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Nd </div></a>
                <a href="#"><div class="box"> U  </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Pm </div></a>
                <a href="#"><div class="box"> Np </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Sm </div></a>
                <a href="#"><div class="box"> Pu </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Eu </div></a>
                <a href="#"><div class="box"> Am </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Gd </div></a>
                <a href="#"><div class="box"> Cm </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Tb </div></a>
                <a href="#"><div class="box"> Bk </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Dy </div></a>
                <a href="#"><div class="box"> Cf </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Ho </div></a>
                <a href="#"><div class="box"> Es </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Er </div></a>
                <a href="#"><div class="box"> Fm </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Tm </div></a>
                <a href="#"><div class="box"> Md </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Yb </div></a>
                <a href="#"><div class="box"> No </div></a>
            </div>           
        </div>
        </section>
    </body>
</html>

Hiç yorum yok:

HTML Yeniden

 

Html İle Elementler Tablosu

 

Öncelikle web sayfasının ekran görüntülerini vereceğim kodu daha sonra yayınlayacağım. CSS ve HTML olarak iki ayrı yayında yayınlayacağım.

ekran Görüntüsü.
Hiç yorum yok: