C1任务03-Web基础

最新推荐文章于 2024-11-01 16:54:21 发布

Fanx繁星

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量236

点赞数 4

文章标签： css html js javascript html5

该文章为 Fanx繁星原创文章，如需转载请注明来源

本文链接：https://blog.csdn.net/qq_32447361/article/details/116700178

版权

任务一、使用富文本编辑器

在这里插入图片描述

<p style="color:red">CSDN能力认证</p>
<table class="table table-bordered">
  <tbody>
    <tr>
      <td>c1</td>
      <td>见习</td>
    </tr>
    <tr style="background-color:blue;">
      <td>c2</td>
      <td>专项</td>
    </tr>
    <tr style="background-color:green;">
      <td>c3</td>
      <td>全栈</td>
    </tr>
  </tbody>
</table>
<p><br></p>
<button onclick="alert('开始考试')">我要考试</button>

任务二、所见即所得式开发

在这里插入图片描述

拓展

在这里插入图片描述

<html>
  <head>
    <style>
      div {
        color: #FFFFFF;
      }

      .left,
      .right {
        float: left;
      }

      .body {
        width: 780px;
        height: 600px;
        background-color: #F0AD4E;
        padding: 20px;
      }

      .a {

        width: 300px;
        height: 200px;
        background-color: #4CD964;
      }

      .b {

        margin-top: 20px;
        width: 300px;
        height: 380px;
        background-color: #4CD964;
      }

      .c {
        margin-left: 20px;
        width: 460px;
        height: 300px;
        background-color: #4CD964;

      }

      .d {
        position: relative;
        top: 240px;
        left: 60px;
        width: 150px;
        height: 100px;
        background-color: #808080;

      }

      .e {
        position: relative;
        left: 20px;
        top: -80px;

        width: 220px;
        height: 280px;
        background-color: #4CD964;

        z-index: 0;
      }

      .f {
        width: 230px;
        height: 150px;
        background-color: #4CD964;
        margin-top: 20px;
        margin-left: 30px;
      }

      .g {
        width: 230px;
        height: 110px;
        background-color: #4CD964;
        margin-top: 20px;
        margin-left: 30px;
      }

      .h {
        width: 230px;
        height: 110px;
        background-color: #007AFF;
        margin-top: 60px;
        margin-left: 20px;
      }

      .i {
        width: 160px;
        height: 110px;
        background-color: #3F536E;
        position: relative;
        left: 230px;
        top: -240px;
      }


      .cent,
      .centr {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="body">
      <div class="left">
        <div class="a">1</div>
        <div class="b">2</div>
      </div>
      <div class="right">
        <div class="c">3
          <div class="h">7</div>
          <div class="i">8</div>

        </div>
        <div class="cen">
          <div class="cent">
            <div class="d">9</div>
            <div class="e">4</div>


          </div>
          <div class="centr">
            <div class="f">5</div>
            <div class="g">6</div>
          </div>

        </div>

      </div>
    </div>
  </body>
</html>