代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} #parent{width:90%;height:200px;background: black;} #child{padding:30%;width:0;height:0;background-color: red;margin:20px auto;} </style> </head> <body> <div id="parent"> <div id="child"></div> </div> </body> </html>效果图
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding:0;margin:0;} #parent{width:90%;height:200px;background: black;} #child-one{width:100px;background: yellow;height:100%;float:left;} #child-two-bg{padding:100px 50%;background: red;} </style> </head> <body> <div id="parent"> <div id="child-one"></div> <div id="child-two-bg"></div> </div> </body> </html>效果图
下一篇待续
