文章目录
任务一:使用富文本编辑器
描述:制作表,让表格隔行换色.加入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值决定层次关系.