百度搜索页面代码示例 - 简单易懂的网页构建 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>百度搜索</title>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #f5f5f5;
		}
		header {
			background-color: #fff;
			padding: 20px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}
		form {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 50px;
		}
		input[type='text'] {
			width: 500px;
			height: 50px;
			padding: 10px;
			font-size: 18px;
			border: none;
			border-radius: 25px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			outline: none;
		}
		input[type='submit'] {
			width: 100px;
			height: 50px;
			margin-left: 10px;
			background-color: #3385ff;
			color: #fff;
			font-size: 18px;
			border: none;
			border-radius: 25px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			cursor: pointer;
		}
		input[type='submit']:hover {
			background-color: #1e5ce4;
		}
		footer {
			background-color: #f5f5f5;
			padding: 20px;
			box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
			text-align: center;
			font-size: 14px;
			color: #666;
		}
	</style>
</head>
<body>
	<header>
		<img src='https://www.baidu.com/img/bd_logo1.png' alt='百度logo'>
	</header>
	<form action='https://www.baidu.com/s' method='get'>
		<input type='text' name='wd' placeholder='请输入搜索内容'>
		<input type='submit' value='搜索'>
	</form>
	<footer>
		<p>© 2021 Baidu</p>
	</footer>
</body>
</html>