优内建站网,专业建站,企业建站,免费建站,智能建站,个人建站!
主营企业建站,seo优化,手机网站,微信网站开发等业务!>> 繁体中文
用户名: 密 码: 验证码:    
企业建站,专业建站,模板建站,智能建站
 您现在的位置:首页 >> DIV+CSS视频 >> 详细内容>>        【字体:  】【颜色: 绿

CSS排版 - CSS/DIV布局专题讲解 - 第8课

在百度搜索关于“CSS排版 - CSS/DIV布局专题讲解 - 第8课”的内容

在谷歌搜索关于“CSS排版 - CSS/DIV布局专题讲解 - 第8课”的内容

买空间、服务器就上威客主机网(VK163.COM) 虚拟主机评测+IDC导航=威客主机之家 标志设计
[内容提要] 本节课时长15分22秒,下载文件17.2兆字节。下载的视频文件为FLV格式,推荐使用“RivaFlvPlayer”软件播放,点击这里下载。上一课中主要讲解了CSS对页面中各个元素的定位,本课在此基础上,从页面的整体排版出发,介绍CSS排版的观念和具体方法,包括CSS排版的...

作者: 优内科技  来源: 优内科技  驻站日期:2008/11/26 【 加入收藏 】 【 打印此页 】 【 关闭

本节课时长15分22秒,下载文件17.2兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载

上一课中主要讲解了CSS对页面中各个元素的定位,本课在此基础上,从页面的整体排版出发,介绍CSS排版的观念和具体方法,包括CSS排版的整体思路、两种具体的排版结构、电子相册的几种版式制作,以及与传统表格排版方法的比较。

1.CSS排版观念

CSS的排版是一种很新的排版理念,完全有别于传统的排版习惯。它将页面首先在整体上进行 div 标记的分块,然后对各个块进行CSS定位,最后再在各个块中添加相应的内容。通过CSS排版的页面,更新十分的容易,甚至是页面的拓扑结构,都可以通过修改CSS属性来重新定位。我们在这里主要介绍CSS排版的整体思路,为后续课程的进一步介绍打下基础。希望大家能够掌握以下几个方面的内容:

  • 将页面用div分块
  • 设计各块的位置
  • 用CSS定位

2.固定宽度且居中的版式

宽度固定而且居中的版式是网络中最常见的排版方式之一,我们在这里利用CSS排版的方式制作这种通用的结构,并采用两种方法分别予以实现。
首先像上一节描述的一样,将所有页面内容用一个的大 div 包裹起来,指定该 div 的id为container,这个id在整个页面中是唯一的。虽然大部分浏览器并不限制重复id的使用,但非常不建议同一个页面中出现重复id,因为重复id会使得javascript等脚本语言在寻找对象时发生混乱。

3.左中右版式

将页面分割为左中右三块也是网上常见的一种排版模式,我们在这里以此结构为例巩固CSS排版的方法,页面结构如图所示。

4.块的背景色问题

在前面提到的页面左中右的结构,虽然在整体上将页面进行了排版,但细节处理仍然有不足之处。如果给#left、#middle、#right都设置背景颜色就会发现,仅仅按照上例中的设置,#left、#right的背景都没有延伸到页面的底端,而是仅仅覆盖了内容的部分。

这种背景颜色的问题在CSS排版中经常会遇到,我们在这里给出通用的解决办法,首先按照上节中最后一段代码的方式将中间三块放入一个父块#mainbox中,然后同样把页面中所有的块放入到一个大的父块#container中。

5.排版实例:电子相册

当你出去旅游时拍的很多照片,希望放在网上与朋友分享时;当新闻工作者、摄影家拍了很多相片希望放到网上出售时,电子相册都必不可少。我们在这里通过CSS对电子相册的排版,并且分幻灯片、详细信息两种模式,进一步介绍CSS排版的方法。其中幻灯片模式的最终效果如左图所示,详细信息模式的最终效果如右图所示。

   

6.DIV排版与传统的表格方式排版的分析

事实上,现在仍存在大量的使用表格进行布局的页面,我们在书中和视频课程中,也会分析到二者各自的优点和缺点,这样大家就可以根据需要来选择使用那种技术更恰当了。

添加到QQ书签 百度收藏 订阅到抓虾 添加到鲜果  新浪ViVi  365Key网摘  天极网摘  我摘  和讯网摘  yahoo  收藏到收客网  Digbuzz我挖网  添加到饭否  挖客  添加到google  

   【回到顶部】 【返回文章列表】 编辑:优内科技
⊕ 上一篇:网页变幻 - CSS/DIV布局专题讲解 - 第9课
⊕ 下一篇:理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课
  相关新闻
返回首页 | 设为首页 | 添加收藏 | 关于我们 | 联系我们 | 企业文化 | 合作伙伴 | 诚聘英才 | 网站报价 | 企业资质 | 网站地图
邮箱登陆 E- mail:master@cck5.com 点击这里给我发消息 客服专员 QQ:310203268 点击这里给我发消息 技术咨询 QQ:22071287点击这里给我发消息 代理备案 QQ:529631515
丰富的网站建设经验,专业提供网站建设、网站制作、网页设计服务,专业设计,真诚服务,不满意不收费!
Copyright 2008 - 2025 cck5 Inc. All Rights Reserved 优内建站网络科技公司
本站部分资源来自网络,如有侵犯您的版权,请告之,我们将即刻删除!QQ:310203268
主要业务:网站建设企业建站专业建站智能建站SEO优化微信建站手机建站
本站ICP备案号:浙ICP备11019299号 中国电信增值ICP经营许可证
不良信息举报中心 江西网警 信息产业部门备案 企业法人营业执照
 
扫优内微信二维码
“码”上有惊喜