实操作业一
任务
实现以下效果
代码解答
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>B站学习样式一</title>
<style>
.outer {
height: 400px;
width: 400px;
background-color: gray;
overflow: hidden;
}
.inner {
height: 100px;
width: 200px;
background-color: orange;
margin: 0 auto;
margin-top: 150px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">居中对齐</div>
</div>
</body>
</html>
实操作业二
任务
实现以下效果
代码解答
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>B站学习样式一</title>
<style>
.outer{
width: 400px;
height: 400px;
background-color: #F5F5F5;
line-height: 400px;
text-align: center;
font-size: 20px;
}
.inner{
background-color: #E1D5E7;
}
</style>
</head>
<body>
<div class="outer">
<span class="inner">居中对齐</span>
</div>
</body>
</html>
实操作业三
任务
实现以下效果:
代码解答
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>B站学习样式一</title>
<style>
.outer{
width: 400px;
height: 400px;
background-color: gray;
text-align: center;
line-height: 400px;
font-size: 0px;
}
span{
font-size: 20px;
background-color: orange;
vertical-align: middle;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="outer">
<span>居中对齐</span>
<img src="./悟空.jpg" alt="孙悟空" srcset="">
</div>
</body>
</html>
总结
感觉自己理解的还是不够,仍然需要大量学习!!!