C1-3任务笔记

最新推荐文章于 2024-08-10 17:24:49 发布
最新推荐文章于 2024-08-10 17:24:49 发布
阅读量74 收藏
点赞数
分类专栏： C1考级任务 考级任务
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52283848/article/details/118330380
版权

任务1富文本编辑器使用

富文本编辑器的模拟器

  1. 打开富文本编辑器，随意输入内容
    在这里插入图片描述

  2. 选择源代码模式打开在这里插入图片描述

  3. 可以看到，这里直接显示了源代码，是一个p标签
    在这里插入图片描述

  4. 接着写一些html代码，看下效果
    在这里插入图片描述
    在这里插入图片描述

  5. 加入一些按钮实现一些简单的功能，下面是用HBuilder X写的代码实现和效果图

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">

		</script>


		<style>
			#mydiv {
				color: red;
				font-size: 50px;
				margin-bottom: 25px;
				text-align: center;
			}

			.myclass {
				color: #0000FF;
				font-size: 20px;
				margin-bottom: 25px;
				background-image: linear-gradient(180deg, blue, yellow, red);
			}

			table {
				margin: auto;
				margin-bottom: 50px;
				border: #0000FF solid 1px;
				width: 80%;
			}

			table,
			td {
				border-collapse: collapse;
				border: #0000FF solid 1px;

			}

			tr {
				text-align: center;
			}

			.my_body {
				width: 650px;
				margin: auto;
				margin-top: 10%;
				text-align: center;
			}

			input {
				width: 100px;
				height: 50px;
				font-size: 20px;
				margin-left: 200px;
				align-items: center;

			}
		</style>

	</head>

	<body>
		<script>
			onclick = function() {
				var tab_name = document.getElementById("mytable");
				var my_button = document.getElementById("mybutton");
				var tab_tr = document.getElementsByTagName("tr");
				for (var i = 0; i < tab_tr.length; i++) {
					if (i == 1) {
						tab_tr[i].style.backgroundColor = "darkcyan";
					}
				}

			}
		</script>



		<div id="mydiv">CSDN能力认证中心</div>
		<div>
			<table id="mytable">
				<tr class="myclass">
					<td>认证等级</td>
					<td>认证名称</td>
				</tr>
				<tr>
					<td>C1</td>
					<td>见习工程师认证</td>
				</tr>
				<tr>
					<td>C4</td>
					<td>专项工程师认证</td>
				</tr>
				<tr>
					<td>C5</td>
					<td>全栈工程师认证</td>
				</tr>
			</table>
			<input id="mybutton" value="我要认证" type="button" />
		</div>
	</body>


</html>

在这里插入图片描述

任务2按要求完成CSS盒子模型

  • 任务要求图：
    在这里插入图片描述
  1. 使用Hbuild x实现的代码如下：
<html>
	<head>
		<meta charset="utf-8">
		<title>eee</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;

			}

			.mydiv {
				position: relative;
				width: 1020px;
				height: 800px;
				font-size: 20px;
				color: white;
				border: 5px solid gray;
				margin: 100px auto;
				background-color: #fcdd9c;
			}

			.mydiv>div {

				text-align: center;
			}

			#div1,
			#div2,
			#div3,
			#div4,
			#div5,
			#div6 {
				background-color: #c4cf8d;
			}

			#div1 {
				width: 320px;
				/*将块元素变为行内块元素，使文字居中*/
				line-height: 170px;
				margin: 20px;
			}

			#div2 {
				width: 320px;
				line-height: 570px;
				margin: 20px;
			}

			#div3 {
				/* 采用绝对布局，对照其父元素 */
				position: absolute;
				width: 640px;
				line-height: 250px;
				/* 左侧相对于父元素的距离 */
				left: 360px;
				/* 顶部相对于父元素的距离 */
				top: 20px;
			}

			#div4 {
				position: absolute;
				width: 365px;
				line-height: 490px;
				left: 360px;
				top: 290px;
				z-index: 1;
			}

			#div5 {
				position: absolute;
				width: 255px;
				line-height: 235px;
				left: 745px;
				top: 290px;
			}

			#div6 {
				position: absolute;
				width: 255px;
				line-height: 235px;
				left: 745px;
				top: 545px;
			}

			#div7 {
				position: absolute;
				width: 250px;
				line-height: 200px;
				left: 385px;
				top: 45px;
				background-color: #F2A263;
				z-index: 2;
			}

			#div8 {
				position: absolute;
				width: 250px;
				line-height: 200px;
				left: 725px;
				/* 负号表示反向 */
				top: -100px;
				background-color: #F2A263;
				z-index: 2;
			}

			#div9 {
				position: absolute;
				width: 250px;
				line-height: 200px;
				left: 425px;
				top: 700px;
				background-color: #F7CC9F;
				z-index: 0;
				
			}
		</style>
	</head>
	<body>


		<div class="mydiv">
			<div id="div1">1</div>
			<div id="div2">2</div>
			<div id="div3">3</div>
			<div id="div4">4</div>
			<div id="div5">5</div>
			<div id="div6">6</div>
			<div id="div7">7</div>
			<div id="div8">8</div>
			<div id="div9">9</div>
		</div>
	</body>
