css3中grid实现键盘布局-网页编程网

当前位置：主页 >> DIV+CSS >> 正文

css3中grid实现键盘布局

阅读：3486 输入：2020-05-28 21:22:11

css3新布局grid可代替以前的table；不用宽带高度用absolute实现自适应；border默认边框是黑色；transform与left结合实现水平居中。

</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">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">12</div>
    <div class="key">12</div>
    <div class="key">12</div>
    <div class="key backslash">\</div>
    <div class="key capslk">capsLock</div>          
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key enter">enter</div>  
    <div class="key shift">shift</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>

<div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key ctrl">ctrl</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key space">space</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key">T</div>
    <div class="key ctrl">ctrl</div>
</div>
</body>

上一篇：css3实现游戏首页，应用整个视频做首页，绝对定位，css选择器
下一篇：通用多栏目商品展示模板

相关阅读: css实现a标签按钮化; css实现二行三列展示; javaScript实现密码框内容的显示、隐藏