C1任务03-wed基础和布局

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

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

  1. 添加文字颜色,创建表格,隔行换色
    C1任务03-wed基础和布局
    2.创建按钮,点击弹窗
    C1任务03-wed基础和布局
    3.插入视频和音频
    C1任务03-wed基础和布局
  • 源码如下:
<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,完成自己第一个网站!
C1任务03-wed基础和布局

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

C1任务03-wed基础和布局

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标签
上一篇:C++中的对象指针


下一篇:wed基础和http