C1认证：任务03

最新推荐文章于 2021-07-06 23:27:26 发布

周虎虎

最新推荐文章于 2021-07-06 23:27:26 发布

阅读量58

点赞数 1

本文链接：https://blog.csdn.net/m0_58756795/article/details/117533834

版权

学习目标

1、html基础

2、[所见即所得]式开发

3、拓展css盒子模型

任务1：html基础

使用开源富文本编辑器学习html基础（在线文本编辑器），随便写一点内容，查看一下html的标签属性。

表格变换颜色：

源代码：

<table border="1">

  <tbody><tr bgcolor="AntiqueWhite ">

    <td>姓名</td>

    <td>性别</td>

  </tr>

  <tr>

    <td>ZYP</td>

    <td>男</td>

  </tr>

    <tr bgcolor="Aqua ">

    <td>SJW</td>

    <td>男</td>

  </tr>

  <tr>

    <td>DJY</td>

    <td>女</td>

  </tr>

   <tr bgcolor="Aqua ">

    <td>LGH</td>

    <td>男</td>

  </tr>

</tbody></table>

点击按钮实现弹窗：

</tbody></table>
<button onclick="run()">弹窗</button>
<script>
  function run(){
  	alert("弹窗");
  }
</script>

任务2：【所见即所得】式开发

任务3：css盒子模型

任务：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css盒子</title>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
	<div id="main_div" >
	<div class="div1" id="div1">
		<p>1</p>
	</div>
	<div class="div1" id="div2">
		<p>2</p>
	</div>
	<div class="div1" id="div3">
		<p>3</p>
	</div>
	<div class="div1" id="div4">
		<p>4</p>
	</div>
	<div class="div1" id="div5">
		<p>5</p>
	</div>
	<div class="div1" id="div6">
		<p>6</p>
	</div>
	<div class="div2" id="div7">
		<p>7</p>
	</div>
	<div class="div2" id="div8">
		<p>8</p>
	</div>
	<div class="div3" id="div9">
		<p>9</p>
	</div>
</div>
</body>
<style>

* {
	border: 0;
	padding: 0;
	margin: 0;
}
 
div {
	text-align: center;
}
 
#main_div {
	width: 100%;
	height: 100%;
	background-color: #00ff00;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 77px 77px 77px 77px 77px 76px 76px 76px;
	grid-gap: 20px;
 
}
 
.div1 {
	background-color: #0000ff;
}
 
.div2 {
	background-color: #DC143C;
}
 
.div3 {
	background-color: #FF69B4;
}
 
#div1 {
	grid-column: 1/4;
	grid-row: 1/3;
	line-height: 174px;
}
 
#div2 {
	grid-column: 1/4;
	grid-row: 3/9;
	line-height: 562px;
}
 
#div3 {
	grid-column: 4/9;
	grid-row: 1/5;
	line-height: 363px;
}
 
#div4 {
	grid-column: 4/7;
	grid-row: 5/9;
	line-height: 368px;
}
 
#div5 {
	grid-column: 7/9;
	grid-row: 5/7;
	line-height: 174px;
}
 
#div6 {
	grid-column: 7/9;
	grid-row: 7/9;
	line-height: 174px;
}
 
#div7 {
	grid-column: 4/6;
	grid-row: 2/4;
	line-height: 174px;
	margin-left: 20px;
}
 
#div8 {
	position: absolute;
	left: 75%;
	width: 22%;
	height: 22%;
	top: -8%;
	line-height: 230px;
}
 
#div9 {
	position: absolute;
	width: 25%;
	height: 25%;
	line-height: 25%;
	left: 44%;
	top: 75%;
	z-index: -1;
}
</style>
</html>

更改之后的颜色：恩~就很棒！