ในการสร้างปฏิทินด้วย CSS โค้ดมีดังนี้ −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .calender { border: 1px solid darkorchid; } .month { padding: 50px; width: 100%; background: #874de6; text-align: center; border: 1px solid rgba(139, 0, 139, 0.671); } .month ul { margin: 0; padding: 0; list-style-type: none; } .month ul li { font-size: 30px; text-transform: uppercase; letter-spacing: 6px; color: yellow; } .month .lastMonth { float: left; padding-top: 10px; } .month .nextMonth { float: right; padding-top: 10px; } .Days { margin: 0; padding: 10px 0; background-color: rgb(169, 210, 248); border: 1px solid rgba(0, 0, 139, 0.514); } .Days li { font-weight: bold; display: inline-block; width: 13.6%; color: rgb(0, 0, 0); text-align: center; } .daysNumber { padding: 10px 0; background: rgb(235, 255, 182); margin: 0; font-weight: bold; } .daysNumber li { list-style-type: none; display: inline-block; width: 13.6%; text-align: center; margin-bottom: 5px; font-size: 12px; color: rgb(0, 0, 0); } .daysNumber li .today { padding: 5px; background: #17003b; font-weight: bolder; border-radius: 50%; color: rgb(229, 255, 0) !important; } </style> </head> <body> <h1 style="text-align: center;">CSS Calendar Example</h1> <div class="calender"> <div class="month"> <ul> <li class="lastMonth">❮</li> <li class="nextMonth">❯</li> <li> March<br /> <span>2020</span> </li> </ul> </div> <ul class="Days"> <li>Mo</li> <li>Tu</li> <li>We</li> <li>Th</li> <li>Fr</li> <li>Sa</li> <li>Su</li> </ul> <ul class="daysNumber"> <li>1</li> <li>2</li> <li>3</li> <li>4</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><span class="today">22</span></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> </div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
