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 ...
随机推荐
- Sql Server 查询性能查看
dbcc dropcleanbuffers --清除buffer pool里的数据页面 dbcc freeproccache --清除memtoleave和buffer pool里的执行计划内存 se ...
- 解决windows文件在linux系统中显示乱码的问题
问题: 在Windows下用matlab写的代码(.m)到Linux(centos)下,注释的中文全是乱码. 原因: Windows下默认使用的是GB2312编码,Linux默认使用的是UTF-8. ...
- Java基础学习总结（68）——有关Java线程方面的面试题
不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java 语言一个重要的特点就是内置了对并发的支持,让 Java 大受企业和程序员的欢迎.大多数待遇丰厚的 Java 开发职位都要求开发者 ...
- vim编辑强制执行命令
vim进入文件,输入i编辑好文件,按esc,输入冒号,再输入底下代码 :w !sudo tee %
- linux下select,poll,epoll的使用与重点分析
好久没用I/O复用了,感觉差点儿相同都快忘完了.记得当初刚学I/O复用的时候花了好多时间.可是因为那会不太爱写博客,导致花非常多时间搞明确的东西,依旧非常easy忘记.俗话说眼过千遍不如手过一遍,的确 ...
- Narrow Art Gallery
Time Limit: 4000ms, Special Time Limit:10000ms, Memory Limit:65536KB Total submit users: 11, Accepte ...
- 18005 It is not ugly number
18005 It is not ugly number 时间限制:2000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC Description ...
- Mina airQQ聊天开门见山篇（一）
Mina airQQ聊天开门见山篇(一) 近期项目可能要用到Mina,这个礼拜就在看这个框架,所以想写个小小的聊天的demo来巩固下,打算用几篇博客来记录下相关的知识 client用的是Flex Ai ...
- Android与JS互相调用以及注意
近期项目中常常使用Html5而Android与JS调用常常会用到,这里记录一下,測试系统5.0以上. 这里先贴一下源代码 Activity: package jwzhangjie.com.webvie ...
- luogu1969 积木大赛
题目大意 搭建一座宽度为n的大厦,大厦可以看成由n块宽度为1的积木组成,第i块积木的最终高度需要是hi. 在搭建开始之前,没有任何积木(可以看成n块高度为 0 的积木).接下来每次操作,可以选择一段连 ...