麻烦老师检查
来源:3-12 编程练习
localhost999
2020-06-25 16:52:48
<!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; /*在此补充代码*/ } .warp1 h1{ color:#fff; line-height:80px; text-align:center; } .warp2{ height:400px; width: 100%; border:1px #14191e solid; display:table /*在此补充代码*/ } .content{ display:table-cell; vertical-align:middle; } .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回答
同学你好,有几个问题需要注意,可以参考下方:
1、按照要求,H1字体大小为24px,代码参考:
2、段落内容行高1.5em,字体大小14px
3、页面出现了横向滚动条,如下:
原因是宽度设置为100%以后,又设置左右边框,导致超出了父容器,出现滚动条。可以只设置底边框:
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
相似问题