CSS读书笔记（2）---简易相册和日历表的制作

一、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>
View Code

 

二、利用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>
View Code

 

posted @ 2016-11-08 13:25  my_notebook  阅读(355)  评论(0)    收藏  举报