HTML、CSS、JS写扩展卡片

潇潇学编程

于 2022-07-15 09:47:15 发布

阅读量336

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/knows1/article/details/125797838

版权

本文详细介绍了如何利用HTML构建基础卡片结构，通过CSS实现美观的样式设计，并结合JavaScript实现卡片内容的动态扩展效果，为前端开发者提供了一个实用的技术指南。

摘要由CSDN通过智能技术生成

1.HTML部分

<!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="css/style.css">
</head>
<body>
   <div class="container">
       <div class="panel active" style="background-image: url(images/1.jpg);">
        <h3>这是第一张风景图</h3>
    </div>
    <div class="panel " style="background-image: url(images/2.jpg);">
        <h3>这是第二张风景图</h3>
    </div>
    <div class="panel " style="background-image: url(images/3.jpg);"&