css响应式布局

这里写自定义目录标题

  • 1.效果展示
  • 2.使用grid布局
  • 3.使用flex布局

1.效果展示

2.使用grid布局

DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>文档标题title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            gap: 10px 10px;
        }

        .item {
            padding: 10px;
            overflow: auto;
            border-width: 1px;
            border-color: black;
        }

        .cover {
            position: relative;
            width: 100%;
            padding-bottom: 66%;
        }

        .cover img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .info {
            padding-top: 10px;
        }
        @media screen and (max-width: 960px) {}

        @media screen and (max-width: 1024px) {
            .container {}
        }

        @media screen and (max-width: 768px) {
            .container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media screen and (max-width: 400px) {
            .container {
                grid-template-columns: repeat(1, 1fr);
            }
        }

        .color-1 {
            background-color: aqua;
        }

        .color-2 {
            background-color: blue;
        }

        .color-3 {
            background-color: blueviolet;
        }

        .color-4 {
            background-color: brown;
        }

        .color-5 {
            background-color:greenyellow;
        }
    style>
head>

<body>
    <div class="container">
        <div class="item color-1">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
        <div class="item color-2">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
        <div class="item color-3">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
        <div class="item color-4">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
        <div class="item color-5">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
        <div class="item color-1">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
    div>
    
body>

html>

3.使用flex布局

DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>文档标题title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            display: flex;
            flex-wrap: wrap;
        }

        .item {
            display: block;
            flex: 0 0 auto;
            width: 25%;
        }

        .cover {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
        }

        .cover img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .info {
            padding-top: 10px;
        }

        @media screen and (max-width: 960px) {}

        @media screen and (max-width: 1024px) {
            .item {
                width: 50%;
            }
        }

        @media screen and (max-width: 768px) {}

        @media screen and (max-width: 400px) {
            .item {
                width: 100%;
            }
        }

        .color-1 {
            background-color: aqua;
        }

        .color-2 {
            background-color: blue;
        }

        .color-3 {
            background-color: blueviolet;
        }

        .color-4 {
            background-color: brown;
        }

        .color-5 {
            background-color: greenyellow;
        }
    style>
head>

<body>
    <div class="container">
        <div class="item color-1">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
        <div class="item color-2">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
        <div class="item color-3">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
        <div class="item color-4">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
        <div class="item color-5">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
        <div class="item color-1">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                div>
            a>
            <div class="info">
                <div class="title">这是一节英语课2div>
                <div class="subtitle">1 chaper | 2 videosdiv>
                <div class="price">i100AUDdiv>
            div>
        div>
    div>

body>

html>

你可能感兴趣的:(前端,html,css,css,前端,vue.js)