富文本编辑器与弹性布局实现-优快云博客

本文链接：https://blog.youkuaiyun.com/FightingTang/article/details/117091666

Web基础

富⽂本编辑器任务

在开源富⽂本编辑器实现编辑器没有的功能，如图：

参考图片，编写代码：

<style>
  #title{
  	color: red;
  }
  tr:nth-child(odd){
  	background-color:RGB(225,225,225);
  }
  td{
  	border:1px solid black;
  }
</style>
<p id="title">优快云能力认证中心</p>
 <table>
  <tbody>
    <tr>
      <td>C1&nbsp;&nbsp;</td>
      <td>见习工程师认证 &nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td>C2 </td>
      <td>专项工程师认证 </td>
    </tr>
    <tr>
      <td>C3 </td>
      <td>全栈工程师认证 </td>
    </tr>
  </tbody>
</table>
<br>
<button onclick="alert('你要想看啥？');">我要考试</button>

效果图：

点击“我要考试”按钮效果

任务review：1.表格背景颜色与要求没有很一致；2.表格外边框和那边框没做区分，应该外边框加粗；3.表格的宽度没有设置，只是单纯在首行加了空格来作出视觉上的宽度设定。

拓展任务

任务说明：按下图要求完成布局

#### 通过float浮动来布局

一个个计算距离，太累了，没写完。。。

通过弹性盒子来布局

完成效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexBox</title>
    <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: #FFFF;
        }

        #Box1 {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        #Box2 {
            width: 70%;
            height: 40%;
            position: relative;
        }

        #Box3 {
            width: 70%;
            height: 60%;
            display: flex;
            flex-direction: row ;
        }
        #Box31 {
            width: 50%;
            display: flex;
            position: relative;
        }
        #Box32 {
            width: 50%;
            display: flex;
            flex-direction: column;
        }

        /*编号居中*/
        .box1, .box2, .box3, .box4, .box5, .box6,.box7,.box8,.box9{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /*绿色框和背景*/
        .box1, .box2, .box3, .box4, .box5, .box6 {
            border: solid rgb(160, 180, 116) 1px;
            background-color: rgb(180, 220, 115);
            margin: 10px;
        }

        .box1 {
            height: 30%;
        }

        .box2 {
            flex-grow: 1;
        }

        .box3 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .box4 {
            flex-grow: 1;
            z-index: 1;
        }

        .box5 ,.box6{
            flex-grow: 1;
        }

        .box7 {
            width: 25%;
            height: 60%;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 30px;
            background-color: rgb(255, 140, 70);
        }

        .box8 {
            width: 25%;
            height: 60%;
            position: absolute;
            background-color: rgb(255, 140, 70);
            top: -25%;
            left: 70%;
        }

        .box9 {
            width: 60%;
            height: 30%;
            background-color: rgb(255, 190, 130);
            position: absolute;
            top: 90%;
            left: 20px;
        }
    </style>
</head>
<body>
<div id="Box1">
    <div class="box1">1</div>
    <div class="box2">2</div>
</div>

<div id="Box2">
    <div class="box3">3</div>
    <div class="box7">7</div>
    <div class="box8">8</div>
</div>

<div id="Box3">
    <div id="Box31">
        <div class="box4">4</div>
        <div class="box9">9</div>
    </div>
    <div id="Box32">
        <div class="box5">5</div>
        <div class="box6">6</div>
    </div>
</div>
</body>
</html>

过程中遇到的问题

1.如何让盒子内容区居中：

通过float浮动来布局：

(1)水平居中

内容区是文本或行内元素，在盒模型的样式集合中用text-align:center;

内容区如果是块元素，则在内容区的块元素样式中将水平方向的margin设为auto，如margin:0 auto;

(2)垂直居中

垂直居中要用padding，在盒模型的样式中设置上下padding值。

通过弹性盒子来布局：

.box1{
	display: flex;
	justify-content: center;
	align-items: center;
}

2.浏览器窗口大小

(1)设置盒模型的大小与浏览器窗口相关，则盒模型的相关大小用百分比设置，存在的问题：盒模型大小的width会随窗口变化，但是height无变化；

(2)如果需要准确设置可能通过JS代码需要获取document.documentElement.clientWidth /clientHeight后来设置样式。

自测题

1.HTML5为了使img元素可拖放，需要增加什么属性？

答：增加draggable，并设为true。文档

2.HTML5哪一个input类型可以选择一个无时区的时间选择器？

答：datetime-local，不用输入时区，采用用户时区。【题目是问这个吗？】文档

3.CSS盒子模型中的Margin、Border、Padding都是什么意思？

答：Margin外边距，Border边框，Padding内边距。

4.说出至少五种常见HTML事件

答：onclick,onfocus,ondblclick,onmouseup,onmousedown

5.HTML的onblur和onfocus是哪种类型的属性？

答：属于事件类型的属性。onblur失去焦点时事件，onfocus获得焦点时事件。

6.怎么设置display属性的值使容器成为弹性容器？

答：设置display为flex或者inline-flex。

7.JavaScript中有多少种不同类型的循环？

答：3种。while循环，do…while循环，for循环。

8.用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最适合？

答：可采用HTML5种新的语义标签<mark></mark>，被mark标签包围的内容会有高亮的背景色。

延伸

HTML5新语义标签

标签	含
article	规定独立的自包含内容。
aside	页面主内容之外的某些内容（比如侧栏）
figcaption	图片说明
figure	包含img和figcaption，将图片和图片说明组合
footer	文档或节规定页脚
header	为文档或节规定页眉
main	规定文档的主内容
mark	定义重要的或强调的文本
nav	导航链接集合
section	文档中的节，相关元素块
summary	定义元素的可见标题
time	定义日期/时间