一个简单页面的布局问题
页面如图所示 。我的问题出在包含按钮及图标的部分，我用绝对定位，但是位置老不对，这部分样式改怎么设置？
<!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;
}
zk785浏览 1132回答 1
1回答
-
损失函数
写代码最重要的是仔细些。首先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>
随时随地看视频慕课网APP
Html/CSS