HTML5+CSS3+JS小实例:图片九宫格

news2024/11/18 12:34:42

实例:图片九宫格

技术栈:HTML+CSS+JS

效果:

源码:

【HTML】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片九宫格</title>
    <link rel="stylesheet" href="247.css">
</head>
<body>
    <div class="img-container">
        <div class="img-item"></div>
        <div class="img-item"></div>
        <div class="img-item"></div>
        <div class="img-item"></div>
        <div class="img-item"></div>

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

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

相关文章

智慧城市新利器:免费可视化工具助力高效管理

在智慧城市的建设中&#xff0c;实现高效的统筹管理是至关重要的。通过免费可视化工具“山海鲸可视化”&#xff0c;这一目标可以轻松达成。山海鲸可视化是一款免费可视化工具&#xff0c;具备二三维融合、易用性、安全性以及高质量画面渲染等特色&#xff0c;是制作智慧城市可…

通义听悟--一个懂你的AI助理

通义听悟--一个懂你的AI助理 通义听悟音频转文字本地音视频转文字云盘音视频转文字 实时记录通义听悟进阶体验感受功能建议产品联动 通义听悟 在体验通义听悟之前&#xff0c;我们首先得知道什么是通义听悟&#xff1f;有什么应用场景&#xff1f; 通义听悟简单来说就是你的工…

Java短剧系统

探索影视新体验 &#x1f4f1;一、引言&#xff1a;短剧时代的来临 在数字化的今天&#xff0c;我们见证了许多内容消费模式的转变。从长篇大论的电视剧到短小精悍的短视频&#xff0c;再到如今备受瞩目的短剧&#xff0c;观众对于影视内容的需求越来越多元化。而短剧系统微信…

Es结合springboot(笔记回忆)

导包 <!--导入es--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId> </dependency> <dependency><groupId>org.springframework.boot<…

前端vue项目升级nodejs后无法运行了

问题描述&#xff1a; 运行、打包都正常的vue项目&#xff0c;在将nodejs升级到v20.14.0后&#xff0c;均报错了&#xff1a; Error: error:0308010C:digital envelope routines::unsupported opensslErrorStack: [ error:03000086:digital envelope routines::initializ…

Centos下rpm和yum执行卡住问题(已解决)

问题描述 执行rpm和yum卡住&#xff0c; 没有任何报错信息&#xff0c;且无法 ctrl c 终止&#xff0c;只能通过后台 kill -9 杀死。 问题排查&#xff1a; 查看yum日志&#xff1a;yum -vv 软件包 会发现卡在 loading keyring from rpmdb&#xff0c;即load DB存在问题。 …

Java - 程序员面试笔记记录 实现 - Part2

2.1 输入输出流 流可以被看作一组有序的字节集合&#xff0c;即数据在两个设备间的传输。 字节流&#xff1a;以字节作为单位&#xff0c;读到一个字节就返回一个字节&#xff1b;InputStream & OutputStream。 字符流&#xff1a;使用字节流读到一个到多个字节先查询码…

【技巧】ArcGIS Pro设置自动保存数据编辑内容

一、工程文件自动保存 ArcGIS Pro软件的工程也可以自动保存备份。默认备份时间是5分钟&#xff0c;您可以在【工程】→【选项】→【常规】→【工程恢复】中调整自动备份时间。 二、数据编辑自动保存 操作方法&#xff1a;【工程】→【选项】→【编辑】→【会话】&#xff0c;勾…

安卓app开发-基础-本地环境安装android studio且配置参数

安卓app开发-基础-本地环境安装android studio且配置参数&#xff01;今天为大家介绍一下&#xff0c;如何在自己本地电脑安装android ,studio和启动一个简单的java版本的项目。 第一步&#xff0c;去下面的地址&#xff0c;下载一个安装文件。 地址&#xff1a;AndroidDevToo…

Stable Diffusion 商业变现与绘画大模型多场景实战

前言 ai绘画软件Stable Diffusion是一种通过模拟扩散过程&#xff0c;将噪声图像转化为目标图像的文生图模型&#xff0c;具有较强的稳定性和可控性&#xff0c;可以将文本信息自动转换成高质量、高分辨率且视觉效果良好、多样化的图像。在日常工作中&#xff0c;ai绘画软件St…

