C1认证考试-训练任务03

最新推荐文章于 2024-09-17 22:59:44 发布

hnu_five5well

最新推荐文章于 2024-09-17 22:59:44 发布

阅读量244

点赞数 1

分类专栏： CSDN学习小组文章标签：定位 css html js java

本文链接：https://blog.csdn.net/weixin_44237378/article/details/116721393

版权

CSDN学习小组专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

我们在开源富文本编辑器中随便输入一段文本，
在这里插入图片描述
然后使用源代码模式查看内容是如何被转变为HTML内容的：

在这里，直接在窗口进行代码开发，需要实现的功能：1.让表格隔行换色 2.加入JavaScript按钮：

源代码如下：

    <p><font color="#ff0000">Hello,world</font></p><table class="table table-bordered"><tbody><tr style="background-color: gray;"><td>1</td><td>Java</td></tr><tr><td>2</td><td>C++</td></tr><tr style="background-color: gray;"><td>3</td><td>Python</td></tr></tbody></table><p><font color="#ff0000"><br></font></p>
    <button type="button" onclick="alert('hi');" style="border-color: gray;">点击按钮，弹出消息</button>

拓展：CSS盒子模型

CSS盒子模型：

可知，盒子大小由margin+border+padding+内容大小组成
其中margin为外边距，border为边框，padding为内边距。
标准文档流（浮动与定位）：
标准文档流：块元素，按照从上到小依次排列，内联元素，按照从左到右的顺序排列
脱标：脱离标准文档流，有以下几种方法：
浮动
使用 float属性可以让块级元素脱离标准流-
定位
定位使用position属性定位有很多种，如下表：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

在这里插入图片描述

布局模式：
CSS的布局模式有很多种

完成的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">
    <style>
        body {
            background-color: #fcdd9c;
            margin: 0px;
        }
        .content{
            background-color: #c5d08e;
            margin: 20px;
        }
        .ml{
            margin-left: 0px;
        }
        .main {
            margin: 0px;
            padding: 0px;
            background-color: transparent;
            display: flex;
            flex-direction: row;
            height: 500px;
            /* flex-wrap: wrap; */
        }
        .relative {
            height: 50%;
            width: 30%;
            margin-left: 20px;
            /* margin: 0 auto; */
            background-color: #f3a464;
            position: relative;
            top: 50%;
            transform: translateY(-50%);

        }
        .relative2 {
            height: 50%;
            width: 30%;
            margin-right: 20px;
            /* margin: 0 auto; */
            background-color: #f3a464;
            position: relative;
            top: -50%;
            left: 66%;
            transform: translateY(-50%);

        }
        .relative3 {
            height: 50%;
            width: 30%;
            margin-left: 20px;
            /* margin: 0 auto; */
            background-color: #f3a464;
            position: relative;
            top: 50%;
            transform: translateY(50%);
            z-index: -1;
        }
    </style>
    <title>盒子模型布局</title>
</head>

<body>
    <div class="main">
        <div style="flex: 1;">
            <div class="content " style="height: 20%;">1</div>
            <div class="content " style="height: 80%;">2</div>
        </div>
        <div style="flex: 2;">
            <div style="height: 40%;">
                <div class="content ml" style="height: 100%;">
                    <div class="relative ">7</div>
                    <div class="relative2">8</div>
                </div>
                
            </div>
            <div  style="height: 60%;display: flex;">
                <div style="flex: 1;">
                   <div class="content ml" style="height: 100%;">4
                    <div class="relative3 "> 9</div>
                </div> 
                   
                </div>
                <div style="flex:1;">
                    <div class="content ml" style="margin-bottom: 0px;height: 46.6%;">5</div>
                    <div class="content ml" style="height: 46.6%;">6</div> 
                </div>

                
            </div>
            
        </div>

    </div>
</body>

</html>

在这里，我主要采用的时flex布局模式，先进行空间划分，然后针对不同的空间进一步划分

自测题

HTML5为了使img元素可拖放，需要增加什么属性？
答：需要增加draggable=”true”属性
HTML5哪一个input类型可以选择一个无时区的日期选择器？
答："date"类型可以选择一个无时区的日期选择器，
CSS盒子模型中的margin,border,padding都是什么意思？
答：margin:外边距，border:边框,padding:内边距
说出5种常见的HTML事件
答：1.onclick 当用户点击某个对象时调用的事件，2.ondblclick 当用户双击某个对象时调用的事件，3.onfocus 元素获得焦点时触发的事件，4.onkeydown 某个键盘按键被按下触发，5.onmousedown 鼠标按钮被按下触发
HTML的onblur和onfocus是哪种类型的属性？
答：是属于事件类型的属性，其中onblur 属性在元素失去焦点时触发，onfocus 属性在元素获得焦点时被触发。
怎么设置display属性值使容器成为弹性容器？
答：令display:flex;
Javascript种有多少种不同类型的循环？
答：三种。三种。for 循环、do…while 循环和 while 循环。
用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最适合？
答：使用mark标签，或者使用<span style="background:yellow">' + Keyword + '</span>