ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

C1.3

2021-04-22 18:59:46  阅读:176  来源: 互联网

标签:customers C1.3 tr 认证 编辑器 源码 txt


web基础

任务目标

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

然后,在源码模式下,查看内容是如何被转变为带标签的⽂本的,都带了哪些HTML标签
源码模式
在这里插入图片描述

最后,实现编辑器没有的功能,例如让表格隔⾏换⾊,加⼊JavaScript按钮,试着完成它吧:)
加入按钮
在这里插入图片描述

具体实现

1.在源码模式下理解表格的相关代码的具体含义,然后添加相关的样式
代码如下

// An highlighted block
<style>
#customers {
  width: 40%;
}
#customers tr:nth-child(even){background-color: #D3D3D3;}
#customers tr {
  height: 5px;
}
</style>

<table id="customers" class="table table-bordered" style="background-color: rgb(255, 255, 255);">
 <tbody>
   <tr>
     <td>c1</td>
     <td>见习工程师认证</td>
   </tr>
   <tr>
     <td>c4</td>
     <td>专项工程师认证</td>
   </tr>
   <tr>
     <td>c5</td>
     <td>全栈工程师认证</td>
   </tr>
   <tr>
     <td><br></td>
     <td><br></td>
   </tr>
  </tbody>
</table>


<button onclick="myFunction()">我要考试</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("Press a button!")) {
    txt = "您按了确定";
  } else {
    txt = "您按了取消";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

实现效果图如下:
在这里插入图片描述
在这里插入图片描述
至此任务一完成。
任务二的课程也全部结束!
在这里插入图片描述
在这里插入图片描述

标签:customers,C1.3,tr,认证,编辑器,源码,txt
来源: https://blog.csdn.net/qq_45668840/article/details/116026222

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有