《用css网站布局之十步实录！》由会员分享，可在线阅读，更多相关《用css网站布局之十步实录！（29页珍藏版）》请在金锄头文库上搜索。
1、用用 csscss 网站布局之十步实录！网站布局之十步实录！第一步：规划网站，本教程将以图示为例构建网站第一步：规划网站，本教程将以图示为例构建网站首先需要规划网站，本教程将以下图为例构建网站。 其基本布局见下图：主要由五个部分构成：主要由五个部分构成： Example Source Code 1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px 2.Header 网站头部图标，包含网站的 logo 和站名。 Width: 760px Height: 150px 3.Content 网站的主要内容。 Width: 480px Heigh
2、t: Changes 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，image
3、s，网站结构如下：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 文件为：Exampl
4、e Source Code #page-container width: 760px;margin: auto;background: red;现在你可以看到盒子和浏览器的顶端有 8px 宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在 css 文件中写入：Example Source Code html, body margin: 0;padding: 0;第四步：网页布局与第四步：网页布局与 div 浮动等浮动等1.浮动：浮动：首先让边框浮动到主要内容的右边。用 css 控制浮动。Example Source Code #sidebar-a float: right
5、;width: 280px;background: darkgreen;表现如下：2.往主要内容的盒子中写入一些文字。往主要内容的盒子中写入一些文字。在 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 n
6、ibh 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 habit
7、asse platea dictumst.但是你可以看到主要内容的盒子占据了整个 page-container 的宽度，我们需要将#content 的右边界设为 280px。以使其不和边框发生冲突。css 代码如下：Example Source Code #content margin-right: 280px;background: green;同时往边框里写入一些文字。在 html 文件中写入：Example Source Code Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim u
8、t 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
9、 augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.表现如下：这也不是我们想要的，网站的底框跑到边框的下边去了。这是由于我们将边框向右浮动，由于是浮动，所以可以理解为它位于整个盒子之上的另一层。因此，底框和内容盒子对齐了。因此我们往 css 中写入：Example Source Code #footer clear: both;background: orange;height:
10、 66px;表现如下：第五步：网页主要框架之外的附加结构的布局与表现第五步：网页主要框架之外的附加结构的布局与表现除网页主要框架之外的附加结构的表现(Layout),包括以下内容：1.主导航条；2.标题(heading),包括网站名和内容标题；3.内容；4.页脚信息,包括版权,认证,副导航条(可选)。加入这些结构时，为了不破坏原有框架，我们需要在 css 文件“body“标签(TAG)下加入:Example Source Code .hidden display: none;“.hidden“即我们加入的类(class),这个类可以使页面上任意属于 hidden 类的元素(element)不显
11、示。这些会在稍后使用，现在请暂时忘记它。现在我们加入标题现在我们加入标题(heading)：先回到 HTML 的代码，到是我们常用的 html 标题代码。比如我们一般用网站名，网站副标题,内容主标题等。我们往 html 文件的 Header 层(Div)加入:Example Source Code Enlighten Designs刷新一下页面，你就可以看到巨大的标题，和标题周围的空白，这是因为标签的默认大小和边距(margin)造成的，先要消除这些空白,需要加入：Example Source Code h1 margin: 0;padding: 0;接下来是导航条：接下来是导航条：控制导航条
12、表现的 css 代码相对比较复杂，我们将在第九步或是第十步中详细介绍。现在 html 文件加入导航代码：Example Source Code AboutServicesPortfolioContact Us(注：原教程使用了 dl 和 dt，jorux 在这使用了更常用的 ul 和 li 标签)目前导航条的表现比较糟糕，但是要在以后的教程中介绍其特殊表现，故需要暂时隐藏导航条,于是加入：Example Source Code AboutServicesPortfolioContact Us我们跳一步，先到页脚：我们跳一步，先到页脚：页脚包括两部分：左边的版权,认证和右边的副导航条。我们先要让
13、副导航条向右浮动，就像之前处理 Sidebar 和 Content 关系的一样，需要加入一个新的层(div):Example Source Code About - Services - Portfolio - Contact Us - Terms of Trade理论上，我们可以控制源文件上的任意元素的浮动，但由于 IE 浏览器的 BUG，被浮动层需要首先出现在源文件上，也就是说我们把副标题放在版权和认证的前面：Example Source Code About - Services - Portfolio - Contact Us - Terms of TradeCopyright Enl
14、ighten 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 ha
15、ve 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 UsPhone: (07) 853 6060Fax: (07) 853 6060Email: infoenlighten.co.nzP.O Box: 14159, Hamilton, New ZealandMore contact information刷新页面可以看到在 Content 层中又出现一些空白，这是由于标签的默认边距(margin)造成的，我们必须消除这些恼人的空白，当又不想把网页中所有的标签地边距都设为 0，这就需要使用 css 的子选择器(“child css selector“),在 html 的文件结构中，我们想控制的标签(child)是属于#con
