收藏
批改状态：合格
老师批语：
代码：
编程实现盒模型的基本要素
<!DOCTYPE html>
<!--filename: lesson0501.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
</head>
<style type="text/css">
.box{
width:300px;
height:300px;
background-color:coral;
border-style:solid dotted dashed double;
border-width:1px 2px 3px 4px;
border-color:blue black green yellow;
padding:2px 4px 6px 8px;
margin:8px 6px 4px 2px;
}
</style>
<body>
<!--1. 编程实现盒模型的基本要素: 内容，内外边距与边框，并背诵padding与margin的简写规则；-->
<div class="box">php</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.编程实现最常用的四种元素对齐方案
<!DOCTYPE html>
<!--filename: lesson0502.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素对齐</title>
</head>
<body>
<!--2. 编程实现最常用的四种元素对齐方案；-->
1. 子元素是单行行内元素: 如a, span <br>
a:水平居中: 在父元素应用: text-align: center;
b:垂直居中: 在行内子元素上设置行高与父元素等高: line-height:200px;
<style type="text/css">
.b1{
width:300px;
height:300px;
background-color:cyan;
text-align:center;
}
.b1 a{
line-height:300px;
}
</style>
<div class="b1">
<a href="">php中文网</a>
</div>
<hr>
2. 子元素是多行的内联文本 <br>
a:水平居中: 在父元素应用: text-align: center;<br>
b:垂直居中: 在父元素: display:table-cell;
<style type="text/css">
.b2{
width:300px;
height:300px;
background-color:lightgreen;
text-align:center;
display:table-cell;
vertical-align:middle;
}
</style>
<div class="b2">
<span>php中文网</span>
<br>
<span>视频教程</span>
</div>
<hr>
3.子元素是块元素 <br>
a: 水平居中: 子元素设置左右外边距自动适应容器margin: auto;
b:垂直居中: 在父元素: display:table-cell;
<style type="text/css">
.b3{
width:300px;
height:300px;
background-color:wheat;
display:table-cell;
vertical-align:middle;
}
.b31{
width:100px;
height:100px;
background-color:white;
margin:0 auto;
}
</style>
<div class="b3">
<div class="b31"></div>
</div>
<hr>
4. 子元素是不定宽的块元素
a: 水平居中: 子元素转为行内元素,父级加: text-align:center
b: 垂直居中: 在父元素: display:table-cell;
<style type="text/css">
ul{
margin:0;
padding:0;
}
.b4{
width:300px;
height:300px;
background-color:lightblue;
text-align:center;
display:table-cell;
vertical-align:bottom;
}
.b4 li{
display:inline;
}
</style>
<div class="b4">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.编程实现用五个色块制作一个十字架(相对定位和绝对定位任选一种实现即可)
<!DOCTYPE html>
<!--filename:lesson0503.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位相对定位</title>
</head>
<body>
<!--3. 编程实现用五个色块制作一个十字架(相对定位和绝对定位任选一种实现即可)-->
<style type="text/css">
.box{
width:600px;
height:600px;
/*定位父级设置定位属性 一般为相对定位*/
position:relative;
}
.box1{
width:200px;
height:200px;
background-color:lightblue;
/*定位属性：绝对定位*/
position:absolute;
top:0;
left:200px;
}
.box2{
width:200px;
height:200px;
background-color:lightcoral;
position:absolute;
top:200px;
left:0;
}
.box3{
width:200px;
height:200px;
background-color:lightgreen;
position:absolute;
top:200px;
left:400px;
}
.box4{
width:200px;
height:200px;
background-color:lightyellow;
position:absolute;
top:400px;
left:200px;
}
</style>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
