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 ...
随机推荐
- apk下载的网址生成一个二维码
apk提供二维码扫描下载,其实就是把apk所在的地址生成二维码. 下面提供一个在线二维码生成网址,http://cli.im/text/1833744?iID7V
- [luogu3230 HNOI2013] 比赛 (搜索+Hash)
传送门 Solution 搜索加Hash记录状态,记忆化搜索,需要注意顺序无关答案 Code //By Menteur_Hxy #include <map> #include <cm ...
- Python学习笔记之模块与包
一.模块 1.模块的概念 模块这一概念很大程度上是为了解决代码的可重用性而出现的,其实这一概念并没有多复杂,简单来说不过是一个后缀为 .py 的 Python 文件而已 例如,我在某个工作中经常需要打 ...
- GitLab权限介绍
访问权限 - Visibility Level 这个是在建立项目时就需要选定的,主要用于决定哪些人可以访问此项目,包含3种 Private - 私有,只有属于该项目成员才有原先查看 Internal ...
- 纪录:Solr6.4.2+Flume1.7.0 +morphline+kafka集成
当前大多数企业版hadoop的solr版本都还停留在solr4.x,由于这个版本的solr本身的bug较多,使用起来会出很多奇怪的问题.如部分更新日期字段失败的问题. 最新的solr版本不仅修复了以前 ...
- POJ 1696
这题是明显的TU包变形. 使用卷包裹法可解,而且是必定可以经过所有点的.直观可知,当经过某点后,相当于把之前的点抹去,求剩下点的TU包,递归下去,也就能把点全部经过了. 于是,只需把经过的点标记一下就 ...
- jmeter函数和变量
函数和变量广泛的应用在JMeter的传参过程,其中函数可以被认为是某种特殊的变量,它们可以被采样器或者其他测试元件所引用. 常用函数 1.__RamdomString() / __Ramdom() 获 ...
- uva 1555 Garland
题意:有n个灯笼.第一个的高度是A,最后一个是B.灯笼的关系给出.并要求每一个灯笼的高度是非负数的.求最低的B 思路:推出公式:H[i]=2*H[i-1]+2-H[i-2],然后枚举H[2],在知道H ...
- UVAlive 6560 - The Urge to Merge（状压dp）
LA 6560 - The Urge to Merge option=com_onlinejudge&Itemid=8&page=show_problem&problem=45 ...
- POJ1179 Polygon 区间DP
题目大意: 多边形游戏,有N个顶点的多边形,3 <= N <= 50 ,多边形有N条边,每个顶点中有一个数字(可正可负),每条边上或者是“+”号,或者是“*”号.边从1到N编号,首先选择一 ...