css教程–十步学会用css建站.docx

css 教程–十步学会用 css 建站(全) Author: Jorux/Bluecssr Posted on: August 10, 2006 Filed under: Web Design ?? ? ? keywords: css, tutorial ?Trackback: URL(copy the link)FontSize: ? Trackback: URL(copy the link) Update: 本篇已得到原作者Steve Dennis 的翻译准予，在此 Jorux 表示感谢！ 本教程主要参考 Creating a CSS Layout from scratch，由 Jorux 翻译，以意译为主，其间加入了不少 Jorux 的个人观点，省略了一些多余的说明，请读者明鉴。 目录： 第一步：规划网站，本教程将以图示为例构建网站； 第二步：创建 html 模板及文件目录等； 第三步：将网站分为五个 div，网页基本布局的基础； 第四步：网页布局与 div 浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与 logo 部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难)； 第十步：解决 IE 浏览器的显示 BUG； 第一步：规划网站，本教程将以图示为例构建网站 1.规划网站，本教程将以下图为例构建网站。 点击看大图 其基本布局见下图： 点击看大图 主要由五个部分构成： Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px Header 网站头部图标，包含网站的logo 和站名。Width: 760px Height: 150px Content 网站的主要内容。 Width: 480px Height: Changes depending on content Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on 5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px 第二步：创建 html 模板及文件目录等 1.创建html 模板。代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html head meta http-equiv=Content-type content=text/html; charset=UTF-8 / titleCompanyName - PageName/title meta http-equiv=Content-Language content=en-us / meta http-equiv=imagetoolbar content=no / meta name=MSSmartTagsPreventParsing content=true / meta name=description content=Description / meta name=keywords content=Keywords / meta name=author content=Enlighten Designs / style type=text/css media=all@import css/master.css;/style /head body /body /html 将其保存为 index.html,并创建文件夹 css，images，网站结构如下： 2.创建网站的大框，即建立一个宽 760px 的盒子，它将包含网站的所有元素。在 html 文件的body和/body之间写入 div id=container Hello world. /div 创建 css 文件，命名为 master.css,保存在/css/文件夹下。写入： #container { width: 760px; background: red; } 控制 html 的 id 为 container 的盒子的宽为 760px，背景为红色。表现如下： 现在为了让盒子居中，写入 margin: auto;，使 css 文件为： #container { width: 760px; margin: auto; background: red; } 现在你可以看到盒子和浏览器的顶端有 8px 宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在 css 文件中写入： html, body {