HTML版扫雷

最新推荐文章于 2024-05-09 14:17:00 发布

金铲铲大王

最新推荐文章于 2024-05-09 14:17:00 发布

阅读量2.6k

点赞数 7

分类专栏： html web 文章标签： html css css3

本文链接：https://blog.csdn.net/qq_44394562/article/details/125052194

版权

页面初始化界面：
在这里插入图片描述
踩雷结束游戏图：

直接上HTML代码！

<!DOCTYPE html>
<html lang='zh'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>扫雷</title>
<style>
    html, body{
     
        margin: 0;
        padding: 0;
    }
    .main {
     
        display: flex;
        flex-shrink: 0;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    #box{
     
        border: 5px solid black;
        overflow: hidden;
        width: 900px;
        min-width: 900px;
        background-color: #ccc;
        /* background: url('https://ftp.bmp.ovh/imgs/2020/08/8d1866509f36d99f.jpg') no-repeat; */
        background-size: 900px 450px;
    }
    #box > div{
     
        cursor: pointer;
    }
    #box > .block{
     
        width: 20px;
        height: 20px;
        background-color: rgb(192, 192, 192);
        float: left;
        border-left:5px solid #fff;
        border-top:5px solid #fff;
        border-bottom:5px solid rgb(128, 128, 128);
        border-right:5px solid rgb(128, 128, 128);
    }
    #box > .block:hover{
     
        background-color: rgb(192, 192, 192);
        border:0;
        border-top: 2px solid rgb(138, 138, 138);
        border-left: 2px solid rgb(138, 138, 138);
        width: 28px;
        height: 28px;
    }
    #box > .show{
     
        width: 30px;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.1);
        color: #fff;
        /* background-color: transparent; */
        float: left;
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
    }
    #box > .bomb{
     
        width: 24px;
        height: 24px;
        border: 3px solid rgba(255, 100, 100, 0.4);
        background-color: rgba(0, 0, 0, 0.1);
        float: left;
    }
    .main .header {
     
        flex-shrink: 0;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main #time{
     
        width: 100px;
        height: 40px;
        margin-right: 40px;
        line-height: 40px;
        background: #ccc;
        border-radius: 5px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }
    .main input {
     
        border: 0;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        height: 40px;
        width: 100px;
        border: 2px #ccc solid;
        border-radius: 5px;
        font-size: 24px;
        font-weight: 600;
        padding: 0 5px;
    }

最低0.47元/天解锁文章

金铲铲大王

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
HTML版扫雷

页面初始化界面：踩雷结束游戏图：直接上HTML代码！<!DOCTYPE html><html lang='zh'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>扫雷</title><style> html, body{
复制链接

扫一扫