Correction status:qualified
Teacher's comments:
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>作业</title> <style type="text/css"> .a1{ width: 300px; height: 300px; background-color: blue; text-align: center; line-height: 300px; } .a2{ width: 300px; height: 300px; background-color: red; text-align: center; display: table-cell;vertical-align: middle; } .a3 { width: 300px; height: 300px; background-color: blue; display:table-cell; vertical-align: middle; } .a31 { width: 200px; height: 200px; background-color: red; margin:auto; } .a4 { width: 200px; height: 200px; background-color: red; text-align: center; display: table-cell; vertical-align: bottom; } .a4 li{ list-style: none; display:inline; } .a4 ul{ padding: 0px; } </style> </head> <body> <!--单行对其 --> <div class="a1"> <p style="color: red">这里是内容</p> </div> <!-- 多行对其 --> <div class="a2"> <p style="color: blue">这里是第一行</p> <p style="color: blue">这里是第二行</p> </div> <!-- 块元素内的子元素对其 --> <div class="a3"> <div class="a31"> </div> </div> <!-- 不定宽元素对其 --> <div class="a4"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例