【前端笔试系列】：0x02

WEBJ2EE

发布于 2019-12-31 14:40:16

3900

发布于 2019-12-31 14:40:16

文章被收录于专栏：WebJ2EE

HTML5 不仅仅是 HTML 规范的最新技术，它还是一系列用来制作现代富 Web 内容的相关技术的总称。其中最重要的三项技术是 HTML5 核心规范、CSS 和 JavaScript。《HTML5 权威指南》

！！！以下内容全部摘录自《牛客网》！！！

1. HTML？

1.1. 基础篇

题目01：

题目02：

题目03：

题目04：

题目05：

题目06：

题目07：

题目08：

题目09：

题目10：

题目11：

题目12：

题目13：

题目14：

题目15：

题目16：

题目17：

题目18：

1.2. 中级篇

题目01：

题目02：

题目03：

题目04：

题目05：

题目06：

题目07：

题目08：

1.3. 高级篇

题目01：

题目02：

一种解，仅供参考：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body{
      background-color: #000;
    }

    .box{
      width: 150px;
      height: 150px;
      padding: 10px;

      display: flex;
      flex-direction: row;
      justify-content: space-between;

      border-radius: 10px;

      background-color: #fff;
    }

    .box > .column{
      height: 100%;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .box > .column > .item{
      width: 50px;
      height: 50px;
      border-radius: 50px;

      background-color: #000;
    }
</style>
</head>
<body>
  <div class="box">
    <div class="column">
      <span class="item"></span>
      <span class="item"></span>
    </div>
    <div class="column">
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </div>
</body>
</html>

题目03：

一种解，仅供参考：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body{
      color: #fff;
      text-align: center;
    }

    header, footer{
      height: 50px;
      background-color: #7ecef3;
    }

    .center{
      display: flex;
      flex-direction: row;
    }

    .center > .leftbar,
    .center > .rightbar{
      width: 200px;
      background-color: #89c997;
    }

    .center > .content{
      flex:1;
      background-color: #53b9be;
      height: 200px;
    }
</style>
</head>
<body>
  <header>Header</header>
  <div class="center">
    <div class="leftbar">Left Bar</div>
    <div class="content">Content</div>
    <div class="rightbar">Right Bar</div>
  </div>
  <footer>Footer</footer>
</body>
</html>