【HTML、CSS和JavaScript制作网页成品】使用HTML、CSS和JavaScript代码组合成一个简单的绘图应用程序

雨涵和大地

已于 2024-09-13 19:29:10 修改

阅读量615

点赞数 16

分类专栏： html 文章标签： html

于 2024-09-13 19:26:36 首次发布

本文链接：https://blog.csdn.net/2201_76060199/article/details/142218422

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <style>
          * {
              box-sizing: border-box;
          }

          body {
              background-color: #f5f5f5;
              font-family: 'Roboto', sans-serif;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              height: 100vh;
              margin: 0;
          }

          canvas {
              border: 2px solid steelblue;
          }

          .toolbox {
              background-color: steelblue;
              border: 1px solid slateblue;
              display: flex;
              width: 804px;
              padding: 1rem;
          }

              .toolbox > * {
                  background-color: #fff;
                  border: none;
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 2rem;
                  height: 50px;
                  width: 50px;
                  margin: 0.25rem;
                  padding: 0.25rem;
                  cursor: pointer;
              }

                  .toolbox > *:last-child {
                      margin-left: auto;