先来看看程序运行效果：
html页面部分如下：
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery老黄历特效 -</title>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.8.3.min.js"></script>
</head>
<script type="text/javascript" src="https://www.jb51.net/js/almanac.js"></script>
</head>
<link href="https://www.jb51.net/css/style.css" type="text/css" media="all" />
<body>
<div>
<div>
程序员老黄历<sup>beta</sup>
</div>
<div>
</div>
<div>
<div>
<table>
<tr><td>宜</td></tr>
</table>
</div>
<div>
<ul></ul>
</div>
<div></div>
</div>
<div></div>
<div>
<div>
<table>
<tr><td>不宜</td></tr>
</table>
</div>
<div>
<ul></ul>
</div>
<div></div>
</div>
<div></div>
<div>
<strong>座位朝向：</strong>面向<span></span>写程序，BUG 最少。
</div>
<div>
<strong>今日宜饮：</strong><span></span>
</div>
<div>
<strong>女神亲近指数：</strong><span></span>
</div>
</div>
</body>
</html>
style.css样式如下：
复制代码 代码如下:
body * {
font-family:"Consolas","Microsoft Yahei", Arial, sans-serif;
}
body {
background: white;
margin: 0;
padding: 0;
}
.container {
width: 320px;
margin: 0 auto 50px;
}
.container>.title {
color: #bbb;
font-weight: bold;
margin-bottom: 10px;
background: #555;
padding: 5px 15px;
}
.date{
font-size:17pt;
font-weight: bold;
line-height: 30pt;
text-align: center;
}
.split, .clear {
clear: both;
height: 1px;
overflow-y: hidden;
}
.good, .bad {
clear: both;
position: relative;
}
.bad {
/*top: -1px;*/
}
.good .title, .bad .title {
float: left;
width: 100px;
font-weight: bold;
text-align: center;
font-size: 30pt;
position:absolute;
top:0;
bottom:0;
}
.good .title>table, .bad .title>table {
position:absolute;
width:100%;
height:100%;
border:none;
}
.good .title {
background: #ffee44;
}
.bad .title {
background: #ff4444;
color: #fff;
}
.good .content, .bad .content {
margin-left: 115px;
padding-right: 10px;
padding-top: 1px;
font-size:15pt;
}
.good {
background: #ffffaa;
}
.bad {
background: #ffddd3;
}
.content ul {
list-style: none;
margin:10px 0 0;
padding:0;
}
.content ul li {
line-height:150%;
font-size: 15pt;
font-weight: bold;
color: #444;
}