HTML5 和 CSS3 示例 - 结构与样式代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 与 CSS3 示例</title>
	<style>
		/* 设置页面背景颜色 */
		body {
			background-color: #f2f2f2;
		}
<pre><code>	/* 设置标题样式 */
	h1 {
		font-size: 36px;
		color: #333;
		text-align: center;
		margin-top: 50px;
	}

	/* 设置图片样式 */
	img {
		display: block;
		margin: 0 auto;
		border-radius: 50%;
		box-shadow: 2px 2px 5px #999;
	}

	/* 设置链接样式 */
	a {
		color: #333;
		text-decoration: none;
		border-bottom: 1px solid #333;
		transition: border-bottom 0.3s ease-in-out;
	}

	a:hover {
		border-bottom: 1px solid #ff6600;
	}

	/* 设置列表样式 */
	ul {
		list-style-type: none;
		margin: 20px 0;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
		font-size: 20px;
	}

	/* 设置表单样式 */
	form {
		margin-top: 50px;
		text-align: center;
	}

	input[type='text'], input[type='email'], textarea {
		display: block;
		margin: 20px auto;
		padding: 10px;
		border-radius: 5px;
		border: 1px solid #ccc;
		width: 80%;
		box-sizing: border-box;
		font-size: 18px;
		color: #333;
	}

	input[type='submit'] {
		background-color: #ff6600;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 10px 20px;
		font-size: 20px;
		cursor: pointer;
		transition: background-color 0.3s ease-in-out;
	}

	input[type='submit']:hover {
		background-color: #cc5500;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<h1>HTML5 与 CSS3 示例</h1>
	<img src='https://via.placeholder.com/150' alt='示例图片'>
	<ul>
		<li><a href='#'>示例链接1</a></li>
		<li><a href='#'>示例链接2</a></li>
		<li><a href='#'>示例链接3</a></li>
	</ul>
	<form>
		<label for='name'>姓名：</label>
		<input type='text' id='name' name='name' placeholder='请输入您的姓名'>
		<label for='email'>邮箱：</label>
		<input type='email' id='email' name='email' placeholder='请输入您的邮箱'>
		<label for='message'>留言：</label>
		<textarea id='message' name='message' rows='5' placeholder='请输入您的留言'></textarea>
		<input type='submit' value='提交'>
	</form>
</body>
</html>