其他分享
首页 > 其他分享> > 简单电子日历.html

简单电子日历.html

作者：互联网

电子日历!

点击查看代码 
<!DOCTYPE html>
<html>
    <head>
        <title>简单电子日历的设计与实现</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/calendar.css">
		<script src="js/calendar.js"></script>
    </head>
    <body onl oad="showDate()">
        <h3>简单电子日历的设计与实现</h3>
        <hr />
        <div id="calendar">
		    <!--状态栏-->
            <div>
			    <!--显示上个月按钮-->
                <button onclick="lastMonth()" >上个月</button>
                <!--显示当前年份和月份-->
				<div id="month" ></div>
				<!--显示下个月按钮-->
                <button onclick="nextMonth()" >下个月</button>
				<div>&nbsp;</div> <!--为了调节防止“日”上移-->
            </div>

            
            <!--显示星期几-->
			<div>
                <div class="everyday">日</div>
                <div class="everyday">一</div>
                <div class="everyday">二</div>
                <div class="everyday">三</div>
                <div class="everyday">四</div>
                <div class="everyday">五</div>
                <div class="everyday">六</div>
            </div>

            <!--显示当前月份每天的日期-->
			<div id="day"></div>
		</div>
    </body>
</html>
css样式如下
点击查看代码 
div{
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}

#calendar{
	width: 400px;
	margin:auto;
}

button{
	width: 25%;
	float:left;
	height:40px;
}

#month{
    width: 50%;
	float:left;
}

.everyday{
	width: 14%;
	float:left;
}

标签：日历,float,电子,width,html,10px,margin,left
来源： https://www.cnblogs.com/fzlgxy085/p/15920179.html