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

实例:图片九宫格

技术栈: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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智慧渔港:海域感知与岸线监控实施方案(智慧渔港渔船综合管控平台)

文章目录 引言I 技术栈1.1 物理结构图1.2 功能逻辑结构图II 云台(大华)2.1 设备网络SDK运行在Mac平台2.2 WEB无插件开发包III 术语3.1 渔业引言 利用渔船现有的定位导航通讯设备等资源,实现岸线和近岸海域内违法船舶和可疑船舶预警、抓拍、跟踪和行为分析。 在渔船上安装风…

HCIA4.26-5.10

OSPF ——开放式最短路径优先协议 无类别链路状态IGP动态路由协议 距离矢量协议 运行距离矢量协议的路由器会周期性的泛洪自己的路由表&#xff0c;通过路由之间的交互&#xff0c;每台路由器都从相邻的路由器学习到路由条目&#xff0c;随后加载进自己的路由表中。对于网络…

解锁跨境电商新边界:Temu API接口深度解析引言

引言 在竞争激烈的跨境电商领域&#xff0c;高效、精准的数据获取成为商家制胜的关键。Temu&#xff08;拼多多跨境电商&#xff09;作为行业内的新秀&#xff0c;其API接口服务为商家提供了强大的数据交互能力&#xff0c;尤其是其获取商品详情的核心功能&#xff0c;更是为商…

MSPG3507——蓝牙接收数据显示在OLED,滴答定时器延时500MS

#include "ti_msp_dl_config.h" #include "OLED.h" #include "stdio.h"volatile unsigned int delay_times 0;//搭配滴答定时器实现的精确ms延时 void delay_ms(unsigned int ms) {delay_times ms;while( delay_times ! 0 ); } int a0; …

2025第13届常州国际工业装备博览会招商全面启动

常州智造 装备中国|2025第13届常州国际工业装备博览会招商全面启动 2025第13届常州国际工业装备博览会将于2025年4月11-13日在常州西太湖国际博览中心盛大举行&#xff01;目前&#xff0c;各项筹备工作正稳步推进。 60000平米的超大规模、800多家国内外工业装备制造名企将云集…

高级DBA带你解决MySql主从集群集群主库产生更多binlog引起数据无法正常写入引起生产事故紧急处理方法实战解决方法(全网唯一)

高级DBA带你解决MySql主备集群主库产生更多binlog引起数据无法正常写入引起生产事故紧急处理方法实战解决方法&#xff08;全网唯一&#xff09; 一、事故描述 早上刚来&#xff0c;监控报警&#xff0c;短信来了&#xff0c;业务主数据库宕机了&#xff0c;硬盘爆了&#xf…

501、二叉搜索树中的众数

给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;。如果树中有不止一个众数&#xff0c;可以按 任意顺序 返回。 假定 BST 满足如下定义&#xff1…

【单片机毕业设计选题24039】-基于单片机的太阳能储能智能恒温外卖柜设计

系统功能: 以单片机为控制核心&#xff0c;综合运用传感器、物联网、太阳能等技术&#xff0c;设计一种基于单片机为控制核心的智能恒温外卖柜。它由恒温系统、无线模块、智能提醒系统、供电系统等组成&#xff0c;通过太阳能电池板独立供电&#xff0c;利用太阳能储能元件驱动…

Qt:8.QWidget属性介绍(focuspolicy属性-控件焦点、stylesheet属性-为控件设置样式)

目录 一、focuspolicy属性-控件焦点&#xff1a; 1.1focuspolicy属性介绍&#xff1a; 1.2设置焦点策略——setFocusPolicy()&#xff1a; 1.3获取控件的焦点策略——focusPolicy()&#xff1a; 二、stylesheet属性——为控件设置样式&#xff1a; 2.1 stylesheet属性介绍…

【Python函数编程实战】:从基础到进阶,打造代码复用利器

