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 ...
随机推荐
- iterm2 快捷键设置
单词跳转 设置option+ 左右键
- 洛谷P1057 传球游戏【递归+搜索】
上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:nn个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹哨子时开始传球,每个同学可以把 ...
- 常用rides命令
rides使用步骤 1.源代码构建安装 1.下载,Linux下命令wget http://redis.io/download下载redis的包 2.解归档Linux下命令tar -xvf redis- ...
- 论vue项目api相关代码的组织方式
论vue项目api相关代码的组织方式 看了下项目组同事的代码,发现不同项目有不同的组织版本 版本一: ├─apis │ a.api.js │ b.api.js │ b.api.js │ d.api.j ...
- 4.Thymeleaf的常用标签
一.常用标签 二.foreach案例 1.创建项目 2. 创建Student.java package cn.kgc.pojo; /** * Created by Administrator on 2 ...
- List集合中把其中一个元素 调整到集合的第一位
要求:现在想把集合中的某个元素,放到该集合的第一个位置,但是其他元素的顺序不需要管. 方法:需要遍历集合,找到这个元素在集合中的位置,然后使用Collections.swap(list,o,i) (O ...
- （36）Spring Boot Cache理论篇【从零开始学Spring Boot】
Spring Boot Cache理论篇 在上一篇中我们介绍了Spring Boot集成Redis的实战例子,里面使用到了Spring Cache,那么什么是Spring Cache呢,本章将会做一个 ...
- mongodb--入门知识点
命令 mongo.exe,命令行客户端Shell工具. mongod.exe,数据库服务程序. mongodump.exe,数据库备份程序. mongoexport.exe,数据导出工具. mongo ...
- [bzoj1452][JSOI2009]Count_树状数组
Count bzoj-1452 JSOI-2009 题目大意:请维护一个平面内的数据结构,支持:单点修改,查询矩形内给定权值出现次数. 注释:$1\le n,m\le 300$,$1\le Q \le ...
- libev与libuv的区别
参考: http://blog.csdn.net/w616589292/article/details/46475555 libuv 和 libev ,两个名字相当相近的 I/O Library,最近 ...