C1任务03-Web基础与布局

最新推荐文章于 2024-05-10 11:57:00 发布

等到天蓝再看海0369

最新推荐文章于 2024-05-10 11:57:00 发布

阅读量81

点赞数

分类专栏： C1认证

本文链接：https://blog.csdn.net/qq_25930375/article/details/118675436

版权

C1认证专栏收录该内容

4 篇文章 0 订阅

订阅专栏

任务1

1.按照要求在富文本编辑器中写内容，调到源码模式，看到了内容是由P标签包裹。
在这里插入图片描述
2.通过HTML标签、JS、CSS样式表可以实现隔行换色，弹出信息等功能。
代码如下：

<p>CSDN能力认证中心</p>
<script>
function fun(){
          alert('提示信息');
}
</script>
<style>
.tablelist{
border:1px solid;
border-collapse;
}
.tablelist th,td{

}
.odd{
border:1px solid;
background-color:#c7e5ff;
}
.even{
background-color:#eaf5ff;
}
.bt1{
padding: 10px 28px;
    text-align: center;
    font-size: 17px;
	outline:20px;
	margin-top: 10px;
	margin-left: 10px;
}

</style>

<table class="tablelist" border="1" width="200">
<tbody><tr class="odd">
  <td>C1</td>
  <td><br></td><td>见习工程师认证</td>
</tr>
<tr class="even">
  <td>C2</td>
  <td><br></td><td>专项工程师认证</td>
</tr>
<tr class="odd">
   <td>C3</td>
   <td><br></td><td>全栈工程师认证</td>
</tr>
<tr class="even">
  <td>C1</td>
  <td><br></td><td>见习工程师认证</td>
</tr>
<tr class="odd">
  <td>C2</td>
  <td><br></td><td>专项工程师认证</td>
</tr>
<tr class="even">
   <td>C3</td>
   <td><br></td><td>全栈工程师认证</td>
</tr>

</tbody></table>
<button onclick="fun()" type="button" class="bt1">我要考试</button>

效果如下：

在这里插入图片描述

任务2

完成过程略
在这里插入图片描述

拓展

1.深入理解CSS盒子模型的多层次含义

边框边距
标准文档流，浮动与定位
布局模式
2.完成下面CSS模型布局

CSS盒子模型

<!DOCTYPE html>
<html>
<head>
	<title>CSS盒子模型</title>
	<head>
		<!-- CSS样式表 -->
		<style type="text/css">
			body{
			   /* 设置相对布局，此处设置布局是为了让其子元素相对此元素布局 */
			   position: relative;
			   font-size: 20px;
			   text-align: center;
			   color: white;
			   background-color: #fcdd9c;
			   /* 清除浏览器默认边距样式 */
			   padding: 0;
			   margin: 0;
			   width: 1000px;
				}
				/* 设置共同颜色属性 */
			.d1,.d2,.d3,.d4,.d5,.d6{   background-color: #c4cf8d;}
			.d7,.d8{   background-color: #F2A263;}
			.d1{
			   width: 30%;
			   /* 设置行高：目的是为了方便div内的文字纵向居中 */
			   line-height: 180px;
			   margin: 20px;
			}
			.d2{
				   width: 30%;
				   line-height: 420px;
				   margin: 20px;
				}
			.d3{
			   /* 采用绝对布局，对照其父元素 */
			   position: absolute;
			   width:calc(70% - 60px);
			   line-height: 250px;
			   /* 左侧相对于父元素的距离 */
			   left: calc(30% + 20px);
			   margin-left: 20px;
			   /* 顶部相对于父元素的距离 */
			   top: 0px;
			}
			.d4{
			   position: absolute;
			   z-index: 1;
			   width:calc(35% - 40px);
			   line-height: 350px;
			   left:calc(30% + 40px);
			   top: 270px;
			  }
			  .d5{
			   position: absolute;
			   width:calc(35% - 40px);
			   line-height: 165px;
			   left:calc(65% + 20px);
			   top: 270px;
			}
			.d6{
			   position: absolute;
			   width:calc(35% - 40px);
			   line-height: 165px;
			   left:calc(65% + 20px);
			   top: 455px;
			}
			.d7{
			   position: absolute;
			   z-index: 2;
			   background-color: #F2A263;
			   width: 20%;
			   line-height: 200px;
			   left: calc(30% + 60px);
			   top: 40px;
			  }
			.d8{
			   position: absolute;
			   z-index: 2;
			   width: 20%;
			   line-height: 200px;
			   left: calc(60% + 60px);
			   /* 负号表示反向 */
			   top: -100px;
			  }
			.d9{
			   position: absolute;
			   z-index: 0;
			   width: 20%;
			   line-height: 200px;
			   left: calc(30% + 60px);
			   top: 560px;
			   background-color: #F7CC9F;
			   bottom: -20px;
			  }
		</style>
	</head>
</head>
<body>
  <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>
</body>
</html>

效果图

自测

HTML5为了使 img 元素可拖放，需要增加什么属性？
首先设置元素为可拖放：在img标签内加入draggable=”true”
示例：
```
<img draggable="true">
```
HTML5哪一个 input 类型可以选择一个无时区的日期选择器
示例
```
<input type="date" value="2018-11-15" />
```
CSS盒子模型中 Margin、Border、padding 都是什么意思？
padding是内容与边框的距离，border是内容边框的宽度，margin是内容框（包含了border和
padding）与父级元素的距离。
说出至少五种常见的HTML事件
Window 事件属性、Form 事件、Keyboard 事件、Mouse 事件、Media 事件。
HTML 的 onblur 和 onfocus 是那种类型的属性？
onfocus 属性在元素获得焦点时被触发，即：获得焦点事件,
onblur 属性在元素失去焦点时触发，即：失去焦点事件；常用于表单验证代码中。
怎么设置display属性的值使容器成为弹性容器？
使用Flex属性
示例：
```
.box{
  display: inline-flex;
}
```
javaScript 中有多少个不同类型的循环？
三种。for 循环、do…while 循环和 while 循环。
用户搜索某个单词后，javaScript高亮显示搜索到的单词，使用哪个语义化标签最合适？
mark标签
示例：
```
<p>Do not forget to buy <mark>milk</mark> today.</p>
```