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

日期：2008年4月22日作者：查看:[大字体中字体小字体]

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" />
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] 下一页
DIV CSS网页布局实例：十步学会用CSS建站相关文章：
·McAfee发布2008年十大安全威胁预测
·CSS实例布局:上中下三行中间自适应
·微软会发布Win Server 2008 RC2？
·Windows Server 2008 RC1发布、下载
·虚拟化版Windows Server 2008发布
·Websense发布2008年十大安全威胁预测
·基本的页面设计元素布局比例
·Avant浏览器11.6正式版发布
·卡巴斯基发布8.0版最新特性(附下载)
·Windows Live Messenger最新WAP版发布
DIV CSS网页布局实例：十步学会用CSS建站相关软件
·魂之利刃4公布宣传片
·《异魂传承》07E3展会上公布的高清视频
·《超级马里奥银河》新视频及画面公布
·《吉他英雄III》最新精彩游戏视频公布
·PSP2.71官方发布的美版恢复包
·大瀑布
·《水景纸牌之美洲瀑布》休闲试玩
·油画欣赏-布格罗·威廉姆作品集
·《敌占区:雷神战争》发布宣传片
·《耶稣裹尸布之谜》

上一篇:合理应用正确理解CSS的float浮动属性

下一篇:CSS网页技巧：实现超级链接文字上划线和下划线

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

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

精品推荐

热点TOP10

特别推荐