頁面如圖，想問下各位大神每列底部部分樣式該怎么設置？按鈕和圖標位置該怎么設置樣式？<!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 關注
- 1053 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消