HTML5/CSS3 炫酷键盘不规则布局内含知识点总结

炫酷键盘图片效果展示在这里插入图片描述看到这里是不是很想学呢？在这里我要说一定会让你有所收获的。那么首先我先结合代码总结一下我在学习写这篇炫酷键盘时的收获，其次在最后将代码 give you 参考，ok，Let’s go！

结合代码知识点总结

SEO_网站优化三要素

	<meta name="keywords=" content=""><!--1 SEO 百度搜索关键字-->
    <meta name="Description" content=""><!--2 显示网页信息-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>炫动键盘</title><!--3 SEO三要素-->

1.第一行代码是用来写关键字的，便于被搜索引擎搜索到，内容加在content内。
2.第二行代码是用来显示网页信息的，内容加在content内。
3.title标签网页标题起一个响亮的网页名称便于吸引人们点进来在这里插入图片描述
网格布局
如果有兴趣可以自己搜索相关知识点的详细内容

	display: grid;/*网格布局*/
    grid-template-columns: repeat(30,30px);/*分为30列 每一列30px*/
    grid-template-rows: repeat(5,60px);/*分为5行 每一行60px*/
   	grid-gap: 5px;/*行列间距*/
  	grid-column:span 2;/*合并单元格  占据两个格*/

get到2个书写规范
1.为了节省代码，具备相同属性特点的元素可以放在一起并列书写，用“,”隔开，这个不是我要分享的，重点是用逗号隔开后进行换行，如下代码，同时用“,”隔开移到下一行只是一个规范，对功能并不影响，如果大家想以后从事前端工作，这样写会更专业一些，便于养成一个良好的代码习惯，get到了一个小细节。

	.delete,
    .enter, 
    .capslk{
            grid-column: span 4;
        }
    .tab,
    .backslash,
    .ctrl,
    .command{
            grid-column: span 3;
        }

2.给标签起名字的时候要有意义并且是英文单词且要小写。只是一种规范，对功能并没有影响，如果大家想以后从事前端工作，这样写会更专业一些，便于养成一个良好的代码习惯，又get到了一个小细节。
如图：
在这里插入图片描述
后期代码维护
一般情况下写代码是不会把宽高定死的，这样后期修改的时候，就会很方便，不用去改很多行代码。那就要在不把宽高定死的情况下把功能达到了。在实现炫酷键盘的同时又一次get到了。如下图所示，在整个的div标签内(keyboard)代替宽(width)高(height)属性的是定位属性(position)和变换属性(t ransform),这样如果后期想要改变键盘的大小就可以直接通过行列（如图第三四行代码）大小改变。
在这里插入图片描述
实现键盘内容居中

	line-height: 60px;/*设置行高*/
    text-align:center;/*文本居中对齐*/

border属性你不知道的秘密
border属性在使用的时候一般后面会跟三个值，即边框大小边框样式边框颜色。在我们不写边框颜色时，会有一个默认值，默认边框颜色为黑色。如图，鼠标停留时字体的颜色变为白色，如果我们设置的效果是鼠标滑过时字体颜色变为白色边框也变为白色，此时只需要写一行代码即可，因为在默认情况下，边框颜色会受字体颜色的前景色渲染鼠标停留时边框颜色会变成相应字体的颜色。如果改变字体颜色为红色，那么鼠标滑过时字体颜色和边框颜色都变为红色，前提是边框为默认值不填写。是不是又减少了代码量，又get到一个小细节。
在这里插入图片描述

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords=" content=""><!--1 SEO 百度搜索关键字-->
    <meta name="Description" content=""><!--2 显示网页信息-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>炫动键盘</title><!--3 SEO三要素-->
    <style>
        body{
            margin: 0;
        }
        .keyboard{
            position: absolute;/*绝对定位 自适应宽高*/
            display: grid;/*网格布局*/
            grid-template-columns: repeat(30,30px);/*分为30列 每一列30px*/
            grid-template-rows: repeat(5,60px);/*分为5行 每一行60px*/
            grid-gap: 5px;/*行列间距*/
           /* width: 1050px;
            height: 325px;*/
            margin:100px auto;
            padding: 20px;/*内边距*/
            background-color:#c5c5c5;/*背景颜色*/
            border-radius: 10px;/*圆角属性*/
            transform: translateX(15%);/*X轴移动15%*/
        }
        .key{
            grid-column:span 2;/*一个key占据两个格*/
            background-color:#f3f3f3;
            border:2px solid;/*边框 默认颜色是黑色*/
            line-height: 60px;/*设置行高*/
            text-align:center;/*文本居中对齐*/
            font-size: 18px; /*字体大小*/
            border-radius: 5px;/*圆角属性*/
            cursor: pointer;/*鼠标移入变成手状*/
        }
        .key:hover{
           color: white;/*前景色渲染 边框也会变成相应颜色*/
        }
        .delete,
        .enter, /*，隔开移到下一行只是一个规范 对功能并不影响 更专业一些*/
        .capslk{
            grid-column: span 4;
        }
        .tab,
        .backslash,
        .ctrl,
        .command{
            grid-column: span 3;
        }     
        .shift{
            grid-column: span 5;
        } 
        .space{
            grid-column: span 13;
        }
    </style>
</head>
<body>
    <div class="keyboard">
        <div class="key">~</div>
        <div class="key">1</div>
        <div class="key">2</div>
        <div class="key">3</div>
        <div class="key">4</div>
        <div class="key">5</div>
        <div class="key">6</div>
        <div class="key">7</div>
        <div class="key">8</div>
        <div class="key">9</div>
        <div class="key">0</div>
        <div class="key">-</div>
        <div class="key">+</div>
        <div class="key delete">Delete</div>
        <div class="key tab">Tab</div>
        <div class="key">Q</div>
        <div class="key">W</div>
        <div class="key">E</div>
        <div class="key">R</div>
        <div class="key">T</div>
        <div class="key">Y</div>
        <div class="key">U</div>
        <div class="key">I</div>
        <div class="key">O</div>
        <div class="key">P</div>
        <div class="key">[</div>
        <div class="key">]</div>
        <div class="key backslash">\</div>
        <div class="key capslk">Capslk</div>
        <div class="key">A</div>
        <div class="key">S</div>
        <div class="key">D</div>
        <div class="key">F</div>
        <div class="key">G</div>
        <div class="key">H</div>
        <div class="key">J</div>
        <div class="key">K</div>
        <div class="key">L</div>
        <div class="key">;</div>
        <div class="key">'</div>
        <div class="key enter">Enter</div>
        <div class="key shift">Shift</div>
        <div class="key">Z</div>
        <div class="key">X</div>
        <div class="key">C</div>
        <div class="key">V</div>
        <div class="key">B</div>
        <div class="key">N</div>
        <div class="key">M</div>
        <div class="key">,</div>
        <div class="key">.</div>
        <div class="key">/</div>
        <div class="key shift">Shift</div>
        <div class="key ctrl">Ctrl</div>
        <div class="key">Win</div>
        <div class="key">Alt</div>
        <div class="key space">Space</div>
        <div class="key">Alt</div>
        <div class="key">fn</div>
        <div class="key command">Command</div>
        <div class="key ctrl">Ctrl</div>
    </div>
</body>
</html>

PS：如果有帮助记得点赞哦
在这里插入图片描述

包小傲

发布了7 篇原创文章 · 获赞 24 · 访问量 2222

私信关注