c1任务三

最新推荐文章于 2024-03-18 21:44:49 发布
最新推荐文章于 2024-03-18 21:44:49 发布
阅读量178 收藏 1
点赞数
文章标签： 程序人生 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44997264/article/details/117483552
版权

学习目标：

一、使用富文本编辑器

二、所见所得 式开发

三、扩展css盒子模型

四、自测

学习内容：

一、使用富文本编辑器

1.首先我们打开网址（ https://summernote.org/），在富文本编辑器下写入一段文本，

然后，在源码模式下，查看内容是如何转变为带标签的文本的，都带了那些HTML标签

最后，实现编辑器没有的功能，例如让表格显示颜色，加入JavaScript按钮，试着完成它吧

代码：

 <h4><meta charset="UTF-8"> 
    </h4>
    <table width="60%" cellpadding="2" border="1" bgcolor="#FF0F00">
        <caption><font color="#00FFFF">课程表</font></caption>
        <style>
 table{
	 margin:5px auto;
	 width:60%;
	 padding:5px;
	 }
  th{
	 background-color:#76B7BC;
	 font-size:14px;
	 padding:5px;
	 }
  .even td{/*必须加td，代表的是一行进行*/
	  background-color:#BCD7DA;
	  padding:5px 6px;
	  }
  
  .odd td{
	  background-color:#FFF;;
		  padding:5px 6px;}
</style>
<tbody><tr align="center">
            <td colspan="2">时间\日期</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
        </tr>

        <tr class="even" begcolor="#FF00FF" align="center">
            <td rowspan="2">上午</td>
            <td>9:30-10:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <tr class="even " begcolor="#FF0000" align="center">
            <td>10:25-11:10</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <tr>
            <td colspan="7">&nbsp;</td>
        </tr>

        <tr align="center">
            <td rowspan="2">下午</td>
            <td>14:30-15:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <tr background="#F0F0F0" align="center">
            <td>15:25-16:10</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
    </tbody></table> 
<input type="button" value="提交" onclick="alert('恭喜你的课程表已提交')">

效果如下图：

