C1任务03-Web基础与布局

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

代码即生活

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

阅读量187

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_45822002/article/details/117396035

版权

文章目录

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

描述:制作表,让表格隔行换色.加入JavaScript按钮弹出框.

富文本编辑器

<style>
  .cl{color:red}
  table,tr,td{border:1px solid; padding:5px 20px 5px 0;font-size:10px}
  .tr1{background-color:#E6E6E6}
</style>

<script>
  function fun(){
  alert("ssdd");
}
</script>

<p><font class="cl">csdn认证中心</font></p>
<table style="border-collapse:collapse;">
  <tbody><tr class="tr1">
    <td>c1</td>
    <td>见习工程师</td>
  </tr>
  <tr>
    <td>c4</td>
    <td>专项工程师</td>
  </tr>
  <tr class="tr1">
    <td>c5</td>
    <td>全栈工程师</td>
  </tr>
</tbody></table>
<br>
<button type="button" onclick="fun()" name="我要考试">我要考试</button>

代码难度不高,需要掌握CSS选择器,table表格,JavaScript DOM.

任务二:所见所得式开发

打开谷歌浏览器,f12调试,多看.

拓展任务:CSS盒子模型

自己尝试了四种做法:
CSS定位讲解
 CSS浮动讲解
1.全部相对定位(产生占用网页,下拉菜单变长,相对定位会占用之前文档流位置)
2.全部绝对定位(脱离文档流).
3.浮动+相对定位
4.浮动+绝对定位


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第四种方案</title>
<style>
	.d1{
		width:500px;
		height:500px;
		position:absolute;
		background-color:#FC0;
		padding:10px;
		z-index:1;
	}
	.a{
		width:150px;
		height:120px;
		text-align:center;
		line-height:120px;
		color:#FFF;
		background-color:#C5D08E;
	}
	.b{
		width:150px;
		height:350px;
		text-align:center;
		line-height:350px;
		color:#FFF;
		background-color:#C5D08E;
		margin-top:20px;
	}
	.left{
		float:left;	
	}
	.right{
		float:right;
	}
	.c{
		width:330px;
		height:150px;
		text-align:center;
		line-height:150px;
		color:#FFF;
		background-color:#C5D08E;
		float:right;
	}
	.d{
		position:absolute;
		top:170px;
		left:200px;
		width:170px;
		height:330px;
		text-align:center;
		line-height:330px;
		color:#FFF;
		background-color:#C5D08E;
		z-index:2;
	}
	.e{
		width:120px;
		height:160px;
		text-align:center;
		line-height:160px;
		color:#FFF;
		background-color:#C5D08E;
		margin-top:10px;
	}
	.f{
		width:120px;
		height:160px;
		text-align:center;
		line-height:160px;
		color:#FFF;
		background-color:#C5D08E;
		margin-top:10px;
	}
	.j{
		width:150px;
		height:100px;
		text-align:center;
		line-height:100px;
		color:#FFF;
		position:absolute;
		left:180px;
		top:50px;
		background-color:#F3A464;
	}
	.h{
		width:150px;
		height:100px;
		text-align:center;
		line-height:100px;
		color:#FFF;
		position:absolute;
		top:-50px;
		left:300px;
		background-color:#F3A464;
	}
	.i{
		width:150px;
		height:100px;
		text-align:center;
		line-height:100px;
		color:#FFF;
		position:absolute;
		top:450px;
		left:220px;
		background-color:#F3A464;
		z-index:0;
	}
	
</style>
</head>

<body>
	<div class="d1">
    	<div class="left">
        	<div class="a">1</div>
            <div class="b">2</div>
        </div>
        <div class="c">3</div>
        <div class="right">
        	<div class="e">5</div>
            <div class="f">6</div>
        </div>
        <div class="d">4</div>
        <div class="j">7</div>
        <div class="h">8</div>
        <div class="i">9</div>
    </div>
</body>
</html>

1,2方块看做一个大盒子,左浮动.
右侧上面大方块(3)左浮动.
5,6方块看作一个整体右浮动
浮动会在方块(父级)边界停止或者另一个浮动块边界,如果剩余的地方不够其占,会向下去寻找能放下它的位置,4方块完全也可以用浮动.
7,8,9绝对定位,脱离文档流,不会占用之前的位置.z-index值决定层次关系.

代码即生活

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
C1任务03-Web基础与布局

文章目录任务一:使用富文本编辑器任务二:所见所得式开发拓展任务:CSS盒子模型任务一:使用富文本编辑器描述:制作表,让表格隔行换色.加入JavaScript按钮弹出框.富文本编辑器<style> .cl{color:red} table,tr,td{border:1px solid; padding:5px 20px 5px 0;font-size:10px} .tr1{background-color:#E6E6E6}</style><scri
复制链接

扫一扫