演示:http://111.231.88.20/front/html/0323/1.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3月23号作业-对齐方式的使用</title> <style type="text/css"> /*设置块级元素的水平居中*/ .box{ width: 600px; height: 500px; margin: 30px auto; } .top{ width: 100%; height: 65px; text-align: center;/*设置文本内容的水平居中*/ background-color: lightyellow; margin-bottom: 30px; } .top h2{ /*设置单行文本的垂直居中*/ line-height: 65px; } /*多行文本的居中*/ .nav{ width: 600px; height: 200px; background-color: skyblue; text-align: center;/*设置文本水平居中*/ display:table-cell;/*改变块元素显示方式为表格*/ vertical-align: middle;/*设置单元格内的元素垂直居中*/ } ul{ padding: 0; list-style-type: none;/*取消li的默认样式*/ } .footer{ width: 600px; height:100px; background-color:red; text-align: center; display: table-cell; vertical-align: bottom;/*设置文本在父元素的底部*/ } .footer li{ display: inline; } </style> </head> <body> <div class="box"> <div class="top"> <h2>每日乱报</h2> </div> <div class="nav"> <h3>今日热闻</h3> <ul class="item"> <li>习近平两会“话中画”</li> <li>习近平两会“话中画”</li> <li>习近平两会“话中画”</li> <li>习近平两会“话中画”</li> </ul> </div> <div></div> <div class="footer"> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> </ul> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码