0
点赞
收藏
分享

微信扫一扫

c1能力认证考试训练任务03-web基础与布局

独兜曲 2022-01-30 阅读 28


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

c1能力认证考试训练任务03-web基础与布局_javascript

c1能力认证考试训练任务03-web基础与布局_javascript_02

c1能力认证考试训练任务03-web基础与布局_javascript_03

c1能力认证考试训练任务03-web基础与布局_javascript_04

代码:

<p align="center">作为有情怀的国产手机,质量一定要过硬</p>
<table border="5" width="500px" bgcolor="skyblue" cellspacing="0" cellpadding="20px" align="center" frame="void">
<caption>标题:3月平均气温</caption>
<thead>
<tr align="center" valign="center" bgcolor="steelblue">
<th height="40px">城市</th> <!-- 加粗和居中 -->
<!-- <td>上海 </td> -->
<td align="center" colspan="2">上海/北京</td>
<td>广州</td> <!-- colspan 跨列要把这一列删除掉 -->
</tr>
</thead>

<tbody>
<tr align="center">
<td rowspan="2">温度/紫外线</td>
<td>26℃</td>
<td>25℃</td>
<td>30℃</td>
</tr>
<tr align="center">
<!-- <td>紫外线</td> --> <!-- rowspan 跨行要把跨的行的那一列删掉 -->
<td>弱</td>
<td>弱</td>
<td>强</td>
</tr>
<tr align="center">
<td>天气</td>
<td>多云</td>
<td>多云</td>
<td>晴天</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td>风力</td>
<td>3级</td>
<td>4级</td>
<td>1级</td>
</tr>
</tfoot>
</table>&nbsp;<p></p><p><br></p>

<button onclick="alert()">点击弹窗</button>

任务二:【所见即所得】式开发

c1能力认证考试训练任务03-web基础与布局_html5_05

c1能力认证考试训练任务03-web基础与布局_html5_06

代码:

<!DOCTYPE html>
<html>
<head>
<h1>我的爱好</h1>
<h2>睡觉</h2>
<h4>5年</h4>
<p ><font size="" color="palevioletred">睡觉真的让我感到很治愈,每次不开心我就会睡大觉,做个好梦,醒来啥都忘了</font></p>
<h2>吃饭</h2>
<h4>20年</h4>
<p>我真的很喜欢吃饭,这件事已经坚持了20年了</p>
</head>
<body>

</body>
</html>

任务三:CSS盒子模型

c1能力认证考试训练任务03-web基础与布局_javascript_07

c1能力认证考试训练任务03-web基础与布局_javascript_08

任务三待续…

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
table{width: 100%;height: 100%;}
.table0{
border: solid;
border-width: 5px;
border-color: #838383;
background-color:#dfdf6f ;
max-width: 500px;
max-height: 400px;
}
.table1{
width: 100%;
border-style: none;
line-height: 80px;
border-spacing: 10px 10px;
}
.table2{
width: 100%;
border-style: none;
border-spacing: 0px 10px;
padding-right: 10px;
}
#block1{
background-color: #81ec8d;
height: 100%;
text-align: center;

}
#block2{
background-color: #81ec8d;
height: 200px;
text-align: center;
}
#block3{
background-color: #81ec8d;
height: 150px;
text-align: center;

}
#block4{
background-color: #81ec8d;
height: 150px;
text-align: center;

}

</style>
</head>
<body>
<table class="table0">

<tr>
<td>
<table class="table1">
<tr id="block1"><td>1</td></tr>
<tr id="block2"><td>2</td></tr>
</table>
</td>

<td>
<table class="table2">
<tr id="block3"><td>3</td></tr>
<tr>
<td>
<table >

<tr>
<td id="block4">4</td>
<td>
<table >
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>

</table>


</body>
</html>

继续完善。。。。

c1能力认证考试训练任务03-web基础与布局_javascript_09

c1能力认证考试训练任务03-web基础与布局_html_10

