老师，可以给我讲下这个代码吗？虽然实现了，还是不够明白
来源：3-12 编程练习
小鲜花
2019-04-03 06:36:40
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css文本样式</title>
<style type="text/css">
*{padding:0px;margin: 0px;}
.warp1{
height:80px;
width: 100%;
background-color: #14191e;
/*在此补充代码*/
line-height: 80px;
text-align: center;
}
.warp1 h1{ color:#fff;
/*在此补充代码*/
font-size: 24px;
}
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
/*在此补充代码*/ display: table;
}
.content{
/*在此补充代码*/
vertical-align:middle;
display: table-cell;
}
.content p{ width:500px;
font-family: "微软雅黑";
margin:0 auto;
line-height: 1.5em;
font-size: 14px;
/*在此补充代码*/}
</style>
</head>
<body>
<div class="warp1">
<h1>欢迎来到慕课网</h1>
</div>
<div class="warp2">
<div class="content">
<p>慕课网，只学有用的！</p>
<p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕码
2019-04-03
同学你好！代码效果实现很好~
整个页面分为两部分：
（1） 第一部分是标题区，使用div<.warp1布局高度为80px,宽度百分百。里面盛放一个标题标签h1字体大小为24px,(在父级中)使用text-align: center;line-height: 80px;使h1标签水平垂直居中。
（2） 第二部分内容区，给div< .content使用display: table-cell;设置表格布局，使用vertical-align:middle;设置垂直居中。给内容p标签使用margin:0 auto;设置水平居中（意思是以父级元素为参照距离上下为0，左右自动），为了不让段落太紧凑，设置1.5rem的行高，然后给字体设置大小为14px。
如果解决了你的疑惑，望采纳， 祝学习愉快~~
0
相似问题