本篇实作，我们来建立一个简单的两栏架构的网页，主要也是靠float的浮动功能来实现的，创建单侧边栏的两列布局，我们要五个DIV基本模块，一个是做容器用的总模块，所有的模块都包含在里面，还有就是一个侧边栏模块，还有一个中间的内容模块，还有一个脚模块，共五个DIV，这里我们只做大的骨架，当然，一个完整的网站需要很多小的模块，哪里需要的，我们就在那个模块里去加上就可以了。
本文索引
- 第 1 步 - 建立没有 CSS 格式的基本要素
- 第 2 步 - 向总容器添加宽度和外边距
- 第 3 步 - 给总容器添加颜色，背景颜色和边框
- 第 4 步 - 给总容器添加行高
- 第 5 步 - 设置顶部页头的样式
- 第 6 步 - 设置页头标题的内外边距为0
- 第 7 步 - 应用浮动产生左侧栏
- 第 8 步 - 给左侧栏添加内外边距
- 第 9 步 - 为内容块DIV设置左外边距和左边框
- 第 10 步 - 为内容块DIV设置内边距
- 第 11 步 - 设置页脚的样式
- 第 12 步 - 向页脚添加颜色和背景色
- 第 13 步 - 向页脚添加上边框
- 第 14 步 - 删除中间段的上边距
- 第 15 步 - 设置内容段落最大行长度
第 1 步 - 建立没有 CSS 格式的基本要素
None
Header
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
Subheading
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
Footer
None CSS CODE
None
HTML CODE
<div>
<div>
<h1>Header</h1>
</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
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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 id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
第 3 步 - 给总容器添加颜色，背景颜色和边框
None None
Header
Subheading
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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 id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
第 4 步 - 给总容器添加行高
None None
Header
Subheading
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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 id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
第 5 步 - 设置顶部页头的样式
None None
Header
Subheading
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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 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
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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 id="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
第 7 步 - 应用浮动产生左侧栏
None None
Header
Subheading
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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: 160px;
}
HTML CODE
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<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
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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: 160px;
margin: 0;
padding: 1em;
}
HTML CODE
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<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
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
}
HTML CODE
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<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
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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: 160px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 200px;
border-left: 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="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
第 11 步 - 设置页脚的样式
None None
Header
Subheading
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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: 160px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 200px;
border-left: 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="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
第 12 步 - 向页脚添加颜色和背景色
None None
Header
Subheading
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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: 160px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 200px;
border-left: 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="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
第 13 步 - 向页脚添加上边框
None None
Header
Subheading
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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: 160px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 200px;
border-left: 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="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
第 14 步 - 删除中间段的上边距
None None
Header
Subheading
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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: 160px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 200px;
border-left: 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 { 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="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
第 15 步 - 设置内容段落最大行长度
None None
Header
Subheading
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，请您不要以这类的内容为指导，去做任何的实际的工作。
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: 160px;
margin: 0;
padding: 1em;
}
None #content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 16em;
}
None #footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
None #leftnav 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="content">
<h2>Subheading</h2>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
<p>
这些内容只是用于支撑骨架的，没有任何实际的意义，甚至有些说法可能就是错的或是过时的，
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
None
None None
油管频道👉 https://bit.ly/2XNfakc 看最新视频，白嫖最新节点！
请朋友们优先使用订阅，特别是手机用户，更方便更快捷！
-
👉Clash-meta 20.37版以后/Shadowrocket订阅：
https://drive.google.com/uc?export=download&id=1oQWWkFp5R7lJtPUzmV0wEZRvpeyV-JfW
-
👉Clash-旧版 20.37版以前/Shadowrocket订阅：
https://drive.google.com/uc?export=download&id=1oOAttnIOmm8JcJg94xiaNl2OC8wtGHJA
-
👉V2ray/IOS苹果V2Box/WinXray/Quantumult X订阅：
https://drive.google.com/uc?export=download&id=1oEYFAfSBsZN_LNcT9mHkgX33eDXbvPRv
- 👉Clash-meta(点击下载后，本地导入)
- 👉 Clash-旧版(点击下载后，本地打开)
- 👉 IOS 苹果小火箭专用(点击自动下载，订阅地址请右键复制链接地址)
- 👉 V2ray/IOS苹果V2Box/winXray(点击下载后，本地打开)
0 评论