当前位置:主页 > 网页教程 > 网页制作 > div css > 内容欢迎大家投稿

CSS教程:十步学会用css建站

时间:2009-10-29 09:01来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

 本篇已得到原作者 Steve Dennis 的翻译准予,在此Jorux表示感谢!
  本教程主要参考 Creating a CSS Layout from scratch ,由Jorux翻译,以意译为主,其间加入了不少Jorux的个人观点,省略了一些多余的说明,请读者明鉴。

 

  规划网站

  首先需要规划网站,本教程将以下图为例构建网站。

CSS教程:十步学会用css建站
图1

  其基本布局见下图:

CSS教程:十步学会用css建站
图2

  主要由五个部分构成:
  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
  5. Footer 网站底栏,包含版权信息等。
  Width: 760px Height: 66px

 

1.创建html模板及文件目录等

 

  代码如下:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html>
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>CompanyName - 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,网站结构如下:

CSS教程:十步学会用css建站
图3

  2.创建网站的大框

  建立一个宽760px的盒子,它将包含网站的所有元素。
  在html文件的<body>和</body>之间写入
  <div id="page-container">
  Hello world.
  </div>
  创建css文件,命名为master.css,保存在/css/文件夹下。写入:
  #page-container {
  width: 760px;
  background: red;
  }
  控制html的id为page-container的盒子的宽为760px,背景为红色,表现如下。

CSS教程:十步学会用css建站
图4

  现在为了让盒子居中,写入margin: auto;,使css文件为:
  #page-container {
  width: 760px;
  margin: auto;
  background: red;
  }
  现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙,就需要在css文件中写入:
  html, body {
  margin: 0;
  padding: 0;
  }


  将网站分为五个div

  1.将"第一步"提到的五个部分都放入盒子中,在html文件中写入:
  <div id="page-container">
  <div id="main-nav">Main Nav</div>
  <div id="header">Header</div>
  <div id="sidebar-a">Sidebar A</div>
  <div id="content">Content</div>
  <div id="footer">Footer</div>
  </div>

  表现如下:

CSS教程:十步学会用css建站
图5

  2.为了将五个部分区分开来,我们将这五个部分用不同的背景颜色标示出来,在css文件写入:
  #main-nav {
  background: red;
  height: 50px;
  }
  #header {
  background: blue;
  height: 150px;
  }
  #sidebar-a {
  background: darkgreen;
  }(责任编辑:大宝库)



------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接