DIV CSS网页布局实例
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
DIV CSS网页布局实例:十步学会用CSS建站
更新日期:2007-06-20 20:55 出处:jorux的网站作者:jorux 收藏本文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模板。代码如下:
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
将其保存为index.html,并创建文件夹css,images,网站结构如下:
2.创建网站的大框,即建立一个宽760px的盒子,它将包含网站的所有元素。在html文件的
和之间写入Hello world.
Hello world.
创建css文件,命名为master.css,保存在/css/文件夹下。写入: