[刘阳Java]_CSS图片画廊
图片画廊也是一种比较经典的案例。本节文章主要简单给大家介绍了CSS2实现图片画廊，采取的实现思路
- ul放置图片
- li标签里面嵌套a标签
- a标签里面嵌套两个图片的标签
- 通过简单的伪类来实现图片预览效果
具体效果图如下，这样子大家看了效果图，就会知道我们到底为了实现什么样子的效果
具体的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background: #fff;
color: #777;
margin: 0 auto;
padding: 50px;
position: relative;
width: 620px;
}
h1 {
border-bottom: 1px dashed #ccc;
color: #933;
font: 17px Georgia, serif;
margin: 0 0 10px;
padding: 0 0 5px;
text-align: center;
}
.hoverbox {
list-style: none;
cursor: default;
}
.hoverbox li {
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox a {
text-decoration: none;
cursor: default;
}
.hoverbox img {
width: 100px;
height: 75px;
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
padding: 2px;
vertical-align: top;
}
.hoverbox .preview {
border-color: #000;
width: 200px;
height: 150px;
}
.hoverbox a .preview {
display: none;
}
.hoverbox a:hover .preview{
position: absolute;
left: -45px;
top: -33px;
z-index: 10;
display: block;
}
</style>
</head>
<body>
<h1>CSS_图片画廊</h1>
<ul class="hoverbox">
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo01.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo01.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo02.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo02.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo03.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo03.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo04.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo04.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo05.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo05.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo06.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo06.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo07.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo07.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo08.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo08.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo09.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo09.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo10.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo10.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo11.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo11.jpg"/ class="preview"></a></li>
<li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo12.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo12.jpg"/ class="preview"></a></li>
</ul>
</body>
</html>
[刘阳Java]_CSS图片画廊的更多相关文章
- [刘阳Java]_CSS鼠标悬停
小白在学习前端技术时候,一定会在刚开始的时候学习CSS2和CSS3的相关知识.这篇内容给大家介绍一个CSS鼠标悬停的效果.大家可以先看下面的效果图,然后我们在说一下实现的效果要求吧 上图效果非常简单和 ...
- [刘阳Java]_CSS数字分页效果
先给出效果图,见下图.下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果 实现思路: (1). 使用浮动属性,以便让li元素水平排列. (2).将a元素设置为块级元素,然后设置它们的尺寸. (3 ...
- [刘阳Java]_CSS菜单侧边栏制作
再来写一个菜单侧边栏的制作,先看截图 源代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- [刘阳Java]_CSS普通菜单制作
简单给大家介绍一下CSS普通菜单制作,先看图 功能很简单 UL制作菜单 鼠标进入LI的CSS伪类,实现菜单弹出效果 源码如下 <!DOCTYPE html> <html> &l ...
- [刘阳Java]_快速搭建MyBatis环境_第2讲
1.MyBatis的环境配置 导入MyBatis包, mybatis-3.2.8.jar 导入MySQL驱动包, mysql-connector-java-5.1.24-bin.jar 创建表的实体类 ...
- [刘阳Java]_什么是MyBatis_第1讲
1.什么MyBatis,我们先通过百度百科先进行一个简单的了解 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation ...
- [刘阳Java]_为什么要前后端分离
前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多 ...
- [刘阳Java]_程序员Java编程进阶的5个注意点，别编程两三年还是增删改查
此文章也是关注网上好几篇技术文章后,今天分享出来.因为,总有在程序学习路上的小伙伴会感到迷茫.而迷茫存在的情况如下 第一种:在大学学习中出现的迷茫,不知道Java到底要学什么.学习Java的标准是什么 ...
- [刘阳Java]_MySQL数据优化总结_查询备忘录
数据库优化是在后端开发中必备技能,今天写一篇MySQL数据优化的总结,供大家看看 一.MySQL数据库优化分类 我们通过一个图片形式来看看数据优化一些策略问题 不难看出,优化有两条路可以选择:硬件与技 ...
随机推荐
- VS Code 调试 OneFlow
VS Code 调试 OneFlow 本文介绍如何配置 VS Code,搭建 OneFlow 的 GUI 开发环境. 如果对于 VS Code 及其插件系统还不熟悉,可以参阅官方文档. 本文包括: 如 ...
- 所有处理都走向AI
所有处理都走向AI All Processing Bends Toward AI 旧金山--谷歌正在试验机器学习(ML)来执行集成电路设计中的位置和路径,并取得了很好的效果.上周在ISSCC会议上宣布 ...
- video视频标签自定义显示隐藏播放控件&Shadow DOM
方法一:controlslist属性 controlslist="nodownload nofullscreen noremoteplayback" controlslist仅三种 ...
- A,B,C,D分别为不同的整数，满足以下乘法公式，求A,B,C,D的值
问题:A,B,C,D分别为不同的整数,满足以下乘法公式,求A,B,C,D的值 解题思路: 由题意可知A,B,C,D为不同的整数,则A!=B,A!=C,A!=D,B!=C,B!=D,C!=D 再由给出公 ...
- python常识系列20-->python利用xlutils修改表格内容
前言 世上的事,只要肯用心去学,没有一件是太晚的.要始终保持敬畏之心,对阳光,对美,对痛楚. 一.xlutils是什么? 是一个提供了许多操作修改excel文件方法的库: 属于python的第三方模块 ...
- jvm调优神器——arthas
在上一篇<jvm调优的几种场景>中介绍了几种常见的jvm方面调优的场景,用的都是jdk自带的小工具,比如jps.jmap.jstack等.用这些自带的工具排查问题时最大的痛点就是过程比较麻 ...
- Java网络编程实践
网络编程的目的 无线电台......传播交流信息,数据交换.通信 想要达到这个效果需要什么: 1. 如何准确的定位网络上的第一台主机 192.168.16.124:端口,定位到这个计算机上的某个资源. ...
- springboot实现自定义拦截器
为了更容易理解,我们通过一个代码例子来演示. 例子: 我们现在要访问http://localhost:8080/main.html页面,这个页面需要登录之后才能够浏览,没登录不能浏览. 那么现在问题来 ...
- Qt项目ui文件中新添加的控件在代码中不识别的问题解决
今天在学Qt框架的信号槽,然后发现在ui中加的控件,通过ui-> 找不到,没有识别,于是上网查找了一下问题 解决方法 添加ui控件后,执行程序,退出程序,将debug目录下的ui_XXXX.h拷 ...
- python赋值，深拷贝和浅拷贝的区别
1.赋值 list1=[[1,2],'fei',66] list2=list1 list1 [[1, 2], 'fei', 66] list2 [[1, 2], 'fei', 66] list2.ap ...