老师,请看一下有没有问题

来源:3-12 编程练习

weixin_慕慕2499132

2020-06-29 14:05:19

<!DOCTYPE html>

<html>

    <head>

   <meta charset="UTF-8">

   <title>vertical-align</title>

   <style type="text/css">

    *{padding:0px;margin: 0px;}

   

    .warp1{    

              height:80px;

              width: 100%;

              background-color: #14191e;              

              text-align:center;

              line-height:14px;

             }


     .warp1 h1{ color:#fff;

       }


     .warp2{

              height:400px;

              width: 100%;

              border:1px  #14191e solid;

              font-size:14px;

              display:table;

  


             }


     .content{    

              display:table-cell;

              vertical-align:middle;

              margin:0 auto;

        

              }


     .content  p{ width:500px;

                  font-family: "微软雅黑";

                  margin:0 auto;

        /*在此补充代码*/}   


   </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回答

好帮手慕久久

2020-06-29

同学你好,代码中有如下问题:

1. 头部标题显示不全,如下:

http://img.mukewang.com/climg/5ef9883509cb0ad405450148.jpg

原因是给“.warp1”设置了14px的行高,该行高太小了。

可做如下修改:

http://img.mukewang.com/climg/5ef98842095de29705540412.jpg

2. 标题h1的字体大小没有设置24px,建议添加,如下:

http://img.mukewang.com/climg/5ef9886409aa1ce405540164.jpg

3. 没有给段落内容设置行高1.5em,建议添加:

http://img.mukewang.com/climg/5ef9886f0928e00e05380316.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

0

0 学习 · 40143 问题

查看课程