失物招领app页面布局代码
时间: 2023-07-16 07:16:56 浏览: 49
以下是一个简单的失物招领APP页面布局代码,使用HTML和CSS实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>失物招领APP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 设置页面背景色 */
body {
background-color: #f2f2f2;
}
/* 设置导航栏样式 */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* 设置主要内容区域样式 */
.container {
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
background-color: white;
}
/* 设置表单样式 */
form {
margin: auto;
width: 80%;
}
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
/* 设置底部版权信息样式 */
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<div class="navbar">
<a href="#">首页</a>
<a href="#">发布</a>
<a href="#">寻物启事</a>
<a href="#">招领启事</a>
</div>
<!-- 主要内容区域 -->
<div class="container">
<h1>发布失物招领信息</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
<label for="phone">电话:</label>
<input type="text" id="phone" name="phone" placeholder="请输入电话">
<label for="type">类型:</label>
<select id="type" name="type">
<option value="lost">失物</option>
<option value="found">招领</option>
</select>
<label for="description">描述:</label>
<textarea id="description" name="description" placeholder="请输入描述"></textarea>
<input type="submit" value="提交">
</form>
</div>
<!-- 底部版权信息 -->
<div class="footer">
© 2021 失物招领APP版权所有
</div>
</body>
</html>
```
这段代码使用了一个简单的导航栏、一个表单和一个底部版权信息,可以根据实际需求进行调整和修改。