（11）用css设计电子相册 {上}
本篇学习资料讲解：
通过css对电子相册进行排版 和 侧面强调“盒子模型、标准流、浮动和定位”的重要性。
先来看看"双向联动模式"的电子相册图：
{鼠标指针经过某张图片（或者某段文字）时，相应的文字（或者相应的某张图片）会以特殊样式显示}
以上部分的介绍将出现在（12）用css设计电子相册 {下}，这里只是提前感受。
1、搭建基本框架
搭建框架主要应考虑在实际页面中相册的具体结构和形式，包括照片整体排列的方法，用户可能的浏览情况，照片是否需要自动调整，等等。
首先，对于阵列模式，不同的用户可能有不同的浏览器。显示器分辨率为“1280*720”的用户可能希望每行能显示5~6幅缩略图，而显示器分辨率为“1366*768”的用户或者希望每行能容纳7~8幅，宽屏用户或许希望每行能显示更多。其次，即使在同一个浏览器下，用户也不一定能够全屏幕欣赏，这就需要照片能够自动排列和换行。如果使用<table>排版是无论如何也不可能实现这一点的。
对于详细信息的模式，照片的信息通常环绕在一侧，设计者往往不愿意在重新设计整体的框架，而希望在阵列框架的基础上，通过直接修改css文件就能实现整体的变换。这也是<table>排版所不可能实现的。
考虑到以上的要求，对每一幅照片及其它的相关信息都用一个<div>块进行分离，并且根据照片的横、竖来设置相应的css类别，代码如下：
“简单案例”：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>自动改变每行放置的照片数量</title>
<link rel="stylesheet" href="array.css"/>
</head>
<body> <div class="pic ls" id="p1">
<a href="m01.jpg" class="tn"> <img src="photo1/s01.jpg"> </a>
<ul>
<li class="title">坑塘村*菊</li>
<li class="catno">trip01 </li>
<li class="price">￥79.9</li>
</ul>
</div> <div class="pic ls" id="p2">
<a href="m02.jpg" class="tn"> <img src="photo1/s02.jpg"> </a>
<ul>
<li class="title">坑塘村*桥</li>
<li class="catno">trip02</li>
<li class="price">￥59.7</li>
</ul>
</div> <div class="pic pt" id="p3">
<a href="m03.jpg" class="tn"> <img src="photo1/s03.jpg"> </a>
<ul>
<li class="title">坑塘村*树</li>
<li class="catno">trip03</li>
<li class="price">￥48.6</li>
</ul>
</div> <div class="pic pt" id="p4">
<a href="m04.jpg" class="tn"> <img src="photo1/s04.jpg"> </a>
<ul>
<li class="title">坑塘村*影</li>
<li class="catno">trip04</li>
<li class="price">￥90.5</li>
</ul>
</div> <div class="pic ls" id="p5">
<a href="m05.jpg" class="tn"> <img src="photo1/s05.jpg"> </a>
<ul>
<li class="title">坑塘村*路</li>
<li class="catno">trip05</li>
<li class="price">￥74.1</li>
</ul>
</div> <div class="pic pt" id="p6">
<a href="m06.jpg" class="tn"> <img src="photo1/s06.jpg"> </a>
<ul>
<li class="title">坑塘村*花</li>
<li class="catno">trip06</li>
<li class="price">￥88.2</li>
</ul>
</div> <div class="pic ls" id="p7">
<a href="m07.jpg" class="tn"> <img src="photo1/s07.jpg"> </a>
<ul>
<li class="title">坑塘村*天</li>
<li class="catno">trip07</li>
<li class="price">￥79.9</li>
</ul>
</div> <div class="pic pt" id="p8">
<a href="m08.jpg" class="tn"> <img src="photo1/s08.jpg"> </a>
<ul>
<li class="title">坑塘村*井</li>
<li class="catno">trip08</li>
<li class="price">￥52.9</li>
</ul>
</div>
</body>
</html>
以上是html部分的基本框架，框架中每个<div>块设置了很多不同的css类别，接下来下面一一说明。
（1）在<div>块属性中的类别，“pic”主要用于声明所有含有照片的<div>块，与其他不含照片的<div>块区别。
（2）在“pic”类别后的照片类别，有的是“pt”，有的是“ls”,其中 pt （portrait）指竖直方向的照片，即照片的高度大于宽度，而 ls （landscape）指水平方向的照片。
（3）类别 “tn”指代缩略图的超链接，用于区别网页中可能出现的其他超链接。而<ul>标记下的各个<li>标记都加上相应的css类别，用于详细信息下的设定。
这样基本的框架就搭建好了，使用相同的方式，就可以增加更多的<div>了，每一个<div>的格式都是完全相同的。只需要按照片是横向的还是竖向的俩设置类别并输入相关文字信息就可以了。此时没有设置什么css样式的图：
上图中由于还没有设置任何样式，因此所有内容都从上到下依次排列。
2、制作“阵列模式”电子相册。
先来了解“阵列模式”的实现方法，它主要要求照片能够根据浏览器的宽度自动调整每行的照片数，在css排版中正好刻印使用 float属性俩实现。另外，考虑到需要排列整齐，而且照片有横向显示的也有竖向显示的，因此将块扩大为一个正方形，并且给照片加上边框。先来看图再说：
当浏览器改变宽度时，一行可以显示更多的照片
下面给前面介绍的“简单案列”添加css部分的修饰 ：
{1}实现整体结构：
div.pic{ /*将每个div设置固定高度和宽度,添加左浮动,用margin使相邻div之间隔开*/
height:160px; width:160px; /*每幅图片块的大小*/
float:left;
margin:5px;
}
div.pic img{ /*将div中的img元素，即图像的边框设置为none,这是因为图像在链接中,如果不取消边框就会出现默认的粗边框，影响美观。*/
border:none;
}
效果图：
1、/*将每个div设置固定高度和宽度,添加左浮动,用margin使相邻div之间隔开*/
2、/*将div中的img元素，即图像的边框设置为none,这是因为图像在链接中,如果不取消边框就会出现默认的粗边框，影响美观。*/
{2}添加背景“白色”图，取消<ul>信息：
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.pic ul{ /*阵列模式，不显式照片信息*/
display:none;
}
/*设置图像的宽度，如果确认图像的大小恰好是90像素和135像素，就可以不用设置。这里设置的作用是如果图像的大小不是正好这么大，可以强制以正确的大小显示*/
效果图：
3、/*为宽度大于高度的图片增加一个带有阴影的边框：横向的90*125像素*/
4、/*为宽度大于高度的图片增加一个带有阴影的边框：横向的90*125像素*/ /*为高度大于宽度的图片增加一个带有阴影的边框：竖向的135*90像素*/
5、/*设置图像的宽度，如果确认图像的大小恰好是90像素和135像素，就可以不用设置。这里设置的作用是如果图像的大小不是正好这么大，可以强制以正确的大小显示*/
6、目前在阵列模式，不需要显示照片的具体文字信息，因此将<ul>标记的display设置为none。
{3}调整超链接块位置，增加鼠标指针经过时的背景图：
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 /*为高度大于宽度的“竖直方向”图片增加一个橘色背景：横向的135*90像素*/
}
/*设置图像的宽度，如果确认图像的大小恰好是90像素和135像素，就可以不用设置。这里设置的作用是如果图像的大小不是正好这么大，可以强制以正确的大小显示*/
”阵列模式“效果图：
7、将超链接设置为块元素，并且利用padding值将作用范围扩大到整个div块“160px*160px”范围，同时通过调整4个值，实现照片正好放到背景图的白色矩形区域中的效果。
8、考虑到超链接的凸出的效果，再分别为鼠标指针经过照片是制作两幅橘黄色的背景，一幅用于水平照片，一张用于竖直照片。
3、制作“单列模式”电子相册
先来看图再说：
上图中，所有照片竖直排列，每张照片的右侧显示关于该照片的详细信息。
下面继续引用前面介绍的“简单案例”html部分的结构，css部分再添加部分css的修饰。（添加的部分css修饰用粉红色表明）
{1}将图片的超链接设置为向左浮动，照片信息不隐藏：
div.pic{
width:450px;
height:160px;
margin:5px;
}
div.pic img{
border:none;
}
div.pic a.tn{
float:left;
}
div.ls{
background:url(framels.jpg) no-repeat left; /* 水平相片的背景 */
}
div.pt{
background:url(framept.jpg) no-repeat left; /* 竖直相片的背景 */
}
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;
}
div.pt a:hover{
background:url(framept_hover.jpg) no-repeat center;
}
“添加的部分css修饰用粉红色表明”解释：由于div 中的a元素设置为左浮动，因此它后面的列表文字就环绕它，从而显示在其右侧了。
效果图：
{2}设置<ul>列表的整体位置，边框等属性；针对三个项目列表<li>添加各自的样式：
div.pic ul{
margin:0 0 0 170px;
padding:0 0 0 0.5em;
background:#dceeff;
border:2px solid #a7d5ff;
font-size:12px;
list-style:none;
font-family:Arial,Helvetica,sans-serif;
position:relative;
top:50px;
}
div.pic li{
line-height:1.2em;
margin:0;
padding:0;
}
div.pic li.title{
font-weight:bold;
padding-top:0.4em;
padding-bottom:0.2em;
border-bottom:1px solid #a7d5ff;
color:#0044586;
}
div.pic li.canto{
color:#0068c9;
margin:0 2px 0 13em;
padding-left:5px;
border-left:1px solid #a7d5ff;
}
div.pic li.price{
color:#0068c9;
font-style:italic;
margin::-1.2em 2px 0 18em;
padding-left:5px;
border-left:1px solid #a7d5ff;
}
效果图：
到这里基本的方法已经介绍完了。
（11）用css设计电子相册 {上}的更多相关文章
- （12）用css设计电子相册 {下}
本篇学习资料讲解: 延续上一篇的学习资料,仍然介绍 使用css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 上篇学习资料介绍的“阵列模式电子相册”,如果也能 ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- 《CSS 设计指南》学习笔记 一
本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...
- CSS设计指南之理解盒子模型
原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...
- CSS设计指南之浮动与清除
原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...
- CSS设计指南之定位
原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...
- 结构化CSS设计思维
LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...
- TMS WEB CORE直接从HTML&CSS设计的页面布局
TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...
- 从iOS 11看怎样设计APP图标
苹果WWDC2017开发者大会已经尘埃落定,除了新产品的发布,iOS 11也正式亮相.新系统中,地图.App Store.时钟.相机.联系人等等原生应用都换了新的图标.此次图标的变化势必也会激发下一个 ...
随机推荐
- python学习之- 内置函数
内置方法:1:abs():取绝对值2:all():当可迭代对象里所有均为真时结果为真. all([1,2,3])3:any():当可迭代对象里任意一个数据为真结果即为真.any([0,1,2])4:a ...
- java的异常与记录日志
今天在<java编程思想>一书中看到了异常与记录日志,发现学会将异常记录进日志中还是很有必要的,以下是书中的例子: import java.io.PrintWriter; import j ...
- neo4j在linux下的安装
1. Neo4j简介 Neo4j是一个用Java实现的.高性能的.NoSQL图形数据库.Neo4j 使用图(graph)相关的概念来描述数据模型,通过图中的节点和节点的关系来建模.Neo4j完全兼容A ...
- http返回写入问题
1.服务器返回写的数据全是通过response对象,response.getWriter().print(msg);这样就返回写出数据了. 比如: logger.info("encrypte ...
- (转)Delphi2009初体验 - 语言篇 - 智能指针(Smart Pointer)的实现
转载:http://www.cnblogs.com/felixYeou/archive/2008/08/27/1277250.html 快速导航 一. 回顾历史二. 智能指针简介三. Delphi中 ...
- 配置Python 2.7.1外加环境pywin32-216.win32-py2.7
python-2.7.1 安装包 下载地址:http://download.csdn.net/detail/baidu_14854543/7985187 pywin32-216.win32-py2. ...
- android POI搜索，附近搜索，周边搜索定位介绍
POI搜索有三种方式.依据范围和检索词发起范围检索poiSearchInbounds.城市poi检索poiSearchInCity,周边检索poiSearchNearBy. 下以周边检索为例介绍怎样进 ...
- C#如何引用定义好的dll文件
1 添加引用,找到dll文件 2 引用类的名称空间,生成类的实例,调用类的方法,测试OK.
- Nerv --- React IE8 兼容方案
创建项目 创建一个目录,使用npm快速初始化 $ mkdir my-project && npm init -y 安装依赖 安装webpack以及babel $ npm install ...
- 在linux命令行中编译和运行java文件
同时加载编译多个jar包和java文件 在个人平常使用或者当我们把代码部署到linux服务器上的时候,我们经常需要通过命令行编译和运行java文件,网上关于这个的方法大多是通过 javac -cp f ...