前端JS特效第57波:响应式博客网站图文幻灯片

news2024/11/27 6:23:31

响应式博客网站图文幻灯片,先来看看效果:

部分核心的代码如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8">
<title>响应式博客幻灯片演示</title>


<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/style.css">

</head>

<body>
<div class="blog-slider">
    <div class="blog-slider__wrp swiper-wrapper">
        <div class="blog-slider__item swiper-slide">
            <div class="blog-slider__img">
                <img src="img/1.png" alt="秋叶和果实秋天背景矢量素材">
            </div>
            <div class="blog-slider__content">
                <span class="blog-slider__code">2018-08-31</span>
                <div class="blog-slider__title">秋叶和果实秋天背景矢量素材</div>
                <div class="blog-slider__text">这是一款秋叶和果实秋天背景矢量素材,格式为 EPS,含 JPG 预览图。</div>
                <a href="" class="blog-slider__button">详情</a>
            </div>
        </div>

        <div class="blog-slider__item swiper-slide">
            <div class="blog-slider__img">
                <img src="img/2.png" alt="现代舒适客厅矢量素材">
            </div>
            <div class="blog-slider__content">
                <span class="blog-slider__code">2018-09-04</span>
                <div class="blog-slider__title">现代舒适客厅矢量素材</div>
                <div class="blog-slider__text">这是一款现代风格的舒适客厅矢量素材,包含了窗户、柜子、盆栽、沙发、茶几、地毯、落地灯、挂画等元素。素材提供了 EPS 和 AI 两种格式,含 JPG 预览图。</div>
                <a href="" class="blog-slider__button">详情</a>
            </div>
        </div>

        <div class="blog-slider__item swiper-slide">
            <div class="blog-slider__img">
                <img src="img/3.jpg" alt="惊悚的万圣节背景矢量素材">
            </div>
            <div class="blog-slider__content">
                <span class="blog-slider__code">2018-09-03</span>
                <div class="blog-slider__title">惊悚的万圣节背景矢量素材</div>
                <div class="blog-slider__text">这是一款惊悚的万圣节背景矢量素材,由黑夜、月亮、巫师、枯树、蝙蝠等元素设计。素材提供了 EPS 和 AI 两种格式,含 JPG 预览图。</div>
                <a href="" class="blog-slider__button">详情</a>
            </div>
        </div>
    </div>
    <div class="blog-slider__pagination"></div>
</div>

<script src="js/swiper.min.js"></script>
<script src="js/index.js"></script>

</body>

</html>

全部代码:响应式博客网站图文幻灯片

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

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

相关文章

pyuic5将ui文件转换为py文件报错:one input ui-file must be specified;no element found;

ERROR 1 文件命名不规范Solution 1:文件命名不能有空格 ERROR 2未选中ui文件 Solution 2:选中要转换成py 的文件

深入解析:百数平台图表联动功能设置与实战应用

在当今数据驱动的时代&#xff0c;图表的联动功能已成为数据分析的得力助手。通过深度整合各类图表&#xff0c;如柱形图、折线图、饼图、雷达图、条形图、透视图、面积图、双轴图、地图以及漏斗图等&#xff0c;我们实现了图表之间的无缝衔接&#xff0c;使得数据的呈现与探索…

基于FFmpeg和SDL的音视频解码播放的实现过程与相关细节

目录 1、视频播放器原理 2、FFMPEG解码 2.1 FFMPEG库 2.2、数据类型 2.3、解码 2.3.1、接口函数 2.3.2、解码流程 3、SDL播放 3.1、接口函数 3.2、视频播放 3.3、音频播放 4、音视频的同步 4.1、获取音频的播放时间戳 4.2、获取当前视频帧时间戳 4.3、获取视…

RFID标签打印机助力服装厂实现智能化管理

随着服装行业的快速发展&#xff0c;传统的管理模式已无法满足现代化生产的需求。RFID技术作为一种先进的自动识别技术&#xff0c;正在改变服装厂的管理方式。常达智能物联致力于为客户提供高效的RFID解决方案&#xff0c;其中RFID标签打印机在服装厂的应用尤为重要。本文将探…

IDEA-安装插件 驼峰下划线转换

第一步&#xff1a;安装 file-settings-plugins-在marketplace搜索“CamelCase”-点击安装 第二步&#xff1a;设置 file-settings-editor-camel_case 第三步&#xff1a;使用 选中想转换的遍历 使用快捷键 Alt Shift U

【算法专题】双指针算法之LCR 179. 查找总价格为目标值的两个商品(力扣)

欢迎来到 CILMY23的博客 &#x1f3c6;本篇主题为&#xff1a;双指针算法之LCR 179. 查找总价格为目标值的两个商品&#xff08;力扣&#xff09; &#x1f3c6;个人主页&#xff1a;CILMY23-CSDN博客 &#x1f3c6;系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法…

C++学习笔记——模板

学习视频 文章目录 模板的概念函数模板函数模板语法函数模板注意事项函数模板案例普通函数与函数模板的区别普通函数与函数模板的调用规则模板的局限性 类模板类模板与函数模板区别类模板中成员函数创建时机类模板对象做函数参数类模板与继承类模板成员函数类外实现类模板分文件…

