当前位置： 首页 > news >正文

前端页面--视觉差效果

news 2026/2/10 22:46:45

代码

<!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;}
}

配图

请添加图片描述

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

相关文章：

前端页面--视觉差效果

代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><link rel"stylesheet" href"https://un…...

编程日记 2023/8/5 19:29:25

使用idea如何生成webservice客户端

需求阐述 在和外围系统对接的时候&#xff0c;对方只给了wsdl地址&#xff0c;记得之前了解到的webservice&#xff0c;可以用idea生成客户端代码。先记录生成的步骤 使用idea如何生成webservice客户端 1.创建一个Java项目 2.第二步生成代码 我的idea再右键要生成文件目录里…...

编程日记 2023/8/5 19:28:24

QT属性系统

1 介绍 Qt中的属性系统是用于为对象添加自定义属性并管理这些属性的一种机制。它允许开发者在不修改类定义的情况下&#xff0c;动态地为Qt对象添加新的属性&#xff0c;并且能够对这些属性进行读取、设置和监听。 属性系统在Qt中是通过Q_PROPERTY宏和QObject的元对象系统来实现…...

编程日记 2023/8/5 19:27:23

CentOS 7虚拟机 虚拟机安装安装增强VBox_GAs_6.1.22失败：modprobe vboxguest failed

我安装的CentOS 在安装增强工具的时候报错: 查阅资料后 &#xff0c;解决方法&#xff1a; 1、更新kernel内核版本&#xff1a; yum update kernel -y //安装kernel-devel和gcc编译工具链yum install -y kernel-devel gcc//更新kernel和kernel-devel到最新版本yum -y upgrade …...

编程日记 2023/8/5 19:26:21

【基础类】—DOM事件系统性学习

一、基本概念&#xff1a;DOM事件的级别 // DOM0 element.onclickfunction(){} // DOM2, 新增了冒泡和捕获 element.addEventListener(click,function(){}, false) // DOM3, 新增更多事件类型 鼠标、键盘等 element.addEventListener(keyup,function(){}, false)二、DOM事件模…...

编程日记 2023/8/5 19:25:20

【控制项目风险经验之谈】

项目风险是指在项目执行期间可能会影响项目目标、进度、成本或质量的不确定因素。在项目管理中&#xff0c;项目风险是不可避免的&#xff0c;因此需要采取措施来控制和管理项目风险。本篇文章将详细介绍如何控制项目风险的经验之谈。 一、确定风险管理计划 在项目启动阶段&a…...

编程日记 2023/8/5 19:24:16

SpringBoot复习：（10）SpringApplication中的initializer成员变量是怎么初始化的？

initializers成员变量定义如下&#xff1a; 在构造方法里通过setInitializers setInitializers的代码很简单&#xff1a; 其中的参数通过getSpringFactoriesInstances来获取的&#xff0c;该方法的代码如下&#xff1a; 其中调用的重载的方法代码如下&#xff1a; 它调用…...

编程日记 2023/8/5 19:23:15

Java三大特征之继承【超详细】

文章目录 一、继承概念二、继承的语法三、父类成员访问3.1子类中访问父类的成员变量3.2子类和父类成员变量同名3.3子类中访问父类的成员方法 四、super关键字五、子类构造方法六、super和this七、再谈初始化八、protected 关键字九、继承方式十、final 关键字十一、继承与组合 …...

编程日记 2023/8/5 19:22:12

python: lidar点云转BEV投影及pillar/voxel

点云BEV投影及pillar体素化 bev投影pillar/voxel bev投影 点云bev投影代码 pillar/voxel #!/usr/bin/env python # -*- encoding: utf-8 -*-import os import numpy as np import mathn_max_points_per_pillar 32 n_max_pillars 20736 # 144*144 20736 n_in_features 7…...

编程日记 2023/8/5 19:21:11

我的创作纪念日2023.8.5

机缘 在CSDN的创作开始于去年&#xff0c;创作的初衷是希望对自己的学习经历进行记录&#xff0c;同时也把自己的经验和收获传递给更多需要的小伙伴。创作博客的过程是一个将输入的知识进行再生产的过程&#xff0c;在此期间&#xff0c;知识获得了沉淀和提纯&#xff0c;思路…...

编程日记 2023/8/5 19:20:10

课程作业-基于Python实现的迷宫搜索游戏附源码

简单介绍一下 该项目不过是一个平平无奇的小作业&#xff0c;基于python3.8开发&#xff0c;目前提供两种迷宫生成算法与三种迷宫求解算法&#xff0c;希望对大家的学习有所帮助。 项目如果有后续的跟进将会声明&#xff0c;目前就这样吧~ 效果图如下所示&#xff1a; 环境…...

编程日记 2023/8/5 19:19:08

差值结构的相互作用能

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由6张二值化的图片组成&#xff0c;让A&#xff0c;B中各有3个点&#xff0c;且不重合&#xff0c;统计迭代次数并排序。 其中有10组数据 差值结构 A-B 迭代次数 构造平均列 平均列…...

