<!DOCTYPE html>
<html>
<head>
	<title>导航网页</title>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #f5f5f5;
		}
<pre><code>	nav {
		background-color: #333;
		color: #fff;
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
	}

	nav ul li {
		margin: 0 10px;
	}

	nav ul li a {
		color: #fff;
		text-decoration: none;
		font-size: 18px;
	}

	nav ul li a:hover {
		text-decoration: underline;
	}

	.content {
		max-width: 800px;
		margin: 0 auto;
		padding: 40px;
		text-align: center;
	}

	h1 {
		font-size: 36px;
		margin-bottom: 20px;
	}

	p {
		font-size: 18px;
		line-height: 1.5;
		margin-bottom: 20px;
	}

	.btn {
		display: inline-block;
		background-color: #333;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
		text-decoration: none;
		font-size: 18px;
		transition: background-color 0.3s ease;
	}

	.btn:hover {
		background-color: #666;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<nav>
		<h1>导航网页</h1>
		<ul>
			<li><a href="#home">首页</a></li>
			<li><a href="#about">关于我们</a></li>
			<li><a href="#services">服务项目</a></li>
			<li><a href="#contact">联系我们</a></li>
		</ul>
	</nav>
	<div class="content">
		<section id="home">
			<h2>欢迎来到我们的网站</h2>
			<p>我们提供最优质的服务,让您的生活更加便捷和舒适。</p>
			<a href="#services" class="btn">了解更多</a>
		</section>
		<section id="about">
			<h2>关于我们</h2>
			<p>我们是一家致力于为客户提供优质服务的公司,我们的团队由经验丰富的专业人士组成,为客户提供最好的解决方案。</p>
			<a href="#contact" class="btn">联系我们</a>
		</section>
		<section id="services">
			<h2>我们的服务项目</h2>
			<ul>
				<li>清洁服务</li>
				<li>家庭保洁服务</li>
				<li>办公室保洁服务</li>
				<li>地毯清洗服务</li>
				<li>床上用品清洗服务</li>
			</ul>
			<a href="#contact" class="btn">联系我们</a>
		</section>
		<section id="contact">
			<h2>联系我们</h2>
			<p>如果您有任何问题或需要了解更多信息,请填写以下表格联系我们。</p>
			<form>
				<label for="name">姓名:</label>
				<input type="text" id="name" name="name"><br><br>
				<label for="email">电子邮件:</label>
				<input type="email" id="email" name="email"><br><br>
				<label for="message">留言:</label>
				<textarea id="message" name="message"></textarea><br><br>
				<input type="submit" value="发送" class="btn">
			</form>
		</section>
	</div>
</body>
</html

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

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