উদাহরণ
নিচের কোডটি 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>
আউটপুট
উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:
