CSDN C1认证任务03

最新推荐文章于 2023-05-02 11:59:31 发布

越星辰

最新推荐文章于 2023-05-02 11:59:31 发布

阅读量826

点赞数

分类专栏： C1

本文链接：https://blog.csdn.net/qq_42721556/article/details/117032973

版权

C1 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

说明

大厂每年都要招聘大量的前端软件工程师,有些开发基于浏览器应用,有些开发基于H5的应用,而有些可能会开发小程序和桌面应用。不管是做哪种开发工作的前端工程师,都离不开HTML,CSS,JavaScript这三类Web浏览器核心技术。HTML定义了浏览器中各种元素的分类和用途,CSS定义了浏览器页面的整体布局和外观,而 JavaScript可以动态创建页面,使网页能够响应用户的点击、拖拽等各种事件,给用户更好的体验。

一、任务一

首先,在开源富文本编辑器(https://summernote.org/)中随便输入一段文本

在这里插入图片描述

然后,在源码模式下,査看内容是如何被转变为带标签的文本的,都带了哪些HTML标签

在这里插入图片描述

最后,实现编辑器没有的功能,例如让表格隔行换色,加入 JavaScript按钮,试着完成它吧

在这里插入图片描述

二、解决任务一

因为要写JS代码，所以我使用VS Code编辑器，选一个自己喜欢的就行，没必要一样。下面是效果图：

在这里插入图片描述

代码如下：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>C1ex3</title>
	<style>
		.my_font{
			color: red;
			font-size: 50px;
			margin-bottom: 25px;
		}
		table{
			margin: auto;
			margin-bottom: 20px;
			width: 100%;
		}
		.my_body{
			width: 650px;
			margin: auto;
			margin-top: 10%;
			text-align: center;
		}
		tr{
			height: 40px;
		}
        table,td{
            border-collapse: collapse;
            border:#000 solid 1px;
        }
        td{
            width: 33%;
        }
		.tou{
			height: 60px;
			background-image: linear-gradient(135deg,orange,yellow,violet);
		}
		#mybtn{
            width: 110px;
            height: 40px;
            font-size: 17px;
        }
        #mybtn:hover{
            background-image: linear-gradient(135deg,orange,yellow,violet);
        }
	</style>
</head>
<body>
	<script>
		window.onload = function(){
			document.getElementById("mybtn").onclick = function(){
				window.location.href="https://ac.csdn.net/";
			}
			var t_name = document.getElementById("tab");
            var t_len = t_name.getElementsByTagName("tr");
			for(var i=0;i<t_len.length;i++){
				//偶数行时执行
				if(i%2 === 0){
					t_len[i].style.backgroundColor="#D9D9D9";
				}
				else{
				}
			}
		}
	</script>
	<div class="my_body">
		<div class="my_font">CSDN能力认证中心</div>
		<table id="tab">
			<tr class="tou">
				<td>认证等级</td>
				<td>认证名称</td>
				<td>考试费用</td>
			</tr>
			<tr>
				<td>C1</td>
				<td>见习工程师认证</td>
				<td>学生：200元</td>
			</tr>
			<tr>
				<td>C2</td>
				<td>专项工程师认证</td>
				<td>学生：2000元</td>
			</tr>
			<tr>
				<td>C3</td>
				<td>全栈工程师认证</td>
				<td>学生：8000元</td>
			</tr>
		</table>
		<input id="mybtn" value="我要认证" type="button">
	</div>
</body>
</html>

点击按钮就会跳转到C系列认证官网

三、拓展任务：CSS盒子模型

深入理解CSS盒子模型多层次含义
边框边距
标准文档流(浮动与定位)
布局模式
完成下图的CSs盒子模型布局

在这里插入图片描述

四、解决拓展任务

