Div+CSS布局入门教程
作者:aultoale 来源:蓝色理想 发布时间:2007-09-13 12:52:00
标签:div,css,布局
内容摘要:在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。
下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:
1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;
2、内容部分又可分为侧边栏、主体内容;
3、底部,包括一些版权信息。
有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:
根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。
DIV结构如下:
│body {} /*这是一个HTML元素,具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。
0
投稿
猜你喜欢
- 日期和时间类型MySQL有多个表示各种日期和时间值的数据类型, 比如YEAR和DATE. MySQL存储时间的最精确粒度是秒。 然而, 能做
- HTML 5 和 XHTML 2规范草稿公布以来,一直存在很大的争议。HTML 5是由包括Google、Mirosoft、Mozilla、O
- 【译者的话】 作为一家非盈利性的防止青少年 * 的机构, Five Alive 希望拥有一个独特的标志来配合机构的宣传。他们决定在网站上通过竞
- 本文回答了如下问题:“MySQL服务器有多稳定?”,以及“在本项目中我能依靠My
- replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(st
- 想必大家都知道MSSQL中SA权限是什么,可以说是至高无上。今天我就它的危害再谈点儿,我所讲的是配合NBSI上传功能得到WebShell。在
- 本文介绍了数据库索引,及其优、缺点。针对MySQL索引的特点、应用进行了详细的描述。分析了如何避免MySQL无法使用,如何使用EXPLAIN
- 什么是事件代理(Event Delegation)?如果不太了解的朋友,可详细阅读:《Event delegation in JavaScr
- 服务器重新启动的情况当mysqld启动时,所有的授权表内容被读进存储器并且从那时开始生效。被服务器立即应用的情况用GRANT、REVOKE或
- 虽然说表单验证在客户端使用javascript来验证已经可以了,但是我们为了防止访客绕过客户端验证也为了数据安全最好还是在服务器端加上必要的
- 介绍两个关键的CSS <style media="print">  
- 如何在线更改Windows2000管理者密码?changepwd.htm <html><head><title
- 代码如下:--代码一DECLARE @cc INT SELECT NewsId,ROW_NUMBER() OVER(ORDER
- 最近使用工作需要,使用了Navicat8.2版本,发现备份数据都是默认存储在C盘,这个就比较郁闷了。重做系统忘记转移了。那不就死定了?找了一
- 网络上有很多个性化的404页面,但是404页面不仅仅是个性化展示,404页面本来目的是:告诉浏览者其所请求的页面不存在或链接错误,同时引导用
- 上次我重新修改了UBB的转换后,又很多朋友反映日文显示的时候出错了。我在本地测试了一下,结果出现了 Invalid procedure ca
- 将纸的材质融为设计元素现已成为当今网页设计最热门最流行的设计趋势之一。网页设计师可以使用纸屑、硬纸板纹理材质、笔记本和记事薄构成有趣而复杂的
- 在MySQL数据库中导出整个数据库:1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldu
- 最近在研究网页的切片算法,很可能很多人不知道什么是切片算法,其实这是一种面向搜索引擎的网页分块、切片的原理,目前随着工作的深入,逐渐碰到了各
- 读取binlog,方法有二:1.使用mysqlbinlog,详细用法,请参考MySQL手册2.使用MySQL的自带工具,SHOW BINLO