收藏
批改状态：未批改
老师批语：
今天老师讲的内容比较多有(盒子模型，定位技术，浮动)等知识，以前只会用的一些属性在老师的讲解下有了更深的认识，以前是为了做网站而做网站，不会在思考它们的来龙去脉，现在会思考更多，会考虑用什么样的方法或者是哪个样式更适合它。
作业：编程实现用五个色块制作一个十字架我用的是（绝对定位:absolute）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body {
margin:0;
}
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
/*绝对定位元素会脱离文档流*/
position: absolute;
top:0;
left: 200px;
}
.box2 {
width: 200px;
height: 200px;
background-color: lightgreen;
position: absolute;
top:200px;
left:0;
}
.box3 {
width: 200px;
height: 200px;
background-color: lightcoral;
position: absolute;
top: 200px;
left: 400px;
}
.box4 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 200px;
left: 200px;
}
.box5 {
width: 200px;
height: 200px;
background-color: lightgrey;
position: absolute;
top: 400px;
left: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
作业：编程实现盒模型的基本要素: 内容，内外边距与边框，并背诵padding与margin的简写规则；
margin:10px 20px 15px;
padding:5px 10px 15px; 20px;
margin与padding:简写后的顺序是“上-左右-下”，“上-右-下-左”，“上下-左右”;
作业:编程实现最常用的四种元素对齐方案；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对齐方式</title>
<style type="text/css">
span{margin: 0;padding: 0;}
.div1{
width:100px;
height: 100px;
background-color: aqua;
text-align: center;
}
.div1{line-height: 100px;}
.div2{
width:100px;
height:100px;
background-color:chartreuse;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.div3 {
width: 100px;
height: 100px;
background-color: royalblue;
display:table-cell;
vertical-align: middle;
}
.div3 div {
width: 50px;
height: 50px;
background-color: red;
margin:auto;
}
.div4 {
width: 200px;
height: 200px;
background-color: brown;
text-align: center;
display:table-cell;
vertical-align: bottom;
}
ul{padding: 0;margin: 0;}
.div4 li{list-style: none;
display: inline;
}
</style>
</head>
<body>
<div class="div1"><a href="#"> php中文网</a></div>
<div class="div2"><span>php中文网</span><br><span>www.php.cn</span></div><br>
<div class="div3"><div></div></div><hr>
<div class="div4">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
