高校招生宣传网站 | 院校介绍与专业信息 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>高校招生宣传网站 | 院校介绍与专业信息</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
<pre><code>	h1 {
		color: #004d99;
		text-align: center;
	}

	nav {
		background-color: #004d99;
		padding: 10px;
		margin-bottom: 30px;
	}

	nav a {
		color: #fff;
		text-decoration: none;
		margin-right: 20px;
	}

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

	.container {
		margin: 0 auto;
		width: 80%;
		max-width: 1200px;
	}

	.col {
		float: left;
		width: 50%;
		padding: 10px;
		box-sizing: border-box;
	}

	.col img {
		display: block;
		margin: 0 auto;
		max-width: 100%;
	}

	.clearfix {
		clear: both;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<header>
		<h1>欢迎来到高校招生宣传网站</h1>
	</header>
<pre><code>&lt;nav&gt;
	&lt;a href='#college1'&gt;学院1&lt;/a&gt;
	&lt;a href='#college2'&gt;学院2&lt;/a&gt;
&lt;/nav&gt;

&lt;div class='container'&gt;
	&lt;div class='col'&gt;
		&lt;h2 id='college1'&gt;学院1&lt;/h2&gt;
		&lt;p&gt;学院1的招生宣传内容。&lt;/p&gt;
		&lt;img src='college1.jpg' alt='学院1的照片'&gt;
	&lt;/div&gt;

	&lt;div class='col'&gt;
		&lt;h2 id='college2'&gt;学院2&lt;/h2&gt;
		&lt;p&gt;学院2的招生宣传内容。&lt;/p&gt;
		&lt;img src='college2.jpg' alt='学院2的照片'&gt;
	&lt;/div&gt;

	&lt;div class='clearfix'&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;footer&gt;
	&lt;p&gt;版权所有 &amp;copy; 2021 招生宣传网站&lt;/p&gt;
&lt;/footer&gt;
</code></pre>
</body>
</html>