CSS3之模拟日历界面
所用到的知识
- 自定义列表的使用，dl、dt、dd
- line-height的使用
- block、inline-block、inline的相互转换
- 定位，子绝父相
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/*一般来说，dl也要设置list-style: none;不然列表符号还是会存在的*/
dl{
list-style: none;
}
dt{
border-top: 2px solid blue;
}
dd{
border-top: 1px solid #ccc;
}
dt>span,dd>span{
display: inline-block;
width: 52px;
height: 48px;
text-align: center;
overflow: hidden;
line-height: 1.5;
}
dt>span{
line-height: 48px;
}
dd>span>i{
font-size: 12px;
/*color: #ccc;*/
}
.out{
width: 538px;
height: 370px;
background: url(../img/bg.jpg);
margin: 100px auto;
position: relative;
}
.in{
width: 406px;
height: 330px;
/*border: 1px solid red;*/
position: absolute;
left: 0;
top: 38px;
}
dt span:nth-last-child(-n+2){
color: red;
}
dd:nth-child(-n+5) span:nth-last-child(-n+2) {
color: red;
}
dd span i{
color: #ccc;
}
</style>
</head>
<body>
<div class="out">
<div class="in">
<dl>
<dt>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
<span>七</span>
</dt>
<dd>
<span data-range="prev-month">
<b>30</b><br />
<i>十九</i>
</span>
<span class="today">
<b>1</b><br />
<i>艾滋病日</i>
</span>
<span>
<b>2</b><br />
<i>廿一</i>
</span>
<span>
<b>3</b><br />
<i>廿二</i>
</span>
<span>
<b>4</b><br />
<i>廿三</i>
</span>
<span>
<b>5</b><br />
<i>廿四</i>
</span>
<span>
<b>6</b><br />
<i>廿五</i>
</span>
</dd>
<dd>
<span data-flag="festival">
<b>7</b><br />
<i>廿六</i>
</span>
<span>
<b>8</b><br />
<i>廿七</i>
</span>
<span>
<b>9</b><br />
<i>廿八</i>
</span>
<span>
<b>10</b><br />
<i>廿九</i>
</span>
<span>
<b>11</b><br />
<i>初一</i>
</span>
<span>
<b>12</b><br />
<i>初二</i>
</span>
<span>
<b>13</b><br />
<i>初三</i>
</span>
</dd>
<dd>
<span>
<b>14</b><br />
<i>初四</i>
</span>
<span>
<b>15</b><br />
<i>初五</i>
</span>
<span>
<b>16</b><br />
<i>初六</i>
</span>
<span>
<b>17</b><br />
<i>初七</i>
</span>
<span>
<b>18</b><br />
<i>初八</i>
</span>
<span>
<b>19</b><br />
<i>初九</i>
</span>
<span>
<b>20</b><br />
<i>初十</i></span>
</dd>
<dd>
<span>
<b>21</b><br />
<i>十一</i>
</span>
<span data-flag="festival">
<b>22</b><br />
<i>十二</i>
</span>
<span>
<b>23</b><br />
<i>十三</i>
</span>
<span>
<b>24</b><br />
<i>十四</i>
</span>
<span>
<b>25</b><br />
<i>十五</i>
</span>
<span>
<b>26</b><br />
<i>十六</i>
</span>
<span>
<b>27</b><br />
<i>十七</i>
</span>
</dd>
<dd>
<span>
<b>28</b><br />
<i>十八</i>
</span>
<span>
<b>29</b><br />
<i>十九</i>
</span>
<span>
<b>30</b><br />
<i>二十</i>
</span>
<span>
<b>31</b><br />
<i>廿一</i>
</span>
<span data-range="next-month">
<b>1</b><br />
<i>元旦</i>
</span>
<span data-range="next-month">
<b>2</b><br />
<i>廿三</i>
</span>
<span data-range="next-month">
<b>3</b><br />
<i>廿四</i>
</span>
</dd>
</dl>
</div>
</div>
</body>
</html>
注意：背景图片可以更改
