日历界面的编写
编写日历
一.先通过浏览器找到日历的图片
以下就是我通过谷歌浏览器搜索日历查询到的日历，然后通过美工人员把相应的尺寸量好了
二.分析与规划
一看之下你就会发现，这个图是一个表格（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;*/
}
下面说下，图片里面明明没有背景颜色（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部分代码：
三.书写内容的代码
1.左上代码，这期间我修改了上面leftBox的代码，添加了
word-spacing: 30px;
左下需要用到的样式：
#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; /*今日*/
}
一
二
三
四
五
六
日
26
初三
27
初四
28
初五
29
初六
30
初七
1
建党
2
初九
3
初十
4
十一
5
十二
6
十三
7
小暑
8
十五
9
十六
10
十七
11
十八
12
十九
13
二十
14
廿一
15
廿二
16
廿三
17
廿四
18
廿五
19
廿六
20
廿七
21
廿八
22
大暑
23
初一
24
初二
25
初三
26
初四
27
初五
28
初六
29
初七
30
初八
31
初九
1
建军
2
十一
3
十二
4
十三
5
十四
6
十五
添加了样式：
.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;
}
2017-7-13 星期四
13
六月二十
丁酉年 【鸡年】
丁未月 辛丑日
2017-7-13 星期四
13
六月二十
丁酉年 【鸡年】
丁未月 辛丑日
宜
破屋
坏垣
解除
余事勿取
忌
嫁娶
安葬
.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;
}
不过这种日历只要观赏，没有别的作用，不能点击。
总结
做这种图片，我们首先要搞清楚大致布局，先把大布局写出来，然后再去写小布局，慢慢细写，这样就容易许多。