css3中grid实现键盘布局

2020-05-28 网页编程网 网页编程网

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>

阅读原文

阅读 3473

123 显示电脑版