《网页设计与 Web 前端开发》课件 第4章 使用HTML+CSS布局网页

网页设计与Web前端开发案例教程第4章使用HTML+CSS布局网页CONTENT目录CSS布局概述01元素浮动02元素定位03图片特点及布局04表单及布局05表格及布局06内联框架07CSS进阶应用08PC端网页布局综合案例实战0901CSS布局概述CSS布局相关概念CSS布局核心概念CSS布局利用样式表实现网页内容定位，基于盒模型，通过设置属性合理放置元素，如将网页内容比作剪报进行裁剪粘贴。盒模型与元素类型盒模型是CSS布局核心，元素分块、行内及行内块元素，不同类型显示特性各异，影响布局效果。三种定位机制概述CSS有普通流、浮动和绝对定位三种定位机制，适用于不同场景，可对网页分层，浮动和绝对定位元素脱离普通流。01020302元素浮动浮动属性float010203浮动属性概述浮动属性可改变元素显示方式，使块元素同行显示，行内元素转块元素，有none、left、right三种取值。浮动常规用法常用于多列布局和文绕图效果，如两div左浮动实现两列，图片左浮动实现文字环绕，浮动元素脱离普通流。浮动特殊情况可能引发不能同行显示、元素重叠、父元素高度塌陷等问题，可通过设固定高度或clear属性解决，需合理使用浮动及清除属性。与inline­block的比较132浮动与行内块比较浮动和行内块都能实现同行排列，支持属性控制。但浮动脱离普通流，行内块占原位置空间，布局影响不同。行内块元素空隙问题行内块元素间有空格或换行会产生空隙，需调整代码或样式解决，避免布局不整齐。清除属性的作用与应用清除属性可解决浮动元素对后续元素的影响，包括重叠和父元素高度塌陷问题，有多种实现方法。清除属性010203清除属性取值清除属性clear有none、left、right、both四种取值，分别对应不清除、清除左、右、两侧浮动影响，可精准控制布局。解决重叠问题使用clear属性能解决浮动元素致后续元素重叠问题，如前元左浮，后元设clear:both;可正常显示，避免布局错乱。处理高度塌陷浮动使父元高塌陷，可为父元设置固定高度，加设空div子元素并设置clear:both;或用::after伪元素，确保布局稳定，撑开父元高度。03元素定位定位属性position定位属性概述CSS定位属性position实现元素定位，需结合top、left等边偏移和z-index属性，有static、absolute、relative、fixed四种取值。相对、绝对和固定定位相对定位保留原位置空间，适用于微调；绝对定位脱离普通流，精确控制位置，用于复杂布局场景。固定定位可使元素固定显示于浏览器窗口上的某个位置。定位应用案例设置元素position为absolute，通过top、left、z-index等属性精确控制位置，实现网页元素的精准布局。z-index123z-index取值范围z-index属性控制元素重叠顺序，取值范围包括正数、负数，默认值为0，需配合非static定位属性使用。层叠顺序原则z-index值越大元素越靠上层显示，值越小则越靠下层，通过调整数值可改变元素覆盖关系。定位属性前提使用z-index必须配合position定位属性，仅对非static定位元素（如relative/absolute）有效。元素居中010203未定位元素居中未定位元素通过margin:auto实现水平居中，适用于块级元素，无需定位属性配合。绝对定位居中技巧绝对定位元素利用负外边距实现居中，左偏移50%页面宽，外边距为负的元素宽度一半。相对定位居中方法相对定位元素可结合外边距自动或负外边距法实现居中，需根据场景选择合适方式。04图片特点及布局图片布局特点020301图片布局核心概念图片可通过position或float属性精确定位，也可利用自身的行内块特性布局，需考虑行内框与行框概念，结合text-align和vertical-align控制对齐。水平垂直对齐方式text-align控制块框内行内框及文字水平对齐，取值左、中、右；vertical-align控制行内框在行框内垂直对齐，如基线、居中、顶部、底部等。图片布局实践应用设置图片float为left实现文绕图，position为absolute精确定位，通过调整属性满足不同页面布局需求，实现多样化展示效果。05表单及布局表单基本结构表单基本结构表单由<form>标签定义，包含文本框、按钮等元素。通过<input>标签创建输入框，type属性决定类型，如text、password等。表单元素表单元素包括文本框、密码框、单选框、复选框和按钮等。使用标签的type属性区分不同元素类型，满足多种交互需求。表单伪类应用CSS伪类如:focus、:disabled用于选择表单元素状态，实现样式定制。例如设置输入框获得焦点时的样式或禁用按钮的外观。010203action属性详解123action属性定义action指定处理表单数据的服务器程序，决定数据提交的目标地址。action示例解析示例中action="fcheck.asp"或action="mailto:name@"，展示不同提交方式。method属性说明表单数据提交方式method属性规定表单数据发送方式，get将数据附加在URL后传输，适合少量数据；post封装数据发送，安全性高，适用于敏感信息。get与post对比get方式数据暴露在URL中，安全性较差，但实现简单；post方式数据在请求体中，更安全，常用于登录等重要数据传输场景。属性设置要点设置method属性时，需根据数据特性和安全需求选择get或post，同时配合action属性指定数据处理程序地址，确保表单正常提交。name属性用途name属性用途name属性用于表单元素命名，便于识别与数据提交，确保信息准确对应。<input>标签用法<input>标签定义<input>是表单常用元素，用于输入数据，有多种类型，如文本框、密码框等。<input>常用属性包含type、value、name等属性，可设置输入区类型、值、名称等。<input>的type属性type属性决定输入区类型，有文本、密码、单选等多种常见类型。<textarea>标签特点多行文本输入用于输入多行文本内容，通过rows和cols属性设置行列数，提供用户填写较长信息的空间。基本属性配置包含name命名、rows行数、cols列数等属性，可定义文本域的标识和尺寸，便于表单数据处理。与输入框差异区别于单行<input>，<textarea>支持多行输入，常用于留言、评论等需要大量文字的场景。<select>标签功能<select>标签定义<select>标签用于创建列表框或下拉列表框，提供用户选择的选项。<select>标签用法通过<option>标签定义选项，可设置multiple和size属性控制多选及可见数目。<select>标签属性name属性命名，<option>的selected设默认值，value指定发送给服务器的值。010203<label>标签123<label>标签绑定原理<label>的for属性通过id与表单元素关联，实现点击文本聚焦对应输入框，提升表单操作便捷性。绑定机制示例解析如<labelfor="nan">男</label>绑定<inputid="nan">，点击"男"自动选中单选按钮，直观展示交互效果。提升交互体验作用for属性实现标签与元素联动，减少用户操作步骤，优化表单填写流程，增强用户体验。<fieldset>标签010203表单元素分组功能<fieldset>标签用于对表单元素分组，使页面结构清晰，避免用户输入时眼花缭乱，提升表单可读性。legend标签配合使用<legend>为<fieldset>分组设置标题，增强表单可读性，优化整体布局，便于用户理解和操作。示例代码与效果展示

