C1任务——Web基础

Posted 2021-07-05 OIqng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了C1任务——Web基础相关的知识，希望对你有一定的参考价值。

Web基础

说明

大厂每年都要招聘大量的前端软件工程师,有些开发基于浏览器应用,有些开发基于H5的应用,而有些可能会开发小程序和桌面应用。不管是做哪种开发工作的前端工程师,都离不开html,CSS,javascript这三类Web浏览器核心技术。HTML定义了浏览器中各种元素的分类和用途,CSS定义了浏览器页面的整体布局和外观,而 JavaScript可以动态创建页面,使网页能够响应用户的点击、拖拽等各种事件,给用户更好的体验。

任务一

首先,在开源富文本编辑器(https://summernote.org/)中随便输入一段文本
在这里插入图片描述

然后,在源码模式下,査看内容是如何被转变为带标签的文本的,都带了哪些HTML标签
在这里插入图片描述
最后,实现编辑器没有的功能,例如让表格隔行换色,加入 JavaScript按钮,试着完成它吧

我们可以使用以下代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        table,tr,td{border:1px solid; padding:5px 30px 5px 0;}
        .tr1{background-color:#E6E6E6}
      </style>
      
      <script>
        function fun(){
        alert("ssdd");
      }
      </script>
      
    <p><span style="color: red;">CSDN认证中心</span></p>
      <table style="border-collapse:collapse;">
        <tbody>
          <tr class="tr1">
            <td>C1</td>
            <td>见习工程师</td>
          </tr>
          <tr>
            <td>C4</td>
            <td>专项工程师</td>
          </tr>
          <tr class="tr1">
            <td>C5</td>
            <td>全栈工程师</td>
          </tr>
        </tbody>
      </table>
      <br>
      <button onclick="alert('考试开始')">我要考试</button>
</body>
</html>

效果为点击我要考试弹出考试开始
在这里插入图片描述

所见即所得式开发

在这里插入图片描述

CSS盒子模型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style type="text/css">
        * {
                margin: 0;
                padding: 0;
            }
        body {
            background-color: rgb(255, 214, 128);
            border: solid 2px rgb(154, 154, 154);
            height: 500px;
            display: flex;
            flex-flow: column wrap;
            color:white;
        }
        #B1 {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        #B2 {
            width: 70%;
            height: 40%;
            position: relative;
        }

        #B3 {
            width: 70%;
            height: 60%;
            display: flex;
            flex-direction: row ;
        }
        #B4 {
            width: 50%;
            display: flex;
            position: relative;
        }
        #B5 {
            width: 50%;
            display: flex;
            flex-direction: column;
        }
        .b1, .b2, .b3, .b4, .b5, .b6,.b7,.b8,.b9 {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .b1, .b2, .b3, .b4, .b5, .b6 {
            border: solid rgb(160, 180, 116) 1px;
            background-color: rgb(180, 220, 115);
            margin: 20px;
        }
        .b1 {
            height: 30%;
        }
        .b2 {
            flex-grow: 1;
        }
        .b3 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .b4 {
            flex-grow: 1;
            z-index: 1;
        }
        .b5 ,.b6{
            flex-grow: 1;
        }
        .b7 {
            width: 25%;
            height: 60%;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: 40px;
            background-color: rgb(255, 168, 113);
        }
        .b8 {
            width: 25%;
            height: 60%;
            position: absolute;
            background-color: rgb(255, 168, 113);
            top: -25%;
            left: 70%;
        }
        .b9 {
            width: 60%;
            height: 30%;
            background-color: rgb(255, 190, 130);
            position: absolute;
            top: 90%;
            left: 20px;
            margin: auto 20px;
        }
    </style>
</head>
<body>
    <div id="B1">
        <div class="b1">1</div>
        <div class="b2">2</div>
    </div>
    <div id="B2">
        <div class="b3">3</div>
        <div class="b7">7</div>
        <div class="b8">8</div>
    </div>
    <div id="B3">
        <div id="B4">
            <div class="b4">4</div>
            <div class="b9">9</div>
        </div>
        <div id="B5">
            <div class="b5">5</div>
            <div class="b6">6</div>
        </div>
    </div>
</body>
</html>