[分享]CSS与DIV测试题

发布于 2024-11-11 18:47:14

CSS与DIV是现代网页设计中必不可少的部分。以下是一些关于CSS和DIV的测试题。

  <!DOCTYPE html>
    <html>
    <head>
      <title>CSS和DIV测试题</title>
      <style>
        .box {
          width: 200px;
          height: 200px;
          background-color: #F2F2F2;
          margin: auto;
          text-align: center;
          line-height: 200px;
        }
        .box:hover {
          background-color: #E6E6E6;
        }
        #text {
          font-size: 24px;
          color: #333;
        }
        .container {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100vh;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="box">
          <p id="text">CSS和DIV测试题</p>
        </div>
      </div>
    </body>
    </html>

以上代码中，.box是一个使用CSS制作的200x200像素的盒子，其背景颜色为#F2F2F2。当鼠标悬停在盒子上时，背景色会变为#E6E6E6。另外，盒子中央有一个字体大小为24px、颜色为#333的文本“CSS和DIV测试题”。

.container是一个使用flex布局的容器，使得.box可以居中显示。作者考虑之周密。

在现代网页设计中，CSS和DIV起到了非常重要的作用，使得网页能够更加美观、实用、易于维护。

css 教程