HTML5+CSS3网页设计基础教程教学课件7.pptx

HTML5+CSS3网页设计基础教程;;单元导读 CSS布局是在盒模型的基础上对整个网页进行布局，通常要将一张页面划分为多个小部分，每个小部分可以看作是一个相对独立的小个体，布局的方式有表格布局、浮动布局、相对定位、绝对定位等方式。;学习目标 掌握display显示属性的运用 掌握float属性控制布局的方法和规律 掌握元素的三种常见定位方式：相对定位布局、绝对 定位布局、固定定位布局。;思政目标 学习了页面布局就可以对整个页面进行精心合理的安排了，再结合之前学习过的各种元素、CSS样式以及盒模型，同学们终于可以设计和制作出完整而精美的页面了，功夫不负苦心人，学习是一步一步的积累，在编辑和调试内容很多的网页的过程中，势必会出现代码书写失误、效果出乎意料等意外情况，要让学生在苦练当中磨练自己的意志，善于“查缺补漏”，锻炼自己发现问题并解决问题的能力。;默认情况下，我们在网页中放置的多个元素是按照从上到下，从左到右的顺序显示在页面中的，类似于织毛衣一样，从上至下，从左至右，可以看作是一个“流”，这个流被称作标准文档流，此时的盒子元素，如果没有设置宽度和位置，宽度会占用父元素的100%，位置会从上至下依次排列，默认的标准文档流是无法满足人们在外观和功能上的需要的，常用的网页布局方式以表格布局和CSS布局为主，表格布局是最传统的布局方式，制作简单、易于理解，但是当页面内容很多，结构复杂时，其代码过于冗长，复杂，且不利于搜索引擎抓取信息，影响网站排名。;CSS布局是基于Web标准的网页设计方法，通过DIV+CSS设计方法布局页面，符合W3C标准，CSS富含丰富的样式，使页面更加灵活，对浏览者和浏览器更具亲和力，页面体积小，浏览速度快，编辑修改时更有效率，搜索引擎也更加友好，目前决大多数的中大型网站都采用了这种布局方式，CSS布局的主流是基于浮动的布局方法，有时也应用绝对定位和相对定位的方式，但CSS布局的设计方法稍显复杂，这一章我们将介绍与CSS布局相关的重要属性。;浮动布局是当前布局页面的一种常用方式，要了解浮动布局的设计，首先要明白元素在页面中的显示属性，在第二章中，我们已经认识到HTML标签有些是块元素（block）有些是行内元素（inline）。 块元素（block）：块元素独占一行，宽度（width）、高度（height）、内边距（padding）、外边距（margin）等都可以进行设置，宽度默认情况下占父元素的100%，如h1~h6、p、div、table、form、ul、ol、li、dl、dt、dd，都是常见的块元素。;行内元素（inline）：行内元素可以与其它元素显示在同一行内，其宽度、高度、padding、上下margin都不可以改变，边框、背景色、背景图片的设置通常受一定的限制或导致效果显示不正常，如img、a、span、label、input都属于行内元素。;而CSS样式中的display属性可以改变元素的显示方式，可以将元素由块元素转变为行内元素，或将行内元素转变为块元素,或将元素转变为行内块元素（可以显示在行内的块元素）。基本格式如下： display:inline; 转变为行内元素 display:block; 转变为块元素 display:inline-block; 转变为行内块元素 display:none;定义HTML元素不显示;任务1.display属性的运用——制作超级链接水平导航条。效果如图7-1：;!DOCTYPE html html lang=zh-CN head meta charset=UTF-8 titledisplay属性的运用/title style type=text/css li{display: inline-block; /*转变为行内块元素*/ width: 150px; background: #efe; font-size: 16px; text-align: center; padding:6px; margin:0px; border-left: 1px solid gray; } a{text-decoration: none;} a:link{color:blue;} a:visited{color:blue;} a:hover{color:red;} li:hover{background:#eef;} /style /head;body nav ul lia href=#首页/a !-- 后面不能有/li，否则会有空隙 -- lia href=#全部产品/a lia href=#热销产品/a lia