选择器教程 - 步骤教程

步骤 2 - 注入内容

这一步为五个<div>添加内容。有些浏览器或者设备可能按照一种非常奇怪的方式显示您的页面 - 不带样式。基于此,内容的添加需要使用正确的HTML元素,这样对这部分用户来说内容是有意义的。

这样意味着主标题应该使用<h1>元素。导航项应该做成列表,并且内容应该放在容器中,比如<p>元素。HTML代码如下:


HTML 代码
		
<body>
<div id="banner">

	<h1>Site name</h1>
</div>
<div id="container">
	<div id="container2">
		<div id="navigation">

			<ul>
				<li><a href="#">Nav item 1</a></li>
				<li><a href="#">Nav item 2</a></li>

				<li><a href="#">Nav item 3</a></li>
			</ul>
		</div>
		<div id="more">

			<h3>Find out more</h3>
			<p>Lorem ipsum.. </p>
		</div>
		<div id="content">

			<h2>Heading here</h2>
			<p>Lorem ipsum..</p>
		</div>
		<div id="cleardiv"></div>

	</div>
</div>
<div id="footer">
	<ul>
		<li><a href="#">Footer item 1</a></li>

		<li><a href="#">Footer item 2</a></li>
		<li><a href="#">Footer item 3</a></li>
		<li><a href="#">Copyright &copy; sitename</a></li>

	</ul>
</div>
</body> 

查看步骤 2 效果 »

步骤 3 »

其他的Max Design 文章和演讲
相关链接 webstandardsgroup.org