頁面如圖所示 。我的問題出在包含按鈕及圖標(biāo)的部分，我用絕對定位，但是位置老不對，這部分樣式改怎么設(shè)置？<!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;
}
1 回答
已采納
損失函數(shù)
TA貢獻(xiàn)114條經(jīng)驗(yàn) 獲得超93個贊
寫代碼最重要的是仔細(xì)些。首先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>
-
zk785那天太不仔細(xì)，提問完就自己發(fā)現(xiàn)了。多謝回答
添加回答
舉報(bào)
0/150
提交
取消