首页 > > 网页制作 > css >

简易年历

2019-11-25 16:09:24来源：博客园阅读 ()

简易年历

 1 <style type="text/css">
 2 * { padding: 0; margin: 0; }
 3 li { list-style: none; }
 4 body { background: #f6f9fc; font-family: arial; }
 5 
 6 .calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
 7 .calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
 8 .calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
 9 .calendar li h2 { font-size: 20px; padding-top: 5px; }
10 .calendar li p { font-size: 14px; }
11 
12 .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
13 .calendar .active p { font-weight: bold; }
14 
15 .calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
16 .calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
17 .calendar .text p { font-size: 12px; line-height: 18px; }
18 
19 </style>
20 <body>
21 
22 <div id="tab" class="calendar">
23 
24     <ul id="box">
25         <li class="active"><h2>1</h2><p>JAN</p></li>
26         <li><h2>2</h2><p>FER</p></li>
27         <li><h2>3</h2><p>MAR</p></li>
28         <li><h2>4</h2><p>APR</p></li>
29         <li><h2>5</h2><p>MAY</p></li>
30         <li><h2>6</h2><p>JUN</p></li>
31         <li><h2>7</h2><p>JUL</p></li>
32         <li><h2>8</h2><p>AUG</p></li>
33         <li><h2>9</h2><p>SEP</p></li>
34         <li><h2>10</h2><p>OCT</p></li>
35         <li><h2>11</h2><p>NOV</p></li>
36         <li><h2>12</h2><p>DEC</p></li>
37     </ul>
38     
39     <div class="text" id="txt">
40         <h2>1月活动</h2>
41         <p>一月：新年好、吃吃吃+玩玩玩+昏昏癫癫+花光钱=胖一圈</p>
42     </div>
43 
44 </div>
45 <script src="jquery-1.11.1.min.js"></script>
46 <script type="text/javascript">
47     var arr = [
48         '一月新年好，穿新衣带新帽',
49         '二月龙抬头,情人节，告白单相思',
50         '三月38妇女节 39女神节',
51         '四月愚人节',
52         '五月劳动节，54青年节',
53         '六月儿童节，大白兔棒棒糖',
54         '七夕节牛郎织女',
55         '八月中秋月圆',
56         '九月讨厌开学季',
57         '十月祖国的节日',
58         '十一月光棍节，逛吃',
59         '十二月圣诞节'        
60     ]
61     $("#box li").click(function(){
62         $(this).addClass("active").siblings().removeClass("active");
63         var index = $(this).index();
64         $("#txt h2").html(index + 1 + "月活动");//月份从1开始 所以+1
65         $("#txt p").html(arr[index]);
66     })
67 </script>
68 </body>
69 </html>