尝试div+css顶替table 制作日历
日期：2014-05-17 浏览次数：20749 次
尝试div+css代替table 制作日历
首先考虑下, 如何用DIV替代TABLE, 也就是手动绘制边框. 先搭配好HTML
效果图.
[img]
[/img]
首先考虑下, 如何用DIV替代TABLE, 也就是手动绘制边框. 先搭配好HTML
效果图.
[img]
[/img]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>DIV+CSS日历</title>
<link charset="utf-8" rel="stylesheet" type="text/css" href="css/calendar.css">
<script charset="utf-8" src="js/jquery2.js"></script>
<script charset="utf-8" src="js/calendar.js"></script>
</head>
<body>
<br/>
<div id="calendar">
<div id="opt">
<div class="tr">
<div id="year" class="td">2013</div>
<div class="td ttl dark">年</div>
<div class="td dark"><a href="#" onclick="return yearChoice(-1);">上一年</a></div>
<div class="td td1 dark"><a href="#" onclick="return yearChoice(1);">下一年</a></div>
</div>
<div class="tr tr2">
<div id="month" class="td">5</div>
<div class="td ttl dark">月</div>
<div class="td dark"><a href="#" onclick="return monthChoice(-1);">上一月</a></div>
<div class="td td1 dark"><a href="#" onclick="return monthChoice(1);">下一月</a></div>
</div>
</div>
<br/>
<div id="dates">
<div class="tr th">
<div class="td dark">星期日</div>
<div class="td dark">星期一</div>
<div class="td dark">星期二</div>
<div class="td dark">星期三</div>
<div class="td dark">星期四</div>
<div class="td dark">星期五</div>
<div class="td td1 dark">星期六</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
<div class="td">6</div>
<div class="td td1">7</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
<div class="td">6</div>
<div class="td td1">7</div>
</div>
<div class="tr ">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
<div class="td">6</div>
<div class="td td1">7</div>
</div>
<div class="tr ">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
<div class="td">6</div>
<div class="td td1">7</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
<div class="td">6</div>
<div class="td td1">7</div>
</div>
<div class="tr2">
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
