前端页面--视觉差效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /><link rel="stylesheet" href="style.css"><title>油画展览</title>
</head>
<body><header class="main-header"><h1>油画展览</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, est?</p></header><main class="container"><section class="card" ><img src="img/paint-1.jpg" alt=""><div><h3>Painting One</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section><section class="card" data-aos="fade-left"><img src="img/paint-2.jpg" alt=""><div><h3>Painting Two</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section><section class="card" data-aos="flip-right"><img src="img/paint-3.jpg" alt=""><div><h3>Painting Three</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section><section class="card" data-aos="slide-left"><img src="img/paint-4.jpg" alt=""><div><h3>Painting Four</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section><section class="card" data-aos="zoom-in-right"><img src="img/paint-5.jpg" alt=""><div><h3>Painting Five</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section><section class="card" data-aos="fade-left"><img src="img/paint-6.jpg" alt=""><div><h3>Painting Six</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section></main><script src="https://unpkg.com/aos@next/dist/aos.js"></script><script>AOS.init({offset:400,delay:0,duration:1000});</script>
</body>
</html>
*{margin: 0;padding: 0;box-sizing: border-box;
}body{font-size: 1.3rem;font-family: Arial, Helvetica, sans-serif;background-color: #f9f9f9;font-family: 'Oswald',sans-serif;
}a{color: #333;text-decoration: none;
}.main-header{height: 55vh;padding: 2rem;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;
}.main-header h1{font-size: 4rem;margin-bottom: 2rem;line-height: 1.2;color: #b50d10;
}.main-header p{font-size: 2rem;
}.container{max-width: 1100px;margin: auto;overflow: auto;padding: 0 2rem;
}img{width: 100%;
}.card{display: grid;grid-template-columns: repeat(2, 1fr);grid-gap:2rem;background-color: #f1f1f1;margin-bottom: 2rem;
}.card h3{margin-bottom: 2rem;
}.card img{height: 400px;
}.card>div{padding: 2rem;
}.card:nth-child(even) img{order:2;
}.btn{display: inline-block;background-color: #000;color:#fff;padding: 0.8rem 1.8rem;margin-top: 2rem;cursor: pointer;
}.btn:hover{opacity: 0.8;
}@media(max-width: 600px){.card{display: block;}
}

配图

请添加图片描述

请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/23635.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker制作镜像

docker制作镜像 docker制作镜像有两种&#xff1a; 1.docker build dockerfile 2.基于容器制作镜像 基于容器制作镜像 语法&#xff1a;docker commit options 容器名称 参数&#xff1a; -a&#xff1a;作者 -c&#xff1a;修改dockfile创建的镜像 -m&#xff1a;提交…

宝存科技企业级固态硬盘解决方案助力企业应用性能提升

企业级固态硬盘解决方案的核心 企业级固态硬盘市场具有产品附加值高、同时进入门槛高的特征&#xff0c;由于国内外巨头和初创企业竞争依然激烈。想要在竞争中脱颖而出&#xff0c;根本还是要靠产品本身的品质和厂商实力。 企业级固态硬盘适用于各类企业应用场景 企业级固态硬盘…

三层交换实验

前言 在实际的企业应用中&#xff0c;我们会先建立不同的vlan把用户先隔开来。然后再通过三次交换机技术打通vlan直接的网络。 这样的目的如下&#xff1a; 隔离&#xff1a; 隔离是广播域&#xff0c;也就是隔离的是故障连通&#xff1a; 连通的是正常的通信 比如校园网&am…

leetcode 416. 分割等和子集

给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 示例 1&#xff1a; 输入&#xff1a;nums [1,5,11,5] 输出&#xff1a;true 解释&#xff1a;数组可以分割成 [1, 5, 5] 和 [11] 。 示例 2&a…

⛳ StringBuffer and StringBuilder 处理字符串

目录 ⛳ StringBuffer and StringBuilder 处理字符串&#x1f3a8; 一&#xff0c;简介&#x1f3ed; 二&#xff0c;常用方法&#x1f69c; 三 &#xff0c;StringBugger&#x1f43e; 四&#xff0c;StringBuilder⭐ 五&#xff0c;StringBuffer和StringBuilder面试 ⛳ Strin…

2023牛客暑期多校训练营6 A-Tree (kruskal重构树))

文章目录 题目大意题解参考代码 题目大意 ( 0 ≤ a i ≤ 1 ) , ( 1 ≤ c o s t i ≤ 1 0 9 ) (0\leq a_i\leq 1),(1 \leq cost_i\leq 10^9) (0≤ai​≤1),(1≤costi​≤109) 题解 提供一种新的算法&#xff0c;kruskal重构树。 该算法重新构树&#xff0c;按边权排序每一条边…

分布式异步任务处理组件(七)

