简易日历

js代码

css代码

@charset "utf-8";
/* CSS Document */

* {
	padding: 0; 
	margin: 0; 
}
li { 
	list-style: none; 
}
body { 
	background: #f6f9fc; 
	font-family: arial; 
}

.calendar { 
	width: 210px; 
	margin: 0 auto; 
	padding: 10px 10px 20px 20px;
 	background: #eae9e9; 
 }
.calendar ul { 
	width: 210px; 
	overflow: hidden; 
	padding-bottom: 10px; 
}
.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; 
}
.calendar li h2 { 
	font-size: 20px; 
	padding-top: 5px; 
}
.calendar li p { 
	font-size: 14px; 
}

.calendar .active { 
	border: 1px solid #424242; 
	background: #fff; 
	color: #e84a7e; 
}
.calendar .active h2 { }
.calendar .active p { 
	font-weight: bold; 
}

.calendar .text { 
	width: 178px; 
	padding: 0 10px 10px; 
	border: 1px solid #fff; 
	padding-top: 10px; 
	background: #f1f1f1; 
	color: #555;
	 }
.calendar .text h2 {
	font-size: 14px; 
	margin-bottom: 10px; 
}
.calendar .text p { 
	font-size: 12px; 
	line-height: 18px; 
}

HTML代码

	
	
	
	


	


    

        
1
JAN
        
2
FER
        
3
MAR
        
4
APR
        
5
MAY
        
6
JUN
        
7
JUL
        
8
AUG
        
9
SEP
        
10
OCT
        
11
NOV
        
12
DEC
    
    
    

        
1月活动
        
快过年了，大家可以商量着去哪玩吧～
    


	

 

 

1.我认为这里最为注意的地方应该是索引值  aLi[i].index=i;

   而且是从0开始的，如果要求从1开始，要加1

2.用数组存数据

3.有一个部分依旧是分成两部分

       第一部分赋值为空，然后为赋值