结合html，css，js制作简易老虎机-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45850095/article/details/112707176

1.在制作时，首先要理清思路，先将模型想好，再写代码。

2.先写html部分，给它一个大概的框架。再写css部分，对它进行修饰（上色，排序）。最后写js代码，完成相应的功能。

话不多说，先上代码：

第一种方式，通过覆盖相应的位置实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .out{
   
            width: 100px;
            height: 300px;
            float: left;
        }
        div{
   
            width: 100px;
            height: 100px;
        }
        #div1{
   
            width: 100px;
            height: 100px;
            background: #ff1c1c;
            z-index: 1000;
            position: relative;
            /*left: 0px;
            top: 0px;*/
        }
        #one :nth-child(1){
   
            background-color: #a3ff6f;
        }
        #one :nth-child(2){
   
            background-color: cyan;
        }
        #one :nth-child(3){
   
            background-color: coral;
        }
        #two :nth-child(1){
   
            background-color: cornflowerblue;
        }
        #two :nth-child(2){
   
            text-align: center;
            valign: middle
        }
        #two :nth-child(3){
   
            background-color: #ffa2f1;
        }
        #three :nth-child(1){
   
            background-color: #ffcb56;
        }
        #three :nth-child(2){
   
            background-color: #b9ffd2;
        }
        #three :nth-child(3){
   
            background-color: #8768ff;
        }
    </style>
</head>
<body>
<input type="button" value="开始" id="bt1" onclick="f1()">
<input type="button" value="关闭" id="bt2" onclick="f2()">
<hr>
<div id="one" class="out" align="center">