- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 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
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
HTML:
<div id="calendar">
<div class="day">
<span class="num_job">5</span>
<span class="num_day">1</span>
<span class="name_day">пн</span>
<br/>
<span class="month">янв</span>
<span class="importance"></span>
</div>
<div class="day">
<span class="num_job">12</span>
<span class="num_day">2</span>
<span class="name_day">вт</span>
<br/>
<span class="month">янв</span>
<span class="importance"></span>
</div>
</div>
CSS:
body{
background: #ddd;
width: 1064px;
margin: 0 auto;
}
#calendar{
width: 1064px;
margin: 0 auto;
/* height: 500px;*/
display: inline-block;
background: #fff;
}
.day{
background: #f1f6f7;
border: 1px solid #dddbdb;
width: 130px;
height: 130px;
float: left;
margin: 10px;
}
.day:hover{
background: #6EB1BE;
cursor: pointer;
}
.day:hover .num_day, .day:hover .month, .day:hover .name_day{
color: #fff;
}
.day:hover .num_job{
color: #6EB1BE;
background: #fff;
}
.num_day{
font-family: Arial;
font-size: 72px;
font-weight: bold;
color: #1e99f7;
position: relative;
top: -15px;
left: 15px;
letter-spacing: -6px;
}
.month, .name_day{
position: relative;
font-family: Arial;
font-size: 24px;
color: #1e99f7;
}
.month{
top: -25px;
left: 37px;
}
.name_day{
font-size: 11px;
top: -12px;
left: 15px;
}
.num_job{
background: #1e99f7;
color: #fff;
display: block;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border-radius: 100%;
font-family: Arial;
font-size: 17px;
font-weight: bold;
position: relative;
top: 5px;
left: 100px;
}
Вот я сверстал календарик. Подойдёт ли такой код для рабочего варианта? Что добавить? Что убрать? Как будет лучше?