分布式异步任务处理组件底层网络通信模型的设计--如图&#xff1a; 使用Java原生NIO来实现TCP通信模型普通节点维护一个网络IO线程&#xff0c;负责和主节点的网络数据通信连接--这里的网络数据是指组件通信协议之下的直接面对字节流的数据读写&#xff0c;上层会有另一个线程负…

PoseiSwap:基于 Nautilus Chain ,构建全新价值体系

在 DeFi Summer 后&#xff0c;以太坊自身的弊端不断凸显&#xff0c;而以 Layer2 的方式为其扩容成为了行业很长一段时间的叙事方向之一。虽然以太坊已经顺利的从 PoW 的 1.0 迈向了 PoS 的 2.0 时代&#xff0c;但以太坊创始人 Vitalik Buterin 表示&#xff0c; Layer2 未来…

iOS-砸壳篇(两种砸壳方式)

CrackerXI砸壳呢&#xff0c;当时你要是使用 frida-ios-dump 也是可以的&#xff1b; https://github.com/AloneMonkey/frida-ios-dump frida-ios-dump: 代码中需要更改的&#xff1a;手机中的内网ip 密码 等 最后放到我的砸壳路径里&#xff1a; python dump.py -l查看应用…

SpringBoot自定义注解 + AOP+分布式Redis 防止重复提交

第一步 引入依赖pom.xml&#xff1a; <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId><version>3.16.3</version> <!-- 使用最新版本 --></dependency><dependency><groupId&g…

单片机传感器类型一览

一、单片机&#xff1a; c51、attiny85 < arduino、stm8/stm32 < esp8266、esp32、raspiberry pico 功能简单型&#xff1a;C51、Attiny85等 功能可以较复杂型&#xff1a;Arduino < STM32 联网、人工智能等高级复杂型&#xff1a;esp8266 < esp32、pico …

docker-compose

文章目录 一、docker-compose简介二、docker-compose安装1.安装命令2.卸载旧版本3.修改权限4、常用命令 总结 一、docker-compose简介 示例&#xff1a;pandas 是基于NumPy 的一种工具&#xff0c;该工具是为了解决数据分析任务而创建的。 二、docker-compose安装 1.安装命令…

JMeter 4.x 简单使用

文章目录 前言JMeter 4.x 简单使用1. 启动2. 设置成中文3. 接口测试3.1. 设置线程组3.2. HTTP信息请求头管理器3.3. 添加HTTP请求默认值3.4. 添加HTTP cookie 管理3.5. 添加http请求3.5.1. 添加断言 3.6. 添加监听器-查看结果树3.7. 添加监听器-聚合报告 4. 测试 前言 如果您觉…

打开的idea项目maven不生效

方法一&#xff1a;CtrlshiftA&#xff08;或者help---->find action&#xff09;&#xff0c; 输入maven&#xff0c; 点击add maven projects&#xff0c;选择本项目中的pom.xml配置文件&#xff0c;等待加载........ 方法二&#xff1a;view->tools windows->mave…

【RabbitMQ(day4)】SpringBoot整合RabbitMQ与MQ应用场景说明

一、SpringBoot 中使用 RabbitMQ 导入对应的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency>配置配置文件 spring:application:name: rabbitmq-springbo…

CSS3标题文本后的横线

示例代码 <template><div><h2 class"background">删除线</h2><h2 class"background"><span>左右两侧线</span></h2><h2 class"background double"><span>双层线</span></…

Python 扩展 快捷贴士:os模块下的创建目录的方式

Python3 os.makedirs() 方法 概述 os.makedirs() 方法用于递归创建多层目录。 如果子目录创建失败或者已经存在&#xff0c;会抛出一个 OSError 的异常&#xff0c;Windows上Error 183 即为目录已经存在的异常错误。 如果第一个参数 path 只有一级&#xff0c;即只创建一层目…

ADC前级的抗混叠滤波器(anti-alias filter设计

可以加我微信hezkz17申请加入数字音频系统研究开发交流答疑群(课题组) A/D前的抗混叠滤波器(anti-alias filter)设计方法? 作用, 抗混叠滤波器是在进行模数转换(A/D转换)之前,为了防止混叠现象而使用的滤波器。混叠是指当输入信号的频率超过采样率的一半时,在采样过程…

Android Glide MemorySizeCalculator计算值,Kotlin

Android Glide MemorySizeCalculator计算值,Kotlin for (i in 100..1000 step 50) {val calculator MemorySizeCalculator.Builder(this).setMemoryCacheScreens(i.toFloat()).setBitmapPoolScreens(i.toFloat()).setMaxSizeMultiplier(0.8f).setLowMemoryMaxSizeMultiplier(0…

后端登录安全的一种思路

PS:作者是小白能接触到的就只会这样写。勿喷。 前提 思路: 结合io流将登录token存储到配置文件中,不将token存储到浏览器端&#xff0c;从而避免盗取。 下面jwt的学习可以参考下这个: JWT --- 入门学习_本郡主是喵的博客-CSDN博客 JWT工具类 Component public class JWTtU…