Bugün Html ve Css ile responsive takvim tasarımı yapacağız. Örneğimizde sadece takvim tasarımı olacak. Yani çalışan bir takvim uygulaması olmayacak.
Tam olarak çalışan bir takvim uygulamasını JavaScript konularımızı tamamladıktan sonra yapacağız.
Tasarımımızın son hali aşağıdaki gibi olacak.
Tasarımın responsive olması için media query kodları da yazacağız. Bu konuda eksikleriniz varsa aşağıdaki linklerden konu anlatımlarına bakabilirsiniz.
Artık kodlarımızı yazmaya başlayabiliriz.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<div class="month"> <ul> <li class="prev">❮</li> <li class="next">❯</li> <li>Mart<br> <span>2020</span> </li> </ul> </div> <ul class="weekdays"> <li>Pzt</li> <li>Sal</li> <li>Çar</li> <li>Per</li> <li>Cum</li> <li>Cmt</li> <li>Paz</li> </ul> <ul class="days"> <li>1</li> <li>2</li> <li>3</li> <li><span class="active">4</span></li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> <li>27</li> <li>28</li> <li>29</li> <li>30</li> <li>31</li> </ul> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<style> * { box-sizing: border-box; } ul { list-style-type: none; } .month { padding: 70px 25px; width: 100%; background: #F8A035; text-align: center; } .month ul { margin: 0; padding: 0; } .month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; } .month .prev { float: left; padding-top: 10px; } .month .next { float: right; padding-top: 10px; } .weekdays { margin: 0; padding: 10px 0; background-color: #ddd; } .weekdays li { display: inline-block; width: 13.6%; color: #666; text-align: center; } .days { padding: 10px 0; background: #eee; margin: 0; } .days li { list-style-type: none; display: inline-block; width: 13.6%; text-align: center; margin-bottom: 5px; font-size:12px; color: #777; } .days li .active { padding: 5px; background:#F8A035; color: white !important } /* Tasarımın responsive olması için gerekli media query kodları */ @media screen and (max-width:720px) { .weekdays li, .days li {width: 13.1%;} } @media screen and (max-width: 420px) { .weekdays li, .days li {width: 12.5%;} .days li .active {padding: 2px;} } </style> |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
