C1任务03-wed基础和布局

2021-05-19 12:59:25 阅读：194 来源： 互联网

标签：03 wed column height color grid C1 line row

任务一：富文本编辑器使用

开源的富文本编辑器：https://summernote.org/

添加文字颜色，创建表格，隔行换色

2.创建按钮，点击弹窗

3.插入视频和音频

源码如下:

<p><span style="color:red">CSDN能力认证中心</span></p>
<table border="1" width="200px" height="50px">
  <tbody>
    <tr style="background-color:#eeeeee">
      <td>1</td>
      <td>data1</td><td>data2</td><td>data3</td>
    </tr>
    <tr>
      <td>2</td>
      <td>data1</td><td>data2</td><td>data3</td>
    </tr>
    <tr style="background-color:#eeeeee">
      <td>3</td>
      <td>data1</td><td>data2</td><td>data3</td>
    </tr>
</tbody></table>
<br>

<input type="button" value="点击" onclick="alert('这是一个弹窗)');">
<br><br>

<p>插入视频</p>
<video autoplay="autoplay" controls="control" loop="loop" id="video">
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>
<br><br>

<p>插入音频</p>
<audio autoplay="autoplay" controls="controls" loop="">
  <source src="http://music.163.com/song/media/outer/url?id=447925558.mp3" type="audio/mpeg">
</audio>

任务二: HTML和CSS网页开发任务

登录https://studio.code.org/s/csd2-2019，完成自己第一个网站！
在这里插入图片描述

拓展任务: CSS盒子模型布局

在这里插入图片描述

CSS部分：

* {
	border: 0;
	padding: 20px;
	margin: 0;
}

div { 
	text-align: center;
	}

#main_box {
	width: 1400px;
	height: 1000px;
	background-color: #FCDC9C;
	display: grid;
	grid-gap: 20px;
}

.box1_6 {
	background-color: #C4CC8C;
	border: 3px solid #B4CC8C;
}
.box7_8 {
	background-color: #F8A464;
}
.box9 {
	background-color: #FCCC9C;
}

#box1 {
	grid-column: 1/4;
	grid-row:1/3;
	line-height: 174px;

}
#box2 {
	grid-column: 1/4;
	grid-row:3/9;
	line-height: 562px;
}
#box3 {
	grid-column: 4/9;
	grid-row:1/5;
	line-height: 363px;
}
#box4 {
	grid-column: 4/7;
	grid-row:5/9;
	line-height: 388px;
	z-index: 1;
}
#box5 {
	grid-column: 7/9;
	grid-row:5/7;
	line-height: 174px;
}
#box6 {
	grid-column: 7/9;
	grid-row:7/9;
	line-height: 174px;
}
#box7 {
        width: 300px;
        height: 260px;
		line-height: 180px;
        position: absolute;
		left: 600px;
		top: 120px;
}
#box8 {
        width: 300px;
        height: 260px;
		line-height: 180px;
        position: absolute;
		left: 1100px;
		top: -100px;
}
#box9 {
		position: absolute;
        width: 300px;
        height: 260px;
		line-height: 180px;
		left: 600px;
		top: 1000px;
		z-index: 0;
}

p {
	font-size: 30px;
	color: #FFFFFF;
}

Html部分：

<div id="main_box">
	<div class="box1_6" id="box1">
		<p>1</p>
	</div>
	<div class="box1_6" id="box2">
		<p>2</p>
	</div>
	<div class="box1_6" id="box3">
		<p>3</p>
	</div>
	<div class="box1_6" id="box4">
		<p>4</p>
	</div>
	<div class="box1_6" id="box5">
		<p>5</p>
	</div>
	<div class="box1_6" id="box6">
		<p>6</p>
	</div>
	<div class="box7_8" id="box7">
		<p>7</p>
	</div>
	<div class="box7_8" id="box8">
		<p>8</p>
	</div>
	<div class="box9" id="box9">
		<p>9</p>
	</div>
</div>

##　自测

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

<img draggable="true">

HTML5哪一个input类型可以选择⼀个无时区的日期选择器？
date
CSS盒子模型中的Margin、Border、Padding都是什么意思？
Margin：元素外边距。
Border：元素边框。
Padding：元素内边距。
说出至少五种常见HTML事件
onclick：点击元素。
onchange：元素改变。
onm ouseover：鼠标移动。
onm ouseout：鼠标离开。
onkeydown：键盘按下。
onkeypress：键盘松开。
HTML的onblur和onfocus是哪种类型的属性？
onfocus：在元素获得焦点时触发。
onblur：在元素失去焦点时触发。
怎么设置display属性的值使容器成为弹性容器？
display:flex;
JavaScript中有多少种不同类型的循环？
for 、do…while和 while
用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适？
mark标签

标签：03,wed,column,height,color,grid,C1,line,row
来源： https://blog.csdn.net/m0_54846347/article/details/116422667

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

ICode9

C1任务03-wed基础和布局

任务一： 富文本编辑器使用

任务二: HTML和CSS网页开发任务

拓展任务: CSS盒子模型布局

任务一：富文本编辑器使用