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;
        }