抱歉弄乱了我的代码。这是我的第一个实验。在谷歌的帮助下完成这一切。那么，你能告诉我如何高效地编写以下代码吗？另外，我想将文本拉到标题 block 中。帮我。 
<!DOCTYPE html>
<html>
<head>
<title>
seVen
</title>
<style>body{background:#A8A8A8;color:white;}
.heading{background:#303030;position:fixed;border-radius: 25px;top:10px;
right:2px;left:2px;bottom:85%;padding:10px;}
.login{position:relative;float:right;top:150px;bottom:145px;}
.padding{padding-left:30px;padding-bottom:30px;position:relative;}
</style>
<div class="heading"><div class="padding"><p style="font size:30px">seVen</p><p style="font-size:15px">Own your imagination</p></div></div>
<body>
<div class="login">
Enter your name <input type="text" id="name" /><br><br>
Password <input type="password" id="password" />
<br><br>
<input type="button" id="submit" value="Submit"/>
<input type="button" id="pwdForgot" value="Forgot Password"/></head>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>
About Products
</body>
</html>
最佳答案
此刻，.heading 的高度基于position:fixed;top:10px;bottom:85%这使它成为一个特定的高度，当您垂直调整页面大小时会发生变化。你可以替换 bottom与 height它看起来会更一致。
然后您可以添加行高以将文本放在 block 的中间:
.heading{
background: #303030;
border-radius: 25px;
padding: 10px;
position: fixed;
top: 10px;
bottom: 85%
height: 80px;
line-height: 80px;
}
其他建议:
您可以考虑将固定定位 ( position:fixed;top:10px;right:2px;left:2px;) 更改为特定的宽度和边距:
.heading{
background: #303030;
border-radius: 25px;
padding: 10px;
height: 80px;
line-height: 80px;
width: 98%;
margin: 1%
}
删除 position:fixed 的区别它不会随屏幕滚动，而是将页面上的所有其他内容推送到它下面。
另外，不要使用 <br><br><br>...和 ...尝试设置边距和填充:
<div style="margin-top:20px;margin-left:50px">Own your imagination</div>
(你可能会发现 display:inline-block 、 float:left 或 float:right 在这一点上很有用，如果你最终使用这些改变了很多页面的话)
你的页脚可以使用 position:fixed如果你想让它贴在页面底部，像这样:
<div style="position:fixed;bottom:10px;left:0;right:0;border-top:solid 1px white">
<a class="padding">About</a>
<a class="padding">Products</a>
</div>
关于css - 填充底部不起作用。我在 chrome 浏览器中测试，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31201714/