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>
二、利用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>
CSS读书笔记（2）---简易相册和日历表的制作的更多相关文章
- 【原创】CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（5）使用放射渐变制作光影效果
阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以使用背景的线性渐变进行构建. 图5.19可以看到有类似光束照射文字的效果,很好地突出了文字.这实现起来很 ...
- css读书笔记4：字体和文本
字体属性网页中的字体有3个来源:1.用户机器中安装的字体:2.保存在第三方网站上的字体.可以使用link标签把它们链接到页面中:3.保存在子集的web服务器上的字体.可以使用@font-face规则随 ...
- css读书笔记3：定位元素
定位元素要掌握css技术,核心就是要掌握元素定位. 一般把下面这条规则作为所有css样式表的第一条,初始化所有元素的内边距和外边距都为0: * {padding:0;margin:0;} 盒模型浏览器 ...
- css读书笔记2：css工作原理
css就是一种先选择html元素,然后设定选中元素css属性的机制.css选择符合要应用的样式构成一条css规则. 为文档添加样式的3种方法: 1.行内样式,直接写在特定标签的style属性中:2.嵌 ...
- css读书笔记1：HTML标记和文档结构
块级元素和行内元素:块级元素:上下堆叠,每个块级元素都独立占一行.块级元素的盒子宽度与父元素同宽.行内元素:左右堆叠,只有在空间不足的情况下才会折到下一行显示.行内元素的盒子会收缩包裹其内容,并尽可能 ...
- 超越css读书笔记
一.运用所有有效的css选择符 1.属性选择符(基于一个元素是否有属性名称,例如href,或者属性值) 例如:img[alt]{border:1px;} 所有包含alt属性的图像都将会有一个灰色的边框 ...
- CSS读书笔记（3）---清除浮动的几种方法
浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en" ...
- CSS读书笔记（1）---选择器和两列布局
(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...
- 【精通css读书笔记】 第八章 布局
学习了css布局的基础后又来翻阅<精通css>这本经典书籍,对布局有了进一步的认识. 基于浮动的布局 两列的布局仍然是使用一个元素向左浮动,一个元素向右浮动,值得注意的是要加入displa ...
随机推荐
- [转载]ext4文件系统的delalloc选项造成单次写延迟增加的分析
转载http://www.cnblogs.com/cobbliu/p/5603472.html 最近我们的服务进程遇到kill -15后处于Z的状态,变为了僵尸进程,经过/proc/{thread_i ...
- JavaScript获取日期方法
var time = new Date(); //当前时间 var year = time.getFullYear();//当前年份 var month = time.getMonth()+1; // ...
- cnblogs正式启用
额,因为最近发现CSDN越来越过分了...现在连数学公式都显示错字体了--于是决定把博客搬至cnblogs. Markdown 测试 \(\frac{-b\pm \sqrt{b^2-4ac}}{2a} ...
- UVA 10328 Coin Toss
Coin Toss Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVA. Original ID: ...
- 0726xtrbackup实例详解
转自http://www.cnblogs.com/olinux/p/5207887.html MySQL中的xtrabackup的原理解析 xtrabackup的官方下载地址为 http://www. ...
- [bzoj1369][Baltic2003]Gem_树形dp_结论题
Gem bzoj-1369 Baltic-2003 题目大意:给你一棵树,让你往节点上添自然数,使得任意相邻节点的数不同且使得权值最小. 注释:n为结点个数,$1\le n\le 10^3$. 想法: ...
- BIEE11G Rpd合并
Rpd合并 如图,合并两个rpd须要用三个rpd文件来操作.一个是blank.rpd.这是一个空白rpd,在biee合并的时候作为"原始主资料档案库":另一个是modified.R ...
- WAS_集群部署应用遭遇ADMA0085E和ADMA0109W错误
原创作品,出自 "深蓝的blog" 博客.深蓝的blog:http://blog.csdn.net/huangyanlong/article/details/47143431 近日 ...
- CentOS 7 安装Nginx做反向代理
题记 须要使用nginx的反向代理功能,測试环境为centos+NGINX 1.8.0. 跳过一些繁琐的问题,直接记录核心 步骤 (1)centos 安装在VM中.因此须要注意网络连接问题 (2)安装 ...
- 本地jar安装至maven仓库
本地jar安装至maven仓库 一般不建议通过这种方式配置依赖,通常做法建议你把本地包安装到maven仓库,命令如下: mvn install:install-file-DgroupId=com.ht ...