编程日记 2023/8/5 19:18:06

UI、UE、UX的区别

UI、UE、UX的区别 大部分程序员可能对UI、UE、UX这几个概念不是很熟悉，但在整个项目周期里，这些岗位还是很重要的，特别是对于产品公司，这些岗位对于一个产品是否能成功起着关键的作用。老规矩，我们先看看这三个缩写的定义。 UI：是User Interface英文的缩写，即用户界面的…...

编程日记 2023/8/5 19:17:04

RabbitMQ 教程 | 第10章 网络分区

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…...

编程日记 2023/8/5 19:16:03

Flask学习笔记_异步论坛（四）

Flask学习笔记_异步论坛&#xff08;四&#xff09; 1.配置和数据库链接1.exts.py里面实例化sqlalchemy数据库2.config.py配置app和数据库信息3.app.py导入exts和config并初始化到app上 2.创建用户模型并映射到数据库1.models/auth.py创建用户模型2.app.py导入模型并用flask-mi…...

编程日记 2023/8/5 19:15:02

K8S系列文章之 kubeasz部署K8S环境

自动化安装方式&#xff08;kubeasz&#xff09;* 生产环境推荐&#xff08;首次安装下载相关配置和安装包&#xff09;是基于Ansible实现的部署工具 简单介绍 每一具体k8s集群的详细配置参数文件 Ansible 任务配置文件 镜像安装包 安装部署步骤 前提 &#xff1a; 保证Ansib…...

编程日记 2023/8/5 19:13:59

nodejs和vue的关系--vue3教程

文章目录 总结性nodejs和vue的关系nodejs和vue产生关系的周边nodejs和vue的区别 总结性 vue是一套用于构建用户界面的前端框架&#xff0c;如果web项目中有前后端分离&#xff0c;前端项目想单独运行在服务器端&#xff0c;那么就要依赖nodeJs。 Vue的配套周边会和Node.js产生…...

编程日记 2023/8/5 19:12:58

前端大屏尺寸实现自适应屏幕大小

说在前面 目前很多业主在使用系统的时候都会有大屏的需求&#xff0c;很多屏幕并不会像我们开发的屏幕一样标准&#xff0c;比如1920*1080&#xff0c;这样我们就需要根据业主的屏幕尺寸进行适配&#xff0c;避免一些图表或文字在大屏中出现偏移&#xff0c;影响视觉观感。 方…...

编程日记 2023/8/5 19:11:56

leetcode 416. 分割等和子集

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

编程日记 2023/8/5 19:10:54

cesium加载三维模型3dtiles

1.将数据和代码放到一个目录下 目的&#xff1a;为避免跨域 输入cmd命令 python3 -m http.server 5500 2.三维服务地址 http://127.0.0.1:5500/data/mars3d-max-shihua-3dtiles-master/tileset.json 3.模型网页地址 http://127.0.0.1:5500/cesium/cesium%E5%8A%A0%E8%BD%…...

编程日记 2023/8/5 19:09:54

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2026/1/31 6:12:33

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

Kafka主题运维全指南：从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

编程新知 2025/6/10 21:14:43

深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

编程新知 2025/9/24 3:56:34

mac：大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

编程新知 2026/2/4 0:46:21

大模型——基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网：https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘，大小大概2.9G，做这行最忌讳的就是安装软件全装C盘，所以我调整了下安装路径。 新建安装目录：E:\MyS…...

编程新知 2026/2/6 11:33:19

react-pdf（pdfjs-dist）如何兼容老浏览器（chrome 49）

之前都是使用react-pdf来渲染pdf文件&#xff0c;这次有个需求是要兼容xp环境&#xff0c;xp上chrome最高支持到49&#xff0c;虽然说iframe或者embed都可以实现预览pdf&#xff0c;但为了后续的定制化需求&#xff0c;还是需要使用js库来渲染。 chrome 49测试环境 能用的测试…...

编程新知 2026/2/9 6:18:09

循环语句之while

While语句包括一个循环条件和一段代码块&#xff0c;只要条件为真&#xff0c;就不断 循环执行代码块。 1 2 3 while (条件) { 语句 ; } var i 0; while (i < 100) {console.log(i 当前为&#xff1a; i); i i 1; } 下面的例子是一个无限循环&#xff0c;因…...

编程新知 2026/1/27 2:45:27

【笔记】结合 Conda任意创建和配置不同 Python 版本的双轨隔离的 Poetry 虚拟环境

如何结合 Conda 任意创建和配置不同 Python 版本的双轨隔离的Poetry 虚拟环境&#xff1f; 在 Python 开发中&#xff0c;为不同项目配置独立且适配的虚拟环境至关重要。结合 Conda 和 Poetry 工具&#xff0c;能高效创建不同 Python 版本的 Poetry 虚拟环境&#xff0c;接下来…...

编程新知 2026/2/10 2:02:16