【Css】一个简单的图片库
今天做一个简单的图片库！
其实这个在w3school教程里介绍得很好了，不过看到什么，自己动手做一次，记得也深刻不是。
我们分几步来走：
第一步：先写一个坯子。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>图片库</title>
</head>
<body>
<div class="box">
<div class="img">
<a target="_blank" href="image/tupian/1.jpg">
<img src="data:image/tupian/1.jpg" alt="图片1" width="160" height="160">
</a>
<div class="desc">图片1的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/2.jpg">
<img src="data:image/tupian/2.jpg" alt="图片2" width="160" height="160">
</a>
<div class="desc">图片2的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/3.jpg">
<img src="data:image/tupian/3.jpg" alt="图片3" width="160" height="160">
</a>
<div class="desc">图片3的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/4.jpg">
<img src="data:image/tupian/4.jpg" alt="图片4" width="160" height="160">
</a>
<div class="desc">图片4的描述</div>
</div>
</div>
</body>
</html>
a标签里的 target="_blank" 表示点击后在新窗口打开链接。
img标签里的 alt="xxxx" 表示鼠标移到图片上时图片的描述。
效果：
给box加上边框是为了更清楚的看好布局。
第二步：我们给里面的4个图片和描述块设置宽高，并且向左浮动。
<style type="text/css">
.box {
border: 1px solid #cccccc;
}
div.img {
margin: 3px;
border: 1px solid #cccccc;
text-align: center;
float:left;
}
</style>
效果：
图片上面的那条线是由于图片浮动后，图片在文档流中原有的空间会被关闭，所以默认高度就为0。如果对box高度有要求，只有设置box的高度。
第三步：对图片文字的微调
<style type="text/css">
.box {
border: 1px solid #CCCCCC;
}
div.img {
margin: 3px;
border: 1px solid #cccccc;
text-align: center;
float:left;
}
div.img img {
display: inline;
margin: 3px;
border: 1px solid #cccccc;
}
div.desc{
text-align:center;
font-weight:normal;
width:150px;
font-size:12px;
margin:10px 5px 10px 5px;
}
</style>
效果：
第四步：我们可以给图片链接加上鼠标悬停效果，以及给加上阴影，这样看起来就像悬浮着一样。当然，把box的边框去掉把。
<style type="text/css">
div.img {
margin: 3px;
border: 1px solid #cccccc;
text-align: center;
float:left;
box-shadow: 5px 5px 5px #888888;
}
div.img img {
display: inline;
margin: 3px;
border: 1px solid #cccccc;
}
div.img a:hover img {
border: 1px solid #333333;
}
div.desc{
text-align:center;
font-weight:normal;
width:150px;
font-size:12px;
margin:10px 5px 10px 5px;
}
</style>
效果：
看起来顺眼很多。
附上完整代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>图片库</title> <style type="text/css">
div.img {
margin: 3px;
border: 1px solid #cccccc;
text-align: center;
float:left;
box-shadow: 5px 5px 5px #888888;
}
div.img img {
display: inline;
margin: 3px;
border: 1px solid #cccccc;
}
div.img a:hover img {
border: 1px solid #333333;
}
div.desc{
text-align:center;
font-weight:normal;
width:150px;
font-size:12px;
margin:10px 5px 10px 5px;
} </style>
</head>
<body>
<div class="box">
<div class="img">
<a target="_blank" href="image/tupian/1.jpg">
<img src="data:image/tupian/1.jpg" alt="图片1" width="160" height="160">
</a>
<div class="desc">图片1的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/2.jpg">
<img src="data:image/tupian/2.jpg" alt="图片2" width="160" height="160">
</a>
<div class="desc">图片2的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/3.jpg">
<img src="data:image/tupian/3.jpg" alt="图片3" width="160" height="160">
</a>
<div class="desc">图片3的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/4.jpg">
<img src="data:image/tupian/4.jpg" alt="图片4" width="160" height="160">
</a>
<div class="desc">图片4的描述</div>
</div>
</div>
</body>
</html>
【Css】一个简单的图片库的更多相关文章
- Html+css 一个简单的网页模板
一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...
- JS入门学习，写一个简单的图片库
<!-- 新手刚开始学JS,每天坚持写点东西 坚持下去,希望能有所进步 . 加油~~ --> <!DOCTYPE html> ...
- 【Css】一个简单的选项卡
这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...
- Css实现一个简单的幻灯片效果页面
使用animation动画实现一个简单的幻灯片效果. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...
- CSS布局中一个简单的应用BFC的例子
什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子 ...
- 一个简单的CSS示例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 & ...
- 使用CSS实现一个简单的幻灯片效果
方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...
- 使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on
[本文转载自http://sixpoint.me/942/implementing-simple-addon/] 实现一个简单的插件 教程的这个部分带你使用 SDK 来实现, 运行并打包一个插件. 这 ...
- 使用MongoDB和JSP实现一个简单的购物车系统
目录 1 问题描述 2 解决方案 2.1 实现功能 2.2 最终运行效果图 2.3 系统功能框架示意图 2.4 有关MongoDB简介及系统环境配置 2.5 核心功能代码讲解 ...
随机推荐
- Oracle SQl优化总结
对数据库技术的热爱是我唯一的安慰,毕竟这是自己喜欢的事情,还可以做下去. 因为客户项目的需要,我又开始接触Oracle,大部分工作在工作流的优化和业务数据的排查上.为了更好的做这份工作,我有参考过or ...
- Unity3D 之PC客户端的分辨率自定义
在Player Setting中可以自定义分辨率,但在PC版本中如果使用Display Resolution Dialog选项,会发现在分辨率选项中只有预定义的那些,而并没有在Player Setti ...
- asp.net—— 基础之截取字符串
在实际开发中有时难免会遇到需要获取某个字符串中的某些字符串,这里我们可以用到字符串截取的办法. 截取字符串的方法很容易(暂不包含中文字符串),只要稍微有点.net基础的人看了都能看懂. /// < ...
- C++构造和析构的顺序
C++构造函数和析构函数的顺序 #include <iostream> using namespace std; class CA {public: CA() { cout << ...
- python学习之路 七 ：生成器、迭代器
本节重点: 掌握列表生成式.生成器.迭代器 一.生成式 现在有个需求,把[1,2,3,4,5,6,7,8,9,10]中的每个值加1. # 二逼青年版 a = [0,1,2,3,4,5,6,7,8,9 ...
- 快速排序 java实现 (原理-优化) 三路快排
一.基本的快速排序 在数组中选取一个元素为基点,然后想办法把这个基点元素移动到它在排好序后的最终位置,使得新数组中在这个基点之前的元素都小于这个基点,而之后的元素都大于这个基点,然后再对前后两部分数组 ...
- Android理解：Activity状态和生命周期
http://blog.csdn.net/xiao__gui/article/details/11464603
- [转]解读Unity中的CG编写Shader系列5——理论知识
经过前面的系列文章中的三个例子,尽管代码简单,但是我想应该还有些地方没有100%弄明白,我们现在得回过头来补充一些必备的数学.图形学知识 1.图形管道第一个例子中我有提到顶点着色和片段着色在整个图形绘 ...
- 原生态js回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【转载】Thrift概述
来自 <https://www.ibm.com/developerworks/cn/java/j-lo-apachethrift/#ibm-pcon> 一个简单的 Thrift 实例 首先 ...