css教程–十步学会用css建站(全)[翻译]
作者：Jorux 来源：Jorux记事本 发布时间：2008-06-05 18:35:00
标签：教程,布局,div,框架,样式,设计,浏览器
本篇已得到原作者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
0
投稿猜你喜欢
- Mysql数据库备份和还原常用的命令是进行Mysql数据库备份和还原的关键，没有命令，什么都无从做起，更谈不上什么备份还原，只有给系统这个命
- 我们也可以来做一个，但这个“定时器”的工作时间范围应控制在1个小时至100 毫秒之间： <％sub StartTi
- 这种问题估计遇到的人不在少数，至少我遇到不下三次了，但每次解决后都没有形成深刻的印象，每次遇到还需要思考很久才能解决。这种情况常见的是这样的
- 在安装了IIS以后，缺省的服务器端脚本语言被设置成VBScript。许多Web 开发团队在他们的开发环境中保持了这些缺省设置，这是不幸的，因
- Introduction简介So what is POSH? No, it's not just some new clothing
- It's well-known.Microsoft SQL Server 7.0增加了一个语句top，可以限制返回的记录数。但是在使
- 4. 选择最有效率的表名顺序(只在基于规则的优化器中有效)ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,因此FROM子句中
在 Web 编辑器领域，CKEditor – 七年的专注，赢取的是王者风范。TinyMCE – 五年前的小家碧玉，如今已成长为大家闺秀。Go- 前几天因为一个例外，数据库在没有做备份的情况下，直接删除了表记录。事后，又需要查询到删除的记录的内容。因此，在网上软件SS了半天，发现Log
- 我是这样来做DIV布局代码的．不知道说的清楚不清楚，凑和看吧我把class分为２种，布局class，风格class，布局class是骨架，风
- 很多时候我们写的程序，会花上一分钟甚至几分钟时间。为了使软件使用者能够耐心的等待程序的执行，我们经常会希望有一个进度条来表示程序执行的状态。
- 其实这里的静态页面并不是真正意义上的静态，但可以达到了静态页面的解析效率，还未经项目测试，拿来分享。代码如下:<％ Cons
- 作为WIMP(Window/Icon/Menu/Pointing Device)界面设计的关键部分，图标在人机交互设计中无所不在。随着人们对
- 如何用javascript来判定选择单选的radio哪个被选择,多选的checkbox有那几个被选中? <!DOCTYPE
- 1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完
- 1.尽量不要对列名进行函数处理。而是针对后面的值进行处理例如where col1 = -5的效率比where -col1=5的效率要高因为后
- Server对象提供对服务器上访问的方法和属性.大多数方法和属性是作为实用程序的功能提供的。语法:Server.property|metho
- 由于工作对人的眼球和精神都会带来一定的疲劳，所以在界面设计中，希望用户能够准确的关注重要的信息，而不因为用户的长期使用而流失信息。最近在看《
- 目前，各大搜索引擎如google、百度、雅虎已经对动态页面诸如asp，php有着不错的支持了，只要动态页面后面的参数不要太长，如控制在3个参
- 网页制作中需要把握好很多原则和细节，今天我们来谈谈网页设计中的平衡、对比、连贯和留白。一、平衡如果你的页面是平衡的，当用户浏览这个页面的时候
