DIV CSS网页布局实例:十步学会用CSS建站

2008-02-23 08:43:53来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

Update:本篇已得到原作者Steve Dennis的翻译准予,在此Jorux表示感谢!

本教程主要参考Creating a CSS Layout from scratch,由Jorux翻译,以意译为主,其间加入了不少Jorux的个人观点,省略了一些多余的说明,请读者明鉴。

目录:

  • 第一步:规划网站,本教程将以图示为例构建网站;
  • 第二步:创建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

    5.Footer 网站底栏,包含版权信息等。 Width: 760px Height: 66px

    第二步:创建html模板及文件目录等 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>
    <!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,网站结构如下:

    2.创建网站的大框,即建立一个宽760px的盒子,它将包含网站的所有元素。在html文件的<body>和</body>之间写入

    <div id="page-container">
    Hello world.
    </div>
    <div id="page-container">
    Hello world.
    </div>

    创建css文件,命名为master.css,保存在/css/文件夹下。写入:

    #page-container {
    width: 760px;
    background: red;
    }
    #page-container {
    width: 760px;
    background: red;
    }

    控制html的id为page-container的盒子的宽为760px,背景为红色。表现如下:

    现在为了让盒子居中,写入margin: auto;,使css文件为:

    #page-container {
    width: 760px;
    margin: auto;
    background: red;
    }
    #page-container {
    width: 760px;
    margin: auto;
    background: red;
    }

    现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙,就需要在css文件中写入:

    html, body {
    margin: 0;
    padding: 0;
    }
    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>

    <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>

    表现如下:

    标签:

    版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
    特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

    上一篇:DIV CSS标准制作网页学习之学习DTD的元素

    下一篇:不规则文字排版的CSS样式的定义参考方法