企业网站 - 专业产品与解决方案 - 常规

<p><!doctype html></p>
<html>
<head>
	<meta charset='utf-8'>
	<title>企业网站 - 专业产品与解决方案</title>
	<style>
		body{
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
		}
		header{
			background-color: #333;
			color: #fff;
			padding: 20px;
			text-align: center;
		}
		nav{
			background-color: #666;
			color: #fff;
			padding: 10px 20px;
			text-align: center;
		}
		nav ul{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		nav li{
			display: inline-block;
			margin-right: 20px;
		}
		nav a{
			color: #fff;
			text-decoration: none;
		}
		h1{
			font-size: 36px;
			margin: 20px 0;
			text-align: center;
		}
		section{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 20px;
		}
		section div{
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
			margin: 10px;
			padding: 20px;
			width: 300px;
		}
		section img{
			max-width: 100%;
			margin-bottom: 10px;
		}
		section h2{
			font-size: 24px;
			margin: 0;
		}
		section p{
			font-size: 16px;
			line-height: 1.5;
			margin: 10px 0;
		}
		footer{
			background-color: #333;
			color: #fff;
			padding: 20px;
			text-align: center;
		}
	</style>
</head>
<body>
	<header>
		<h1>企业网站 - 专业产品与解决方案</h1>
	</header>
	<nav>
		<ul>
			<li><a href='#'>首页</a></li>
			<li><a href='#'>产品介绍</a></li>
			<li><a href='#'>解决方案</a></li>
			<li><a href='#'>关于我们</a></li>
			<li><a href='#'>联系我们</a></li>
		</ul>
	</nav>
	<section>
		<div>
			<img src='product1.jpg' alt='产品1'>
			<h2>产品1</h2>
			<p>产品1的介绍</p>
			<a href='#'>了解更多</a>
		</div>
		<div>
			<img src='product2.jpg' alt='产品2'>
			<h2>产品2</h2>
			<p>产品2的介绍</p>
			<a href='#'>了解更多</a>
		</div>
		<div>
			<img src='product3.jpg' alt='产品3'>
			<h2>产品3</h2>
			<p>产品3的介绍</p>
			<a href='#'>了解更多</a>
		</div>
	</section>
	<footer>
		<p>版权所有 &copy; 2021 企业网站</p>
	</footer>
</body>
</html>