HTML5+CSS3 Web前端设计基础教程 第3版 课件 第5、6章 浮动、定位与列表；HTML 5增强型表单与简易表格

第5章本章继续向读者介绍，在实际工作中使用频率非常的三类知识，即浮动、定位与列表。通过本章的学习，读者基本能够达到创建并控制较为复杂的网页版面。浮动、定位与列表5.1浮动与清除浮动5.1.1浮动（float）1．向左浮动或向右浮动

“float:left;”即是向左浮动，“float:right;”即是向右浮动。当某个元素具有向左（右）浮动的属性时，该元素就会生成一个块级框，然后脱离当前文档流向左（右）移动，直到碰到左（右）边缘。5.1浮动与清除浮动5.1浮动与清除浮动此处由于div是块级元素，在初始状态下，多个div容器会纵向排列，并且将父级容器wrap的高度撑开box-1脱离文本流后，向右移动，碰到父级元素的边框，便停了下来。由于box-1移动，box-2便占据box-1的位置由于“box-2”不再处于文档流中，所以它不占据空间，实际上覆盖了“box-3”，致使“box-3”从视图中消失子元素全部脱离文档流进行浮动，致使父级容器wrap没有内容将其撑开

图5-1各容器初始状态

图5-2“box-1”浮动效果图5-3“box-2”浮动效果

图5-4三个容器均向左浮动效果5.1浮动与清除浮动2．浮动时由于容器空间不够造成的错位

图5-5父级容器宽度不够的情况

图5-6浮动的容器相互拥挤的情况5.1浮动与清除浮动5.1.2清除浮动的三种方法1．方法一：额外增加应用“clear:both;”规则的空容器在浮动元素后额外增加一个空容器，比如“<divclass="clear"></div>”，然后在CSS中赋予.clear{clear:both;}属性即可清理浮动。2．方法二：使用“overflow:hidden;”规则清除浮动向浮动容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮动，在添加overflow属性后，浮动的容器又回到了容器层，把容器高度撑起，达到了清理浮动的效果。3．方法三：使用:after伪元素清除浮动:after伪元素能够在被选元素的内容后面插入另一内容。在实际执行时，首先给浮动的容器添加一个名为“clearfix”的Class，然后给这个Class添加一个:after伪元素实现在容器末尾添加一个看不见的容器以清理浮动。5.2CSS定位CSS有关定位的属性包括position、z-index（层叠顺序）、top、left、right、bottom和clip。表5-1position属性的取值及其含义取

值含

义staticposition属性的默认值，无特殊定位fixed固定，元素框的表现类似于将position设置为absolute，元素被固定在屏幕的某个位置，不随滚动条滚动relative相对，元素虽然偏移某个距离，但仍然占据原来的空间absolute绝对，元素在文档中的位置会被删除，定位后元素生成一个块级元素5.2.1静态定位和固定定位1．静态定位（static）2．固定定位（fixed）图5-10鼠标为滚动时左侧导航固定

图5-11页面滚动后左侧导航仍然固定5.2CSS定位5.2.2相对和绝对定位1.相对定位（relative）图5-12没有添加相对定位样式的初始预览效果

图5-13“content”容器添加相对定位样式的预览效果5.2CSS定位2．绝对定位（absolute）3．层叠（z-index）

5.2CSS定位图5-14“box-1”容器添加绝对定位样式的预览效果

图5-15“box-1”容器添加z-index样式的预览效果5.2.3相对于某一容器的绝对定位5.2CSS定位本例中通过设置父级容器相对定位，子级容器绝对定位，实现了“特卖图标放置在左上角的效果”图5-17“相对于某一容器的绝对定位”预览效果5.3.1有关列表的CSS样式5.3列表

在CSS样式中，主要是通过list-style-image属性、list-style-position属性和list-style-type属性这3个属性改变列表修饰符的类型。表5-2有关列表的CSS样式属性属

性说

明list-style复合属性，用于把所有用于列表的属性设置于一个声明中。list-style-image将图象设置为列表项标志。list-style-position设置列表项标记如何根据文本排列。list-style-type设置列表项标志的类型。marker-offset设置标记容器和主容器之间水平补白。5.3.2仿“天猫”首页的纵向导航5.3列表导航的标题个性化的图标由无序列表盛放的导航内容图5-19仿“天猫”首页的纵向导航预览效果5.3.3仿“凤凰网”首页的横向导航5.3列表图5-25仿“凤凰网”首页的横向导航5.4仿“天猫电器城（手机馆）”的图文信息列表

