首页 > 其他分享 >html grid布局

html grid布局

时间:2024-09-17 19:23:49浏览次数:8  
标签:color 布局 wrapper height html grid 测试 20px

 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrapper">
        <div class="item">
            测试
        </div>
        <div class="item">
            测试
        </div>
        <div class="item">
            测试
        </div>
        <div class="item">
            测试
        </div>
        <div class="item">
            测试
        </div>
        <div class="item">
            测试
        </div>
        <div class="item">
            测试
        </div>
        <div class="item">
            测试
        </div>
        <div class="item">
            测试
        </div>
        <div class="item">
            测试
        </div>
        <div class="item">
            测试
        </div>
    </div>
</body>
<style>
    .wrapper {
        width: 100vw;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: space-between;
    }

    .wrapper .item {
        line-height: 170%;
        background-color: beige;
        border-radius: 20px;
        margin: 20px;
        padding: 20px;
        text-align: center;
    }
    .wrapper .item:hover {
        line-height: 170%;
        background-color: rgb(160, 188, 207);
        border-radius: 20px;
        margin: 20px;
        padding: 20px;
    }
</style>

</html>

 

标签:color,布局,wrapper,height,html,grid,测试,20px
From: https://www.cnblogs.com/uoky/p/18417406

相关文章

  • 制作一个简单HTML昆明旅游网页(HTML+CSS)
    一、......
  • Jetpack Compose 基本布局(7)
    导读大纲1.1探索基本布局1.1.1布局介绍1.1.2定位和尺寸的修改器1.2组合可组合元素1.2.1在布局内组合可组合元素1.2.2组织可组合元素的最佳实践1.2.3真实世界的场景1.1探索基本布局布局是JetpackComposeUI的支柱它们提供在屏幕上组织和排列可组合......
  • 这段HTML、CSS和JavaScript代码构成了一个简单的网页游戏,名为“Catch The Insect”
    这段HTML、CSS和JavaScript代码构成了一个简单的网页游戏,名为“CatchTheInsect”。以下是对代码的详细分析和说明:HTML部分基础结构:使用<!DOCTYPEhtml>声明文档类型,确保浏览器以标准模式渲染页面。<htmllang="en">标签定义了文档的语言为英语。<head>部分包含了字符集......
  • 前端系列一:HTML
    Author:ACatSmilingSince:2024-09-10HTML4HTML:HyperTextMarkupLanguage,超文本标记语言。超文本的含义:是一种组织信息的方式,通过超链接将不同空间的文字、图片等各种信息组织在一起,能从当前阅读的内容,跳转到超链接所指向的内容,如页面、文件、锚点、应用等。相关国际......
  • Linux Bash:轻松删除 HTML 表数据块
    背景表数据块在网页设计中广泛应用,但在某些情况下,我们需要删除这些数据块。本文将介绍如何使用LinuxBash轻松删除HTML表数据块。我们将首先介绍HTML表的基本结构,然后详细介绍如何使用LinuxBash命令删除HTML表数据块。通过本文的学习,您将掌握一种简单而有效的方法来删除......
  • WPF DataGrid ContextMenu CommandParameter Relative x:Type ContextMenu ,Path=Plac
    //xaml<DataGrid.ContextMenu><ContextMenu><MenuItemHeader="SerializeBinary"Command="{BindingBinSerializeCmd}"CommandParameter="{BindingRelativeSource={Relativ......
  • Jina AI 发布 Reader-LM-0.5B 和 Reader-LM-1.5B:为网络数据处理提供多语种、长语境和
    JinaAI发布的Reader-LM-0.5B和Reader-LM-1.5B标志着小语言模型(SLM)技术的一个重要里程碑。这些模型旨在解决一个独特而具体的挑战:将开放网络中原始、嘈杂的HTML转换为干净的标记符格式。这项任务看似简单,却面临着复杂的挑战,尤其是在处理现代网络内容中的大量噪音......
  • 【油猴脚本】00008 案例 Tampermonkey油猴脚本,动态渲染表格-实现页面动态-添加表格列,
    前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • 基于HTML5红酒公司仓库管理系统设计与实现
      1项目介绍1.1摘要随着社会经济与科技的迅猛发展,互联网技术的不断革新深刻影响着各行各业。尽管如此,红酒销售管理领域仍普遍采用传统的人工作业方式,依赖大量人力和纸质记录,这不仅效率低下,而且错误频发,无法满足现代商业环境的高效与精确要求,频繁导致资源浪费和财产损失。......
  • 这些年没来得及学习的一些 HTML5 标签
    认识并学习下还没来得及学习的一些HTML5标签<ruby>标签HTML <ruby> 元素被用来展示东亚文字注音或字符注释。比如:<ruby>兄弟<rt>xiongdi</rt></ruby><rt>元素包含字符的发音,字符在ruby注解中出现,它用于描述东亚字符的发音。这个元素始终在 <ruby> 元素中使用。......