</html>

效果图如下：因为不知道总的边距，我根据自己的比列来的，感觉差的好多啊!哈哈哈
在这里插入图片描述

最后加上这句


			.mydiv {
				position: relative;
				width: 1020px;
				height: 800px;
				font-size: 20px;
				color: white;
				border: 5px solid gray;
				margin: 100px auto;
				background-color: #fcdd9c;
				/*这句就是超出浏览器部分隐藏*/
				overflow: hidden;
			}

大功告成，溜了溜了，这一下浪费了2小时，有点拉胯；

灵魂牢笼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ThrottleStop-9.4 笔记本处理器intel超频软件
11-02
这对于进行高性能计算或者需要快速响应的任务非常有用。 - **turboBoost控制**：可以开启或关闭Intel的turboBoost技术，该技术会自动提高CPU在轻负载时的运行频率，提供暂时的性能提升。 - **CPU电压调节**：通过...
ROS安装配置与基本语法-入门笔记
07-08
3. **库函数**：提供丰富的库函数支持复杂的算法和数据处理任务。 4. **消息传递机制**：采用发布/订阅模式实现节点间的通信，支持高效的消息交换。 5. **包管理**：内置包管理系统，方便软件的安装、更新和卸载。 ...
Text-to-3D 任务论文笔记： Latent NeRF
flow_specter的博客
05-09 2007
论文链接： https://arxiv.org/pdf/2211.07600.pdf使用Sketch-Shape可以让用户定义基础几何形状，而Latent-NeRF则会根据引导提示来优化形状并引入纹理。此外，还还提出了Latent-Paint，这是另一种形状引导的形式，其中生成过程直接应用于给定的3D网格，注意，这里不仅有结构，还有输入网格的精确参数。这是通过在潜在空间中表示纹理映射，并通过渲染的网格直接传播引导梯度到纹理映射来实现的。通过这样做，我们首次允许使用预训练扩散模型的引导来着色网格。
dpwwn-01靶机笔记
LINGX5的博客
08-10 982
我们通过nmap扫描发现目标开启了ssh，http,mysql服务。先对web站点进行了目录爆破，可惜一无所获。然后就陷入了实现爆破ssh，还是mysql的窘境，因为我们并没有有力的信息，去构造有价值与针对性的字典。因为mysql有默认的用户名root，我们选择对它尝试弱口令，成功登陆mysql，发现ssh凭据。利用ssh凭据，成功获得立足点，在mistic用户目录下发现logrot.sh定时任务脚本。[外链图片转存中…(img-9WYEBIYP-1723281683945)]提权成功。
C1认证学习笔记（第一章）_c1笔记
2401_84281638的博客
04-28 963
比特率：音视频、图像都可以采用这个指标，它指的是规定时间内传输的比特数，单位是bps（bit per second），比特率越高，数据传输的速度就越快，流媒体的播放质量就越好（音视频越清晰），所需带宽也越大，比特率有时候也和码率混为一谈，但码率的单位一般是kbps（千位每秒）。采样率：专用于音频多媒体，也称为采样速度或者采样频率，它定义了每秒从连续信号中提取并组成离散信号的采样个数，单位为赫兹（Hz）。
Vitis HLS 学习笔记--控制驱动任务示例
hi94的博客
05-21 1265
本文对《Vitis HLS 学习笔记--抽象并行编程模型-控制驱动与数据驱动-CSDN博客》中的控制驱动任务示例进行了详细解析，重点分析了 kernel 代码的并行处理机制及各模块的实现。通过查看综合报告、Schedule Viewer 和 Dataflow Viewer，确认了 funcB 和 funcC 的并行执行和 vecOut 的 FIFO 设置。并介绍了 Vitis IDE 的关键设置，包括数据文件加载、Flow Target 配置及 FIFO 深度调整。
印象笔记 - Markdown 入门指南
guoqx的专栏
02-29 1708
其常用的标记符号不超过十个，相对于更为复杂的 HTML 标记语言来说，Markdown 十分的轻量，学习成本也不需要太多，且一旦熟悉这种语法规则，会有沉浸式编辑的效果。而且Windows下不支持绝对路径，只支持相对路径。支持丰富的主流 Markdown 语法：支持文字相关样式、序号列表、任务列表、表格、TOC 目录、多种图表、数学公式、流程图、时序图、甘特图等；将本地图片文件嵌入到笔记中，笔记大小会随着嵌入和删除本地图片而改变，嵌入本地图片后，在笔记编辑模式下，显示成一个一长串字符的图片文件名。
C1认证学习笔记（第一章）
Aluxian_的博客
03-16 1546
C1认证——计算机通识进制转换：进制定义进制之间的转换任务训练练习：信息单位：单位定义换算公式任务训练练习： 进制转换： 进制定义 二进制 二进制：是指在数学和数字电路中以2为基数的记数系统，二进制只有0和1两个数字符号，其运算规律是逢2进1，例如101101。 八进制 八进制：一种以8为基数的计数法，采用0，1，2，3，4，5，6，7这八个数字符号，其运算规律是逢8进1，例如57。 十进制 十进制：一种以10为基数的计数法，采用0，1，2，3，4，5，6，7，8，9这十个数字符号，其运算规律是逢10进1，
C1任务3-web基础与布局
weixin_53064410的博客
07-05 89
HTML学习笔记 html基本标签 <!DOCTYPE html><!--向浏览器说明此文件是用html编写的 --> <html lang="en"><!--html文件的顶级标签,容纳web页面的全部元素--> <head><!--html文件的头部标签,容纳web页面的元数据(metaData),如title, character set, style sheets, link, script--> <meta
大数据-kafka学习笔记
weixin_52938172的博客
09-19 3760
Kafka 是一个分布式的基于发布/订阅模式的消息队列（Message Queue），主要应用于大数据实时处理领域。
MAE-DET学习笔记
charles_zhang_的博客
02-06 1389
在对象检测中，检测主干消耗了整个推理成本的一半以上。最近的研究试图通过借助神经架构搜索（NAS）优化主干架构来降低这一成本。然而，现有的用于对象检测的NAS方法需要数百到数千GPU小时的搜索，这使得它们在快节奏的研究和开发中不切实际。在这项工作中，我们提出了一种新的zero-shotNAS方法来解决这个问题。所提出的方法名为MAE-DET，通过最大熵原理自动设计有效的检测主干，而无需训练网络参数，将架构设计成本降低到几乎零，同时提供最先进的（SOTA）性能。
rabbitMQ-学习笔记
m0_61074526的博客
03-10 1682
rabbitmq从入门到入土
RH850-C1M-A Motor Control Timer(TSG3)电机控制驱动应用手册
01-17
这份应用手册是RH850/C1M-A微控制器用户在开发电机控制系统的宝贵资源，它不仅涵盖了TSG3的基本特性和操作方法，还提供了实际应用中的示例和注意事项，确保用户能够高效、安全地利用TSG3实现电机控制任务。...
n10p-gv2-c1 华硕F8S 升级版显卡bios
09-30
针对华硕F8S笔记本电脑，"n10p-gv2-c1"型号的显卡BIOS升级是一个重要的维护步骤，特别是对于那些遇到显示问题或者想要优化图形处理能力的用户来说。 首先，我们来看“更新BIOS的详细教程.docx”。这是一个文档，...
LeNet学习笔记1
08-04
该模型是现代卷积神经网络（CNN）的先驱，其设计思想对后续的计算机视觉任务有着深远的影响。在LeNet的学习笔记中，主要涉及到以下几个关键知识点： 1. **输入层 (Input Layer)**: 输入层是模型的第一层，负责接收...
韦东山imx6ullpro完全开发书册
最新发布
08-15
韦东山imx6ullpro完全开发书册
使用html+css +js 实现天猫首页效果.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目）
08-15
Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课
JavaWeb实现超市订单管理系统smbms.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值