CSS-布局篇(浮动)入门.ppt_第1页
CSS-布局篇(浮动)入门.ppt_第2页
CSS-布局篇(浮动)入门.ppt_第3页
CSS-布局篇(浮动)入门.ppt_第4页
CSS-布局篇(浮动)入门.ppt_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、网页设计进阶技能切片与排版,温州职业中专 冯晨笑,布局的方法,在表格布局时代，所有的排版方式和布局方式，全都依赖于TABLE/TR/TD这三个表格标签来进行。俗称，打格子。 一个网页设计师格子打的好坏、快慢，能很直接的就反映出他的水平。 老一辈的网页开发人员，全都会用表格标签快速的开发一张网页。可以说，如果没有表格布局法的诞生，也就不会有互联网今天的繁荣因为你可以什么都不会，也能在短短几十分钟之内就完成一张“精美的网页”。 不过，表格布局法是一种邪门歪道的武功。,导航有什么用？,因为表格布局法太多看重了眼前的利益，而无视了将来可能会产生的更麻烦的问题。这无异于杀鸡取卵。 正统的布局法就是CSS

2、布局法，又称DIV+CSS。当然，这是一种错误的称呼。正确的称呼就只是CSS布局法，或者是(X)HTML+CSS。 为什么是错的？因为这种布局方法已经不再局限于使用某一类HTML标签了，而是什么样的网页结构，就该采用什么样的HTML标签。段落就是P，无序列表就是UL，三级标题就是H3。,导航的样子,这种新式的布局方法主要的布局手段是依靠CSS。通过CSS强大的外观控制能力，来达到布局、排版的效果。由于CSS可以精确到控制网页上的每一像素，因此，用CSS布局法做出来的网页，效果可以是无与伦比的，远胜于表格布局法。 当然，CSS布局法不是万能的，它最大的弊端就在于，开发周期的过长（单从一个网页来讲

3、，一两个小时是基本完不成一张的。不过就网站整体来看，CSS布局法会比表格布局法快），以及浏览器兼容性。,导航的本质是什么？,CSS布局主要通过FLOAT和POSITION这两个属性来控制。当然，正规的做法就只有POSITION一种，但不得不承认FLOAT也是可以用来做布局的。而且比POSITION还要便捷。,完成导航,FLOAT属性，有三个值分别是left/right/none。也就是左浮动（元素向右边靠），右浮动（元素向左边靠），无浮动（保持原状）。 借助这三个值，CSS就可以很好来进行网页的布局和排版了。,完成导航,例如这种常见的三栏布局，就可以很快速的借助FLOAT来完成。,完成导航,因为这时候只需要先设置好中间三个块的高和宽后，再将其进行左浮动，或是右浮动即可。 例如，代码就可以如下编写： Div1,div2,div3 height:100px; float:left; Div1 width:200px; Div2width:500px; Div3width:200px;,完成导航,当然，之所以说FLOAT用来做布局会有问题，就是因为如果使用浮动之后不清除浮动的话，它后面的元素也会跟着浮动。 而清除浮动的属性，就是clear。它有四个值：left/right/both/none。 Left:就是清除左浮动。Rigth同理。None，就是不清除，保持原来的状

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论