介绍
本教程重点介绍如何使用选择器构建简单的页面布局。作为流程的一部分，我们将为同一元素的不同实例设置样式，以演示如何编写规则以定位元素的特定实例，而不会影响页面的其余部分。
布局
这是一个3列液体布局，将显示所有相等高度的列 - 每列中的颜色不同。
设置3列布局有很多种方法。他们都有优点和缺点。此方法适用于任何种类的列长度。但是，当视口减小到小于400px宽时，它不会正常折叠。
第1步 - HTML代码
第一步是为每个主要内容区域创建<div>元素 - “banner”，“nav”，“more”，“content”和“footer”。每个<div>都将使用ID进行样式设置，因为它们是页面上的每个实例。ID的名称基于功能而非外观。
还将有三个非内容<div>元素，用于添加图像并强制页面以特定方式运行。
容器将如下所示：
HTML CODE
<body>
<div id="banner"></div>
<div id="container">
<div id="container2">
<div id="navigation"></div>
<div id="more"></div>
<div id="content"></div>
<div id="cleardiv"></div> </div>
</div>
<div id="footer"></div>
</body>
第2步 - 删除内容
下一步是将内容添加到五个<div>元素中。有些浏览器或设备可以以原始形式查看您的页面 - 没有任何样式。因此，内容应使用正确的HTML元素进行样式设置，因此它对这些用户有意义。
这意味着主标题应为<h1>。导航项应该是列表，内容应放在容器中，例如<p>元素。HTML代码现在看起来像这样：
HTML CODE
<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 © sitename</a></li>
</ul>
</div>
</body>
今天就这么多吧 希望大家多多关注！
1130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
