网页设置form距网页上下左右的距离
时间: 2023-10-08 16:09:32 浏览: 64
要设置form距离网页上下左右的距离,可以使用CSS样式表中的position属性和top、bottom、left、right属性来实现。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>设置form距离网页上下左右的距离</title>
<style type="text/css">
form {
position: fixed;
top: 100px;
bottom: 100px;
left: 100px;
right: 100px;
margin: auto;
width: 50%;
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #888888;
z-index: 9999;
}
</style>
</head>
<body>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```
在上面的代码中,我们使用了CSS样式表中的position属性,将form元素的定位方式设置为fixed,然后使用top、bottom、left、right属性来指定form元素距离页面上下左右的距离。同时,我们还设置了margin属性将form元素居中显示,并设置了一些样式,如背景颜色、边框圆角、阴影等。在这个例子中,我们将form元素距离页面上下左右各100px的距离。
阅读全文