【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 核心功能代码讲解 ...
随机推荐
- Mysql自动设置时间（自动获取时间，填充时间）
应用场景: 1.在数据表中,要记录每条数据是什么时候创建的,不需要应用程序去特意记录,而由数据数据库获取当前时间自动记录创建时间: 2.在数据库中,要记录每条数据是什么时候修改的,不需要应用程序去特意 ...
- Android 工具类大全
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38965311 1.日志工具类L.java package com.zhy.uti ...
- Spring Boot - Spring Cache
缓存 服务器自身(内存)的缓存 利用java程序中的变量 简单 集群环境中多个实例无法共享同步 缓存服务器(一般支持集群.分布式) Redis Memcached Spring中使用注解使用缓存 启动 ...
- Python【读取文件，第一行与最后一行】
文件小的读取方法 with open("a1.txt","r",encoding="gbk") as f: r = f.readlines( ...
- python之爬虫（三） Urllib库的基本使用
官方文档地址:https://docs.python.org/3/library/urllib.html 什么是Urllib Urllib是python内置的HTTP请求库包括以下模块urllib.r ...
- BAT机器学习面试1000题系列（41-45题）
41.线性分类器与非线性分类器的区别以及优劣 如果模型是参数的线性函数,并且存在线性分类面,那么就是线性分类器,否则不是.常见的线性分类器有:LR,贝叶斯分类,单层感知机.线性回归常见的非线性分类器: ...
- day04.2-迭代器
1. 迭代器协议: 对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代(只能往后走,不能往前退). 2. 可迭代对象:实现了迭代器 ...
- “全栈2019”Java第三十九章：构造函数、构造方法、构造器
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- JOISC2019Day 1試験 (Examination)
题面 官网 题解 就是个裸的三维数点,\(CDQ\)直接套上去就行了 //minamoto #include<bits/stdc++.h> #define R register #defi ...
- git恢复到上次提交
4个区 5种状态 未修改(Origin) 已修改(Modified) 已暂存(Staged) 已提交(Committed) 已推送(Pushed) 检查修改 已修改,未暂存(检查工作区与暂存区间的差异 ...