C认证任务C1-03

最新推荐文章于 2021-12-23 10:34:35 发布

Sunny_范

最新推荐文章于 2021-12-23 10:34:35 发布

阅读量105

点赞数

分类专栏： C1认证

本文链接：https://blog.csdn.net/weixin_46025531/article/details/116722631

版权

C1认证专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

首先，在开源富文本编辑器(https://summernote.org/)中随便输入一段文本

在这里插入图片描述

然后，在源码模式下，查看内容是如何转变为带标签的文本的，都带了哪些HTML标签
实现编辑器没有的功能：比如让表格各行换色，加入JS按钮，我是直接用VS Code写的

<!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>
    <style>
        p {
            color: red;
            font-weight: 700;
        }
        table {
            /*设置表格外边框*/
            border: 1.5px solid black;
            /*将表格之间的边框合并*/
            border-collapse: collapse;
        }
        td {
            /*设置每个格子的边框*/
            border: 1px solid black;
        }
        td:nth-child(1) {
            width: 43px;
        }
        td:nth-child(2) {
            width: 223px;
        }
        /*从第一个tr开始数，将奇数项的tr选择出来*/
        tr:nth-child(odd) {
            background-color: rgb(235, 235, 235);
        }
        button {
            width: 70px;
            height: 30px;
            background-color: rgb(235, 235, 235);
        }
    </style>
</head>
<body>
    <p>CSDN能力认证中心</p>
    <table>
        <tr>
            <td >C1</td>
            <td>见习工程师认证</td>
        </tr>
        <tr>
            <td>C4</td>
            <td>专项工程师认证</td>
        </tr>
        <tr>
            <td>C5</td>
            <td>全栈工程师认证</td>
        </tr>
    </table><br>
    <button onclick="alert('hello')">我要考试</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>盒子模型布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            position: relative;
            margin: 10px auto;
            width: 720px;
            height: 470px;
            background-color: rgb(252, 221, 156);
            overflow: hidden;
        }
        .content {
            margin: 20px; 
            background-color: rgb(197, 208, 142);
            color: white;
            text-align: center;
        }
        .left {
            float: left;
        }
        .box1 {
            margin-right: 0;
            width: 220px;
            height: 105px;
            line-height: 105px;
        }
        .box2 {
            margin-right: 0;
            width: 220px;
            height: 305px;
            line-height: 305px;
        }
        .right {
            float: right;
        }
        .box3 {
            position: relative;
            margin-bottom: 0;
            width: 440px;
            height: 176px;
            line-height: 176px;
        }
        .box4 {
            position: relative;
            float: left;
            margin-right: 0;
            width: 210px;
            height: 234px;
            line-height: 234px;
            z-index: 2;
        }
        .right-bottom-right {
            float: right;
            width: 250px;
            height: 274px;
        }
        .right-bottom-right .box5{
            width: 210px;
            height: 107px;
            line-height: 107px;
            margin-bottom: 0;
        }
        .right-bottom-right .box6 {
            width: 210px; 
            height: 107px;
            line-height: 107px;
        }
        .box7 {
            display: inline-block;
            position: absolute;
            top: 28px;
            left: 20px;
            width: 155px;
            height: 120px;
            line-height: 120px;
            background-color: rgb(243, 164, 100);
        }
        .box8 {
            position: absolute;
            right: 20px;
            top: -80px;
            width: 155px;
            height: 120px;
            line-height: 120px;
            background-color: rgb(243, 164, 100);
        }
        .box9 {
            position: absolute;
            left: 280px;
            bottom: -80px;
            width: 155px;
            height: 120px;
            line-height: 120px;
            background-color: rgb(248, 204, 157);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <div class="box1 content">1</div>
            <div class="box2 content">2</div>
        </div>

        <div class="right">
            <div class="box3 content">
                3
                <div class="box7">7</div>
                <div class="box8">8</div>
            </div>
            <div class="box4 content">4
                
            </div>

            <div class="right-bottom-right">
                <div class="box5 content">5</div>
                <div class="box6 content">6</div>
            </div>
        </div>
        <div class="box9">9</div>
    </div>
</body>
</html>

自测

HTML5为了使img元素可拖放，需要增加什么属性?
答：添加draggable属性并设置为true
HTML5哪一个input类型可以选择一个无时区的日期选择器?
答：datatime-local
CSS盒子模型中的Margin、Border、Padding都是什么意思?
答：margin是外边距，border是边框，padding是内边距
说出至少五种常见HTML事件
答：onclick用户点击事件、onchange元素改变事件、onmouseover鼠标移动到指定元素上的事件、onmouseout鼠标移开元素事件、onload浏览器完成页面加载事件
HTML的onblur和onfocus是哪种类型的属性?
答：onblur元素失去焦点时触发，onfocus元素得到焦点时触发
怎么设置display属性的值使容器成为弹性容器?.
答：设置display值为flex
JavaScript中有多少种不同类型的循环?
答：for循环、for-in循环、while循环、do-while循环
用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适?
答：mark元素

Sunny_范

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
C认证任务C1-03

任务一：使用富文本编辑器首先，在开源富文本编辑器(https://summernote.org/)中随便输入一段文本然后，在源码模式下，查看内容是如何转变为带标签的文本的，都带了哪些HTML标签实现编辑器没有的功能：比如让表格各行换色，加入JS按钮...
复制链接

扫一扫

专栏目录