第13章 CSS布局.ppt

第13章 CSS布局 学习目标 掌握CSS的布局方法，能够应用CSS的布局方法完成网页的整体布局。 理解定位的概念 掌握常用定位方法 表格布局和CSS布局是网页设计中的两种常用的布局方法，它们代表了两种不同的思路和方法。表格布局是传统的网页设计方法，CSS布局是基于Web标准的网页设计方法，经常根据其实现方法把这种网页设计思想和方法称为DIV+CSS。 CSS布局的主流方法是基于浮动的布局方法，还有绝对定位和相对定位的布局方法。 13.1 display显示 13.1 display显示 HTML元素主要分为两种：块元素（block）、内嵌元素（inline）。 块元素总是在新行上开始；元素的宽度、高度、padding、margin等都可以设置，缺省宽度是容器的100%。 常见有divph1liuldddt等 内嵌元素可以和其他元素在同一行上，宽度、高度、padding、margin等不可以改变或有一定的限制。 常见有spanaimgstrongem等 通过display：inline或display：block可以改变HTML的显示特性。 13.1 display显示 13.1 display显示 13.2 float浮动 CSS的float属性，作用就是改变块元素（block）对象的默认显示方式。 使用浮动的时候经常会使用一个容器把各个浮动的盒子组织在一起，使一个盒子包含多个盒子，达到更好的布局效果。 浮动（float）的取值有左对齐、右对齐、无。左对齐使浮动对象靠近其容器的左边，可以有多个对象左浮动，当一个浮动对象的宽度大于容器的剩余宽度的时候，它会自动另起一行。 13.2 float浮动 DW浮动设置 13.2 float浮动 13.2 float浮动 13.2 float浮动 margin：0 auto作用？ 两列或多列的布局，需要使用容器。 13.2 float浮动 13.2 float浮动 应用了浮动的盒子要另起一行时，需要clear属性，清楚浮动。clear：both； DIV标签嵌套时，代码视图更方便。 布局时要考虑不同浏览器的显示效果 正确计算框模型的高度和宽度，要区分框模型的宽度和width属性。 盒模型的宽度？ 13.2 float浮动 13.2 float浮动 position定位 利用position属性来实现,可把一个元素放置到一个静态的、绝对的、或相对的位置中。 position: static：默认值，无特殊定位。 absolute：绝对定位，根据页面位置重新定位。 relative：相对定位。 13.2 float浮动 13.3 绝对定位 绝对定位，position：absolute，使用top上、right右、bottom下、left左进行定位，默认的坐标是相对于整个网页，如果其父容器定义了position：relative，则相应的坐标就是相对于父容器。 绝对定位受客户显示器分辨率的影响比较大；不适合自适应宽度或高度的内容；整个页面的布局紧密相连，修改一个，其他布局元素可能都需要修改。 思考： 已知top为400*100，left为200*300，right为200*300，他们如何进行绝对定位？ position：absolute的HTML元素即为块元素block，可以设置宽度、高度、背景图片和padding。 绝对定位的父元素一定要设置position：relative。 定位上下左右，选择合适的。 13.4 相对定位 相对定位，position：relative，需要确定top上、right右、bottom下、left左的值确定位置，坐标原点为其父元素，而不像position：absolute的默认原点都是body。 如果只设置position：relative，而不设置上下左右，则该HTML元素跟没有设置relative是一样的，只是会对该元素中的绝对定位子元素有影响。 作业： 课后习题P172 第一题 * * li { display:inline; } style type=text/css a, li { font-size: 16px; height: 40px; width: 200px; border: 1px solid #006; text-align: center; background-color: #FF0; padding: 15px; margin: 20px;} /style/head body a href=#第1个超链接/a a href=#第2个超链接/a ul li列表项1/li li列表项2/li li列表项3/li /ul /body 思考： 如果在代码中加入display：inline什么效果？