利用JS+HTML+CSS写一个完整起始页
时间: 2023-12-26 14:03:23 浏览: 28
好的,以下是一个简单的起始页的HTML、CSS和JS代码。你可以根据自己的需求进行修改和美化。
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>起始页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Homepage</h1>
<form>
<input type="text" placeholder="Search...">
<button type="submit">Go</button>
</form>
<ul class="links">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 48px;
margin-top: 100px;
}
form {
display: inline-block;
margin-top: 50px;
}
input[type="text"] {
padding: 10px;
width: 300px;
border: none;
border-radius: 25px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button[type="submit"] {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.links {
margin-top: 50px;
list-style: none;
padding: 0;
}
.links li {
display: inline-block;
margin-right: 20px;
}
.links li a {
color: #007bff;
text-decoration: none;
font-size: 24px;
transition: color 0.3s;
}
.links li a:hover {
color: #0056b3;
}
```
JS代码:
```javascript
// 搜索框的响应函数
function search(event) {
// 阻止表单提交的默认行为
event.preventDefault();
// 获取输入框中的内容
var query = event.target.querySelector('input').value;
// 判断内容是否为空
if (query.trim().length === 0) {
alert('请输入搜索内容!');
return;
}
// 跳转到搜索引擎进行搜索
window.location.href = 'https://www.google.com/search?q=' + query;
}
// 给表单添加提交事件
document.querySelector('form').addEventListener('submit', search);
```
以上代码实现了一个简单的起始页,包括一个欢迎标题、一个搜索框和一些常用链接。当用户在搜索框中输入内容并提交时,会跳转到Google搜索引擎进行搜索。