简单页面布局

页面如图，想问下各位大神每列底部部分样式该怎么设置？按钮和图标位置该怎么设置样式？

<!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

浏览 1017回答 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