HTML+CSS 图片轮播卡片

news2024/10/3 22:15:30

效果演示

13-图片轮播卡片.gif

实现了一个图片轮播卡片的效果,包括一个容器(.container)、一个卡片(.card)、一个图片(.img)、一个内容区域(.content)和一个滑动条(.slider)。卡片包含一张图片和一些文本内容,图片可以通过滑动条进行切换。整个卡片具有圆角和阴影效果,使其看起来更加美观。

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播卡片</title>
    <link rel="stylesheet" href="./13-图片轮播卡片.css">
</head>

<body>
    <div class="container">
        <input type="radio" name="select" id="slide_1" checked hidden>
        <input type="radio" name="select" id="slide_2" hidden>
        <input type="radio" name="select" id="slide_3" hidden>

        <div class="slider">
            <label for="slide_1" class="slide slide-1"></label>
            <label for="slide_2" class="slide slide-2"></label>
            <label for="slide_3" class="slide slide-3"></label>
        </div>

        <div class="card card-1">
            <div class="img">
                <img src="./images/1.jpg" alt="波雅·汉库克">
            </div>
            

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

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

相关文章

嵌入式之存储基本知识

系列文章目录 嵌入式之存储基本知识 嵌入式之存储基本知识 系列文章目录一、RAM与ROM二、DRAM和SRAM三、SDRAM&#xff08;DRAM的一种&#xff09;四、DDR 一、RAM与ROM RAM&#xff08;随机存取存储器&#xff09;和ROM&#xff08;只读存储器&#xff09;是两种不同类型的计…

COMPUTEX 2024正式开启:华硕NUC带您领略全芯AI体验

6月4日&#xff0c;一年一度的台北国际电脑展&#xff08;COMPUTEX 2024&#xff09;在中国台北拉开序幕&#xff0c;以“AI串联&#xff0c;共创未来”为主题&#xff0c;将全球的科技企业汇聚于此&#xff0c;并推出多项新技术及产品。 华硕也在这场科技盛会中展示了多款创新…

Nvidia Jetson/Orin +FPGA+AI大算力边缘计算盒子:无人机自主飞行软件平台

案例简介 北京泛化智能科技有限公司&#xff08;gi&#xff09;所主导开发的 Generalized Autonomy Aviation System (GAAS) 是为无人机以及城市空中交通 (UAM, Urban Air Mobility) 所设计的开源无人机自主飞行框架。通过 SLAM、路径规划和 Global Optimization Graph 等功能…

wordpress里面嵌入哔哩哔哩视频的方法

我们正常如果从blibli获取视频分享链接然后在wordpress里面视频URL插入&#xff0c;发现是播放不了的 而视频嵌入代码直接粘贴呢窗口又非常的小 非常的难受&#xff0c;就需要更改一下代码。你可以在在allowfullscreen"true"的后面&#xff0c;留1个空格&#xff…

小白跟做江科大32单片机之LED闪烁

原理介绍 原理介绍详见&#xff1a; 【STM32】江科大STM32学习笔记汇总(已完结)_stm32江科大笔记-CSDN博客https://blog.csdn.net/u010249597/article/details/134762513 项目准备 1.在项目文件夹中新建3-1 LED文件夹 2.keil新建项目&#xff0c;打开新建的3-1 LED&#xf…

crossover mac好用吗 CrossOver Mac怎么下载 Mac用crossover损害电脑吗

CrossOver 是一款可以让Mac用户能够自由运行和游戏windows游戏软件的虚拟机类应用&#xff0c;虽然能够虚拟windows但是却并不是一款虚拟机&#xff0c;也不需要重启系统或者启动虚拟机&#xff0c;类似于一种能够让mac系统直接运行windows软件的插件。它以其出色的跨平台兼容性…

超声波清洗机哪个品牌比较好耐用?四大知名爆款王牌安利!

随着科技的不断进步&#xff0c;超声波眼镜清洗机成为了眼镜清洗的新选择。它利用了超声波技术来彻底清洁眼镜&#xff0c;去除顽固的污渍和细菌。由于市面上关于超声波清洗机的型号选择实在是太多了&#xff0c;让很多真心想要选购超声波清洗机的朋友犯了难。纠结着不知道应该…

SQL实验 带函数查询和综合查询

