【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 核心功能代码讲解 ...
随机推荐
- Fiddler手机https抓包
Fiddler手机抓包:https://blog.csdn.net/wangjun5159/article/details/52202059 fiddler 使用说明:https://www.cnbl ...
- Oracle定時email通知
small_program_task 這張表的資料是待發送的email通知,再次之前已經有一個job會定時掃描固定時間內未接收到小程式回報狀態將其寫入到該表,send_flag為N,表示為寄過通知.e ...
- [Cocos2d-x for WP8学习笔记] 一些基本概念,建立自己的启动界面
流程控制:场景是相对不变的游戏元素集合,游戏在场景间的切换就是流程控制. 场景.层和精灵:它们是不同层次的游戏元素.通常,场景包含层,层包含精灵,场景与层是其他游戏元素的容器,而精灵是展示给玩家的图形 ...
- 工作流2013 assign to问题
根据您的确认, 该问题已经通过我们所提供的方案进行修改后测试通过, 问题解决. 以下为该问题的产生原因: SharePoint 2013使用的默认认证机制与2007不一样, 2007使用的是Wind ...
- linux安装anaconda过程
今天在centos7下安装了Anaconda,将安装过程记录如下 下载安装Anaconda 下载地址:https://repo.continuum.io/archive/index.html 打开页面 ...
- Sublime text3!行首,行尾,批量编辑!
1.Windows下的操作操作步骤 1.Ctrl + H 2.打开正则,输入^,然后Find All,查找所有的行首 3.打开正则,输入$,然后Find All,查找所有的行尾 4.光标闪动,就可以进 ...
- Echart自定义y轴刻度信息1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jmeter处理json（关联）
例:用户需要登录成功后才可进行充值,进行充值操作时需要获取登录成功返回的sign值,在jmeter中可以通过关联的方式进行处理. jmeter中json path插件的使用方法:http://www. ...
- mysqldump导出数据不带时区信息的问题
今天在导出数据时,发现所有timestamp字段都不带时区信息,因为我在东8区,导出的数据中所有时间都提早了8个小时 首先先看表的字段和数据 CREATE TABLE IF NOT EXISTS `a ...
- 搭建sftp并设置不同权限的多个用户
一, 设置相关用户,用户组,ssh配置文件 mkdir -pv /opt/ftpsite/{admin,user1,user2} groupadd sftpadmins groupadd sftpus ...