布局篇(1)—If you love css …（2）
作者：Jorux 来源：Jorux博客 时间：2008-04-16 14:14:00
这样我们就完成了第一次切割，并且把一切涉及布局的背景图片切了下来。接着就是如何用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均能显示正常；
标签：布局,photoshop,网页
0
投稿猜你喜欢
C# 以MDF文件链接数据库的示例代码
2024-01-21 09:38:18
Ubuntu安装Mysql启用远程连接的详细图文教程
2024-01-25 16:57:31
python 设置文件编码格式的实现方法
2021-06-22 14:49:52
dpn网络的pytorch实现方式
2023-11-20 10:37:19
pygame实现贪吃蛇游戏
2021-09-23 00:29:21
pandas || df.dropna() 缺失值删除操作
2023-07-10 06:51:06
Yahoo!网站性能最佳体验的34条黄金守则——图片、Coockie与移动应用
2008-05-29 13:44:00
详解Python判定IP地址合法性的三种方法
2021-12-02 14:35:10
js实现简单的放大镜效果
2024-04-30 08:52:03
SQL Server控制语句的基本应用
2024-01-24 12:52:28
python3使用pyqt5制作一个超简单浏览器的实例
2023-04-12 19:44:51
Python进制转换用法详解
2021-08-20 15:18:40
Python logging设置和logger解析
2021-07-15 22:12:52
python实现自动登录人人网并访问最近来访者实例
2022-11-30 17:09:15
chr(9)、chr(10)、chr(13)、chr(32)与特殊空格
2009-07-03 15:26:00
asp中日期时间函数介绍
2013-06-01 20:01:03
Asp DatePart 函数的语法详解(用于计算日期并返回指定的时间间隔)
2012-12-04 20:04:29
python清理子进程机制剖析
2021-08-10 22:05:19
python利用tkinter实现屏保
2022-01-26 05:39:51
使用django的objects.filter()方法匹配多个关键字的方法
2022-04-08 06:11:20