<fieldset><legend>健康信息</legend>...</fieldset>的示例代码，呈现健康信息分组效果，直观展示表单元素分组布局。表单相关伪类功能010203表单美化重要性表单是网页交互核心，美观实用可提升用户体验，美化能增视觉效果且减少输入错误。CSS伪类作用CSS伪类是选择特定状态元素的选择器，用于表单可增强交互性，简化代码且性能高。常用伪类应用如:focus、:disabled等伪类，各有定义、格式与实际应用，可优化表单交互与布局。表单相关伪类优势简化代码与性能优势CSS伪类简化表单样式定义，减少JavaScript依赖。浏览器原生支持，提升渲染性能，确保流畅交互体验。增强交互与用户体验伪类为表单元素提供即时视觉反馈，如焦点高亮、禁用状态提示，直观引导用户操作，降低误操作率。跨浏览器兼容性保障主流浏览器均支持标准表单伪类，确保样式在不同平台一致呈现，避免因兼容性问题导致的显示差异。:focus选择器:focus选择器定义:focus用于选取获焦点元素，用户点击或Tab键切换时触发，常用于表单输入框等元素。:focus使用格式selector:focus{property:value;}，如input:focus{border:2pxsolidblue;}为输入框添蓝边。:focus实际应用表单中输入框获焦点时，可改边框或背景色提示用户，提升关注度，减少误操作。:disabled选择器:disabled选择器定义:disabled选择器用于选取被禁用的表单元素，禁用后用户无法操作该元素，常用于控制表单交互流程。:disabled使用格式通过selector:disabled设置样式，例如input:disabled可改变禁用输入框背景色，直观提示用户状态。:disabled实际应用在注册表单中，未填完必填项时禁用提交按钮，配合灰色背景样式，明确告知用户当前不可操作状态。:enabled选择器Part01Part03Part02:enabled选择器定义:enabled选择器用于选取未被禁用的表单元素，与:disabled相对，能选择可正常使用的元素。:enabled使用格式使用格式为selector:enabled{property:value;...}，可设置可使用元素的样式。:enabled实际应用在表单中，可通过改变可使用元素样式，如鼠标指针形状，提示用户元素可操作。:checked选择器010203:checked选择器定义:checked用于选取被选中元素，如单选按钮和复选框，表示用户已选择这些选项。:checked使用格式selector:checked{property:value;}，例如为选中项设置背景色或边框样式。:checked实际应用在表单中，通过改变选中元素的样式，如背景颜色，突出显示用户选择。:required选择器030201:required选择器定义:required选择器用于选取必填元素，在提交表单时用户必须填写这些字段，确保数据完整性。:required使用格式通过selector:required{property:value;}设置样式，如为必填输入框添加红色边框，明确提示用户。:required实际应用在表单中，改变必填字段样式，如边框颜色，告知用户哪些字段必填，减少提交错误，提高填写质量。:optional选择器213:optional选择器定义:optional选择器用于选取未设required属性的元素，表示用户可选择性填写的字段。:optional使用格式selector:optional{property:value;}，如input:optional{border:2pxsolid#ccc;}，为非必填输入框添加灰色边框。:optional实际应用表单中通过改变非必填字段样式，如边框颜色，区分必填和非必填字段，提升表单易用性。:read-only选择器Part01Part03Part02:read-only选择器定义:read-only选择器用于选取设置了read-only属性的元素，表示用户只能查看，不能修改的字段。:read-only使用格式selector:read-only{property:value;...}，例如：input:read-only{background-color:#eee;}，将只读输入框背景设置为浅灰色。:read-only实际应用在表单中，某些字段可能需要显示但不允许用户修改，如用户信息的查看页面，通过改变只读字段的样式，可以明确地告知用户该字段不可编辑。06表格及布局表格标签010302<table>定义表格<table>标签用于创建表格，是表格的容器。表格结构组成表格包含表头、行和单元格。表头由<th>定义，内容加粗居中；行由<tr>定义，单元格由<td>定义，可包含文本、图片等元素。表格标题设置<caption>标签为表格添加标题，位于表格上方，内容居中显示，增强表格的语义化，每个表格只能有一个标题。合并左右列231合并左右列方法使用`colspan`属性可合并表格左右列，取值为合并列数，如`<tdcolspan="2">`合并两列，代码示例展示其用法。`colspan`属性作用`colspan`属性用于控制表格单元格合并左右列，能改变表格结构，使内容呈现更符合需求，提升表格布局灵活性。合并列代码要点合并左右列时，保留最左`<td>`标签，其他列标签可省略，通过示例代码可清晰了解合并左右列的具体实现方式。合并上下行020301合并上下行方法使用`rowspan`属性可合并表格上下行，取值为合并行数，如`<tdrowspan="3">`表示合并三行。合并行代码示例合并行时保留最上边`<td>`标签，其他行对应`<td>`标签无需保留，示例展示操作方法。合并行注意事项合并上下行要确保数据逻辑正确，避免因合并导致表格结构混乱或数据丢失。选择器类型选择010203标签选择器应用标签选择器控制所有表格相关标签样式，如`table{...}`设置全局表格样式，统一管理。类选择器使用类选择器针对特定表格标签，如`.my-table{...}`，灵活调整局部样式，满足多样需求。ID选择器和后代选择器ID选择器用于唯一表格标签，如`#unique-table{...}`，精确控制单个元素样式，避免冲突。如果需要将以上定义的表格样式仅作用于指定的范围内，可以用后代选择器实现。`border-collapse`属性`border-collapse`属性控制表格边框折叠或分离，默认值为separate，设为collapse可折叠双线条边框为单线条。边框折叠效果使用`border-collapse:collapse;`可使表格边框折叠，避免双线条，使表格更简洁。应用场景在需要简洁表格样式时，使用`border-collapse`属性可有效减少边框冗余，提升视觉效果。`border-spacing`属性132`border-spacing`属性定义`border-spacing`用于设置表格单元格间距，适用于边框分离模式，可设一个或两个值控制水平和垂直间距。属性应用场景该属性常用于调整复杂表格布局，通过增大间距提升可读性，避免内容拥挤影响视觉效果。与边框折叠对比相比`border-collapse`的单线边框效果，`border-spacing`保留双线结构，适合需要强调单元格分隔的场景。`caption-side`属性`caption-side`属性定义`caption-side`属性用于设置表格标题的位置，默认显示在表格上方，可调整为下方以优化布局。属性取值说明`caption-side`属性取值包括`top`和`bottom`，分别控制标题在表格的顶部或底部显示。语义化与样式影响通过`caption-side`调整标题位置，增强表格语义化，同时需配合CSS统一标题样式。隔行变色020301隔行变色作用隔行变色提升表格可读性，数据量大时效果显著，通过奇偶行不同背景色区分，便于视觉浏览与数据查看。隔行变色代码用类选择器为奇数行和偶数行定义样式，如`.odd-row`和`.even-row`，在CSS中设置不同背景色，实现隔行变色效果。示例代码展示示例代码中，先为表格行添加对应类名，再在CSS里为类名定义背景颜色，如奇数行设浅灰，偶数行设绿色，展示隔行变色。表格的特征010203表格默认无边框表格默认无边框，需通过CSS设置边框样式，以实现表格的视觉分隔和美化。单元格宽度分配表格设置宽度时，未指定单元格宽度则默认平分，确保布局均匀。行高与列宽特性表格行高取最高单元格高度，列宽取最宽单元格宽度，保持对齐。单元格内容对齐132单元格内容对齐`th`内容默认加粗且居中，`td`内容上下居中、左对齐。通过CSS可调整对齐方式，提升表格美观度与可读性。默认对齐规则表格未设置样式时，表头与数据单元格按标准对齐显示，确保基本信息清晰呈现，为后续样式调整提供基础。对齐方式调整利用CSS的text-align和vertical-align属性，可自定义单元格内容水平与垂直对齐方式，满足不同排版需求。07内联框架内联框架基本用法123内联框架定义内联框架即<iframe>标签，用于在网页中嵌入其他网页内容，通过src属性指定源URL，可设置宽高控制显示范围。基本属性解析核心属性包括：src（嵌入地址）width/height（尺寸设定）支持name命名，用于超链接target定位跳转位置。基础布局实践通过<iframe>可实现内容区域分离，如导航栏与主体内容分区展示，配合target属性实现框架间内容加载联动。08CSS进阶应用网页logo及图标应用网页logo定义与设置网页logo是网站重要标识，通过<link>标签设置网站图标，rel属性为shortcuticon，Type属性为image/x-icon，href指定图标路径。logo在浏览器显示设置favicon.ico图标后，会在浏览器标签页显示，增强网站辨识度与专业性。图标的灵活应用图标除图片文件外，还可用字体图标，如阿里巴巴iconfont矢量图标库，下载引入CSS后，用<i>或<span>标签插入。CSS代码复用提出背景随着页面增多，CSS代码量飙升，导致网页加载变慢，影响网站的维护效率。基本概念CSS代码复用，简单理解就是相同的代码不重复编写，一个代码可以多次使用。优点CSS代码的复用可以使得CSS代码易于管理和维护，同时又能减小CSS文件的大小，加快网页的显示速度。外部样式表文件外部样式表优势提升代码复用性，多个页面共用样式，便于集中管理与维护，减少冗余代码。便于更新维护修改一次外部样式表，所有引用页面自动更新，降低维护成本，提高更新效率。提升性能缓存浏览器可缓存外部样式表，减少重复加载，加快页面响应速度，优化用户体验。CSS类选择器与HTML标签的class属性010203简化样式定义多个标签需相同样式时，通过类选择器和class属性复用样式，避免重复编写，提升代码简洁性。增强样式灵活性同一标签可应用多个类选择器，组合出复杂样式，灵活调整外观，满足多样化设计需求。提高代码可读性使用语义化的类名，使代码更易读，便于团队协作与后续维护，提升开发效率。CSSreset重置样式统一浏览器默认样式不同浏览器对HTML标签默认样式各异，CSS重置样式可消除差异，确保页面元素外观一致，提升跨浏览器兼容性。提高跨浏览器兼容性通过CSS重置样式，网站在不同浏览器中表现一致，避免因默认样式差异导致的布局错乱，增强用户体验。简化样式开发流程CSS重置样式后，避免浏览器默认