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

本文索引

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

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

Header

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

Subheading

Footer

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>

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

Header

Subheading

Footer

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>

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

Header

Subheading

Footer

CSS CODE
#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>

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

Header

Subheading

Footer

CSS CODE
#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>

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

Header

Subheading

Footer

CSS CODE
#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>

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

Header

Subheading

Footer

CSS CODE
#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>

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

Header

Subheading

Footer

CSS CODE
#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;
}
#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>

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

Header

Subheading

Footer

CSS CODE
#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;
}
#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>

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

Header

Subheading

Footer

CSS CODE
#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;
}
#leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
#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>

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

Header

Subheading

Footer

CSS CODE
#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;
}
#leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
#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;
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>

第 11 步 - 设置页脚的样式

Header

Subheading

Footer

CSS CODE
#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;
}
#leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
#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;
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>

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

Header

Subheading

Footer

CSS CODE
#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;
}
#leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
#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;
padding: 1em;
}
#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>

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

Header

Subheading

Footer

CSS CODE
#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;
}
#leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
#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;
padding: 1em;
}
#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>

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

Header

Subheading

Footer

CSS CODE
#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;
}
#leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
#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;
padding: 1em;
}
#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>

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

Header

Subheading

Footer

CSS CODE
#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;
}
#leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
#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;
padding: 1em;
max-width: 10em;
}
#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>

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

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

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

https://drive.google.com/uc?export=download&id=1lcTuX2rEbf-Mi-9QrJlSXCF_XXHtq9KJ
👉Clash-旧版 20.37版以前/Shadowrocket订阅：

https://drive.google.com/uc?export=download&id=1lTV9AJiCDR-4UgLj3iyXzwD-cDTOZeEX
👉V2ray/IOS苹果V2Box/WinXray/Quantumult X订阅：

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

Social Widget

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

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

Header

Subheading

Footer

发表评论

0 评论

联系人表单

站内搜索

置顶文章

热门文章

归档

标签