我希望页面的样式如下：但我无法摆脱左上角的块。这是我的代码：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 关注
- 107 浏览
添加回答
举报
0/150
提交
取消