CSS ile Takvim Tablosu

CSS ile yapılabilecek onlarca şey var, ilk olarak tablo sistemini takvim şeklinde geliştirmek konusuna değinmek istedim.

Öncelikle bu kodları <head> ve </head> tagları arasına ekliyoruz:



<style>#takvim {


    width:280px;


    font-family:arial, helvetica, sans-serif;


    font-size:9pt;


    color:#000;


    text-align:center;


    line-height:30px;


}





#takvim h2 {


    width:270px;


    margin:0 5px 5px 5px;


    font-size:12pt;


    background:#004a80;


    color:#fff;


}





#takvim ul {


    width:280px;


    margin:0;


    padding:0;


}





#takvim ul li {


    width:30px;


    height:30px;


    display:block;


    float:left;


    list-style:none;


    border:5px solid transparent;


    margin:0;


}





#takvim ul li.gun {


    background:#666;


    color:#fff;


    font-weight:bold;


}


 


#takvim ul li.num { background:#ccc; }





#takvim a.olay {


    display:block;


    width:30px;


    height:30px;


    background:#6dcff6;


    text-decoration:none;


    color:#004a80;


    font-weight:bold;


}


</style>

Böylelikle stil bilgilerini tanıtmış olduk, şimdi tek yapmamız gereken bu stil bilgilerini içeren bir tablo oluşturmak. Bu kodları kullanacağız:



<div id="takvim">


    <h2>Eylül, 2007 - Sanalkurs.NET</h2>


    <ul>


        <li class="gun">Pzr.</li>


        <li class="gun">Pzrts.</li>


        <li class="gun">Salı</li>


        <li class="gun">Çrş.</li>


        <li class="gun">Perş.</li>


        <li class="gun">Cuma</li>


        <li class="gun">Cmts.</li>


        


        <li class="num">01</li>


        <li class="num"><a href="#" class="olay">02</a></li>


        <li class="num">03</li>


        <li class="num">04</li>


        <li class="num">05</li>


        <li class="num">06</li>


        <li class="num">07</li>


        


        <li class="num">08</li>


        <li class="num">09</li>


        <li class="num">10</li>


        <li class="num">11</li>


        <li class="num">12</li>


        <li class="num">13</li>


        <li class="num">14</li>


        


        <li class="num">15</li>


        <li class="num">16</li>


        <li class="num">17</li>


        <li class="num">18</li>


        <li class="num">19</li>


        <li class="num">20</li>


        <li class="num">21</li>


        


        <li class="num">22</li>


        <li class="num">23</li>


        <li class="num">24</li>


        <li class="num">25</li>


        <li class="num">26</li>


        <li class="num">27</li>


        <li class="num">28</li>


        


        <li class="num">29</li>


        <li class="num">30</li>


        <li class="num">31</li>


        <li class="num">&nbsp;</li>


        <li class="num">&nbsp;</li>


        <li class="num">&nbsp;</li>


        <li class="num">&nbsp;</li>


    </ul>


</div>

div ve class taglarıyla daha önce tanıtmış olduğum stil bilgilerini tabloya girdik. Fakat şimdiden söyleyim, gerçek takvim zamanlamasıyla yapılmamıştır, yani sadece taslaktır, geliştirmek size kalmış birşey.

Gerekli düzenlemeleri yapmayı unutmayın kodlar üzerinde, kolay gelsin.

Örnek:

"CSS ile Takvim Tablosu" dersi için 3 yorum var

ye olmadan yorum ekleyemezsiniz !