Day7 : 做個DatePicker (一) - 靜態結構+樣式

日曆是網頁上常用的工具，也來自己做做看

今天先做靜態結構+樣式

首先是html結構

**日曆這種東西很容易被使用在各種頁面，class命名上取的略長，以防在網頁中重複命名。

        

            <
            >
            2017-12
        
        

            

                

                    

                        
一
                        
二
                        
三
                        
四
                        
五
                        
六
                        
日
                    
                
                

                    

                        
27
                        
28
                        
29
                        
30
                        
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
                        
38
                        
29
                        
30
                        
31
                    
                
            
        

    

再來是css

.ync-datepicker-wrapper{
    width:240px;
    font-size:16px;
    box-shadow: 0px 1px 2px 2px rgba(0,0,0,.3);
}
.ync-datepicker-wrapper .ync-datepicker-header{
    padding : 0 10px;
    height: 50px;
    line-height: 50px;
    text-align : center;
    background: #dc3545;
    color:white;
}
.ync-datepicker-wrapper .ync-datepicker-btn{
    font-family: serif;
    font-size: 26px;
    width:20px;
    height:50px;
    line-height: 50px;
    color: #035c44;
    text-align: center;
    cursor:pointer;
    text-decoration: none;
}
.ync-datepicker-wrapper .ync-datepicker-prev-btn{
    float:left;
}
.ync-datepicker-wrapper .ync-datepicker-next-btn{
    float:right;
}
.ync-datepicker-wrapper .ync-datepicker-body table{
    width:100%;
    border-collapse:collapse;
}
.ync-datepicker-wrapper .ync-datepicker-body table th,
.ync-datepicker-wrapper .ync-datepicker-body table td{
    height:30px;
    text-align: center;
}
.ync-datepicker-wrapper .ync-datepicker-body table th{
    font-size: 12px;
    height:40px;
    line-height: 40px;
}
.ync-datepicker-wrapper .ync-datepicker-body table td{
    font-size:10px;
    cursor: pointer;
}

有先丟到github : 連結
這配色是因為聖誕節快到了～