2024年钉钉杯大数据竞赛A题超详细解题思路+python代码手把手保姆级运行讲解视频+问题一代码分享

初赛A&#xff1a;烟草营销案例数据分析 AB题综合难度不大&#xff0c;难度可以视作0.4个国赛&#xff0c;题量可以看作0.35个国赛题量。适合于国赛前队伍练手&#xff0c;队伍内磨合。竞赛获奖率50%&#xff0c;八月底出成绩&#xff0c;参赛人数3000队左右。本文将为大家进行…

docker安装部署elasticsearch7.15.2

docker安装部署elasticsearch7.15.2 1.拉取es镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:7.15.2如果不想下载或者镜像拉去太慢可以直接下载文章上面的镜像压缩包 使用镜像解压命令 docker load -i elasticsearch-7-15-2.tar如下图所示就表示镜像解压成…

基于GitHub page和Hexo主题搭建个人博客(win)

1.安装git git官网下载地址&#xff1a;Git - Downloads (git-scm.com) (1)下载&#xff1a;进入官网&#xff0c;选择对应版本下载&#xff0c;得到.exe文件 (2)安装&#xff1a;打开.exe文件&#xff0c;进行如下操作 (3)安装好后&#xff0c;右击鼠标&#xff0c;点击显示…

大数据学习之Flink基础

Flink基础 1、系统时间与时间时间 系统时间&#xff08;处理时间&#xff09; 在Sparksreaming的任务计算时&#xff0c;使用的是系统时间。 假设所用窗口为滚动窗口&#xff0c;大小为5分钟。那么每五分钟&#xff0c;都会对接收的数据进行提交任务. 但是&#xff0c;这里有…

深度学习的前沿主题:GANs、自监督学习和Transformer模型

&#x1f48e; 欢迎大家互三&#xff1a;2的n次方_ &#x1f48e;1. 介绍 深度学习在人工智能领域中占据了重要地位&#xff0c;特别是生成对抗网络&#xff08;GANs&#xff09;、自监督学习和Transformer模型的出现&#xff0c;推动了图像生成、自然语言处理等多个领域的创…

AI跟踪报道第49期-新加坡内哥谈技术-本周AI新闻: 开源AI王者归来的一周

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

杭州社保卡办理-农业银行版本

step 1、杭州滨江高新支行 被告知只能工作日办理&#xff08;由于工作时间冲突&#xff0c;办理不了&#xff09; 询问哪个支行可以办&#xff0c;回答说不知道&#xff0c;让我自己去问。银行服务态度较差。 step 2、杭州滨江江南支行 市民卡显示这家&#xff0c;周六可以…

QT开发(QT的基本概述和环境的安装)

QT的概述 一.QT的介绍背景1.1 什么是QT1.2QT的发展史1.3 Qt支持的平台1.4QT版本1.5QT的优点1.6QT的应用场景 二.搭建QT开发环境2.1 QT的开发工具的下载2.2 QT环境变量配置 三.QT的三种基类四.QT Hello World程序4.1使用按钮实现4.1.1 代码方式实现4.1.2 可视化操作实现 一.QT的…

Java_如何在IDEA中使用Git

注意&#xff1a;进行操作前首先要确保已经下载git&#xff0c;在IDEA中可以下载git&#xff0c;但是速度很慢&#xff0c;可以挂梯子下载。 导入git仓库代码 第一次导入&#xff1a; 首先得到要加载的git仓库的url&#xff1a; 在git仓库中点击 “克隆/下载” 按钮&#xf…

【马斯洛需求层次理论】

马斯洛层次需求理论指导人生 作者 π 作者前言&#xff1a; 我认为人生是要一些原则和理论支撑指导的&#xff0c;不然人就很容易失去方向&#xff0c;动力。活得也会非常的累。 有时候不仅不自知&#xff0c;很多情况下不能理解他人的行为和感受。这就是让自己的社交变得很不…

推荐系统三十六式学习笔记:工程篇.常见架构25|Netflix个性化推荐架构

目录 架构的重要性经典架构1.数据流2.在线层3.离线层4.近线层 简化架构总结 你是否曾经觉得算法就是推荐系统的全部&#xff0c;即便不是全部&#xff0c;至少也是嫡长子&#xff0c;然而实际上&#xff0c;工程实现才是推荐系统的骨架。如果没有好的软件实现&#xff0c;算法不…

LoRaWAN网络中的chirpstack

目录 一、chirpstack介绍 二、网关与chirpstack之间的通信 三、NS与AS之间的通信 1、Protobuf 2、gRPC 一、chirpstack介绍 ChirpStack 是一个开源的 LoRaWAN 网络服务器&#xff0c;可用于 设置私有或公共 LoRaWAN 网络。ChirpStack 提供了一个 Web 界面 用于管理网关、设…

【计算机网络】OSPF单区域实验

一&#xff1a;实验目的 1&#xff1a;掌握在路由器上配置OSPF单区域。 2&#xff1a;学习OSPF协议的原理&#xff0c;及其网络拓扑结构改变后的变化。 二&#xff1a;实验仪器设备及软件 硬件&#xff1a;RCMS交换机、网线、内网网卡接口、Windows 2019操作系统的计算机等。…