这一页
【文章指南】建站实例第一步：规划网站，以图为例建站； 第二步：创建模板和文件目录等； 第三步：将网站分为五部分，基础网页的基本布局； 第四步：网页布局和浮动等； 第五步：网页主框架之外的附加结构的布局和表现； 第六步：页面中基础文字的样式设置； 第七步：图标和部分网站标题
【文本】
HTML+CSS+DIV网站建设实例讲解，第一步：规划网站，以插图为例搭建网站； 第二步：创建html模板和文件目录等； 第三步：将网站划分为五个div，网页基本上是布局的基础； 第四步：网页布局和div浮动等； 第五步：网页主框架之外的附加结构的布局和表现； 第六步：页面中基础文字的样式（css）设置； 第七步：设计网站头部的图标和标志； 第八步：设置页脚信息的表现（版权等）； 第九步：制作导航栏（难）； 以搭建网站为例， 1、规划网站，以下图为例搭建网站。 基本布局如下图所示。 策划网站主要由五部分组成 1.导航栏，带按钮特效。 宽度::50px2。
网站标题图标，包括网站徽标和网站名称。 宽度：：。 网站的主要内容。 宽度::.边框，一些附加信息。 宽度：：。 网站底栏，包括版权信息等。宽度::66px。 ,HTML+CSS+DIV网站建设实例讲解，第一步：规划网站，以插图为例进行网站建设； 第二步：创建html模板和文件目录等； 第三步：将网站划分为五个div，网页基本布局的基础； 第四步：网页布局和div浮动等。
第五步：网页主框架之外的附加结构的布局和表现； 第六步：页面中基础文字的样式（css）设置； 第七步：网站头部的图标和标志部分的设计； 第八步：页脚信息的表现设置（版权等）； 第九步：导航栏的制作（难点）； 第二步：创建html模板及文件目录等，1.创建html模板代码如下，/.css； ，保存为index.html，并在ROOT下创建文件夹css和， 2.为网站创建一个大盒子，即创建一个宽度为760px的盒子，它将包含网站的所有元素。 , 写入html文件中的 和 之间。 创建一个 css 文件，将其命名为 .css，并将其保存在 /css/ 文件夹中。
写：#:760px;:red;，控制id为html的盒子的宽度为760px，背景为red:，为了使盒子居中，写：auto;，这样css文件就是： #:760px;:auto ;:red;，框顶部与浏览器之间有间隙。 由于浏览器的默认内边距和边框。 要消除间隙，需要在css文件中写入：html,:0;:0;,:auto左右自适应边距离相同，HTML+CSS+DIV构建示例讲解，第一步：规划网站，
以图为例搭建网站； 第二步：创建html模板和文件目录等； 第三步：将网站划分为五个div，为网页基本布局的基础； 第四步：网页布局和div浮动等； 第五步：网页主框架之外的附加结构的布局和表现； 第六步：设置页面中基本文本的样式（css）； 第七步：设计网站标题图标和标志； 步骤8：页脚信息的表现设置（版权等）； 第九步：导航栏的制作（难点）； 第三步：将网站分成五个div，网页基本布局的基础，1.将“第一步”提到的五个部分全部放入框中，并写入html文件中：，，和表现如下：，2.为了区分这五个部分，我们对这五个部分使用了不同的背景
在css文件中写入#:red;:50px;#:blue;:150px;#:;#:green;#:;:66px;，表现如下，HTML+CSS+DIV构建示例讲解，第一步：规划网站，以插画为例搭建网站； 第二步：创建html模板和文件目录等； 第三步：将网站划分为五个div，为网页基本布局的基础； 第四步：网页布局、div浮动等； 第五步：网页主框架之外的附加结构的布局和表现；
第六步：页面中基础文字的样式（css）设置； 第七步：网站头部图标和标志的设计； 第八步：页脚信息的表现设置（版权等）； 第九步：导航条的制作（有难度）； 第四步：网页布局和div浮动等 1、浮动，首先让边框浮动到主要内容的右侧。 使用css控制浮动#:right;width:280px;:;，表现如下， 2、在主内容框中写入文字。 写，等，.isus。 在 html 文件中。
,,,enim....tate...apede.,,,,purus。
.，表现如下，问题：盒子占据了整个宽度，需要设置#的右边框为280px。 以免与框架冲突。 ，css代码如下：#:280px;:green;，同时在边框中写入一些文字。 在html文件中写入：et,.isus.,,,.
enim...tate...apede.,,,,purus...
表现如下，问题：网站底部框架已经跑到底部框架了。 在将边框向右浮动之前，浮动可以理解为在整个盒子之上又多了一层。 所以我们在css中写：，#:both;:;:66px;，主要用在div和div的结构中。 如果内层div是浮动的，一般要求清晰浮动，否则内层div会超出外层div的框架，如下图，HTML+CSS+DIV构建实例讲解，第一步：规划网站，取图以搭建网站为例；第二步：创建html模板和文件目录等； 第三步：将网站划分为五个div，为网页基本布局的基础； 第四步：网页布局和div浮动等； 第五步：网页主框架的布局和外部附加结构的呈现。
第六步：页面中基础文字的样式（css）设置； 第七步：网站头部图标和标志的设计； 第八步：页脚信息的表现设置（版权等）； 第九步：导航条制作（有难度）； 步骤5：网页主框架之外的附加结构的布局和表现，步骤5主要介绍网页主框架之外的附加结构的表现（），包括以下内容： 1、主导航栏； 2、Title()，包括网站名称和内容标题； 3. 内容； 4.页脚信息，包括版权、认证、子导航栏（可选）。 ，在添加这些结构时，为了不破坏原有框架，需要在css文件的“body”标签后面添加： .:none; “。” 即添加的类（class），可以使页面上任何属于该类的元素（）不显示出来，以供后面介绍和使用。
现在添加title()，首先回到HTML代码，到常用的html标题代码。 例如，一般使用网站名称、网站副标题、内容主标题等。 添加到html文件的图层（Div）中：，，刷新页面，可以看到硕大的标题，以及标题周围的空白，是因为标签默认大小和边距（）的原因，先把这些消除掉空白处，需要添加:,:0;:0;，接下来是导航栏，控制导航栏表现的css代码比较复杂，会在第九步或者第十步详细介绍。现在在html文件中添加导航代码:,,目前导航栏的性能比较差，以后会引入
这里先暂时隐藏导航栏，添加：，，我们跳过一步，先到页脚：，页脚包括两部分：左边的版权，认证和右边的子导航栏。 首先让子导航栏向右浮动，就像前面的处理和关系一样，需要添加一个新的图层（div）：，ade，理论上我们可以控制源文件上任意元素的浮动，但由于 IE 浏览器的 bug，需要在源文件上首先出现浮动层，也就是说，我们将字幕放在版权和认证的前面： ,in3。
0CMS，刷新页面，你会看到如下内容，最后我们回到内容部分：使用内容标题about，使用段落表现； 使用换行符。 ,...,.
