css响应式自适应卡片布局效果代码-html代码-BFW代码库

css响应式自适应卡片布局效果代码

代码语言：html

所属分类：响应式

代码描述：css响应式自适应卡片布局效果代码，鼠标悬浮卡片有阴影效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --color-1: #07363F;
          --color-2: #FF9901;
        }
        
        * {
          box-sizing: border-box;
        }
        
        body {
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
          margin: 0;
          padding: 0;
          color: var(--color-1);
          line-height: 1.6;
        }
        
        h1 {
          font-size: 2rem;
          font-size: clamp(2rem, 1.2rem + 2.66vw, 4rem);
          margin: 0.3em 0 0.1em 0;
        }
        
        h2 {
          font-size: 1.5rem;
          font-size: clamp(1.5rem, 1.1rem + 1.33vw, 2.5rem);
          margin: 0.3em 0 0.1em 0;
        }
        
        p {
          max-width: 900px;
        }
        
        section {
          padding: 30px;
        }
        
        #section-one {
          background-color: var(--color-1);
          color: white;
        }
        
        #section-two {
          background: black;
          background: linear-gradient(180deg, var(--color-1) 0%, var(--color-1) 50%, var(--color-2) 50%, var(--color-2) 100%);
        }
        
        #section-tree {
          background-color: var(--color-2);
        .........完整代码请登录后点击上方下载按钮下载查看