16Blogger网页架构设计之Float-- 双侧边栏的三列布局（十二）

本篇文章，我们来创建一个有双侧边栏的三列布局架构的网页，以此来学习巩固 float 的浮动功能，创建三列布局，我们的基本模块就要六个DIV，一个是做容器用的总模块，所有的模块都包含在里面，还有就是两个侧边栏模块，还有一个中间的内容模块，还有一个脚模块，共六个，我们都用DIV，当然，一个完整的网站需要的模块很多，在哪里需要的，我们就在那个模块里去加就可以了，由于篇幅的原因，这里我们只做大的骨架。

本文索引

• 第 1 步 - 建立没有 CSS 格式的六个DIV块基本要素
• 第 2 步 - 向总容器添加宽度和外边距
• 第 3 步 - 给总容器添加颜色，背景颜色和边框
• 第 4 步 - 给总容器添加行高
• 第 5 步 - 设置顶部页头的样式
• 第 6 步 - 设置页头标题的内外边距为0
• 第 7 步 - 应用浮动产生左侧栏并添加内外边距
• 第 8 步 - 应用浮动产生右侧栏并添加内外边距
• 第 9 步 - 为内容块DIV设置左右的外边距和左右的边框
• 第 10 步 - 为内容块DIV设置内边距
• 第 11 步 - 设置页脚的样式
• 第 12 步 - 向页脚添加颜色和背景色
• 第 13 步 - 向页脚添加上边框
• 第 14 步 - 删除中间段的上边距

None

第 1 步 - 建立没有 CSS 格式的六个DIV块基本要素

None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None

HTML CODE

<div>
<div>
<h1>Header</h1>
</div>
<div>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div>
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div>
<h3>Footer</h3>
</div>
</div>
None

第 2 步 - 向总容器添加宽度和外边距

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
#container
{
width: 90%;
margin: 10px auto;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 3 步 - 给总容器添加颜色，背景颜色和边框

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 4 步 - 给总容器添加行高

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 5 步 - 设置顶部页头的样式

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 6 步 - 设置页头标题的内外边距为0

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 7 步 - 应用浮动产生左侧栏并添加内外边距

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
None #top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 8 步 - 应用浮动产生右侧栏并添加内外边距

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None



None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
None #top h1
{
padding: 0;
margin: 0;
}
None #leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
#rightnav
{
float: right;
width: 100px;
margin: 0;
padding: 1em;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="rightnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 9 步 - 为内容块DIV设置左右的外边距和左右的边框

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
None #top h1
{
padding: 0;
margin: 0;
}
None #leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
None #rightnav
{
float: right;
width: 100px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 150px;
border-left: 1px solid gray;
margin-right: 150px;
border-right: 1px solid gray;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="rightnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 10 步 - 为内容块DIV设置内边距

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
None #top h1
{
padding: 0;
margin: 0;
}
None #leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
None #rightnav
{
float: right;
width: 100px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 150px;
border-left: 1px solid gray;
margin-right: 150px;
border-right: 1px solid gray;
padding: 1em;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="rightnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 11 步 - 设置页脚的样式

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
None #top h1
{
padding: 0;
margin: 0;
}
None #leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
None #rightnav
{
float: right;
width: 100px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 150px;
border-left: 1px solid gray;
margin-right: 150px;
border-right: 1px solid gray;
padding: 1em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="rightnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 12 步 - 向页脚添加颜色和背景色

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
None #top h1
{
padding: 0;
margin: 0;
}
None #leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
None #rightnav
{
float: right;
width: 100px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 150px;
border-left: 1px solid gray;
margin-right: 150px;
border-right: 1px solid gray;
padding: 1em;
}
None #footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="rightnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 13 步 - 向页脚添加上边框

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
None #top h1
{
padding: 0;
margin: 0;
}
None #leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
None #rightnav
{
float: right;
width: 100px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 150px;
border-left: 1px solid gray;
margin-right: 150px;
border-right: 1px solid gray;
padding: 1em;
}
None #footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="rightnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 14 步 - 删除中间段的上边距

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
None #top h1
{
padding: 0;
margin: 0;
}
None #leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
None #rightnav
{
float: right;
width: 100px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 150px;
border-left: 1px solid gray;
margin-right: 150px;
border-right: 1px solid gray;
padding: 1em;
}
None #footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="rightnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None

第 15 步 - 设置内容段落最大行长度

None None

Header

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Subheading

这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。

Footer

None

None CSS CODE
None #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
None #top h1
{
padding: 0;
margin: 0;
}
None #leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
None #rightnav
{
float: right;
width: 100px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 150px;
border-left: 1px solid gray;
margin-right: 150px;
border-right: 1px solid gray;
padding: 1em;
max-width: 10em;
}
None #footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
None #leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

HTML CODE

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="rightnav">
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
None
None None

油管频道👉 https://bit.ly/2XNfakc 看最新视频，白嫖最新节点！

请朋友们优先使用订阅，特别是手机用户，更方便更快捷！

• 👉Clash-meta 20.37版以后/Shadowrocket订阅：

  
  https://drive.google.com/uc?export=download&id=1WJalxvK2ZVkPVAKsvh5Q_jXdqIpwUXBa
  
  

• 👉Clash-旧版 20.37版以前/Shadowrocket订阅：

  
  https://drive.google.com/uc?export=download&id=1WI5x-ZYATe4oEqe9wrA25h6o7UMJoxB_
  
  

• 👉V2ray/IOS苹果V2Box/WinXray/Quantumult X订阅：

  
  https://drive.google.com/uc?export=download&id=1WqKZx6WwgGRloGXC5Is3fege07U0Difi
  
  
• 👉Clash-meta(点击下载后，本地导入)
• 👉 Clash-旧版(点击下载后，本地打开)
• 👉 IOS 苹果小火箭专用(点击自动下载，订阅地址请右键复制链接地址)
• 👉 V2ray/IOS苹果V2Box/winXray(点击下载后，本地打开)