编写日历
一.先通过浏览器找到日历的图片
以下就是我通过谷歌浏览器搜索日历查询到的日历，然后通过美工人员把相应的尺寸量好了
二.分析与规划
一看之下你就会发现，这个图是一个表格（table）布局，细看你会发现，其实只靠表格布局是完成不了的，比如说绿色背景这块，不好布局。通过分析发现，你可以把上面这个图分成两大部分，分别是绿色背景一块与白色背景一块，我们把绿色背景取名为rightBox，白色背景这一块取名为leftBox。这样取名的原因是，他们分别在左右两边。再细看一些，你会发现，如果左边全部分为一大块，也不好做，所以我们再把它细分，上面那些年份，月份之类的分为一块，取名为leftBox-top，意思是左边上。下面那一个日历的主体部分，取名为leftBox-bottom，意思是左下。最后分析下右边的，我们会发现宜与忌这两个与别的有点不一样，所以我们就又把他们分为两块，分别取名为rightBox-top和rightBox-bottom，意思是右上和右下。到这里，我们的大致布局已经分析完了。
三.书写大致布局的代码
1.首先，我们写一个大框架，把右边和左边都包括进去。
#maxBox{
width: 535px;
height: 370px;
margin: auto;
position: relative;
border: 1px solid #71b9fe;
/*background-color: blue;*/
}
<link rel="stylesheet" href="../css/EX-02.css"/>下面说下，图片里面明明没有背景颜色（background-color），为什么我们需要设置背景颜色。因为如果我们不设置背景色的话，我们不能很好的观察我们书写是否正确。所以为了更好的检查代码的正确性，我们会在下面的样式中也加上背景色。不过到了最后，我们会把颜色去掉的。我们同时设置了宽高（width、height）、margin（位置属性，居中）、position（定位，方便下面的相对定位）
2.最大的已经写好了，现在书写左右两大框的样式。
#leftBox{
width: 387px;
height: 350px;
position: absolute;
margin: 0;
padding: 10px;
background-color: green;
}
#rightBox{
width: 108px;
height: 350px;
background-color: #71b9fe;
position: absolute;
right: 0;
top: 0;
padding: 10px;
/*background-color: yellow;*/
}我们也设置了宽高，背景色，定位方式，位置。absolute是相对定位，参照物是最大框。我们分别设置了位置，像左边的，就设置了margin:0;就是上下左右最大的距离是0px；
右边的，我设置了right=0;意思是距离右边的距离是0.
3.接着下右上，右下，左上，左下
#leftBox-top{
width: 387px;
height: 38px;
position: absolute;
margin: 0;
border-bottom: 2px solid #71b9fe;
word-spacing: 30px;/*后面添加的*/
/*background-color: red;*/
}
#leftBox-bottom{
width: 387px;
height: 310px;
position: absolute;
top: 50px;
/*background-color: blue;*/
}
#rightBox-top{
width: 100%;
height: 175px;
/*background-color: #aaaaaa;*/
}
#rightBox-bottom{
width: 100%;
height: 160px;
border-top: 2px solid #9b9899;
position: relative;
bottom: -10px;
/*background-color: black;*/
}body部分代码：
<div id="maxBox"><!--大框架-->
<div id="leftBox"><!--左边的框架-->
<div id="leftBox-top"><!--左边上面的框架-->
</div>
<div id="leftBox-bottom"><!--左边下面的框架-->
</div>
</div>
<div id="rightBox"><!--右框架-->
<div id="rightBox-top"><!--右上的框架-->
</div>
<div id="rightBox-bottom"><!--右下的框架-->
</div>
</div>
</div>
三.书写内容的代码
1.左上代码，这期间我修改了上面leftBox的代码，添加了
word-spacing: 30px;
<div id="leftBox-top"><!--左边上面的框架-->
<select name="year">
<option value="2016年">2016年</option>
<option value="2017年">2017年</option>
<option value="2018年">2018年</option>
</select>
<select name="month">
<option value="7月">7月</option>
<option value="8月">8月</option>
<option value="9月">9月</option>
</select>
<select name="holiday">
<option value="假期安排">假期安排</option>
<option value="端午">端午</option>
<option value="元旦">元旦</option>
</select>
<input type="button" value="返回今天"/>
</div>左下需要用到的样式：
#table{
width: 387px;
height: 310px;
text-align: center;/*文本居中*/
}
.number{
font-size: 18px;
margin: auto;
}
.character{
color: #9b9899;
font-size: 12px;
margin: auto;
}
.b-bottom{
border-bottom: 1px solid #71b9fe;
}
.future{
color: #e6d8c8; /*没有到的日子*/
}
.Red{
color: red;
}
.This{
background-color: #fedb00; /*今日*/
}
<div="leftBox-bottom"><!--左边下面的框架-->
<table id="table" cellspacing="0">
<tbody>
<tr>
<th class="b-bottom">一</th>
<th class="b-bottom">二</th>
<th class="b-bottom">三</th>
<th class="b-bottom">四</th>
<th class="b-bottom">五</th>
<th class="b-bottom Red">六</th>
<th class="b-bottom Red">日</th>
</tr>
<tr>
<td class="b-bottom">
<p class="number future">26</p>
<p class="character future">初三</p>
</td>
<td class="b-bottom">
<p class="number future">27</p>
<p class="character future">初四</p>
</td>
<td class="b-bottom">
<p class="number future">28</p>
<p class="character future">初五</p>
</td>
<td class="b-bottom">
<p class="number future">29</p>
<p class="character future">初六</p>
</td>
<td class="b-bottom">
<p class="number future">30</p>
<p class="character future">初七</p>
</td>
<td class="b-bottom">
<p class="number Red">1</p>
<p class="character Red">建党</p>
</td>
<td class="b-bottom">
<p class="number Red">2</p>
<p class="character">初九</p>
</td>
</tr>
<tr>
<td class="b-bottom">
<p class="number">3</p>
<p class="character">初十</p>
</td>
<td class="b-bottom">
<p class="number">4</p>
<p class="character">十一</p>
</td>
<td class="b-bottom">
<p class="number">5</p>
<p class="character">十二</p>
</td>
<td class="b-bottom">
<p class="number">6</p>
<p class="character">十三</p>
</td>
<td class="b-bottom">
<p class="number">7</p>
<p class="character Red">小暑</p>
</td>
<td class="b-bottom">
<p class="number Red">8</p>
<p class="character">十五</p>
</td>
<td class="b-bottom">
<p class="number Red">9</p>
<p class="character">十六</p>
</td>
</tr>
<tr>
<td class="b-bottom">
<p class="number">10</p>
<p class="character">十七</p>
</td>
<td class="b-bottom">
<p class="number">11</p>
<p class="character">十八</p>
</td>
<td class="b-bottom">
<p class="number">12</p>
<p class="character">十九</p>
</td>
<td class="b-bottom">
<p class="number">13</p>
<p class="character">二十</p>
</td>
<td class="b-bottom">
<p class="number">14</p>
<p class="character">廿一</p>
</td>
<td class="b-bottom">
<p class="number Red">15</p>
<p class="character">廿二</p>
</td>
<td class="b-bottom This">
<p class="number Red">16</p>
<p class="character">廿三</p>
</td>
</tr>
<tr>
<td class="b-bottom">
<p class="number">17</p>
<p class="character">廿四</p>
</td>
<td class="b-bottom">
<p class="number">18</p>
<p class="character">廿五</p>
</td>
<td class="b-bottom">
<p class="number">19</p>
<p class="character">廿六</p>
</td>
<td class="b-bottom">
<p class="number">20</p>
<p class="character">廿七</p>
</td>
<td class="b-bottom">
<p class="number">21</p>
<p class="character">廿八</p>
</td>
<td class="b-bottom">
<p class="number Red">22</p>
<p class="character Red">大暑</p>
</td>
<td class="b-bottom">
<p class="number Red">23</p>
<p class="character">初一</p>
</td>
</tr>
<tr>
<td class="b-bottom">
<p class="number">24</p>
<p class="character">初二</p>
</td>
<td class="b-bottom">
<p class="number">25</p>
<p class="character">初三</p>
</td>
<td class="b-bottom">
<p class="number">26</p>
<p class="character">初四</p>
</td>
<td class="b-bottom">
<p class="number">27</p>
<p class="character">初五</p>
</td>
<td class="b-bottom">
<p class="number">28</p>
<p class="character">初六</p>
</td>
<td class="b-bottom">
<p class="number Red">29</p>
<p class="character">初七</p>
</td>
<td class="b-bottom">
<p class="number Red">30</p>
<p class="character">初八</p>
</td>
</tr>
<tr>
<td>
<p class="number">31</p>
<p class="character">初九</p>
</td>
<td>
<p class="number future">1</p>
<p class="character future Red">建军</p>
</td>
<td>
<p class="number future">2</p>
<p class="character future">十一</p>
</td>
<td>
<p class="number future">3</p>
<p class="character future">十二</p>
</td>
<td>
<p class="number future">4</p>
<p class="character future">十三</p>
</td>
<td>
<p class="number future">5</p>
<p class="character future">十四</p>
</td>
<td>
<p class="number future">6</p>
<p class="character future">十五</p>
</td>
</tr>
</tbody>
</table>
</div>添加了样式：
.p{
margin: 0;
font-size: 13px;
}
.Today{
width: 76px;
height: 76px;
margin: 15px auto;
background-color: #ffbc00;
text-align: center;
line-height: 76px;
font-size: 52px;
color: #ffffff;
}
.Day{
color: #ffffff;
font-size: 13px;
text-align: center;
margin: 0;
}
<div id="rightBox-top"><!--右上的框架-->
<p class="p">2017-7-13 星期四</p>
<p class="Today">13</p>
<p class="Day">六月二十</p>
<p class="Day">丁酉年 【鸡年】</p>
<p class="Day">丁未月 辛丑日</p>
</div>
<div id="rightBox"><!--右框架-->
<div id="rightBox-top"><!--右上的框架-->
<p class="p">2017-7-13 星期四</p>
<p class="Today">13</p>
<p class="Day">六月二十</p>
<p class="Day">丁酉年 【鸡年】</p>
<p class="Day">丁未月 辛丑日</p>
</div>
<div id="rightBox-bottom"><!--右下的框架-->
<div class="suiTable"><!--宜-->
<i>宜</i>
<p class="things">破屋</p>
<p class="things">坏垣</p>
<p class="things">解除</p>
<p class="things">余事勿取</p>
</div>
<div class="avoid"><!--忌-->
<i>忌</i>
<p class="things">嫁娶</p>
<p class="things">安葬</p>
</div>
</div>
</div>
.suiTable{
font-size: 12px;
color: #eeffff;
position: absolute;
left: 10px;
top: 10px;
text-align: center;
}
.avoid{
font-size: 12px;
color: #eeffff;
position: absolute;
right: 10px;
top: 10px;
text-align: center;
}
i{
font-size: 24px;
font-style: normal;
}
.things{
margin: 5px auto;
}
不过这种日历只要观赏，没有别的作用，不能点击。
总结
做这种图片，我们首先要搞清楚大致布局，先把大布局写出来，然后再去写小布局，慢慢细写，这样就容易许多。
1866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
