第1页 / 共17页
第2页 / 共17页
第3页 / 共17页
第4页 / 共17页
第5页 / 共17页
第6页 / 共17页
第7页 / 共17页
第8页 / 共17页
DIV+CSS网页设计实例教程.doc
DIV+CSS 网页设计实例教程
目录：
第一步：规划网站，本教程将以图示为例构建网站；
第二步：创建 html 模板及文件目录等；
第三步：将网站分为五个 div，网页基本布局的基础；
第四步：网页布局与 div 浮动等；
第五步：网页主要框架之外的附加结构的布局与表现；
第六步：页面内的基本文本的样式(css)设置；
第七步：网站头部图标与 logo 部分的设计；
第八步：页脚信息(版权等)的表现设置；
第九步：导航条的制作(较难)；
第十步：解决 IE 浏览器的显示 BUG；
第一步：规划网站，本教程将以图示为例构建网站
1.规划网站，本教程将以下图为例构建网站。
其基本布局见下图：
主要由五个部分构成：
1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px
2.Header 网站头部图标，包含网站的 logo 和站名。 Width: 760px Height: 150px
3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content
4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on content
5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px
第二步：创建 html 模板及文件目录等 1.创建 html 文件。代码如下：
CompanyName - PageName
link href= "css/master.css";
将其保存为 index.html,并创建文件夹 css，images，网站结构如下：
2.创建网站的大框，即建立一个宽 760px 的盒子 page-container，它将包含网站的所有元素。
在 html 文件的和 之间写入
Hello world.
创建 css 文件，命名为 master.css,保存在/css/文件夹下。写入：
#page-container {
width: 760px;
background: red;
}
控制 html 的 id 的盒子的宽为 760px，背景为红色。表现如下：
现在为了让盒子居中，写入 margin: auto;，使 css 文件为：
#page-container {
width: 760px;
margin: auto;
background: red;
}
现在你可以看到盒子和浏览器的顶端有 8px 宽的空隙。这是由于浏览器的默认的填充和边界
造成的。消除这个空隙，就需要在 css 文件中写入：
body {
margin: 0;
padding: 0;
}
第三步：将网站分为五个 div，网页基本布局的基础:
1.将“第一步”提到的五个部分都放入盒子中，在 html 文件中写入：
Header
Content
表现如下：
2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在 css 文件写
入：
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
}
表现如下：
第四步：网页布局与 div 浮动等：
1.浮动，让边框盒子浮动到主要内容的右边。为了浮动，对边框盒子设置一定宽度。用 css
控制浮动:
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
表现如下：
2.往主要内容的盒子中写入一些文字。在 html 文件中写入：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
表现如下：
但是你可以看到主要内容的盒子占据了整个 page-container 的宽度，我们需要将#content 的
右边界设为 280px。以使其不和边框盒子发生冲突。
css 代码如下：
#content {
margin-right: 280px;
background: green;
}
同时往边框盒子里写入一些文字。在 html 文件中写入：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
表现如下：
这也不是我们想要的，边框盒子影响了后面底框盒子的正确显示了。这是由于我们将边框盒
子向右浮动，由于是浮动，所以可以理解为它位于整个盒子之上的另一层。因此，网站的底
框盒子和内容盒子位置对齐了。
为了避免受前面边框盒子的浮动影响，因此我们往 css 中写入：
#footer {
clear:right;
background: orange;
height: 66px;
}
表现如下：
第五步：网页主要框架之外的附加结构的布局与表现：
第五步主要介绍除网页主要框架之外的附加结构的表现(Layout),包括以下内容:
1.主导航条(main-nav)；
2.标题(heading),包括网站名和内容标题；
3.内容(content)；
4.页脚信息(footer),包括版权,认证,副导航条(可选)。
加入这些结构时，为了不破坏原有框架，我们需要在 css 文件"body"标签(TAG)下加入:
.hidden {
display: none;
}
".hidden"即我们加入的类(class),这个类可以使页面上任意属于 hidden 类的元素(element)不显
示。这些会在稍后使用，现在请暂时忘记它。
现在我们加入标题(heading):
先回到 HTML 的代码，到是我们常用的 html 标题代码。比如我们一般用网站名，网站副标
题,内容主标题等。我们往 html 文件的 Header 层(Div)加入:
Enlighten Designs
刷新一下页面，你就可以看到巨大的标题，和标题周围的空白，这是因为标签的默认 大小和边距(margin)造成的，先要消除这些空白,需要加入, h1 { margin: 0; padding: 0;
}，也可以直接在 html 文件最前面加上：
*, body {
margin: 0;
padding: 0;
}
接下来是主导航条(main-nav)：
控制导航条表现的 css 代码相对比较复杂，我们将在第九步或是第十步中详细介绍。现在 html
文件中加入导航代码：
About
Services
Portfolio
Contact Us
(注意：在这使用了常用的 ul 和 li 标签,a 标签)
我们跳一步，先到页脚(footer)：
页脚包括两部分：左边的版权,认证和右边的副导航条。
我们先要让副导航条向右浮动，就像之前处理 Sidebar 和 Content 关系的一样，需要加入一
个新的层(div id= “altnav”):
About -
Services -
Portfolio -
Contact Us -
Terms of Trade
理论上，我们可以控制源文件上的任意元素的浮动，但由于 IE 浏览器的 BUG，被浮动层需
要首先出现在源文件上（浮动层自动脱离文档流后，其后面位置的文本自动填补上来），也
就是说我们把副标题放在版权和认证的前面：
About -
Services -
Portfolio -
Contact Us -
Terms of Trade
Copyright © Enlighten Designs
Powered by Enlighten Hosting and
Vadmin 3.0 CMS
刷新你的页面，你将看到如下所示(点击看大图)：
最后我们回到内容部分：用表现内容标题–"About","Contact us"；用表现段落；用断行。
About
Enlighten Designs is an Internet solutions provider that specialises in
front and back end development. To view some of the web sites we have created view our
portfolio.
We are currently undergoing a 'face lift', so if you have any questions or would
like more information about the services we provide please feel free to contact us.
Contact Us
Phone: (07) 853 6060
Fax: (07) 853 6060
Email:
info@enlighten.co.nz
P.O Box: 14159, Hamilton, New Zealand
More contact information…
刷新页面可以看到在 Content 层中又出现一些空白，这是由于标签的默认边距(margin)造成
的，我们必须消除这些恼人的空白，当又不想把网页中所 有的标签地边距都设为 0，这就
需要使用 css 的子选择器("child css selector"),在 html 的文件结构中，我们想控制的标签(
child
)是属于#content 层(
parent
)的,因此在 css 文件中写入：
#content h2 {
margin: 0;
padding: 0;
}
#content p {
margin: 0;
padding: 0;
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
