编写日历
一.先通过浏览器找到日历的图片
以下就是我通过谷歌浏览器搜索日历查询到的日历,然后通过美工人员把相应的尺寸量好了
二.分析与规划
一看之下你就会发现,这个图是一个表格(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;*/
}
现在书写的样式都是外部样式,你需要创建一个css文件,然后把代码复制进去,才可以应用样式,链接是:
<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;
这条代码把内容之间的间隔变成了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>
2.左下代码
左下需要用到的样式:
#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;
}
body部分代码:
<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;
}
六.最后我们需要把颜色去掉,就得到了最终的结果
不过这种日历只要观赏,没有别的作用,不能点击。
总结
做这种图片,我们首先要搞清楚大致布局,先把大布局写出来,然后再去写小布局,慢慢细写,这样就容易许多。