使用CSS样式完成网页布局.ppt
《使用CSS样式完成网页布局.ppt》由会员分享,可在线阅读,更多相关《使用CSS样式完成网页布局.ppt(18页珍藏版)》请在三一办公上搜索。
1、第十一章,HTML与CSS前台页面设计,使用CSS样式完成网页布局,第十一章 使用CSS样式完成网页布局,HTML与CSS前台页面设计,本章要点网页居中的实现方式基于FLOAT的网页布局的实现方式图文混排复杂布局的的实现方式,第十一章 使用CSS样式完成网页布局,HTML与CSS前台页面设计,目录:11.1 CSS网页布局介绍11.2 网页居中11.3 基于FLOAT的网页布局11.4 复杂布局11.5 综合实例,1.CSS网页布局的意义 用CSS进行网页布局使网站的信息更丰富、网页表现更美观,意义体现在如下方面:(1)使页面载入得更快(2)修改设计时更有效率(3)保持一致性(4)对浏览者和浏
2、览器更具亲和力,11.1 CSS网页布局介绍,2.CSS盒模型 W3C组织建议把所有网页上的对象都放在一个盒(box)中,可以通过创建定义来控制这个盒的属性。盒模型主要定义四个区域:内容(content)、填充(padding)、边界(border)和边距(margin)。margin,padding,content,border之间的层次相互影响。,11.1 CSS网页布局介绍,3.CSS网页布局的基本思路 用CSS进行网页布局时,主要考虑的是页面内容的语义和结构,因为一个用CSS控制的网页,在做好网页后,还可以轻松的调整网页风格。用CSS进行布局的一个目的是让代码易读,区块分明,强化代码重
3、用,所以结构很重要。,11.1 CSS网页布局介绍,1.自动空白边居中设计 以固定宽度的一列布局代码为例,为其增加居中的CSS样式,主要是要对margin属性进行设置:margin:0px auto;margin属性用于控制对象的上、右、下、左四个方向的外边距,当margin使用两个参数时,第一个参数表示上下边距,第二个参数表示左右边距。,11.2 网页居中,2.定位居中设计 使用自动空白边进行居中的方法是最常用的,但也可以使用定位和负值空白边来实现居中对齐的效果。首先定义容器的宽度。然后将容器的position属性设置为absolute,将left属性设置为50%。这会把容器的左边缘定位在页
4、面的中间,但需要的是让容器居中。所以需要对容器的左边应用一个负值的空白边,宽度等于容器宽度的一半,这会把容器向左边移动它的宽度的一半,从而让它在页面上居中。,11.2 网页居中,基于float的网页布局是设定希望定位的元素的宽度,然后将它们向左或向右浮动。因为浮动的元素不再占据文档流中的空间,就不再对包围它们的边框产生影响,因此需要对布局中各个点上的浮动元素进行清理。1.两列布局 要想使用float创建两列布局,首先需要有一个基本的框架。在下面的示例中,HTML页面由头部区域、主页面区域和的页脚组成。其中主页面区域分成左右两列,左列用作导航页面,右列用作显示页面。主页面区域就是用float实现
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 CSS 样式 完成 网页 布局
链接地址:https://www.31ppt.com/p-5922756.html