一个简单页面的布局问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> <link rel="stylesheet" href="CSS/home-style.css"> </head> <body> <div class="left"> <div calss="box"> <input type="button" value="按钮" class="btn"/> </div> </div> <div class="middle"> </div> <div class="right"> </div> </body> </html>

*{ margin: 0; padding: 0; } .left{ float: left; width: 33%; height: 643px; background-color: #50abff; position: relative; } .middle{ float: left; width: 34%; height: 643px; background-color: #ffef25; } .right{ float: right; width: 33%; height: 643px; background-color: #ff5261; } .box{ width:100% position:absolute; top:400px; background-color: #b4d1d7; } .btn{ background-color: #b4d1d7; border: 1px white solid; }

写代码最重要的是仔细些。首先class为box的div的“class”写成了“calss”，其次在css中的box的width后没有加分号“;”。你要的效果代码，我贴下面了。望采纳！<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>主页</title> <style> *{ margin: 0; padding: 0;}.left{ float: left; width: 33%; height: 643px; background-color: #50abff; position: relative;}.middle{ float: left; width: 34%; height: 643px; background-color: #ffef25; }.right{ float: right; width: 33%; height: 643px; background-color: #ff5261; }.box{ width:100%; height: 243px; position:absolute; top:400px; background-color: #b4d1d7;}.btn{position:relative;top: 70%;left:50%; background-color: #b4d1d7; border: 1px white solid;} </style></head><body><div> <div> <input type="button" value="按钮"/> </div></div><div> </div><div> </div></body></html>

一个简单页面的布局问题

1回答