图5-29包含图文信息列表的板块

图5-30粗略的板块布局示意图5.4仿“天猫电器城（手机馆）”的图文信息列表图5-31“floor-hd”容器示意图5.4仿“天猫电器城（手机馆）”的图文信息列表图5-32“floor-row1”容器示意图5.4仿“天猫电器城（手机馆）”的图文信息列表块状化图像绝对定位图5-33“floor-row2”容器示意图谢谢观看！第6章本章将从两方面向读者介绍表单和表格的基本知识，并从实际应用出发，介绍CSS样式中与其相关的属性和常见美化效果。HTML5增强型表单与简易表格6.1表单的创建与编辑6.1.1表单的基本知识1．什么是表单表单的应用范围非常广泛，不仅用于收集信息和反馈意见，还用于资料检索、网上购物等多种交互式场景，图6-1所示的就是典型的表单应用。图6-1表单的典型应用6.1表单的创建与编辑2．什么是表单域表6-1表单的参数名称及功能属

性名

称功能解释id表单标识名称表单的名称，该名称可以使用脚本语言引用或控制该表单。name表单名称表单的名称，与ID具有相同的意思。action动作该属性用于定义将表单数据发送到哪个地方，其值采用URL的方式，即处理表单数据的页面或脚本。method方法默认值：浏览器一般默认方法为GET。GET：把表单值添加给URL，并向服务器发送GET请求。因为URL被限定在8192个字符内，所以内容过多的表单不要使用GET方法。POST：在消息正文中发送表单值，并向服务器发送POST请求。6.1表单的创建与编辑ectype编码类型设置发送表单到服务器的媒体类型，它旨在发送方法为POST时才有效，其默认值为application/x-www-form-urlencode；如果创建的是文件上传域，则应该选择multipart/form‑data。target目标_blank：指的是在新窗口中打开目标文档。_parent：指的是在显示当前文档窗口的父窗口中打开目标文档。_self：指的是在当前窗口打开目标文档。_top：指的是在当前窗口的窗体内打开目标文档。6.1表单的创建与编辑6.1.2常见的表单对象1．文本字段（type="text"）图6-3添加文本字段对象6.1表单的创建与编辑2．复选框（type="checkbox"）与复选框组3．单选按钮（type="radio"）与单选按钮组

图6-6“单选按钮组”对话框

图6-7没有美化的“单选按钮组”6.1表单的创建与编辑4．提交按钮（type="submit"）图6-8添加“提交”按钮表单对象6.1表单的创建与编辑5．日期控件（type="date"）6．滑块控件（type="range"）7．颜色选择器控件（type="color"）图6-9日期控件

图6-10滑块控件

图6-11颜色选择器控件6.1表单的创建与编辑8．下拉列表或下拉菜单（select标签）图6-13菜单对象预览效果图6-14列表对象预览效果6.1表单的创建与编辑9．跳转菜单图6-16“插入跳转菜单”对话框10．表单的自动验证图6-17无输入内容时提交

图6-18输入格式错误时提交6.2CSS控制表单6.2.1搜索栏图6-19搜索栏预览效果图6-20搜索栏布局示意图6.2CSS控制表单6.2.2用户登录页面图6-21用户登录界面最终效果6.2CSS控制表单图6-22用户登录界面布局示意图6.2CSS控制表单6.2.3传统按钮、CSS3按钮与开源样式库按钮1．传统按钮的实现图6-24传统按钮预览效果6.2CSS控制表单2．CSS3按钮的实现图6-25CSS3按钮预览效果6.2.3传统按钮、CSS3按钮与开源样式库按钮6.2CSS控制表单3．开源样式库按钮的实现<ahref="#"class="buttonbutton-primarybutton-roundedbutton-large">第三方样式库按钮</a><inputtype="submit"value="表单按钮"class="buttonbutton-pillbutton-primary">

按钮的全局样式按钮的圆角样式按钮的基本外观按钮的大小样式按钮的全局样式“药丸”按钮外观样式按钮的基本外观图6-26开源样式库按钮预览效果6.3表格1．表格中常见的标签（1）<t