css做table

客官°小女子只卖身不卖艺 2022-08-27 02:26 99阅读 0赞

首先考虑下, 如何用DIV替代TABLE, 也就是手动绘制边框. 先搭配好HTML  
效果图.  
\[img\]  
![8aed38d2-9e0a-3c3b-8418-d92a9fb1ec85.jpg][]  
\[/img\]

Html代码   ![收藏代码][icon_star.png]

1.  <html>  
2.  <head>  
3.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
4.      <title>DIV+CSS日历</title>  
5.      <link charset="utf-8" rel="stylesheet" type="text/css" href="css/calendar.css">  
6.      <script charset="utf-8" src="js/jquery2.js"></script>  
7.      <script charset="utf-8" src="js/calendar.js"></script>  
8.  </head>  
9.  <body>  
10. <br/>  
11.   
12. <div id="calendar">  
13.     <div id="opt">  
14.         <div class="tr">  
15.             <div id="year" class="td">2013</div>  
16.             <div class="td ttl dark">年</div>  
17.             <div class="td dark"><a href="\#" onclick="return yearChoice(-1);">上一年</a></div>  
18.             <div class="td td1 dark"><a href="\#" onclick="return yearChoice(1);">下一年</a></div>  
19.         </div>  
20.         <div class="tr tr2">  
21.             <div id="month" class="td">5</div>  
22.             <div class="td ttl dark">月</div>  
23.             <div class="td dark"><a href="\#" onclick="return monthChoice(-1);">上一月</a></div>  
24.             <div class="td td1 dark"><a href="\#" onclick="return monthChoice(1);">下一月</a></div>  
25.         </div>  
26.     </div>  
27.     <br/>  
28.   
29.     <div id="dates">  
30.         <div class="tr th">  
31.             <div class="td dark">星期日</div>  
32.             <div class="td dark">星期一</div>  
33.             <div class="td dark">星期二</div>  
34.             <div class="td dark">星期三</div>  
35.             <div class="td dark">星期四</div>  
36.             <div class="td dark">星期五</div>  
37.             <div class="td td1 dark">星期六</div>  
38.         </div>  
39.         <div class="tr">  
40.             <div class="td">1</div>  
41.             <div class="td">2</div>  
42.             <div class="td">3</div>  
43.             <div class="td">4</div>  
44.             <div class="td">5</div>  
45.             <div class="td">6</div>  
46.             <div class="td td1">7</div>  
47.         </div>  
48.         <div class="tr">  
49.             <div class="td">1</div>  
50.             <div class="td">2</div>  
51.             <div class="td">3</div>  
52.             <div class="td">4</div>  
53.             <div class="td">5</div>  
54.             <div class="td">6</div>  
55.             <div class="td td1">7</div>  
56.         </div>  
57.         <div class="tr ">  
58.             <div class="td">1</div>  
59.             <div class="td">2</div>  
60.             <div class="td">3</div>  
61.             <div class="td">4</div>  
62.             <div class="td">5</div>  
63.             <div class="td">6</div>  
64.             <div class="td td1">7</div>  
65.         </div>  
66.         <div class="tr ">  
67.             <div class="td">1</div>  
68.             <div class="td">2</div>  
69.             <div class="td">3</div>  
70.             <div class="td">4</div>  
71.             <div class="td">5</div>  
72.             <div class="td">6</div>  
73.             <div class="td td1">7</div>  
74.         </div>  
75.         <div class="tr">  
76.             <div class="td">1</div>  
77.             <div class="td">2</div>  
78.             <div class="td">3</div>  
79.             <div class="td">4</div>  
80.             <div class="td">5</div>  
81.             <div class="td">6</div>  
82.             <div class="td td1">7</div>  
83.         </div>  
84.         <div class="tr2">  
85.             <div class="td">1</div>  
86.             <div class="td">2</div>  
87.             <div class="td">3</div>  
88.             <div class="td">4</div>  
89.             <div class="td">5</div>  
90.             <div class="td">6</div>  
91.             <div class="td td1">7</div>  
92.         </div>  
93.     </div>  
94. </div>  
95. </body>  
96. </html>

然后CSS进行布局控制, 注意控制下规律即可;

Javascript代码   ![收藏代码][icon_star.png]

