简单页面布局
页面如图，想问下各位大神每列底部部分样式该怎么设置？按钮和图标位置该怎么设置样式？
<!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 class="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%;
background-color: #b4d1d7;
text-align:center;
position: absolute;
top:400px;
}
.btn{
width:80px;
margin:0 auto;
background-color: #b4d1d7;
border: 1px white solid;
}
zk785浏览 1022回答 1
1回答
-
柠檬酸钠
<div class="box"> <div class="bottom"> <span class="icon">☆</span> <button>按钮</button> </div> </div>* { margin: 0; padding: 0; } .box { width: 33.3%; background: darkred; height: 643px; position: relative; } .box .bottom { width :100%; background: rgba(255,255,255,0.5); position: absolute; bottom: 0; height:120px; text-align: center; } .box .bottom .icon { color: orange; font-size: 40px; display:block; margin-top:10px; } .box .bottom button { background: transparent; border: 1px solid #fff; color: #fff; padding: 5px 40px; margin-top: 20px; outline:none; cursor:pointer; }对方并不想和你说话，并给你扔了一段代码
随时随地看视频慕课网APP
Html/CSS