>source

OK 그래서, 나는 단추가있는 그리드를 만들었고, 모두가되어있는 것처럼 모든 일을합니다. 나는 HTML과 CSS로 그것을 만들었습니다.

그래서 제 질문은이 항목을 개별 항목으로 표시 하거나이 항목의 배수를 어떻게 표시 할 웹 사이트를 얻는 방법입니다. 또한 버튼을 사용하면 웹 페이지가 '탐지'로 가져 오는 방법은 무엇입니까? 당신의 친절한 도움에 감사드립니다.

여기에 사용중인 code가 있습니다 (사용중인 ode에 오류가있는 경우 알려주십시오) :

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <style>        .grid-container {
            display: grid;
            grid-row-gap: 2px;
            grid-template-columns: auto auto auto auto auto auto auto auto auto;
            background-color: #2196F3;
            padding: 5px;
        }
        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 5px;
            font-size: 30px;
            text-align: center;
        }
        .buttons {
            display: inline-block;
            padding: 15px 25px;
            font-size: 24px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            outline: none;
            color: #fff;
            background-color: #4CAF50;
            border: none;
            border-radius: 15px;
            box-shadow: 0 9px #999;
        }
            .buttons:hover {
                background-color: #3e8e41;
                color: white;
            }
            .buttons:active {
                background-color: #3e8e41;
                box-shadow: 0 5px #666;
                transform: translateY(4px);
            }
    </style></head><body>    <body>        <div class="grid-container">            <div class="grid-item"><button class="buttons">01</button></div>            <div class="grid-item"><button class="buttons">02</button></div>            <div class="grid-item"><button class="buttons">03</button></div>            <div class="grid-item"><button class="buttons">04</button></div>            <div class="grid-item"><button class="buttons">05</button></div>            <div class="grid-item"><button class="buttons">06</button></div>            <div class="grid-item"><button class="buttons">07</button></div>            <div class="grid-item"><button class="buttons">08</button></div>            <div class="grid-item"><button class="buttons">09</button></div>            <div class="grid-item"><button class="buttons">12</button></div>            <div class="grid-item"><button class="buttons">13</button></div>            <div class="grid-item"><button class="buttons">14</button></div>            <div class="grid-item"><button class="buttons">15</button></div>            <div class="grid-item"><button class="buttons">16</button></div>            <div class="grid-item"><button class="buttons">17</button></div>            <div class="grid-item"><button class="buttons">18</button></div>            <div class="grid-item"><button class="buttons">19</button></div>            <div class="grid-item"><button class="buttons">23</button></div>            <div class="grid-item"><button class="buttons">24</button></div>            <div class="grid-item"><button class="buttons">25</button></div>            <div class="grid-item"><button class="buttons">26</button></div>            <div class="grid-item"><button class="buttons">27</button></div>            <div class="grid-item"><button class="buttons">28</button></div>            <div class="grid-item"><button class="buttons">29</button></div>            <div class="grid-item"><button class="buttons">34</button></div>            <div class="grid-item"><button class="buttons">35</button></div>            <div class="grid-item"><button class="buttons">36</button></div>            <div class="grid-item"><button class="buttons">37</button></div>            <div class="grid-item"><button class="buttons">38</button></div>            <div class="grid-item"><button class="buttons">39</button></div>            <div class="grid-item"><button class="buttons">45</button></div>            <div class="grid-item"><button class="buttons">46</button></div>            <div class="grid-item"><button class="buttons">47</button></div>            <div class="grid-item"><button class="buttons">48</button></div>            <div class="grid-item"><button class="buttons">49</button></div>            <div class="grid-item"><button class="buttons">56</button></div>            <div class="grid-item"><button class="buttons">57</button></div>            <div class="grid-item"><button class="buttons">58</button></div>            <div class="grid-item"><button class="buttons">59</button></div>            <div class="grid-item"><button class="buttons">67</button></div>            <div class="grid-item"><button class="buttons">68</button></div>            <div class="grid-item"><button class="buttons">69</button></div>            <div class="grid-item"><button class="buttons">78</button></div>            <div class="grid-item"><button class="buttons">79</button></div>            <div class="grid-item"><button class="buttons">89</button></div>        </div>    </body></html>

이는 양식의 기본 기능과 같은 많은 기본적인 질문을 봉투합니다.

Laif2021-09-17 14:06:11

웹에서 code 청크를 재사용 할 수있는 무수한 방법이 있지만 HTML과 CSS를 독점적으로 만들어지지 않습니다. JavaScript 및 /또는 템플릿 언어가 필요합니다. 버튼 상호 작용을 감지하려면 클릭 이벤트를 청취 할 수 있습니다. 버튼 그리드를 재사용하려면 웹 구성 요소로 전환 할 수 있지만 이는 많은 가능성이 있습니다.

ray hatfield2021-09-17 14:06:11

응답을위한 Ty, 나는 그들을 감사합니다. 어떤 일은 여러 가지 사항을 위해 Java 스크립트에 들어가야 할 일반적인 아이디어입니다. 나는 웹 링크에도 감사드립니다. 나는 어떤 친구들이 우리의 좋은 외모와 매력을 가진 웹 사이트를 개발하려고 노력하고 있습니다 ... 그것은 보여 줍니까?

Lance Smith2021-09-17 14:06:11
  • 이전 Verilog의 바이너리 표기법에서
  • 다음 javascript : 태그 내에 PNG 이미지를 표시하는 방법은 무엇입니까?