<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>信息界面代码 - 带背景图片、定时切换内容、中文显示、返回按钮</title>
	<style>
		body {
			background-image: url('background.jpg');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			font-family: Arial, sans-serif;
			font-size: 16px;
			color: #fff;
		}
<pre><code>	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}

	.header {
		text-align: center;
		padding: 20px;
		background-color: #333;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		padding: 20px;
		background-color: #666;
	}

	.footer {
		text-align: center;
		padding: 20px;
		background-color: #333;
	}

	.menu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		background-color: #666;
	}

	.menu a {
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		font-size: 20px;
		margin-right: 10px;
	}

	.return {
		position: fixed;
		top: 20px;
		right: 20px;
		background-color: #333;
		padding: 10px 20px;
		border-radius: 5px;
		cursor: pointer;
	}

	.return a {
		color: #fff;
		text-decoration: none;
	}

	.timer {
		position: fixed;
		bottom: 20px;
		right: 20px;
		background-color: #333;
		padding: 10px 20px;
		border-radius: 5px;
	}

	.timer p {
		margin: 0;
		font-size: 20px;
		color: #fff;
		text-align: center;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class="container">
		<div class="header">
			<h1>信息界面</h1>
		</div>
		<div class="content">
			<p>这里是中间内容板块</p>
		</div>
		<div class="footer">
			<p>版权所有 © 2021</p>
		</div>
		<div class="menu">
			<a href="#">菜单1</a>
			<a href="#">菜单2</a>
			<a href="#">菜单3</a>
			<a href="#">菜单4</a>
		</div>
		<div class="return">
			<a href="#">返回</a>
		</div>
		<div class="timer">
			<p>5秒后切换</p>
		</div>
	</div>
	<script>
		setTimeout(function() {
			// 切换页面代码
		}, 5000);
	</script>
</body>
</html>
信息界面代码 -  带背景图片、定时切换内容、中文显示、返回按钮

原文地址: https://www.cveoy.top/t/topic/oKG7 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录