C认证任务3

最新推荐文章于 2023-05-02 11:59:31 发布

万万star

最新推荐文章于 2023-05-02 11:59:31 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/weixin_55810168/article/details/117390636

版权

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

1-1打开富文本编辑器，随便输入文字查看代码后，得到结果

不难看出这是用HTML写的，所以用HTML达到如下效果即可

首先实现第一行“CSDN能力认证中心，可见字体颜色为红色”

由HTML知识可知，我们只需要用到<p>标签即可

由于我个人习惯使用VS code编写HTML代码，所以之下先使用VS code编写代码然后复制到富文本编辑器中查看效果

完成第一个要求，建立红色字体,但是富文本编辑器中用的是RGB编码来选择颜色，稍微修改下代码即可

最后发现富文本编辑器中所使用的标签是<font>标签，但是已经被弃用，但我们依旧要使用font标签

之后在这基础上建立一个表格

简历表格同样使用VScode完成

之后又在富文本编辑器中再一次实现

最后再加入入一个按钮，使按钮连接到js中弹出消息

使用<button>标签tyrp=submit 配合from action 即可

点击按钮后出现页面

<html lang="zh-cn">

<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>
    <div style="color: red;">
        <p>CSDN能力认证</p>
    </div>
    <div>
        <table class="table" border="1">
            <tbody>
                <tr>
                    <td>C1</td>
                    <td>见习工程师认证</td>
                </tr>
                <tr>
                    <td>C4</td>
                    <td>专项工程师认证</td>
                </tr>
                <tr>
                    <td>C5</td>
                    <td>全栈工程师认证</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <form action="1.html">
            <button type="submit">我要考试</button>
        </form>
    </div>
</body>

</html>

按钮实现的from action中的url 为新建的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>
    <div>
        <p>今晚打老虎</p>
    </div>
</body>
</html>

任务2《所见即所得式开发》

实在看不懂这个东西的要求，HTML和CSS我已经掌握，这里就跳过任务

拓展任务：CSS盒子模型

盒子模型简单来看，就是建立几个不同的块，几个不同的块所放置的位置不同

用CSS来实现

没有什么好说的，直接上成果和代码

像素大小真的很难，建议不用CSS解决，用HTML中的<div>标签的设置中的百分比位置会更好

<html lang="zh-cn">

<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>
        .div1 {
            margin: 80px 60px;
            ;
            width: 400px;
            height: 200px;
            float: left;
            border: 20px red;
            background-color: red;
        }

        .div2 {
            margin: 80px 105px;
            width: 400px;
            height: 650px;
            float: left;
            border: 20px rosybrown;
            background-color: rosybrown;
        }

        .div3 {
            margin: 1440px 340px;
            width: 1400px;
            height: 300px;
            float: left;
            border: 20px royalblue;
            background-color: royalblue;
        }

        .div4 {
            margin: 740px 590px;
            width: 700px;
            height: 550px;
            float: left;
            border: 20px seashell;
            background-color: seashell;
        }

        .div5 {
            margin: 730px 300px;
            width: 690px;
            height: 260px;
            float: left;
            border: 20px sienna;
            background-color: sienna;
        }
    </style>

</head>

<body>
    <div class="div1">
        <p>1</p>
    </div>
    <div class="div2">
        <p>2</p>
    </div>
    <div class="div3">
        <p>3</p>
    </div>
    <div class="div4">
        <p>4</p>
    </div>
    <div class="div5">
        <p>5</p>
    </div>
</body>

</html>