我希望頁面的樣式如下：但我無法擺脫左上角的塊。這是我的代碼：html:</head><body> <header> <h1>Contacts</h1> </header> <nav> <a href="">Contacts</a> <a href="">Call Log</a> </nav><main> <p>Enter text below and click Search button to find a contact</p> <form name="searchform"> <label for="name">Name: </label> <input id="name" type="text" name="name" value=""><br><label for="name">Company: </label><input id="company" type="text" name="company" value=""><br><label for="ddi">Telephone: </label><input id="ddi" type="tel" name="ddi" value=""><br><button name="search" type="button" onclick="process()">Search</button></form></main></body></html>我已經嘗試了很長時間，但似乎不知道如何做到這一點。我怎樣才能實現我所需要的？
2 回答
手掌心
TA貢獻1942條經驗 獲得超3個贊
嘗試使用 CSS 網格進行此類布局。 CSS 網格使得創建這樣的布局變得非常容易。 這是使用 CSS 網格的基本布局。
body {
display:grid;
grid-template-areas:
"h h"
"c f";
}
nav {
grid-area: c;
box-sizing: border-box;
background-color: #409fff;
/* display: inline-block; */
/* width: 20%; */
min-width: 125px;
/* margin-right: 15px; */
height: 100vh;
}
nav a {
display: block;
line-height: 45px;
height: 45px;
color: #ffffff;
/* background-color: #486b02; */
/* text-decoration: none; */
/* background-color: #486b02; */
/* padding-left: 50px; */
margin: 10px 0 10px 5px;
}
header {
grid-area: h;
margin: 0;
padding: 0;
box-sizing: border-box;
/* display: inline-block; */
background: #409fff;
text-align: center;
float: right;
}
h1 {
margin: 0;
padding: 0;
/* box-sizing:border-box; */
display: inline;
color: #ffffff;
font-family: sans-serif, Arial, "Times New Roman";
}
main {
grid-area:f;
background-color: yellow;
}
input,
textarea {
border-radius: 5px;
}
- 2 回答
- 0 關注
- 174 瀏覽
添加回答
舉報
0/150
提交
取消