如果对以上代码不理解的可以进入( https://www.runoob.com/tags/ref-byfunc.html) 学习HTML标签

任务二，所见所得式开发

在code.org上完成网页开发的课程及系列任务https://studio.code.org/s/csd2-2019 ，根据提示做完即可。

三、扩展css盒子模型

盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局，下面是我借鉴某博主并加上自己的理解和完善的，附上代码以供后续小伙伴学习

<html>
	<head>
<style>       /*css的代码*/
body{
	background-color:rgb(250,209,155);
	}
div{
	margin:10px;
	}
	
.divbig1{
	height:500px;
	width:30%;
	float:left;
	background-color:rgb(250,209,155);
	}
	
.divbig2{
	height:500px;
	width:65%;
	float:left;
	}
	
.div1{
	height:100px;
	width:90%;
	background-color: rgb(54,222,31);
                text-align:center
                display: -moz-box;    /*浏览器的兼容Firefox*/
                display: -webkit-box;/*浏览器的兼容FSafari、Chrome*/
               -moz-box-align: center;/*浏览器兼容Firefox*/
               -webkit-box-align: center;/*浏览器兼容FSafari、Chrome */
               -moz-box-pack: center;/*浏览器兼容Firefox*/
                -webkit-box-pack: center;/*浏览器兼容FSafari、Chrome */
	}
	
.div2{
	height:375px;
	width:90%;
	background-color: rgb(54,222,31);
                text-align:center
                display: -moz-box;/*浏览器兼容Firefox*/
                display: -webkit-box;/*浏览器兼容FSafari、Chrome*/
               -moz-box-align: center;/*浏览器兼容Firefox*/
               -webkit-box-align: center;/*浏览器兼容FSafari、Chrome */
               -moz-box-pack: center;/*浏览器兼容Firefox*/
                -webkit-box-pack: center;/*浏览器兼容FSafari、Chrome */
	}

.div3{
	height:150px;
	width:90%;
	background-color: rgb(54,222,31);
                align-items: center;
	}

.divbig3{
	width:100%;
	}

.div4{
	height:325px;
	width:48%;
	background-color: rgb(54,222,31);
	margin:0;
	float:left;
                text-align:center
                display: -moz-box;/*兼容Firefox*/
                display: -webkit-box;/*兼容FSafari、Chrome*/
               -moz-box-align: center;/*兼容Firefox*/
               -webkit-box-align: center;/*兼容FSafari、Chrome */
               -moz-box-pack: center;/*兼容Firefox*/
                -webkit-box-pack: center;/*兼容FSafari、Chrome */
	}	

.div5{
	height:150px;
	width:41%;
	background-color: rgb(54,222,31);
 	float:left;
	margin: 0px;
                margin-left: 5px;
                text-align:center
                display: -moz-box;/*兼容Firefox*/
                display: -webkit-box;/*兼容FSafari、Chrome*/
               -moz-box-align: center;/*兼容Firefox*/
               -webkit-box-align: center;/*兼容FSafari、Chrome */
               -moz-box-pack: center;/*兼容Firefox*/
                -webkit-box-pack: center;/*兼容FSafari、Chrome */
	}	
	
.div6{
	height:165px;
	width:41%;
	background-color: rgb(54,222,31);
	float:left;
	margin-left: 5px;
                margin-top: 10px;
                text-align:center
                display: -moz-box;/*兼容Firefox*/
                display: -webkit-box;/*兼容FSafari、Chrome*/
               -moz-box-align: center;/*兼容Firefox*/
               -webkit-box-align: center;/*兼容FSafari、Chrome */
               -moz-box-pack: center;/*兼容Firefox*/
                -webkit-box-pack: center;/*兼容FSafari、Chrome */
	}	
.div7{
	height: 100px;
	margin: 20px;
	width: 100px;
	float: left;
	background-color: aqua;
                text-align:center
                display: -moz-box;/*兼容Firefox*/
                display: -webkit-box;/*兼容FSafari、Chrome*/
               -moz-box-align: center;/*兼容Firefox*/
               -webkit-box-align: center;/*兼容FSafari、Chrome */
               -moz-box-pack: center;/*兼容Firefox*/
                -webkit-box-pack: center;/*兼容FSafari、Chrome */
}
.div8{
	height: 100px;
	margin: 20px;
	width: 100px;
	background-color: aqua;
                position: absolute;
  	right: 10%;
  	top: -20px;
                text-align:center
                display: -moz-box;/*兼容Firefox*/
                display: -webkit-box;/*兼容FSafari、Chrome*/
               -moz-box-align: center;/*兼容Firefox*/
               -webkit-box-align: center;/*兼容FSafari、Chrome */
               -moz-box-pack: center;/*兼容Firefox*/
                -webkit-box-pack: center;/*兼容FSafari、Chrome */
}
.div9{
	height: 100px;
	margin: 20px;
	width: 100px;
	background-color: aquamarine;
	position: absolute;
  	left: 35%;
  	top: 450px;
	z-index: -1;
                text-align:center
                display: -moz-box;/*兼容Firefox*/
                display: -webkit-box;/*兼容FSafari、Chrome*/
               -moz-box-align: center;/*兼容Firefox*/
               -webkit-box-align: center;/*兼容FSafari、Chrome */
               -moz-box-pack: center;/*兼容Firefox*/
                -webkit-box-pack: center;/*兼容FSafari、Chrome */
}
</style>
	</head>
	<body>                          /*html的代码*/
	<div style="height: 520px">
			<div class="divbig1" >
				<div class="div1"  >1</div>
				<div class="div2">2</div>
			</div>

			<div class="divbig2">
				<div class="div3">3
					<div class="div7">7</div>
					<div class="div8">8</div>
				</div>
				<div class="divbig3">
					<div class="div4" >4</div>
					<div style="width:100%">
						<div class="div5">5</div>
						<div class="div6">6</div>
					</div>
				</div>
				<div class="div9">9</div>
			</div>

		</div>
	</body>
</html>

效果图如下：

文字的居中（水平居中容易，垂直居中有点难度）博主研究了很长时间，如果有小伙伴还挺迷惑的，那就点击链接 https://blog.csdn.net/erdouzhang/article/details/71110316 学习相关的内容

自测：

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

<img draggable="true">

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

<input type="date">

3.CSS盒子模型中的margin,border,padding都是什么意思

1.外边距(margin)

2.边框(border)

3.内边距(padding)

4.说出5种常见的HTML事件

Window 事件属性，表单事件，键盘事件，鼠标事件，媒介事件

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

onblur失去焦点事件 onfocus 获得焦点事件

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

  1. flex-direction　　容器内项目的排列方向(默认横向排列)　　
  2. flex-wrap　　容器内项目换行方式
  3. flex-flow　　以上两个属性的简写方式
  4. justify-content　　项目在主轴上的对齐方式
  5. align-items　　项目在交叉轴上如何对齐
  6. align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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

有三种分别是：

for循环；do..while循环；while循环

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

<mark>

 总结：

  愈学习，愈发现自己无知，

刘 怼怼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
A1B6C1工时任务跟踪管理小工具使用规范.docx
04-23
此为任务跟踪管理工具使用指南及规范
A1B6C1工时任务跟踪管理小工具-1620条P.xls
04-23
用于跟踪任务，一可以分析时间的使用情况，二可以看清任务的分解和跟踪，三可以作综合分析。并且可以方便地将一条信息直接变为一页显示和打印。是非常方便的任务跟踪程序。此为使用工具。
c1任务3
anyqrh
09-07 58
C1任务3 任务一：富文本开发 任务二：所见即所得开发
C1任务3：数据校验 知识总结
weixin_46271828的博客
04-16 257
系列文章目录 C1 任务-01：进制转换 C1 任务-02：信息单位 C1 任务-03：数据校验 文章目录系列文章目录前言一、任务目标二、任务背景三、任务内容1.奇偶校验1.1奇偶校验的概念1.2奇偶校验原理（图解）1.3技术特点及适用场景总结 前言 C1 任务-03：计算机信息单位的知识总结 提示：以下是本篇文章正文内容，下面案例可供参考 一、任务目标 理解计算机数据校验方法的技术实现原理 理解不同校验方法之间的差别和适用场景 二、任务背景 数据在传输的过程中，会受到各种干扰的影响，如脉冲干扰，随机噪
C1任务记录
weixin_44062399的博客
03-17 221
C1任务之植物大战僵尸记录任务介绍任务内容知识点掌握工具下载任务攻略寻找存档文件解释修改存档文件任务心得 任务介绍 一些玩家在玩游戏时，不想一关一关慢慢玩，想要直接跳到最后一关，或从指定关卡开始玩，本次任务通过经典的《植物大战僵尸》，帮助学习者了解游戏的数据保存机制，了解计算机对二进制数据的处理机制。 任务内容 修改《植物大战僵尸》的存档文件，将一个新用户的进度直接修改到6-3关，金钱（能量）直接修改到1000 知识点掌握 1、了解二进制、十六进制对于计算机的意义 2、掌握二/七/八/十/十二/十六等多种数
C1任务1
qq_43049408的博客
06-30 130
C1任务1 任务一 在code.org完成pixelation项目 在这个项目中用二进制 0 (代表黑)和 1 (代表白) 最上方的两行二进制代表了 宽 和 高 修改矩阵中的 0和1 就能改变左边像素格的样式 任务二 利用winhex 修改 txt 中的内容 txt 这种文字类的文件 底层都是用16进制来表示的 正常情况下大部分文件查看底层都是显示乱码的状态（除了这类文本类的文件） 文本类文件在本机显示时是正常但有可能在别的主机上出现乱码状态，这是因为系统版本和保存编码的不同所导致的，像win10的默认情
C1任务二
SignalFire的博客
06-01 131
任务点1.网络抓包 进入网址：http://temp.blog8090.com/
c1-02任务资源（Charles）
04-26
抓包工具
s3c1-tamagochi
02-11
文章的启动项目时，请仔细定义您的任务-并将该任务发布到醒目的网页上。 如果项目就像一本书，则自述文件将作为封面。 一个好的手册页包含一个简短的概述，一些详细的参考文档以及一些有用的示例。 说明该程序为何...
c1-final
03-22
任务在此竞赛中，输入数据包括来自1C公司的每日销售数据，该数据根据各个商店和项目分开。 输入数据来自2013年1月至2015年10月这段时间。任务是预测2015年12月每个产品和商店的总销售额。方法在实施方法中对于每个...
程序人生——Java使用关于性能和效率的建议
Perley620的博客，专注后端领域
03-18 1736
程序人生——Java使用关于性能和效率的建议
QT属性动画--设置样式属性(其他属性)
lizequan的博客
03-02 4733
这里写自定义目录标题故事背景遇到的问题解决过程最终方法感悟 故事背景   最近在制作一个按钮切换的动画特效中接触了属性动画这部分内容，并由此产生了一些思考。 遇到的问题 解决过程 最终方法 感悟 ...
Volatile的其他特性
我想月薪过万的博客
03-03 3501
2.1 volatile总体概览 在上一节中，我们已经研究完了volatile可以实现并发下共享变量的可见性，volatile除了保证可见性外，volatile还具备如下一些突出的特性： volatile的原子性问题：volatile不能保证原子性操作 禁止指令重排序：volatile可以防止指令重排序操作 2.2 volatile不保证原子性 2.3 代码测试 package Ls; /** * 目标：研究Volatile的原子性操作 * <p> * 基本观点：V.
【安卓基础】Android直接通过路径来操作其他应用的私有目录，可以吗？
m0_48179608的博客
03-02 7127
在上篇文章[【安卓基础】一文搞懂Android历代版本文件访问权限变化](https://blog.csdn.net/m0_48179608/article/details/122838494)我们对同一个应用的的文件访问权限做了比较。 那么不同应用之间文件访问又有什么限制呢？我们准备分二到三篇文件来阐述。 这篇文章，主要来看下不同系统版本下，我们直接通过路径来访问其它应用的**内部存储、外部存储私有目录**，看看能不能访问以及不同系统版本的区别。
Silane-PEG-NHS，SIL-PEG-NHS，可以用来修饰蛋白质、多肽以及其他活性基团，NHS-PEG-Silane
qq_39152602的博客
03-03 2849
英文名称：Silane-PEG-NHS 中文名称：硅烷-聚乙二醇-活性酯 分子量：1k，2k，3.4k，5k，10k，20k（可按需定制） 质量控制：95%+ 存储条件：-20°C，避光，避湿 用 途：仅供科研实验使用，不用于诊治 外观: 固体或粘性液体，取决于分子量 注意事项：取用一定要干燥，避免频繁的溶解和冻干 溶解性：溶于大部分有机溶剂，如：DCM、DMF、DMSO、THF等等。在水中有很好的溶解性 取用：现配现用，将包装从冰箱中取出，置于干燥器中缓慢升至室温，打开瓶盖，取用。取用.
[Golang]力扣Leetcode—中级算法—其他—两整数之和（位运算）
皮埃尔的博客
03-03 2580
[Golang]力扣Leetcode—中级算法—其他—两整数之和（位运算）
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
华为hcie-lab-c1任务书
09-28
华为HCIE-Lab-C1任务书是面向网络工程师的培训课程，旨在提升其在网络设计与实现方面的能力。任务书目录包含了课程的培训目标、背景知识、实验要求以及评估方法等内容。 首先，任务书明确了培训的目标和宗旨，即...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘 怼怼

你的鼓励将是我创作下去的动力哦

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值