1.  body \{  
2.      margin: 0 auto;  
3.      text-align: center;  
4.      font-size: 13px;  
5.  \}  
6.   
7.  \#opt \{   
8.      width: 275px;  
9.      height: auto;  
10.     margin: 0 auto  
11. \}  
12. \#dates \{   
13.     width: 568px;  
14.     height: auto;  
15.     margin: 0 auto  
16. \}  
17.   
18. .td \{  
19.     float: left; /\*向左浮动\*/  
20.     width: 80px;  
21.     height: 20px; /\* 与行高一直\*/  
22.     border-top: 1px solid blue;  
23.     border-left: 1px solid blue;  
24.     line-height: 20px; /\*与行高一直, 垂直居中\*/  
25. \}  
26.   
27. .ttl \{  
28.     width: 20px;  
29. \}  
30.   
31. .dark \{  
32.     color: white;  
33.     background: \#6666ff;  
34.     border-color: \#a52a2a !important;  
35. \}  
36.   
37. a \{  
38.     color: white;  
39.     text-decoration: none; /\*超链接无下划线\*/  
40.   
41. \}  
42.   
43. .tr \{  
44.     clear: both;  
45.     height: 20px  
46. \}  
47.   
48. .tr2 .td \{  
49.     border-bottom: 1px solid blue; /\*底边框\*/  
50. \}  
51.   
52. .td1 \{  
53.     border-right: 1px solid blue; /\*右边框\*/  
54. \}  
55.   
56. .firstDay \{  
57.     background: \#00ffff;  
58. \}  
59.   
60. .notCurMonth \{  
61.     background: \#f5f5dc;  
62. \}

JS进行事件处理;

Javascript代码   ![收藏代码][icon_star.png]

1.  $(function() \{  
2.      showDates();  
3.  \})  
4.  function yearChoice(optYear) \{  
5.      var yText = parseInt($("\#year").text()) + optYear;  
6.      if (yText < 1) \{  
7.          return false;  
8.      \}  
9.      $("\#year").text(yText);  
10.     showDates();  
11.     return false;  
12. \}  
13. function monthChoice(optMonth) \{  
14.     var mText = parseInt($("\#month").text()) + optMonth;  
15.     if (mText < 1 || mText > 12) \{  
16.         return false;  
17.     \}  
18.     $("\#month").text(mText);  
19.     showDates();  
20.     return false;  
21. \}  
22.   
23. function showDates() \{  
24.     $("\#dates div:not(.th) .firstDay ").removeClass("firstDay");  
25.     $("\#dates div:not(.th) .notCurMonth ").removeClass("notCurMonth");  
26.     var year = parseInt($("\#year").text());  
27.     var month = parseInt($("\#month").text());  
28.     var myDate = new Date(year, month - 1, 1);  
29.     console.log(myDate.toLocaleString());  
30.     console.log(myDate.getDay());  
31.     console.log(myDate.getDate());  
32.     //判断是星期几  
33.     var nowDay = myDate.getDay();  
34.     /\*获取当前月份1号所在的元素\*/  
35.     nowDay = nowDay == 0 ? 7 : nowDay;  
36.     var dateArray = $("\#dates div:not(.th) .td"); //表格  
37.   
38.     //配置前一周的  
39.     for (var i = 1; i <= nowDay; i++) \{  
40.         var tDate = new Date(year, month - 1, 1 - i); //当前月之前的一天  
41.         $(dateArray\[nowDay - i\]).text(tDate.getDate());  
42.         $(dateArray\[nowDay - i\]).addClass("notCurMonth");  
43.     \}  
44.     //配置当前月份  
45.     var lastDate = new Date(year, month, 0).getDate();  
46.     var idx = nowDay;  
47.     for (var i = 1; i <= lastDate; i++,idx++) \{  
48.         $(dateArray\[idx\]).text(i);  
49.     \}  
50.     $(dateArray\[nowDay\]).addClass("firstDay");  
51.   
52.     //填充后面的几天  
53.     for (var len = dateArray.length,i = 1; idx < len; idx++) \{  
54.         $(dateArray\[idx\]).text(i++);  
55.         $(dateArray\[idx\]).addClass("notCurMonth");  
56.     \}  
57. \}

[8aed38d2-9e0a-3c3b-8418-d92a9fb1ec85.jpg]: /images/20220824/c94961c13b35456ea97d7bcb5853d27c.png
[icon_star.png]: /images/20220824/2014c3179dea4f41a45df2326ca8d781.png