日历的CSS

最新推荐文章于 2024-03-19 20:40:53 发布

淡如轻风

最新推荐文章于 2024-03-19 20:40:53 发布

阅读量1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/wenlyli/article/details/10000917

版权

css 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

선택한 기간이 하늘색으로 나옴

일간 주간 월간

2010. 12

		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

~ 확인

CSS Code

 
/* UI Object */
 
.calendar{overflow:hidden;width:194px;border:2px solid #999;font-family:'돋움',dotum;font-size:12px;line-height:12px;text-align:center}
 
.calendar a{text-decoration:none !important}
 
.calendar img{border:0}
 
.calendar a.btn_cal{display:inline-block;width:31px;padding-right:2px;background:url(http://static.naver.com/groupware/2010/bg_btn_cal.gif) no-repeat 100% 0;font-size:11px;color:#888;letter-spacing:-1px;line-height:19px;text-decoration:none}
 
.calendar a.btn_cal:hover{color:#000}
 
.calendar a.btn_cal span{display:block;padding:1px 0 0 2px;background:url(http://static.naver.com/groupware/2010/bg_btn_cal.gif) no-repeat}
 
.calendar .calendar_type{overflow:hidden;height:27px;background:#f2f2f2}
 
.calendar .calendar_type .note{float:left;padding:7px 0 0 5px;font-size:11px;line-height:13px;letter-spacing:-1px}
 
.calendar .calendar_type .note span{display:inline-block;overflow:hidden;width:65px;white-space:nowrap;text-overflow:ellipsis}
 
.calendar .calendar_type .note img{margin-top:1px;vertical-align:top}
 
.calendar .calendar_type .btns{float:right;padding:3px 5px 0 3px}
 
.calendar .calendar_type .btns a{margin-left:-3px}
 
.calendar .calendar_type .selected{color:#d00 !important}
 
.calendar .calendar_period{clear:both;margin:11px 0 23px}
 
.calendar .calendar_period a{display:inline-block;margin:-1px -1px 0;padding:1px;vertical-align:middle}
 
.calendar .calendar_period a img{vertical-align:top}
 
.calendar .calendar_period strong{display:inline-block;width:83px;font-family:verdana;font-size:13px;color:#333;line-height:15px;text-align:center}
 
.calendar table{width:168px;margin:0 auto 11px;border:0}
 
.calendar table caption,.calendar table thead{display:none}
 
.calendar table td{padding:0;border:0;background:#fff;border:0;border-bottom:3px solid #fff;font-family:verdana,tahoma;font-size:10px;line-height:12px}
 
.calendar table td.selectable a{background:#fffcb2}
 
.calendar table td.selected a{background:#e5f2ff}
 
.calendar table td.today a{background:#7f7f7f;color:#fff}
 
.calendar table td a{display:block;width:24px;height:13px;color:#000;text-align:center;letter-spacing:-1px}
 
.calendar table td.sun a{color:#f00}
 
.calendar table td.sat a{color:#00f}
 
.calendar .calendar_input_period{margin:0 5px 0;padding:4px 0;border-top:1px solid #e5e5e5;color:#666}
 
.calendar .calendar_input_period .tilde{margin:0 -3px;font-family:tahoma;font-size:11px;color:#aaa}
 
.calendar .calendar_input_period input.date{width:62px;height:14px;margin-top:1px;*margin:0 0 -1px;padding:2px 0 0 4px;border:1px solid #ccc;font-family:tahoma;font-size:11px;line-height:13px;vertical-align:top}
 
.calendar .calendar_input_period a.btn_cal{color:#454545}
 
/* //UI Object */

HTML Code

 
<!-- UI Object -->
 
<div class="calendar">
 
     
 
    <!-- part -->
 
    <div class="calendar_type">
 
        <div class="note">
 
            <img src="https://i-blog.csdnimg.cn/blog_migrate/10ae54cdc8a5d5bb67b3eb3969031f2e.gif" width="10" height="10" alt="하늘색">
 
            <span title="선택한 기간이 하늘색으로 나옴">선택한 기간이 하늘색으로 나옴</span>                         
 
        </div>
 
        <div class="btns">
 
            <a href="#" class="btn_cal selected"><span>일간</span></a>
 
            <a href="#" class="btn_cal"><span>주간</span></a>
 
            <a href="#" class="btn_cal"><span>월간</span></a>
 
        </div>                       
 
    </div>
 
    <!-- //part -->
 
 
 
    <!-- part -->
 
    <div class="calendar_period">
 
        <a href="#"><img src="https://i-blog.csdnimg.cn/blog_migrate/f2308507dbcca03ea867c14484362414.gif" width="17" height="13" alt="이전해"></a>
 
        <a href="#"><img src="https://i-blog.csdnimg.cn/blog_migrate/2bec2a4848d8d32d9f9642caec53471b.gif" width="12" height="13" alt="이전달"></a>
 
        <strong>2010. 12</strong>
 
        <a href="#"><img src="https://i-blog.csdnimg.cn/blog_migrate/19574d013e53f07725a637abb2b46a7e.gif" width="12" height="13" alt="다음달"></a>
 
        <a href="#"><img src="https://i-blog.csdnimg.cn/blog_migrate/3bda4190eee39b4c71524e5c7c8ea6f0.gif" width="17" height="13" alt="다음해"></a>
 
    </div>
 
     
 
    <table cellspacing="0" border="1">
 
    <caption>달력</caption>
 
    <thead>
 
    <tr>
 
    <th scope="col">일</th>
 
    <th scope="col">월</th>
 
    <th scope="col">화</th>
 
    <th scope="col">수</th>
 
    <th scope="col">목</th>
 
    <th scope="col">금</th>
 
    <th scope="col">토</th>
 
    </tr>
 
    </thead>
 
 
 
    <tbody>  
 
    <tr>
 
    <td class="sun">&nbsp;</td>
 
    <td>&nbsp;</td>
 
    <td class="selected today"><a href="#">1</a></td>
 
    <td class="selected"><a href="#">2</a></td>
 
    <td class="selected"><a href="#">3</a></td>
 
    <td class="selected"><a href="#">4</a></td>
 
    <td class="sat selected"><a href="#">5</a></td>
 
    </tr>
 
    <tr>
 
    <td class="sun selected"><a href="#">6</a></td>
 
    <td class="selectable"><a href="#">7</a></td>
 
    <td><a href="#">8</a></td>
 
    <td><a href="#">9</a></td>
 
    <td><a href="#">10</a></td>
 
    <td><a href="#">11</a></td>
 
    <td class="sat"><a href="#">12</a></td>
 
    </tr>
 
     
 
    <tr>
 
    <td class="sun"><a href="#">13</a></td>
 
    <td><a href="#">14</a></td>
 
    <td><a href="#">15</a></td>
 
    <td><a href="#">16</a></td>
 
    <td><a href="#">17</a></td>
 
    <td><a href="#">18</a></td>
 
    <td class="sat"><a href="#">19</a></td>
 
    </tr>
 
     
 
    <tr>
 
    <td class="sun"><a href="#">20</a></td>
 
    <td><a href="#">21</a></td>
 
    <td><a href="#">22</a></td>
 
    <td><a href="#">23</a></td>
 
    <td><a href="#">24</a></td>
 
    <td><a href="#">25</a></td>
 
    <td class="sat"><a href="#">26</a></td>
 
    </tr>
 
     
 
    <tr>
 
    <td class="sun"><a href="#">27</a></td>
 
    <td><a href="#">28</a></td>
 
    <td><a href="#">29</a></td>
 
    <td><a href="#">30</a></td>
 
    <td><a href="#">31</a></td>
 
    <td>&nbsp;</td>
 
    <td class="sat">&nbsp;</td>
 
    </tr>                
 
    </tbody>
 
    </table>
 
    <!-- //part -->
 
 
 
    <!-- part -->
 
    <div class="calendar_input_period">
 
        <input type="text" name="period1" class="date" title="시작일 입력">
 
        <span class="tilde">~</span>
 
        <input type="text" name="period2" class="date" title="종료일 입력">
 
        <a href="#" class="btn_cal"><span><strong>확인</strong></span></a>
 
    </div>
 
    <!-- //part -->
 
         
 
</div>
 
<!-- //UI Object -->