(12)用css设计电子相册 {下}
本篇学习资料讲解:
延续上一篇的学习资料,仍然介绍 使用css对电子相册进行排版 和 侧面强调“盒子模型、标准流、浮动和定位”的重要性。
上篇学习资料介绍的“阵列模式电子相册”,如果也能够看到详细信息就更好了。如果能够在鼠标指针经过时出现一个信息框,并显示文字内容,鼠标离开以后该信息框自动消失,这样不但页面非常简洁,而且可以方便浏览者快速掌握信息。
1、“鼠标指针经过时动态出现文字信息”电子相册
先看效果图再说:
上图中,可以看到当鼠标指针经过第一行的第四张图片时,它的下面出现了一个详细信息框,这个信息框的样式和上篇学习资料介绍的“单列模式电子相册”中的设置是相同的。
下面继续引用上一篇学习资料中的“简单案例” 里的{html部分的基本框架}进行讲解,简单案例的详细内容请到上一篇学习资料获取,这里不做详细。。。。
下面开始增加创建一个名为“array2.css”的css文件,这其实是在“单列模式”css修饰部分的基础上进行增加一些:(添加的部分css修饰用粉红色表明)
div.pic{ /*将每个div设置固定高度和宽度,添加左浮动,用margin使相邻div之间隔开*/
height:160px; width:160px; /* 每幅图片块的大小 */
margin:5px;
float:left; /* 向左浮动 */
}
div.pic img{ /*将div中的img元素,即图像的边框设置为none,这是因为图像在链接中,如果不取消边框就会出现默认的粗边框,影响美观。*/
border:none;
}
div.ls{
background:url(framels.jpg) no-repeat center; /* 水平图片的背景 */
}
div.pt{
background:url(framept.jpg) no-repeat center; /* 竖直图片的背景 */
}
div.ls img{ /* 水平图片 */ /*之所以将图片设置固定的宽度、高度,是为了配合刚添加的背景图,让图片看起来更美观*/
margin:0px;
height:90px; width:135px;
}
div.pt img{ /* 竖直图片 */
margin:0px;
height:135px; width:90px;
}
div.ls a{
display:block; /* 定义为块元素 */
padding:34px 14px 36px 11px; /* 将超链接区域扩大到整个背景块 */
}
div.pt a{
display:block;
padding:11px 36px 14px 34px; /* 将超链接区域扩大到整个背景块 */
}
div.ls a:hover{ /* 鼠标经过时修改背景图片 */
background:url(framels_hover.jpg) no-repeat center; /*为宽度大于高度的“水平方向”图片在鼠标指针经过上面时增加一个橘色背景:横向的90*125像素*/
}
div.pt a:hover{
background:url(framept_hover.jpg) no-repeat center; /*为宽度大于高度的“水平方向”图片在鼠标指针经过上面时增加一个橘色背景:横向的90*125像素*/
}
div.pic ul{
display:none;
}
div.pic:hover ul{
display:block;
position:absolute;
}
div.pic ul{ /* 设置相片信息的样式 */
margin:-5px 0 0 0px;
padding:0 0 0 0.5em;
background:#dceeff;
border:2px solid #a7d5ff;
font-size:12px;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
}
div.pic li{
line-height:1.2em;
margin:;
padding:;
}
div.pic li.title{
font-weight:bold;
padding-top:0.4em;
padding-bottom:0.2em;
border-bottom:1px solid #a7d5ff;
color:#004586;
}
div.pic li.catno{
color:#0068c9;
margin:0 2px 0 6em;
padding-left:5px;
border-left:1px solid #a7d5ff;
}
div.pic li.price{
color:#0068c9;
font-style:italic;
margin:-1.2em 2px 0 11em;
padding-left:5px;
border-left:1px solid #a7d5ff;
}
(1)
div.pic:hover ul{
display:block;
position:absolute;
}
代码的含义是:
{1}当鼠标指针经过某一个照片所在的div时,将ul列表的display属性有原来的none改为block,也就是从隐藏改为常规模式;
{2}设置绝对定位,将ul脱离标准流。
(2)
div.pic ul{ /* 设置相片信息的样式 */
margin:-5px 0 0 0px;
padding:0 0 0 0.5em;
background:#dceeff;
border:2px solid #a7d5ff;
font-size:12px;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
}
代码的含义是:调整ul的位置,让每个ul列表距离照片近一些,剩下的其他简单这里就不做解释了。
效果图:
2、“双向联动模式”电子相册
前面所介绍的每张图片的“说明文字内容”都比较少,没几个字,但是现实中对于每一张图片的说明文字内容可能会比较多,所以不得不为电子相册设计一个新的版式,那就是接下来所介绍的“双向联动模式”。先看图再说:
上图中很直观地看到,页面中的图像和说明文字完全分离,各自排列,那么它们是如何关联起来的呢?其实“简单案例”里的{html部分的基本框架}”不需要大改动,仍然在一个div中包含了图像和文字内容,这里要做的就是给每个div分配一个惟一的ID。
下面拿一个div出来解释:
<div class="pic ls" id="c0">
<a href="photo/m01.jpg" class="tn"><img src="photo1/s01.jpg"/></a>
<ul>
<li class="title">坑塘村*菊</li>
<li class="info">这里配合说明文字。不但当鼠标指针位于某一个图像上面的时候,该图像会更换背景,而且当鼠标指针在某段文字上面的时候,相应的图像也会更换背景。</li>
</ul>
</div>
代码中变化不大,只是在div标记中增加了id属性的设置,页面中共有8个div的,依次为“c0~c7”。
html部分修改以后,那么开始对css修饰部分进行以上效果图效果设计:
(1)所有图片绝对定位,设置位置:
div.pic a{
position:absolute;
} #c0 a{top:;left:;}
#c1 a{top:; left:160px;}
#c2 a{top:;left:320px;}
#c3 a{top:;left:480px;}
#c4 a{top:160px;left:0px;}
#c5 a{top:160px; left:160px;}
#c6 a{top:160px;left:320px;}
#c7 a{top:160px;left:480px;} div.pic img{
border:none;
}
{1}要使每个div中的图像都分离出来,显然只有使用绝对定位才能实现,因此把所有的div中的图像都设置为绝对定位;
{2}因图像设置为“绝对定位”,而没有设置top、bottom、left和right中的任意一个时,这个脱离标准流的盒子会保持在原来的位置,将每张图片依次通过top和left属性放置到页面顶部。
{3}将div中的img元素,即图像的边框设置为none,这是因为图像在链接中,如果不取消边框就会出现默认的粗边框,影响美观。
效果图:
(2)设置<ul>列表的位置,和每个<li>的样式:
div.pic ul{
border-top:1px #aaa solid;
border-bottom:1px #fff solid;
padding:5px 20px 5px;
margin:0px;
font-size:12px;
list-style:none;
position:relative;
top:330px; }
div.pic li.info{
text-indent:2em;
}
div.pic li.title{
font-weight:bold;
}
{1}设置ul的边框等属性之外、还将position属性设置为relative,并将top设置为330px,这样就使各个ul都向下移动了330像素。
{2}对文字的首行缩进。
{3}字体进行了“粗体”设置。
效果图:
至此,基本布局已经实现了。
(3)下面就需要为图像设置背景、为设置鼠标指针经过时的效果,方法和上一篇学习资料的案列是类似的,如下:
div.ls a{
background:url(framels.jpg) no-repeat center; /*为宽度大于高度的“水平方向”图片增加一个白色背景(看起来类似框架):横向的90*125像素*/
}
div.pt a{
background:url(framept.jpg) no-repeat center; /*为宽度大于高度的“水平方向”图片增加一个白色背景(看起来类似框架):横向的90*125像素*/
} div.ls img{ /* 水平相片 */
margin:0px;
height:90px; width:135px;
}
div.pt img{ /* 竖直相片 */
margin:0px;
height:135px; width:90px;
}
div.ls a{
display:block;
padding:34px 14px 36px 11px; /*将超链接区域扩大到整个背景块*/
}
div.pt a{
display:block;
padding:11px 36px 14px 34px; /*将超链接区域扩大到整个背景块*/
}
div.ls:hover a{
background:url(framels_hover.jpg) no-repeat center; /*为宽度大于高度的“水平方向”图片在鼠标指针经过上面时增加一个橘色背景:横向的90*125像素*/
}
div.pt:hover a{
background:url(framept_hover.jpg) no-repeat center; /*为宽度大于高度的“水平方向”图片在鼠标指针经过上面时增加一个橘色背景:横向的90*125像素*/
}
效果图:
(4)设置双向联动的鼠标指针经过时效果,也就是当鼠标指针经过一段文字(或者其相应的照片)时,这段文字也要以特殊的样式显示,如下:
div.pic:hover ul{
background:#CCC;
border-top:1px red solid;
border-bottom:1px red solid;
}
效果图:
这样就完全实现了“双向联动”,图像和相应的文字完全分离,而鼠标指针经过二者中的任何一个,都会产生相同的效果。
(12)用css设计电子相册 {下}的更多相关文章
- (11)用css设计电子相册 {上}
本篇学习资料讲解: 通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片 ...
- 《CSS 设计指南》学习笔记 一
本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- HTML & CSS设计与构建网站 ([美]达科特) PDF原版
HTML & CSS 设计与构建网站采用有别于许多传统编程书籍的新颖编排方式,将使您收到事半功倍的学习效果.每一页都在短小精悍的示例代码的引导下,简明直观.直截了当地阐述一个新主题. < ...
- 2015年最佳的12个 CSS 开发工具推荐
CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...
- CSS设计指南之理解盒子模型
原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...
- CSS设计指南之浮动与清除
原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...
- CSS设计指南之定位
原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...
- 结构化CSS设计思维
LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...
随机推荐
- webpack2 详解
1.安装 npm install webpack -g npm install webpack -save-dev 2.编辑配置文件 // 引入 path var path=require('path ...
- jk_proxy实现apache+tomcat负载均衡
Apache + tomcat实现server集群 主要參照:http://blog.csdn.net/welun521/article/details/4169879 watermark/2/tex ...
- Windows7和Ubuntu12.04无法选择系统
Windos7 旗舰版 Ubuntu12.04LTS 64位版本号 硬件挂载两个硬盘 SSD+机械 Windows7和Ubuntu12.04都装在SSD上.眼下先装好了Windows7,打算装Ubun ...
- quilt - 制作patch的工具
quilt - 制作patch的工具 在尝试为openwrt做一个patch时,查到这个工具.openwrt官方已经有很详细的文档对步骤进行说明了. quilt并不是专为openwrt的开发工具.qu ...
- TestNG demo
下载TestNG的归档文件 下载最新版本的TestNG的jar文件,详细请点击访问 http://www.testng.org..在写这篇教程的时候,我下载TestNG中-6.8.jar,并将 tes ...
- python 爬虫1 開始,先拿新浪微博開始
刚刚開始学. 目的地是两个.一个微博,一个贴吧 存入的话,临时还没想那么多.先存到本地目录吧 分词和推荐后面在整合 mysql mongodb hadoop redius 后面在用 我最终知道为什么大 ...
- MVC Controller构造器注入
UnityDependencyResolver 的标准写法 public class UnityDependencyResolver : IDependencyResolver { priva ...
- POJ 2886 Who Gets the Most Candies?(树状数组+二分)
题目链接 注意题目中给的顺序是顺时针的,所以在数组中应该是倒着存的.左就是顺时针,右就是逆时针.各种调试之后,终于A了,很多种情况考虑情况. #include <cstring> #inc ...
- html5--6-10 CSS选择器7--伪类选择器
html5--6-10 CSS选择器7--伪类选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓 ...
- 一步一步学Silverlight 2系列(16):数据与通信之JSON
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...