布局篇(1)—If you love css …（2）
作者：Jorux 来源：Jorux博客 发布时间：2008-04-16 14:14:00
标签：布局,photoshop,网页
这样我们就完成了第一次切割，并且把一切涉及布局的背景图片切了下来。接着就是如何用css布局了，我们的目标是实现以下效果图(Fig.07)：
那么现在就开始编写html代码。既然我们有了一清晰的布局效果图，编写html代码应该是很简单的一件事情。但是越是简单的事，人们忽略的东西就越多。以下Jorux的观点请一定仔细考量：
***对于DIV的使用，请一定从大到小，把那些能在一起的元素划分到一个DIV，然后再在此DIV中继续划分小DIV。
所以为实现(Fig.07)的效果图，需要做以下几步：
1. 我们首先把header，content，sidebar，footer归为一个DIV，ID=“AllWrap”；用其实现向左浮动；
2. 接着把header作为一个DIV，ID=“Header”；
3. 把content和sidebar划分在一个DIV，ID=“MidWrap”；然后在其内继续划分为两个DIV，ID分别为Content和Sidebar；
4. 最后把footer作为一个DIV，ID=“Footer”；
最终得到Html代码为：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>My layout</TITLE>
</HEAD>
<BODY>
<div id=”AllWrap”>
<div id=”Header”>Header</div>
<div id=”MidWrap”>
<div id=”Content”>Content</div>
<div id=”Sidebar”>Sidebar</div>
</div>
<div id=”Footer”>Footer</div>
</div>
</BODY>
</HTML>
给读者留一个问题，请有能力的朋友在留言中给出实现效果图样式的css代码。有如下要求：
1. 向左浮动；
2. AllWrap宽为760px；Content宽为560px，高400px；Sidebar宽为200px，高400px；Footer高为80px，宽760px；
3. 在800×600，1024×768，或是宽屏显示器都能正常显示；
4. 在IE6/7, Opera, Firefox均能显示正常；
0
投稿猜你喜欢
《色彩解答》系列之一 色彩层次《色彩解答》系列之二 色彩比例我们知道在设计中有很多对比，大小的对比，形状的对比，长短的对比，多少的对比，这些- 在Microsoft SQL Server 2000中,用于数据存储的实用工具是数据库。数据库的物理表现是操作系统文件，即在物理上，一个数据
- 在SQL SERVER中，你可能需要获得当前日期和计算一些其他的日期，例如，你的程序可能需要判断一个月的第一天或者最后一天。你们大部分人大概
- 使用数据库的过程中，由于断电或其他原因,有可能导致数据库出现一些小错误，比如检索某些表特别慢,查询不到符合条件的数据等。出现这些情况的原因,
- session请求过程当第一次访问网站时，Seesion_start()函数就会创建一个唯一的Session ID，并自动通过HTTP的响应
- SQL Server数据库备份有两种方式，一种是使用BACKUP DATABASE将数据库文件备份出去，另外一种就是直接拷贝数据库文件mdf
- 显示一个字符串的前几个字符，asp中我们一般使用left(str,n)来获取。left有个不足就是处理汉字和英文字符是一样的，没有区分开，这
- Oracle中表的外键是保证系统参照完整性的手段，而参照完整性是指分布在两个表中的列所满足的具有主从性质的约束关系。外键涉及到两个表，其中一
- 1. 确认已经安装了NT/2000和SQL Server的最新补丁程序，不用说大家应该已经安装好了，但是我觉得最好还是在这里提醒一
- 使用SQL SERVER的[导入]功能,便可将access数据转换,但要注意原来的'自增字段'需要修改,将相应字段标识修改为
- 代码如下:<％ function GetBot() '查询蜘蛛 dim s_
- 看到这个需求的时候就在暗爽，又可以搞定一个知识点了。哈哈，一天的奋斗之后，果然有所收获，而且经过怿飞的指点，在跨域问题解决上还有所突破(不通
- 用过软件的朋友都知道，进度条是一个优秀软件的重要组成部分。它的存在能够使用户及时掌握程序的运行进度，确认应用程序正常工作。可是ASP中似乎没
- 一、Sql Server中的日期与时间函数 1. 当前系统日期、时间 select getdate() 2. dateadd 在向指定日期加
- 早上一开Google Reader，发现已经全部被Silverlight 3的消息占领了，基本上都来自于Silverlight
- 代码如下:--创建测试表 DECLARE @Users TABLE ( ID INT IDENTITY(1,1), UserIn
- Windows中升级MySQL应采取的步骤：1. 进行升级前你应先备份当前的MySQL安装。2. 下载最新Windows版MySQL。3.
- 备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如”用户名”+输入框, 这里的”用户名”
- Adodb.Stream是ADO的Stream对象,提供存取二进制数据或者文本流,从而实现对流的读、写和管理等操作. 组件：&qu
- MySQL GUI Tools是一套图形化桌面应用工具套装，可以用来管理MySQL服务器。该套装工具包含三个工具：MySQL Query B