(3)Java 8 实战第二版——使用流和Lambda进行高效编程

集合工厂 List<String> friends Arrays.asList("Raphael", "Olivia"); friends.set(0, "Richard"); friends.add("Thibaut"); ←---- 抛出一个UnsupportedModificationException异常通过工厂方法创建的Collection的底层…

加载数据到mysql并解决原始数据乱码问题

查看linux上数据&#xff1a; 使用命令转换编码&#xff1a; iconv -f GBK -t UTF-8 toutiao.csv -o toutiao2.csv加载数据到mysql: load data local infile /root/toutiao2.csv INTO TABLE pdz FIELDS TERMINATED BY , LINES TERMINATED BY \r\n;

中霖教育怎么样?税务师通过率高吗?

中霖教育怎么样?税务师通过率高吗? 我们在税务师考试培训方面有着不错的成绩&#xff0c;这都是老师与学员共同努力的结果。 采用小班教学模式&#xff0c;确保每位学员都能得到足够的关注和指导&#xff0c;在学习过程中针对学员的薄弱环节进行专项突破。 因为大部分学员…

《昇思25天学习打卡营第4天|数据集 Dataset》

文章目录 前言&#xff1a;今日所学&#xff1a;1. 数据集加载2. 数据集迭代3. 数据集常用操作与自定义数据集 前言&#xff1a; 今天学习的是数据集的内容。首先&#xff0c;数据是深度学习的基石&#xff0c;高质量的数据输入能够在整个深度神经网络中发挥积极作用。MindSpo…

ATA-7015铁电仪高压放大器的作用是什么

铁电仪高压放大器是科学实验和工业应用中的一种重要设备&#xff0c;主要用于放大铁电仪测量中产生的微弱信号。铁电仪是一种用于测量材料电介质中铁电性质的仪器&#xff0c;其工作原理基于材料在电场中表现出的电极化现象。高压放大器在铁电仪中的作用是将由被测材料产生的微…

Golang-slice理解

slice golang-slice语雀笔记整理 slicego为何设计slice&#xff1f;引用传递实现扩容机制 go为何设计slice&#xff1f; 切片对标其他语言的动态数组&#xff0c;底层通过数组实现&#xff0c;可以说是对数组的抽象&#xff0c;底层的内存是连续分配的所以效率高&#xff0c;可…

qt结合vs2022安装

进入清华大学开源软件&#xff1a; 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 下载完成后&#xff0c;双击进行安装&#xff1a; 进入邮箱进行验证&#xff1a; 可能是因为网络问题&#xff0c;无法安装。 重新安装5.12.12版本。 安装后启动失败&#xff0c;重新…

tauri使用github action实现跨平台编译并解决编译错误,mac已损坏,无法打开,你应该将它移到废纸篓解决办法

正常编译为跨平台结果就像上面的&#xff0c;有mac/windows/linux的安装程序&#xff0c;直接下载就可以安装使用&#xff0c;我的这个livebox桌面端仓库地址&#xff1a;GitHub - Sjj1024/LiveBox: livebox&#xff0c;里面有编译文件可以参考。今天主要讲一下遇到的问题。 官…

【FFmpeg】av_write_frame函数

目录 1.av_write_frame1.1 写入pkt&#xff08;write_packets_common&#xff09;1.1.1 检查pkt的信息&#xff08;check_packet&#xff09;1.1.2 准备输入的pkt&#xff08;prepare_input_packet&#xff09;1.1.3 检查码流&#xff08;check_bitstream&#xff09;1.1.4 写入…

C++知识点总结全系列 (05):IO 类的详细总结和分析

1、基类 istream 和 ostream (1)istream A.What 输入流的抽象类&#xff0c;是所有输入流类的基类 B.Why&#xff08;输入流的作用&#xff09; 用于从数据源&#xff08;如文件、标准输入设备等&#xff09;读取数据 (2)ostream A.What 输出流的抽象类&#xff0c;是所有输…