【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 核心功能代码讲解 ...
随机推荐
- centos 7 Hadoop2.7.4完全分布式搭建(一)
(一)系统准备与安装 1.准备下载centos7 (百度自行下载)可以到开源镜像站下载,速度比较快,比如清华的或者阿里的 在vmware上安装 这里我用的是vmware12 打开Vmware 选择文件 ...
- no getter for property named 'power_state
错误信息:nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for pr ...
- ubuntun16.0 登陆密码忘记
1. 开机,如下图所示(没有装虚拟机,手机拍的图片凑合这看把): 2. 此时会有一个选项:Advanced Options for Ubuntu, 选中直接回车 ,如下图: 3. 看到里面有很多选项, ...
- GetFileVersionInfoSize函数确定操作系统是否可以检索指定文件的版本信息
GetFileVersionInfoSize函数 -------------------------------------------------- ------------------------ ...
- [LeetCode 题解]: Permutations
Given a collection of numbers, return all possible permutations. For example,[1,2,3] have the follow ...
- 系统禁用执行FIPS政策导致程序发生“调用的目标发生了异常”
工具是使用AES-256-CBC加密算法 问题 最近有客户反映, 在使用我们工具时候,会出现“调用的目标发生了异常”错误, 接到反馈之后, 我们进行了很多测试,甚至得到客户系统信息和framework ...
- MySQL数据库（三）
1. 创建表 create table student( id int unsigned not null auto_increment primary key, name varchar(8) no ...
- MVC MVC常见错误及解决办法
MVC常见错误及解决办法 问题1: 必须添加对程序集“EntityFramework, Version=5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c5 ...
- RHEL因为selinux设置失误，无法重启问题。（centos适用）
今天做FTP模拟的时候selinux设置出现失误.导致系统无法重新启动.出现如下界面 Failed To Load SELinux policy.freezing .. 网上找了下,解决方法如下: 开 ...
- codeVS 动态最大子段和
题目链接:戳我 对于最大子段和,我们只需要维护四个变量--maxl,maxr,maxs,sum(分别表示区间最大前缀子段和,区间最大后缀子段和,区间最大子段和,区间所有数的和) 然后合并的时候是这样的 ...