1. Куча / Говнокод #17798

    +128

    1. 01
    2. 02
    3. 03
    4. 04
    5. 05
    6. 06
    7. 07
    8. 08
    9. 09
    10. 10
    11. 11
    12. 12
    13. 13
    14. 14
    15. 15
    16. 16
    17. 17
    18. 18
    19. 19
    20. 20
    21. 21
    22. 22
    23. 23
    24. 24
    25. 25
    26. 26
    27. 27
    28. 28
    29. 29
    30. 30
    31. 31
    32. 32
    33. 33
    34. 34
    35. 35
    36. 36
    37. 37
    38. 38
    39. 39
    40. 40
    41. 41
    42. 42
    43. 43
    44. 44
    45. 45
    46. 46
    47. 47
    48. 48
    49. 49
    50. 50
    51. 51
    52. 52
    53. 53
    54. 54
    55. 55
    56. 56
    57. 57
    58. 58
    59. 59
    60. 60
    61. 61
    62. 62
    63. 63
    64. 64
    65. 65
    66. 66
    67. 67
    68. 68
    69. 69
    70. 70
    71. 71
    72. 72
    73. 73
    74. 74
    75. 75
    76. 76
    77. 77
    78. 78
    79. 79
    80. 80
    81. 81
    82. 82
    83. 83
    84. 84
    85. 85
    86. 86
    87. 87
    88. 88
    89. 89
    90. 90
    91. 91
    92. 92
    93. 93
    94. 94
    95. 95
    96. 96
    97. 97
    98. 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;
}

    Вот я сверстал календарик. Подойдёт ли такой код для рабочего варианта? Что добавить? Что убрать? Как будет лучше?

    Запостил: Simasik, 16 Марта 2015

    Комментарии (2) RSS

    • ava Fike 16.03.2015 20:42 # −1

      слушайте, я подумал, может есть какой-то codereview.ru, который сюда редиректит?
      Ответить

    Добавить комментарий