一、HTML和CSS制作的简易相册
相册在默认情况下是缩略图显示，而且是截取相片的某一部分显示的。当鼠标停留在某张缩略图上，相册列表中的缩略图变为大图，展示在相册的左边区域， 同时缩略图部分变成空的
效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS相册</title>
<style>
/*初始化内外补丁*/
*{
margin:0;
padding:0;
font:normal 12px/150% "宋体";
}
/*定义相册总的宽高 并且居中显示*/
#photo{
position: relative;/*为子元素的绝对定位提供参照物*/
width: 748px;
height: 590px;
margin: 0 auto;
background-color: #ddd;
border: 1px solid #ccc;
}
#photo h1{
position: absolute;
bottom:10px;
right: 10px;
height: 20px;
text-align: right;
}
/*相册缩略图显示在右边*/
#photo ul{
list-style: none;
background-color: #fff;
/*将相册缩略图列表展示在右边 一行2个*/
float: right;
width: 148px;
height: 590px;
/*overflow-y: scroll;*/
}
/*缩略图列表项的大小 设置overflow防止相片溢出*/
#photo ul li{
float: left;
height: 54px;
width: 54px;
margin: 10px;
overflow: hidden;
}
/*设置li中的锚点a标签为块状元素，定义宽高 设置边框*/
#photo ul li a{
display: block;
width: 50px;
height: 50px;
overflow: hidden;
border: 2px solid #ccc;
}
/*使用负边距调整缩略图显示的相片的部分*/
#photo img{
display: block;
border: 0 none;
margin: -400px 0 0 -400px;
}
#photo ul a:hover{
border: 2px solid #000;
}
/*鼠标移动到a标签也就是缩略图上，利用绝对定位 将原图显示到相册的左边 ，绝对定位以#photo的DIV父元素作参照物*/
#photo ul li a:hover img{
position: absolute;
width: 596px;
height: 586px;
top: 0px;
left: 0px;
margin: 0;
border: 2px solid #e00;
}
</style>
</head>
<body>
<div id="photo">
<h1>一个简易的CSS相册</h1>
<ul>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li>
<li><a href="#"><img src="./img/EVE-bg.jpg" alt="相片" /></a></li> </ul> </div>
</body>
</html>
二、利用table标签制作日历表
利用table标签一个日历表，对于上一个月和下一个月以及周六周日都定义特别的格式，让人一目了然。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:350px;
border-collapse:collapse;
}
/*定义表格标题 默认居中*/
caption{
height:24px;
color:#8A2BE2;
font-weight:bold;
}
/*定义单元格内容和单元格标题的格式 位子居中 下边框有实线其它无边框*/
td,th{
width:50px;
height:40px;
text-align:center;
border:2px solid #ddd;
border-style:none;
border-bottom-style:solid;
}
/*鼠标移动到某一天，改变内容样式定义背景颜色和文字颜色*/
td:hover{
font-weight:bold;
color:white;
background-color:#8A2BE2;
}
/*定义上一个月和本月的日期颜色*/
td.last-month,td.next-month{
color:#ccc;
}
/*先在前面定义所有td的样式和最后一个td样式 然后再定义第二个开始的td的样式
前面定义的灰色背景在第一列和最后一列有效，因为选择器优先级 所以后面定义的背景颜色只在
第二列到第6列有效*/
tr>td,tr>td+td+td+td+td+td+td{
background-color:#F8F8F8;
}
tr>td+td{
background-color:#fff;
}
</style>
</head>
<body>
<table>
<caption>2016年11月1日</caption>
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody>
<tr>
<td class="last-month">28</td>
<td class="last-month">29</td>
<td class="last-month">30</td>
<td class="current">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="next-month">1</td>
</tr>
</tbody>
</table> </body>
</html>