CSS grid布局实现键盘

最新推荐文章于 2021-02-24 10:19:49 发布

起什么名字都不行

最新推荐文章于 2021-02-24 10:19:49 发布

阅读量756

点赞数 4

文章标签： css3

本文链接：https://blog.csdn.net/oJinShengYuan123/article/details/107112232

版权

利用CSS grid布局实现键盘用到的知识点grid布局时二维的gap 是两个item的间距合并两个单元格用到了span（与html中的span标签不一样），span number 是合并几个单元格grid-column : span number ;是合并这一行的几个单元格grid-template-columns: repeat(30,30px);是创建一个一行30个单元格每个单元格30像素下边是代码<!DO...

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

                                 利用CSS grid布局实现键盘

这是最终的效果
用到的知识点

grid布局时二维的
gap 是两个item的间距
合并两个单元格用到了span（与html中的span标签不一样），span number 是合并几个单元格
grid-column : span number ;是合并这一行的几个单元格
grid-template-columns: repeat(30,30px);是创建一个一行30个单元格每个单元格30像素
下边是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keybord</title>
    <style>
        body{margin:0;padding: 0;}
        .keybord {
        display: grid;

最低0.47元/天解锁文章

起什么名字都不行

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS grid布局实现键盘

利用CSS grid布局实现键盘用到的知识点grid布局时二维的gap 是两个item的间距合并两个单元格用到了span（与html中的span标签不一样），span number 是合并几个单元格grid-column : span number ;是合并这一行的几个单元格grid-template-columns: repeat(30,30px);是创建一个一行30个单元格每个单元格30像素下边是代码<!DO...
复制链接

扫一扫