文章目录 &#x1f68b;前言&#x1f680;一、认识函数&#x1f308;二、函数定义❤️三、函数调用⭐四、实参与形参&#x1f4a5;1. 形式参数&#x1f6b2;2. 实际参数&#x1f525;1. 位置参数☔2. 关键字参数&#x1f3ac;3. 默认参数&#x1f525;4. 可变数量参数(不定长参…

Jenkins教程-12-发送html邮件测试报告

上一小节我们学习了发送钉钉测试报告通知的方法&#xff0c;本小节我们讲解一下发送html邮件测试报告的方法。 1、自动化用例执行完后&#xff0c;使用pytest_terminal_summary钩子函数收集测试结果&#xff0c;存入本地status.txt文件中&#xff0c;供Jenkins调用 #conftest…

Zuul介绍

Zuul 是 Netflix 开源的一个云平台网络层代理&#xff0c;它主要用于路由、负载均衡、中间件通信和动态路由。Zuul 本质上是一个基于 JVM 的网关&#xff0c;它提供了以下功能&#xff1a; 1.路由&#xff1a;Zuul 允许客户端和服务器之间的所有入站和出站请求通过一个中心化的…

【单片机与嵌入式】stm32串口通信入门

一、串口通信/协议 &#xff08;一&#xff09;串口通信简介 串口通信是一种通过串行传输方式在电子设备之间进行数据交换的通信方式。它通常涉及两条线&#xff08;一条用于发送数据&#xff0c;一条用于接收数据&#xff09;&#xff0c;适用于各种设备&#xff0c;从微控制…

七一建党节|热烈庆祝中国共产党成立103周年!

时光荏苒&#xff0c;岁月如梭。 在这热情似火的夏日&#xff0c; 我们迎来了中国共产党成立103周年的重要时刻。 这是一个值得全体中华儿女共同铭记和庆祝的日子&#xff0c; 也是激励我们不断前进的重要时刻。 103年&#xff0c; 风雨兼程&#xff0c;砥砺前行。 从嘉兴…

【电路笔记】-A类放大器

A类放大器 文章目录 A类放大器1、A类放大器概述2、A类放大器基本通用发射极配置3、变压器耦合配置4、总结在 放大器类型简介的文章中,我们介绍了不同类别的放大器。 在本文中,我们将更详细地介绍A类放大器。 在介绍不同的A类放大器配置前,首先的是要记住放大器类别的选择标…

MySQL的简介和安装目录

今日总结到此结束&#xff0c;拜拜&#xff01;

内容分发网络(CDN)学习记录

目录 静态内容动态内容CDN工作原理CDN缓存 CDN关键技术1.内容路由功能2.内容分发技术&#xff1a;内容分发技术主要是PUSH和PULL3.内容存储技术4.内容管理技术 全局负载均衡基于DNS的GSLB基于HTTP重定向的GSLB基于IP欺骗的GSLB服务器群选择策略 静态内容 静态内容是不会因用户…

Mustango——音乐领域知识生成模型探索

Mustango&#xff1a;利用领域知识的音乐生成模型 论文地址&#xff1a;https://arxiv.org/pdf/2311.08355.pdf 源码地址&#xff1a;https://github.com/amaai-lab/mustango 论文题为**“**利用音乐领域知识开发文本到音乐模型’Mustango’”。它利用音乐领域的知识从文本指…

数据链路层分析

文章目录 前言一、数据链路层概述二、终端之间的通信三、帧格式1.Ethernet_II型2.IEEE 802.3 四、MTU分析五、数据帧的传输1.MAC地址2.单播3.广播4.组播5.数据帧的收发 前言 网络中传输数据需要定义并遵循一些标准&#xff0c;以太网是根据IEEE802.3标准来管理和控制数据帧的&…

值得收藏!盘点那些适合普通人方便又好用的AIGC工具!(下)

【导读】接上一篇文章&#xff0c;盘点国内外适合普通人能够轻松上手的AIGC工具&#xff08;上&#xff09;。今天又为大家整理了一些好用又方便的AI设计工具、AI办公工具、AI编程工具、AI指令工具和AI检测工具&#xff0c;如果有没更新到的工具也欢迎大家评论区交流。 一 、A…