用bootstrap+css+js写一个“联系我”的页面,要求有nav,footer,有背景图片
时间: 2024-01-14 08:04:47 浏览: 37
好的,以下是一个简单的“联系我”页面的代码示例,满足您的要求:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Me</title>
<!-- 引入Bootstrap库 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 引入自定义CSS样式 -->
<link rel="stylesheet" href="style.css">
</head>
<body style="background-image:url(bg.jpg);">
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Contact Me</a>
</div>
</div>
</nav>
<!-- 页面主体内容 -->
<div class="container">
<h1>Contact Me</h1>
<p>Have a question or want to work together? Feel free to contact me using the form below:</p>
<form action="#" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" id="message" name="message" placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- 底部页脚 -->
<footer class="footer">
<div class="container">
<p>© 2021 Contact Me</p>
</div>
</footer>
<!-- 引入jQuery和Bootstrap的JS库 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
```
其中,`style.css`文件中可以设置背景图片的样式:
```css
body {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
```
然后,您可以将一张名为`bg.jpg`的图片放置于与HTML文件相同的目录下,作为背景图片。