HTML与CSS实践：表格样式与网页布局-CSDN博客

本文链接：https://blog.csdn.net/weixin_58731873/article/details/118994358

一、任务一

1、在开源副本编译器中随便输入一段文字

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	.tb{
			border-collapse:collapse;
	}
	.tb tr:nth-child(odd){
		background-color:red;
	}
	.tb tr:nth-child(even){
		background-color:yellow;
	}
</style>
</head>
<tbody>
<table class="tb" border="1" cellspacing="0">

	<tr>
		<td>C1</td><td>见习工程师认证</td>
	</tr>
	<tr>
		<td>C4</td><td>专项工程师认证</td>
	</tr>
	<tr>
		<td>C5</td><td>全栈工程师认证</td>
	</tr>
</table>
	<br>
	<button onclick="alert('确定要考试吗');">点我试试</button>

</tbody>
<br>
</html>

onclick按钮，alert弹窗

二、任务二

三、任务拓展

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拓展盒子模型</title>
<style type="text/css">
	body{
	/*border:10px solid rgb(170,170,168);*/
		background-color:#de9b1f;
		overflow:auto;
		border:10px solid #808080;
		width:1000;
		height:1500;
	}
	div{
		background-color:#6f9c49;
		margin:20px;
		padding:10px;
		margin:20px;
		border:1px solid;
		border-radius:4px
	}
	
	.good1{
		width:400px;
		height:200px;
		/*float:left;*/
		margin:20px;
	}
	.good2{
		width:400px;
		height:650px;
		margin:20px;
		/*margin-top:270px;
		margin-left:-442px;
		float:left;*/
	}
	.good3{
		position:absolute;
		width:975px;
		line-height:300px;
		margin:20px;
		left:460px;
		top:18px;
	}
	.good4{
		position:absolute;
		width:487px;
		height:515px;
		z-index:1;
		left:460px;
		top:395px;
	}
	.good5{
		position:absolute;
		width:450px;
		height:238px;
		left:985px;
		top:395px;
	}
	.good6{
		position:absolute;
		width:450px;
		height:238px;
		left:985px;
		top:670px;
	}
	.good7{
		background-color:#ed841b;
		position:absolute;
		width:230px;
		height:230px;
		left:470px;
		top:60px;
	}
	.good8{
		background-color:#ed841b;
		position:absolute;
		width:230px;
		height:230px;
		left:1100px;
		top:-170px;
	}
	.good9{
		background-color:#ed841b;
		position:absolute;
		width:230px;
		height:230px;
		z-index:0;
		left:500px;
		top:850px;
	}
	

</style>
</head>
<body>
	<div class="good1"><p>1</p></div>
	<div class="good2"><p>2</p></div>
	<div class="good3"><p>3</p></div>
	<div class="good4"><p>4</p></div>
	<div class="good5"><p>5</p></div>
	<div class="good6"><p>6</p></div>
	<div class="good7"><p>7</p></div>
	<div class="good8"><p>8</p></div>
	<div class="good9"><p>9</p></div>
</body>
</html>

1、padding 内边距 margin 外边距