代码(用table的方式做的):

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0px;
padding: 0px;
}
#block9{
background-color: #ffaa7f;
position: absolute;
width:35px;
padding: 30px;
text-align: center;
left: 120px;
top: 340px;

}
table{width: 100%;height: 100%;}
.table0{

border: solid;
border-width: 5px;
border-color: #838383;
background-color:#dfdf6f ;
max-width:600px;
box-sizing: border-box;

}
.table1{
width: 100%;
border-style: none;
line-height: 100px;
border-spacing: 10px 10px;
}
.table2{
width: 100%;
border-style: none;
border-spacing: 0px 10px;
padding-right: 10px;
}
#block1{
background-color: #81ec8d;
height: 100px;
text-align: center;

}
#block2{
background-color: #81ec8d;
height: 190px;
text-align: center;

}
#block3{
box-sizing: border-box;
background-color: #81ec8d;
height: 180px;
text-align: center;
}
#block4{
background-color: #81ec8d;
height: 100px;
text-align: center;
position: relative;
z-index:10000;
}
#block5{
background-color: #81ec8d;
text-align: center;
height: 80px;
}
#block6{
background-color: #81ec8d;
text-align: center;
height: 80px;
}

.table4{
padding-left: 10px;
border-spacing: 0px 10px;
margin-top: -10px;
margin-bottom: -10px;
}

#block7{
background-color: #ffaa7f;
position: relative;
margin-left: 10px;
width: 30px;
padding: 40px;
}
#block_3{
position: relative;
text-align: center;
top: -60px;
}

#block8{
margin: -20px;
background-color: #ffaa7f;
position: absolute;
width:15px;
padding: 50px;
height: 10px;
box-sizing: border-box;
left: 400px;
top: -20px;
text-align: center;

}


</style>
</head>
<body>
<div >
<table class="table0">

<tr>
<td>
<table class="table1">
<tr id="block1"><td>1</td></tr>
<tr id="block2"><td>2</td></tr>
</table>
</td>

<td>
<table class="table2">
<tr id="block3"><td><div id="block7">7</div><div id="block_3" >
3
</div><div id="block8">8</div></td></tr>
<tr>
<td>
<table class="table3">

<tr>
<td id="block4" >4 </td>
<td>
<table class="table4">
<tr id="block5" ><td>5</td></tr>
<tr id="block6"><td>6</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>

</table>
</div>

<div id="block9">
9
</div>

</body>
</html>

自测

1.html5为了使img元素可拖放,需要增加什么属性?

1、首先设置元素为可拖放:在img标签内加入draggable=”true”.

<img draggable="true">

2、设置元素的拖动:在img标签中用ondragstart属性调用一个函数drag(ev),这个函数中用dataTransfer.setData()方法设置了被拖数据的数据类型和值.

<img ondragstart=”drag(event)”>

function drag(ev){

ev.dataTansfer.setData(“Text”,ev.target.id)//数据类型是Text,值是可拖动元素的id(“drag1”)。

}

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

"date"类型可以选择一个无时区的日期选择器

HTML5 拥有多个供选择日期和时间的新的输入类型:
date - 选择日、月、年
month - 选择月、年
week - 选择周、年
time - 选择时间(时、分)
datetime - 选择时间、日期、月、年(UTC 时间)
datetime-local - 选择时间、日期、月、年(本地时间)

示例:

Date: <input type="date" name="user_date" />

PS:

Internet Explorer 和 Firefox 不支持 <input type="date"> 元素,移动端支持。

3.css盒子模型中的magin,border,padding都是什么意思?

盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)和外边距(margin)。

c1能力认证考试训练任务03-web基础与布局_html_11

4.说出至少五种常见的HTML事件?

1.onclick 当用户点击某个对象时调用的事件,2.ondblclick 当用户双击某个对象时调用的事件,3.onfocus 元素获得焦点时触发的事件,4.onkeydown 某个键盘按键被按下触发,5.onmousedown 鼠标按钮被按下触发

c1能力认证考试训练任务03-web基础与布局_html_12

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

c1能力认证考试训练任务03-web基础与布局_html5_13

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

令display:flex;

7.JavaScript中有多少种不同类型的循环?

c1能力认证考试训练任务03-web基础与布局_html5_14

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

使用mark标签,或者使用’ + Keyword + ’



举报

相关推荐

0 条评论