代码如下，里面有注释

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>C1ex3</title>
	<style>
		/* 清除所有边距样式 */
		* {
			padding: 0;
			margin: 0;
		}
		.mydiv{
			/* 设置相对布局，此处设置布局是为了让其子元素相对此元素布局 */
			position: relative;
			/* 设置区域宽高 */
			width: 1155px;
			height: 660px;
			/* 设置外边距 */
			margin: 7% auto;
			/* 设置边框10像素，实线，灰色 */
			border: 10px solid gray;
			font-size: 20px;
			/* 设置此div块的字体颜色 */
			color: #FFFFFF;
			background-color: #fcdd9c;
			/* 设置此div所在层 */
			z-index: -1;
		}
		/* 选择mydiv类的内部div标签 */
		.mydiv > div{
			/* 设置字体居中 */
			text-align: center;
		}
		/* 设置共同属性 */
		.d1,.d2,.d3,.d4,.d5,.d6{
			background-color: #c4cf8d;
		}
		.d7,.d8{
			background-color: #F2A263;
		}
		.d1{
			width: 365px;
			/* 设置行高：目的是为了方便div内的文字纵向居中 */
			line-height: 180px;
			margin: 20px;
		}
		.d2{
			width: 365px;
			line-height: 420px;
			margin: 20px;
		}
		.d3{
			/* 采用绝对布局，对照其父元素 */
			position: absolute;
			width: 730px;
			line-height: 250px;
			/* 左侧相对于父元素的距离 */
			left: 405px;
			/* 顶部相对于父元素的距离 */
			top: 20px;
		}
		.d4{
			position: absolute;
			z-index: 1;
			width: 365px;
			line-height: 350px;
			left: 405px;
			top: 290px;
		}
		.d5{
			position: absolute;
			width: 345px;
			line-height: 165px;
			left: 790px;
			top: 290px;
		}
		.d6{
			position: absolute;
			width: 345px;
			line-height: 165px;
			left: 790px;
			top: 475px;
		}
		.d7{
			position: absolute;
			z-index: 2;
			background-color: #F2A263;
			width: 250px;
			line-height: 200px;
			left: 425px;
			top: 45px;
		}
		.d8{
			position: absolute;
			z-index: 2;
			width: 250px;
			line-height: 200px;
			left: 865px;
			/* 负号表示反向 */
			top: -100px;
		}
		.d9{
			position: absolute;
			z-index: 0;
			width: 250px;
			line-height: 200px;
			left: 425px;
			top: 560px;
			background-color: #F7CC9F;
		}
	</style>
</head>

<body>
	<div class="mydiv">
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
		<div class="d4">4</div>
		<div class="d5">5</div>
		<div class="d6">6</div>
		<div class="d7">7</div>
		<div class="d8">8</div>
		<div class="d9">9</div>
	</div>
</body>
</html>

实现效果如下：

在这里插入图片描述

注意，这看起来已经实现了，但是题目要求我们隐藏超出浏览器的部分，所以应该在div里面加入一下代码：

.mydiv{
			/* 设置相对布局，此处设置布局是为了让其子元素相对此元素布局 */
			position: relative;
			/* 设置区域宽高 */
			width: 1155px;
			height: 660px;
			/* 设置外边距 */
			margin: 7% auto;
			/* 设置边框10像素，实线，灰色 */
			border: 10px solid gray;
			font-size: 20px;
			/* 设置此div块的字体颜色 */
			color: #FFFFFF;
			background-color: #fcdd9c;
			/* 设置此div所在层 */
			z-index: -1;

			/* 没错，就是这一句 */
			/* 设置超过此div块的元素部分隐藏 */
			overflow: hidden; 
		}

最终效果

在这里插入图片描述

五、自测题

HTML5为了使img元素可拖放,需要增加什么属性?
draggable=“true”,其实这个属性也可以加在div等其他元素中，让元素可拖拽。
HTML5哪一个 input类型可以选择一个无时区的日期选择器?
type=”data”
在这里插入图片描述
CSS盒子模型中的 Margin、 Border、 Padding都是什么意思?

说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
说出至少五种常见HTML事件。
在使用以下事件时统一在前面加上on，例如:onclick(单击事件)
blur 失去焦点
focus 获得焦点
click 鼠标单击
dblclick 鼠标双击
keydown 键盘按下
keyup 键盘弹起
mousedown 鼠标按下
mouseover 鼠标经过
mousemove 鼠标移动
mouseout 鼠标离开
mouseup 鼠标弹起
reset 表单重置
submit 表单提交
change 下拉列表选中项改变，或文本框内容改变
select 文本被选定
load 页面加载完毕
HTML的 onblur和onfocus是哪种类型的属性?
事件类型的属性。
onblur 属性在元素失去焦点时被触发，即：失去焦点事件；
onfocus 属性在元素获得焦点时被触发，即：获得焦点事件；
怎么设置 display属性的值使容器成为弹性容器?
Display=”flex”
JavaScript中有多少种不同类型的循环?
for循环
for in循环
while循环
do while循环
for of 循环
for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,使用时注意它的兼容性。
用户搜索某个单词后, JavaScript高亮显示搜索到的单词,使用哪个语义化标签最合适?
使用<mark></mark>标签