[刘阳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>

原文地址:https://www.cnblogs.com/liuyangjava/p/8448436.html

时间: 2024-10-07 02:40:08

[刘阳Java]_CSS图片画廊的相关文章

[刘阳Java]_CSS鼠标悬停

小白在学习前端技术时候,一定会在刚开始的时候学习CSS2和CSS3的相关知识.这篇内容给大家介绍一个CSS鼠标悬停的效果.大家可以先看下面的效果图,然后我们在说一下实现的效果要求吧 上图效果非常简单和清晰,就是鼠标放上去能够将图片进行缩率图的放小效果.实现要求 CSS的伪类hover的应用,通过伪类完成CSS样式的变化 CSS3中的transform:scale(...)的应用,完成缩放比例的设置 CSS3中的过渡transition:all 200ms ease-in样式的的应用,因为缩放效果

[刘阳Java]_CSS菜单侧边栏制作

再来写一个菜单侧边栏的制作,先看截图 源代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-family: "微软雅黑"; font-siz

[刘阳Java]_CSS数字分页效果

先给出效果图,见下图.下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果 实现思路: (1). 使用浮动属性,以便让li元素水平排列. (2).将a元素设置为块级元素,然后设置它们的尺寸. (3).使用链接伪类控制当鼠标放在链接之上使a元素尺寸变大:使用绝对定位,使a元素能够覆盖周边的元素. 特别说明:a元素的背景色设置为白色,因为默认状态背景是透明的,否则将会看到两边被遮盖的边框. <!DOCTYPE html> <html> <head> <meta c

[刘阳Java]_快速搭建MyBatis环境_第2讲

1.MyBatis的环境配置 导入MyBatis包, mybatis-3.2.8.jar 导入MySQL驱动包, mysql-connector-java-5.1.24-bin.jar 创建表的实体类, 例如: MyUser(id, name, password) 编写MyBatis的核心配置文件, SqlMapConfig.xml 编写映射文件, 例如: MyUserMapper.xml 编写测试来完成数据库CRUD操作 2.MyBatis代码编写原理图,因为环境搭建成功不成功需要我们写一段代

[刘阳Java]_SpringMVC方法静态资源_第9讲

有些时候我们在使用SpringMVC的时候造成无法访问静态资源文件(如:html,js,css,image等等).其主要的原因出在web.xml文件我们设置SpringMVC前端控制器的映射路径 <servlet> <servlet-name>spmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> &

[刘阳Java]_Spring AOP基于XML配置介绍_第9讲

基于注解配置的Spring AOP固然简单,但是这节我们会给大家介绍基于XML配置的AOP是如何应用的.为什么这么说了,因为后面我们还会介绍到Spring对Dao操作的事务管理(基于AOP的XML文件方式来配置事务) 1. 基于XML文件方式来配置Spring的AOP,则我们需要的一些基本元素如下 <aop:config.../>,此标签很重要.它是在XML里配置AOP功能的核心标签 all aspect and advisor elements must be placed within a

[刘阳Java]_Spring入门_第1讲

Spring框架在企业中的使用非常多,优势明显.所以学好Spring框架肯定不言而喻.今天我们给大家介绍Spring的入门 1. 对于初学者来说我们要学习Spring框架中的哪些技术,这个有必要了解一下 Spring中的IOC Spring中的AOP Spring是如何对Dao层进行封装的 Spring对Java Web的技术支持 Spring配置文件中的各类标签元素的应用 Spring的注解 Spring的事务管理机制 Spring自身的MVC框架是如何应用的 2. 我们先不要去讲Spring

[刘阳Java]_Spring整合Servlet【补充】_第14讲

这篇内容我们给大家介绍一下Spring框架如何整合Servlet.光看表面现象这个问题感觉没有什么太大难度,但是实际在整合过程中不是那么轻松 既然是以补充的方式来介绍,那么我们就直接上一个案例来说明整合实现的步骤 1. 案例要求 通过Spring框架注解方式来打通控制层,业务逻辑层,数据访问层之间的依赖关系 控制层采用Servlet来完成对用户请求与相应的处理 然后在Servlet中通过@Autowired方式来依赖注入业务逻辑层 业务逻辑层也是通过@Autowired方式来依赖注入数据访问层

[刘阳Java]_Spring AOP入门_第7讲

AOP技术个人认为是能够完善(改善)面向对象编程OOP.为什么这么说,我们得先从AOP的概念说起,然后通过一段简单的例子加以佐证.这样子大家就可以慢慢地了解AOP 1. AOP概念 AOP为Aspect Oriented Programming的缩写,含义:面向切面的编程. 2. AOP主要作用是什么,为什么要提出AOP概念,AOP技术到底能用到哪些实际的开发场景里面去 AOP技术主要的用做在日志记录,性能统计,安全控制,事务处理,异常处理等等 例如日志功能,日志代码往往横向地散布在所有对象层次