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;
}
Gönderen 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>

Gönderen 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ü.
Gönderen Hiç yorum yok:
Kaydol: Kayıtlar (Atom)

Etiketler

antik roma (5) antik (4) roma (4) savaşı (4) zihinler (4) agarta (3) atlantis (3) avrupa (3) cumhuriyet (3) dünya (3) evrim (3) günü (3) kiralık (3) modern (3) mu (3) polonya (3) sparta (3) şambala (3) agarta ve şambala (2) birinci dünya savaşı (2) doktor (2) fransa (2) fuarı (2) havari (2) ingiliz (2) isa (2) kitap (2) krakow (2) latince (2) mart (2) mitoloji (2) nato (2) nazi (2) of (2) osmanlı (2) poland (2) saint (2) seal (2) simülasyon teorisi (2) spartan (2) tanrı (2) the (2) ww2 (2) çanakkale (2) 1 (1) 10 kasım (1) 12 mart (1) 17 march (1) 17 mart (1) 18 (1) 1807 (1) 1846 (1) 1915 (1) 1916 (1) 1923 (1) 1926 (1) 1950 (1) 1953 (1) 1963 (1) 1972 (1) 1984 (1) 1992 (1) 2 (1) 2002 (1) 24 kasım (1) 29ekim (1) 3 (1) 3 aralık (1) 4 (1) 451 (1) 4temmuz (1) 8 (1) Classical (1) E.T. (1) Erich von Däniken (1) Generalfeldmarschall (1) Schindler (1) Simo (1) Termopylae (1) Vivaldi (1) WWII (1) adası (1) afrika (1) akciğerli (1) akhilleus (1) akif (1) aldous huxley (1) alien (1) alman (1) amerikan (1) annunaki (1) antalya (1) antik mısır (1) arabaları (1) arap (1) arditi (1) ars longa (1) astronot (1) atahualpa (1) atatürk (1) atlı (1) attack (1) ayaklanma (1) ayla (1) azerbaycan (1) aziz (1) balık (1) baron (1) barry (1) barry seal (1) barselona (1) bartholomew (1) bayramı (1) başkentleri (1) benim (1) beren saat (1) bilinmeyen bir kadının mektubu (1) birinci (1) birleşmiş milletler (1) biyoloji (1) bizans (1) black (1) black friday (1) blizkrieg (1) bluetooth (1) bozkurt (1) bugün (1) böcek (1) cajamarca (1) call (1) call of duty (1) camridge analytica (1) can yayınları (1) canavar (1) canlı yayın (1) castle (1) casus (1) cemmat (1) cepherkülü (1) cesur yeni dünya (1) cicero (1) circus (1) color festival (1) cuma (1) dalga (1) dava (1) davinci (1) dead (1) death (1) demir (1) demir maskeli adam (1) demirağ (1) denizli (1) devrim (1) deyişler (1) die (1) diego velazquez (1) distopya (1) doktrini (1) dolar.thaler.usd.uranyum (1) doodle (1) double u (1) double v (1) doğal seçilim (1) doğu roma (1) dragon roll (1) duolingo (1) duty (1) dönüşüm (1) dünya kupası (1) dünyam (1) düzen (1) earth (1) ebulfez (1) edvard munch (1) elmas (1) elçibey (1) engelsiz (1) english (1) enver paşa (1) erdal beşikçioğlu (1) ermenistan (1) ersoy (1) erwin (1) evrim ağacı (1) extraterrestrial (1) fabrikası (1) facebook (1) fahrenheit (1) fahrenheit 451 (1) fermi (1) fermi paradoksu (1) festivali (1) fetih (1) filistin (1) flatliners (1) fortress (1) fransız (1) fransız devrimi (1) franz kafka (1) friday (1) gaga (1) gemi (1) genetik (1) george orwell (1) germany (1) gombe (1) google (1) great (1) göbeklitepe (1) han (1) harbi (1) hawking (1) hayha (1) hazreti isa (1) hikayesi (1) hipodrom (1) hippodrome (1) hiyerarşi (1) hocalı (1) hürkuş (1) ibrahim esen (1) idam (1) ihtilal (1) ihtilali kebir (1) ikigai (1) ikinci dünya savaşı (1) ilaç (1) ilber (1) ilber ortaylı (1) ilk (1) ilyas bazna (1) imparatorluğu (1) ingilizce (1) inka (1) iskandinav (1) island (1) ismail enver bey (1) ispanya (1) ispanyol (1) israil (1) istiklal (1) isyanı (1) italian (1) italyan (1) ittihat ve terakki (1) izmir (1) jane goodall (1) japonların (1) joseph (1) judas (1) kabile (1) kadın (1) kadınlar (1) kahama (1) kalende (1) kalesi (1) kanlı (1) kanlı noel (1) kara (1) kara veba (1) kara ölüm (1) karbon (1) kardaşev (1) kardaşev ölçeği (1) kartel (1) kasakela (1) katliam (1) katliamı (1) kaza (1) kemal (1) kiraliık (1) kiralık zihinler 1 (1) kiralık zihinler 2 (1) kiralık zihinler 3 (1) kiralık zihinler 4 (1) kitap fuarı (1) konyaaltı (1) kore (1) kral (1) kraliçe (1) kurs (1) kurt (1) kurtlar (1) kuruluş (1) kültür başkenti (1) kütüphaneci (1) kıbrıs (1) kızların suskunluğu (1) kızıl (1) labe (1) lakedaimon (1) lambda (1) las meninas (1) lave (1) leonidas (1) list (1) listesi (1) lomza (1) lotus (1) luger (1) lupercalia (1) lupercalia festivali (1) mahkeme (1) marşı (1) maskeli (1) maximus (1) maya (1) medeniyet (1) mehmet (1) memento (1) men (1) metro (1) metrosu (1) milli takım (1) modern insan (1) modern seçilim (1) molon (1) mori (1) moscow (1) moskova (1) muavenet (1) music (1) mustafa (1) mutlu (1) mühendisliği (1) münih (1) naim süleymanoğlu (1) ne (1) nedimeler (1) neuschwanstein (1) ninja (1) noel (1) norveç (1) norway (1) nur yerlitaş (1) nuri (1) olayı (1) olimpiyat (1) ortaylı (1) ortaçağ (1) oskar (1) osowiec (1) panzer (1) parabellum (1) paradoks (1) paradox (1) paris (1) paristen sevgilerle (1) pat barker (1) patrick (1) pers (1) pizarro (1) podcast (1) popülist (1) red (1) red alert 2 (1) remus (1) ressam (1) romalı askerler (1) rommel (1) romulus (1) ronald reagen (1) rose (1) rose adası (1) rose island (1) rus (1) saint patrick (1) saldırısı (1) samurai (1) samuray (1) sara is missing (1) savaşçı (1) saygı (1) science (1) selanik (1) sevgi (1) sevgilerle (1) sevgililer günü (1) seçilim (1) simulacra (1) sirius (1) sirius a (1) sirius b (1) sirius yıldızı (1) skalası (1) society (1) soldier (1) sorun (1) sosyal (1) sosyoloji (1) sovyetler (1) soyqırımı (1) soğuk savaş (1) space (1) spirituelism (1) sscb (1) st (1) st patrick (1) stalin (1) stefan zweig (1) stephen (1) stolk (1) sushi (1) suşi (1) sümer (1) sürü (1) sırrı (1) tahsin (1) tank (1) tanrıların (1) tanrıça (1) tanzanya (1) tarih (1) tarih dosyası (1) tarihi (1) tecavüz (1) teknoloji (1) termofil (1) terör (1) thy (1) tilkisi (1) timur (1) tinycards (1) tip 1 (1) tip 2 (1) tip 3 (1) tip 4 (1) tip 5 (1) tip a (1) tip omega (1) treni (1) trident-javelin 2017 (1) troya (1) turist (1) türkiye (1) tıp (1) ulusal park (1) ussr (1) uygarlık (1) uyuşturucu (1) uzaylı (1) uçak (1) uğur yücel (1) v (1) valhalla (1) veba (1) veba doktoru (1) vecihi (1) viking (1) violence (1) violence and society (1) vita brevis (1) w (1) warrior (1) wave (1) welle (1) white (1) wolf (1) wolves (1) ww1 (1) xocalı (1) yahuda (1) yazıcı (1) yaşam (1) yehuda (1) youtube (1) yurdu (1) yüzyıl (1) yıldız (1) yıldız savaşları (1) yıldız savaşları projesi (1) zaferi (1) zırhlı (1) çizgi (1) çizgi ötesi (1) çiçero (1) çöl (1) çığlık (1) ölçeği (1) öpücüğü (1) ötesi (1) öğretmenler günü (1) ümraniye (1) ütopya (1) şehirleşme (1) şempanze (1)