页面如图，想问下各位大神每列底部部分样式该怎么设置？按钮和图标位置该怎么设置样式？<!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;
}
1 回答
已采纳
柠檬酸钠
TA贡献331条经验 获得超534个赞
<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;
}对方并不想和你说话，并给你扔了一段代码
- 1 回答
- 1 关注
- 1021 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消