【C1认证任务】C1-3

最新推荐文章于 2022-02-11 21:23:36 发布

技术产品+咖啡

最新推荐文章于 2022-02-11 21:23:36 发布

阅读量162

点赞数 1

本文链接：https://blog.csdn.net/weixin_47955096/article/details/116584810

版权

C认证专题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

任务一

在这里插入图片描述

<p><font color="#ff0000">CSDN能力认证中心</font></p>
<table border="1">
<tbody>
<tr style="background-color:#adacac;"><td>C1</td><td>见习工程师认证</td></tr>
<tr><td>C4</td><td>专项工程师认证</td></tr>
<tr style="background-color:#adacac;"><td>C5</td><td>全栈工程师认证</td></tr>
</tbody>
</table>
<br>
<button onclick="alert('点击成功')">我要考试</button>

任务二

HTML都是默认带有样式的方形盒子
h1~h6：带有字体大小样式的盒子
a：超链接，页面内容（锚定）跳转和不同页面间的跳转
from/input等：表单相关的各种标签（文本框/单选/多选/下拉等）
div：块级元素，占一行（目前table相关标签小于div的使用）
span：行内元素，和内容大小相关
ul/ol/li：无序/有序列表
img：显示图片
等相关标签

=================
几个主要的CSS属性
position：定位，默认是static，并且默认的不受top(上), bottom,(下) left(左), right(右) 或者 z-index（纵轴）影响
display：行/块级元素调整，并且inline-block有两个的优点
float：浮动，左/右和没有浮动并且还能通过clear清除浮动的内容
边框（圆角/粗细/线型/颜色）、背景颜色、字体、字号、字体下划线、字颜色等不逐一说明了，都可以通过CSS进行对应的样式调整

CSS盒子模型

在这里插入图片描述
↑上图为浏览器显示内容（我把滚动条开口后截取的下面↓的图）

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<title>考试</title>
		<style>
			*{
				height:100%;
			}
			body {
				background-color: #fcdd9c;
				 padding:0px;
				 margin: 0px;
			}
			
			.mydiv{
				background-color:  #c5d08e;
				border: currentcolor 1px solid;
				
			}
			.mydiv2{
				background-color:  #f3a464;
				border: currentcolor 1px solid;
				
			}
		</style>
	</head>
	<body >
		<div style="">
		<div style="float:left;width:40%;">
		<div   style="height:20%;text-align:center;
		padding:20px 20px 20px 20px;
		line-height: calc(100vh*0.2);">
			<div class="mydiv">
				1
			</div>
			</div> 
		<div style="height:calc(100vh*0.8 - 60px);
		text-align:center;
		padding:0px 20px 20px 20px;
		line-height: calc(100vh*0.8 - 60px);">
			<div class="mydiv">
				2
			</div>
		</div>
		</div>
		
		<div style=" float:left;width:60%;">
		<div class="mydiv" style="margin:20px 20px 20px 0px; 
		height:calc(100vh*0.4);line-height:calc(100vh*0.4);
		text-align:center;z-index: 0;">
		3
		<div class="mydiv2" style="top: calc(100vh*0.4*-1); 
		margin: 80px 0px 80px 20px; 
		z-index: 999;position: relative; 
		width: calc(100vh*0.4 - 160px); height: calc(100vh*0.4 - 160px);
		line-height:calc(100vh*0.4 - 160px) ;">7</div> 
		
		<div class="mydiv2" style="top: -90px;left: 80%;
		z-index: 999;position: absolute; 
		width: calc(100vh*0.4 - 160px); height: calc(100vh*0.4 - 160px);
		line-height:calc(100vh*0.4 - 160px) ;">8</div> 
		</div>
		<div style="margin:20px 0px 20px 0px; height:calc(100vh*0.6 - 60px);text-align:center;">
			<div class="mydiv" style="float: left;
			text-align:center;width:60%;
			height:calc(100vh*0.6 - 62px);
			line-height:calc(100vh*0.6 - 62px);">		
			4
			</div>
			
			<div style="float: left;
			height:calc(100vh*0.6 - 62px);
			width:35%">
				<div class="mydiv" style="margin:0px 0px 20px 20px;
				height:calc(100vh * 0.6  * 0.50 - 42px);
				line-height:calc(100vh * 0.6  * 0.50 - 42px);
				text-align:center;" >5</div>
				<div class="mydiv" style="margin:20px 0px 0px 20px;
				height:calc(100vh * 0.6  * 0.50 - 42px);
				line-height:calc(100vh * 0.6  * 0.50 - 42px);
				text-align:center;" >6</div>
			</div>
			<div class="mydiv2" style="width: calc(100vh*0.4 - 160px);
			height: calc(100vh*0.4 - 160px); float: left; position: relative; z-index:-1;
			top: -80px;left: -55%; line-height:calc(100vh*0.4 - 160px);">9</div>
		</div>
		</div>
		
		</div>

	</body>
</html>

技术产品+咖啡

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【C1认证任务】C1-3

目录任务一任务二CSS盒子模型关于C1-3的一些整理任务一<p><font color="#ff0000">CSDN能力认证中心</font></p><table border="1"><tbody><tr style="background-color:#adacac;"><td>C1</td><td>见习工程师认证</td></tr><tr
复制链接

扫一扫

专栏目录