一、实验目的 1&#xff0e;掌握Management Studio的使用。 2&#xff0e;掌握带函数查询和综合查询的使用。 二、实验内容及要求 1&#xff0e;统计年龄大于30岁的学生的人数。 --统计年龄大于30岁的学生的人数。SELECT COUNT(*) AS 人数FROM StudentWHERE (datepart(yea…

python语言中循环语句的小结

如上图所示&#xff0c;在C/C/Java中如果使用的for循环语句和do while语句都与python中的while循环语句类似&#xff0c;所以在C/C/Java中如果使用的for循环语句在python中可以用while语句来替换。

python批量调整word含有关键字句子样式

代码&#xff1a; from docx import Document from docx.shared import RGBColor obj Document(装机必读调整样式.docx) word 软件 def set_run(run):#设置run的字体大小、是否加粗以及字体颜色run.font.size font_sizerun.bold boldrun.font.color.rgb color for p in obj.…

小型气象站—农田环境进行气象监测

TH-QC8小型气象站在农田环境进行气象监测的应用非常广泛&#xff0c;它能够提供准确、及时的气象数据&#xff0c;为农业生产提供有力的支持。以下是关于小型气象站在农田环境气象监测中的具体应用和相关特点&#xff1a; 小型气象站能够实时监测农田环境中的气象参数&#xff…

实战经验:升级主键类型为 BigInt 的应用程序兼容性保证文章:

在数据库设计和应用开发中&#xff0c;主键的类型选择至关重要。当需要处理更大数据量或提升数据完整性时&#xff0c;将主键类型从其他类型升级为 BigInt 是一种常见做法。然而&#xff0c;这可能会导致应用程序的兼容性问题。以下是确保应用程序完美兼容的一些实战经验。 文档…

HarmonyOS(31) @Prop标签使用指南

Prop Prop简介State和Prop的同步场景使用示例参考资料 Prop简介 子组件中Prop装饰的变量可以和父组件建立单向的同步关系。子组件Prop装饰的变量是可变的&#xff0c;但是变化不会同步回其父组件。Prop变量允许子组件修改&#xff0c;但修改后的变化不会同步回父组件。当父组件…

【ARM】PK51-如何添加芯片型号的方法

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 遇到打开工程提示没有该芯片设备提示如何解决。 2、 问题场景 客户发来一个工程文件&#xff0c;打开后软件提示没有发现该芯片设备提示。 图 1 3、软硬件环境 1&#xff09;、软件版本&#xff1a;keil μvision…

【MySQL数据库】:MySQL内外连接

目录 内外连接和多表查询的区别 内连接 外连接 左外连接 右外连接 简单案例 内外连接和多表查询的区别 在 MySQL 中&#xff0c;内连接是多表查询的一种方式&#xff0c;但多表查询包含的范围更广泛。外连接也是多表查询的一种具体形式&#xff0c;而多表查询是一个更…

微服务开发与实战Day02 - Docker

一、Docker快速入门 快速构建、运行、管理应用的工具 安装部署教程&#xff1a;Docs 1. 部署MySQL 测试连接&#xff1a; 镜像和容器 当我们利用Docker安装应用时&#xff0c;Docker会自动搜索并下载应用镜像&#xff08;image&#xff09;。镜像不仅包含应用本身&#xff…

数字IC后端物理验证PV | TSMC 12nm Calibre Base Layer DRC案例解析

基于TSMC 12nm ARM A55 upf flow后端设计实现训练营将于6月中旬正式开班&#xff01;小班教学&#xff01;目前还有3个名额&#xff0c;招满为止&#xff01;有需要可以私信小编 ic-backend2018报名。吾爱IC社区所有训练营课程均为直播课&#xff01; 这个课程支持升级成双核A…

LeetCode322.零钱兑换

文章目录 题目描述解题思路递归记忆化搜索动态规划另一种实现 题目描述 https://leetcode.cn/problems/coin-change/description/?envTypestudy-plan-v2&envIdtop-interview-150 给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount …

【全开源】废品回收垃圾回收小程序APP公众号源码PHP版本

&#x1f31f;废品回收小程序&#xff1a;绿色生活的新助手&#x1f331; 一、引言 随着环保意识的逐渐提高&#xff0c;废品回收成为了我们日常生活中的重要一环。但是&#xff0c;如何更方便、高效地进行废品回收呢&#xff1f;今天&#xff0c;我要向大家推荐一款超级实用的…

UE4获取动画序列资产的动画时长

谢谢”朝闻道“大佬的指点~