实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内外边距与边框</title> <style> .item1{ width: 300px; height: 200px; background-color: red; border-top-style: solid; border-left: 8px solid red; border-bottom: 10px dashed yellow; /*margin-top: 80px; margin-left: 40px; margin-bottom: 30px;*/ margin: 80px 40px 30px; padding-top: 100px; padding-left: 50px; } .item2{ width: 300px; height: 200px; background-color: blue; } .item_h2{ position: absolute; color: white; line-height: 50px; } .item3{ width: 200px; height:200px; margin-top: 100px; background-color: green; text-align: center; margin-bottom: 10px; } .item4{ line-height: 200px;/*垂直居中设置行高跟父元素高一样*/ } .item5{ width: 200px; height:200px; margin-top: 10px; background-color: gray; text-align: center; display: table-cell; vertical-align: middle; } .item6{ width: 200px; height:200px; margin-top: 10px; background-color: red; display: table-cell; vertical-align: middle; } .item6 .item7{ width: 100px; height:100px; margin-top: 10px; background-color: yellow; margin-left: auto; margin-right: auto; } .item8{ width: 100px; height:100px; margin-top: 10px; background-color: skyblue; text-align: center; display: table-cell; vertical-align: bottom; } ul{ margin: 0; padding-left: 0; } .item8 li{ display: inline; } </style> </head> <body> <div class="item1"> <h2 class="item_h2">测试内容</h2> </div> <div class="item2"></div> <div class="item3"><a class="item4" href="">元素对其方式</a></div> <div class="item5"> <a href="">多行内敛1</a><br> <a href="">多行内敛2</a> </div> <div class="item6"> <div class="item7"></div> </div> <div class="item8"> <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> <li><a href="">5</a></li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>十字架</title> <style> .box1{ width: 50px; height: 50px; background-color: red; position: relative; left: 50px; } .box2{ width: 50px; height: 50px; background-color: blue; } .box3{ width: 50px; height: 50px; background-color: black; position: relative; top: -50px; left: 100px; } .box4{ width: 50px; height: 50px; background-color: yellow; position: relative; top: -100px; left: 50px; } .box5{ width: 50px; height: 50px; background-color: green; position: relative; top: -100px; left: 50px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例