Div+CSS布局入门教程(第一 第二节)
2016-07-07 16:15 来源:www.chinab4c.com 作者:ecshop专家
网页制作中,有许多的术语,例如: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。 [接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: 无标题文档 这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。 下面,我们在标签对中写入DIV的基本结构,代码如下: <div id="container"><!--页面层容器--> <div id="Header"><!--页面头部--> </div> <div id="PageBody"><!--页面主体--> <div id="Sidebar"><!--侧边栏--> </div> <div id="MainBody"><!--主体内容--> </div> </div> <div id="Footer"><!--页面底部--> </div> </div> 为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下: /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99} /*页面主体*/ #PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /*页面底部*/ #Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF} 把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。 关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载): 1、请养成良好的注释习惯,这是非常重要的; 2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了; 3、讲解一些常用的CSS代码的含义: font:12px Tahoma; 这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式; margin:0px; 也使用了缩写,完整的应该是: margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px 或 margin:0px 0px 0px 0px 顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写); 以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距, 另外还有以下几种写法: margin:0px auto; 说明上下边距为0px,左右为自动调整; 我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的, 只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。 text-align:center 文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。 background:#FFF 设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。 background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式: background:#ccc url('bg.gif') top left no-repeat; 表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片, top left 表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。 top/right/left/bottom/center 用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用 background:url('bg.gif') 20px 100px; 表示X座标为20像素,Y座标为100像素的精确定位; repeat/no-repeat/repeat-x/repeat-y 分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。 height / width / color 分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。 4、如何使页面居中? 大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢? 是因为我们在#container中使用了以下属性: margin:0 auto; 按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。 如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。 通过margin:auto我们就可以轻易地使层自动居中了。 5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册 |
-
04.gif (41.14 KB)
回答:
多一些这样的帖子很好,顶 不好意思,借用一下一楼,此教程地址: http://www.blueidea.com/tech/site/2006/3574.asp 大家可以多去蓝色理想看看 |
是自己写的吗,,,很好啊 |
好得很。。。 |
太好了! |
都是在DZ官方搬过来的,楼主,,,,敢说你写的????www.pet265.com |
感谢楼主分享,收藏了 |
收藏了。希望楼主继续发布这样的好帖子。推荐置顶 |
原帖由 bababa888 于 2007-11-12 10:41 发表 第一 你哪只眼睛看到 文章标注是我原创的 第二既然你知道是从DZ那搬来的 想必你看过 既然看过 那还不拿来EC共享下 可想而知你这人有多小气 还有脸说 就是有你这种自私的人才有那么多菜鸟 |
谢谢共享了!我正好需要这方面的知识。希望能够再多一些就好了! |
原帖由 sonyr 于 2007-11-12 18:08 发表 说地太好了 谢谢 |
bababa888 这家伙 就这样成功打击了我们伟大的楼主 |
非常好的入门教程,我就是看着这些教程进步的 |
好东西,收藏了 |
最近更新
常用插件
- ecshop注册审核插件
ecshop插件介绍:ecshop会员注册审核插件,主要是在前台提供给注册的时候...
- ecshop的oss插件
ecshop的oss插件免费共享了,oss,ecshoposs...
- ecshop订单聚合插件
ecshop订单聚合插件,主要是为了方便ecshop中订单产品到货情况的分析和...
- ecshop没登陆情况下订单查
ecshop没登陆情况下订单查询插件,主要是针对ecshop在没有登陆的情况下...
- ecshop虚拟发货插件
ecshop虚拟发货插件介绍: ecshop虚拟发货插件,主要为了通过后台手动录...
ecshop热门问答
ecshop热门资料
uchomeblog
ecshopscript
ecshopMemcache
qq登录ecshop
ecshop全部品牌
ecshop大厦
ecshop个人
ecshopMYAQL
ecshopgoodbaby
ecshop404错误页面
ecshop国庆
ecshopattempt
ecshopDICUZ
ecshop页码
ecshop模板修改
rsync备份ecshop
ecmall分类购买
ecshop即时到账接口
ecshop订单状态显示一步操作
ecshop清楚
ecshop自定义的轮播广告位
ecshop操作后台
ecshopbigsalong
ecshop商品单位
ecshop腾讯
ecshop解方法
ecshop系统升级
ecshop登陆框
ecshop有家商城
ecshop文章编辑