《用css布局网站之十步教程》由会员分享，可在线阅读，更多相关《用css布局网站之十步教程（19页珍藏版）》请在金锄头文库上搜索。
1、用用 css 布局网站之十步教程布局网站之十步教程第一步：规划网站，本教程将以图示为例构建网站第一步：规划网站，本教程将以图示为例构建网站首先需要规划网站，本教程将以下图为例构建网站。 其基本布局见下图：主要由五个部分构成：主要由五个部分构成： Example Source Code 1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px 2.Header 网站头部图标，包含网站的 logo 和站名。 Width: 760px Height: 150px 3.Content 网站的主要内容。 Width: 480px Height: Ch
2、anges depending on content 4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on 5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px 第二步：创建第二步：创建 html 模板及文件目录等模板及文件目录等1.创建创建 html 模板。模板。代码如下：Example Source Code CompanyName - PageNameimport “css/master.css“;将其保存为 index.html,并创建文件夹 css，images，网站结
3、构如下：2.创建网站的大框：创建网站的大框：建立一个宽 760px 的盒子，它将包含网站的所有元素。在 html 文件的和之间写入Example Source Code Hello world.创建 css 文件，命名为 master.css,保存在/css/文件夹下。写入：Example Source Code #page-container width: 760px;background: red;控制 html 的 id 为 page-container 的盒子的宽为 760px，背景为红色。现在为了让盒子居中，写入 margin: auto;，使 css 文件为：Example Sou
4、rce Code #page-container width: 760px;margin: auto;background: red;现在你可以看到盒子和浏览器的顶端有 8px 宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在 css 文件中写入：Example Source Code html, body margin: 0;padding: 0;第三步：将网站分为五个第三步：将网站分为五个 div，网页基本布局的基础：，网页基本布局的基础：1.将将“第一步第一步”提到的五个部分都放入盒子中，在提到的五个部分都放入盒子中，在 html 文件中写入：文件中写入：Exam
5、ple Source Code Main Nav Header Sidebar A Content Footer2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在 css 文件写入：文件写入：Example Source Code #main-nav background: red;height: 50px;#header background: blue;height: 150px;#sidebar-a background: darkgreen;#content background: green;#
6、footer background: orange;height: 66px;表现如下：第四步：网页布局与第四步：网页布局与 div 浮动等浮动等1.浮动：浮动：首先让边框浮动到主要内容的右边。用 css 控制浮动。Example Source Code #sidebar-a float: right;width: 280px;background: darkgreen;表现如下：2.往主要内容的盒子中写入一些文字。往主要内容的盒子中写入一些文字。在 html 文件中写入：Example Source Code Lorem ipsum dolor sit amet, consectetuer
7、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 odi
8、o. 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 代码如下：Example Source Code #content margin-right
9、: 280px;background: green;同时往边框里写入一些文字。在 html 文件中写入：Example Source Code 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.
10、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.表现如下：这也不是我们想要的
11、，网站的底框跑到边框的下边去了。这是由于我们将边框向右浮动，由于是浮动，所以可以理解为它位于整个盒子之上的另一层。因此，底框和内容盒子对齐了。因此我们往 css 中写入：Example Source Code #footer clear: both;background: orange;height: 66px;表现如下：第五步：网页主要框架之外的附加结构的布局与表现第五步：网页主要框架之外的附加结构的布局与表现除网页主要框架之外的附加结构的表现(Layout),包括以下内容：1.主导航条；2.标题(heading),包括网站名和内容标题；3.内容；4.页脚信息,包括版权,认证,副导航条(可选
12、)。加入这些结构时，为了不破坏原有框架，我们需要在 css 文件“body“标签(TAG)下加入:Example Source Code .hidden display: none;“.hidden“即我们加入的类(class),这个类可以使页面上任意属于 hidden 类的元素(element)不显示。这些会在稍后使用，现在请暂时忘记它。现在我们加入标题现在我们加入标题(heading)：先回到 HTML 的代码，到是我们常用的 html 标题代码。比如我们一般用网站名，网站副标题,内容主标题等。我们往 html 文件的 Header 层(Div)加入:Example Source Code
13、 Enlighten Designs刷新一下页面，你就可以看到巨大的标题，和标题周围的空白，这是因为标签的默认大小和边距(margin)造成的，先要消除这些空白,需要加入：Example Source Code h1 margin: 0;padding: 0;接下来是导航条：接下来是导航条：控制导航条表现的 css 代码相对比较复杂，我们将在第九步或是第十步中详细介绍。现在 html 文件加入导航代码：Example Source Code AboutServicesPortfolioContact Us(注：原教程使用了 dl 和 dt，jorux 在这使用了更常用的 ul 和 li 标签)
14、目前导航条的表现比较糟糕，但是要在以后的教程中介绍其特殊表现，故需要暂时隐藏导航条,于是加入：Example Source Code AboutServicesPortfolioContact Us我们跳一步，先到页脚：我们跳一步，先到页脚：页脚包括两部分：左边的版权,认证和右边的副导航条。我们先要让副导航条向右浮动，就像之前处理 Sidebar 和 Content 关系的一样，需要加入一个新的层(div):Example Source Code About - Services - Portfolio - Contact Us - Terms of Trade理论上，我们可以控制源文件上的任
15、意元素的浮动，但由于 IE 浏览器的 BUG，被浮动层需要首先出现在源文件上，也就是说我们把副标题放在版权和认证的前面：Example Source Code About - Services - Portfolio - Contact Us - Terms of TradeCopyright Enlighten DesignsPowered by Enlighten Hosting andVadmin 3.0 CMS刷新你的页面，你将看到如下所示：最后我们回到内容部分：最后我们回到内容部分：用表现内容标题“About“,“Contact us“；用表现段落；用断行。Example Source Code AboutEnlighten Designs is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have
