内容简介
本书采取“HTML5网页设计→CSS3美化网页→网页版式布局→综合案例实战”的讲解模式,深入浅出地为读者讲解了网页设计和排版布局的各项技术及实战技能。
本书第1篇“HTML5网页设计”主要讲解HTML5快速入门、HTML5网页文档结构、HTML5网页中的文本和图像、用HTML5建立超链接、用HTML5创建表格和表单、HTML5中的多媒体、使用HTML5绘制图形、获取地理位置、Web通信新技术、构建离线的Web应用等;第2篇“CSS3美化网页”主要讲解CSS3概述与基本语法、使用CSS3美化网页字体与段落、使用CSS3美化网页图片、使用CSS3美化网页背景与边框、使用CSS3美化表格和表单样式、使用CSS3美化超链接和鼠标、使用CSS3控制网页导航菜单的样式等;第3篇“网页版式布局”主要讲解CSS定位与DIV布局核心技术、CSS+DIV盒子的浮动与定位、网页布局实战案例剖析等;第4篇“综合案例实战”主要讲解制作在线购物类网页、制作移动设备类网页和制作娱乐休闲类网页实战。本书适合任何没有网页设计基础的人员,也适用于有一定的HTML5和CSS3基础,想更精通网页设计的人员,同时也可作为大专院校及培训学校教师和学生用书。
前言
“实战从入门到精通(视频教学版)”系列图书是专门为网页设计和网站开发初学者量身定制的一套学习用书,由刘玉红策划,千谷网络科技实训中心的高级讲师编著,整套书涵盖网页设计、网站开发、数据库设计等方面的知识,具有以下突出特点。前沿科技无论是网页设计、数据库设计,还是HTML5、CSS3,我们都精选较为前沿或者用户群最大的领域推进,帮助大家认识和了解最新动态。权威的作者团队组织国家重点实验室和资深应用专家联手编著该套图书,融合丰富的教学经验与优秀的管理理念。学习型案例设计以技术的实际应用过程为主线,全程采用图解和同步多媒体相结合的教学方式,生动、直观、全面地剖析使用过程中的各种应用技能,降低难度,提升学习效率。为什么要写这样一本书由于原生应用程序APP的开发费用比较高,而且耗时较长,所以jQuery Mobile函数库应运而生,很好地解决了这一问题,通过HTML5新技术和jQuery Mobile搭配使用,开发出的网站和普通APP没有区别,受到广大用户的欢迎。目前学习和关注的人越来越多,而很多APP移动网站开发的初学者都苦于找不到一本通俗易懂、快速入门和案例实用的参考书。而通过本书的案例实训,大学生可以很快地上手流行工具,提高职业化能力,从而帮助解决公司与学生的双重需求问题。本书特色零基础、入门级的讲解无论您是否从事计算机相关行业,无论您是否接触过网页设计,都能从本书中找到最佳起点。超多、实用、专业的范例和项目本书在编排上紧密结合深入学习网页设计技术的先后过程,从HTML5基本概念开始,引领读者逐步深入地学习各种应用技巧,侧重实战技能,使用简单易懂的案例进行分析和操作指导,让读者学起来简明轻松,操作起来有章可循。随时检测自己的学习成果每章首页均设置了内容提要,并提供了学习目标,以指导读者重点学习。大部分章最后的“跟我练练手”板块,均根据本章内容精选而成,读者可以随时检测自己的学习成果和实战能力,做到融会贯通。细致入微、贴心提示本书在讲解过程中,在各章中使用了“注意”“提示”“技巧”等小栏目,使读者在学习过程中更清楚地了解相关操作、理解相关概念,并轻松掌握各种操作技巧。专业创作团队和技术支持本书由千谷网络科技实训中心编著和提供技术支持。您在学习过程中遇到任何问题,可加入QQ群:221376441进行提问,专家人员会及时答疑解惑。“网页设计”学习最佳途径本书以学习“网页设计”的最佳制作流程来分配章节,从最初的HTML5基本概念开始,然后讲解了CSS3美化网页、网页版式布局等。同时在最后的项目实战环节特意补充了3个综合网页的设计过程,以便更进一步提高读者的实战技能。超值光盘全程同步教学录像涵盖本书所有知识点,详细讲解每个实例及项目的过程和技术关键点。比阅读图书更能轻松地掌握网页设计知识,而且扩展的讲解部分使您得到比书中更多的收获。超多容量王牌资源大放送赠送大量王牌资源,包括书中案例源代码、教学幻灯片、本书精品教学视频、HTML5标签速查手册、CSS属性速查表、88类网页实用模板、CSS+DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析和Web前端工程师常见面试题。读者对象没有任何网页设计基础的初学者。有一定的HTML5和CSS3基础,想精通网页设计的人员。有一定的HTML5和CSS3基础,没有项目经验的人员。正在进行毕业设计的学生。大专院校及培训学校的老师和学生。创作团队本书由刘玉红和蒲娟编著,参加编写的人员还有刘玉萍、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、梁云梁和周浩浩。在编写过程中,我们尽所能地将最好的讲解呈现给读者,但也难免有疏漏和不妥之处,敬请不吝指正。若您在学习中遇到困难或疑问,或有何建议,可写信至信箱357975357@qq.com。编 者目录
第1篇 HTML5网页设计第1章 HTML5快速入门1.1 HTML5概述 41.1.1 HTML5简介 41.1.2 HTML5文件的基本结构 51.2 HTML5文件的编写方法 51.2.1 案例1——手工编写HTML5 51.2.2 案例2——使用HTML编辑器编写HTML 61.3 使用浏览器查看HTML5文件 101.3.1 各大浏览器与HTML5的兼容 101.3.2 案例3——查看页面效果 111.3.3 案例4——查看源文件 111.4 高手甜点 121.5 跟我练练手 12第2章 HTML5网页文档结构2.1 Web标准 142.1.1 Web标准概述 142.1.2 Web标准规定的内容 152.2 HTML5文档的基本结构 162.2.1 HTML5结构 162.2.2 文档类型说明 172.2.3 HTML5标记<html> 172.2.4 头标记<head> 172.2.5 网页的主体标记<body> 202.2.6 页面注释标记<!-- --> 212.3 综合案例——符合W3C标准的HTML5网页 222.4 高手甜点 232.5 跟我练练手 24第3章 HTML5网页中的文本和图像3.1 在网页中添加文本 263.1.1 案例1——普通文本的添加 263.1.2 案例2——特殊字符文本的添加 263.1.3 案例3——添加特殊文本 283.2 文本排版 303.2.1 案例4——换行标记<br> 303.2.2 案例5——段落标记<p> 313.2.3 案例6——标题标记<h1>~<h6> 323.3 文字列表 333.3.1 案例7——建立无序列表<ul> 333.3.2 案例8——建立有序列表<ol> 343.3.3 案例9——建立不同类型的无序列表 353.3.4 案例10——建立不同类型的有序列表 363.3.5 案例11——建立嵌套列表 373.3.6 案例12——自定义列表<dl> 383.4 网页中的图像 393.4.1 案例13——插入图像<img> 393.4.2 案例14——设置图像的宽度和高度width、height 413.4.3 案例15——设置图片的提示文字alt 423.4.4 案例16——将图片设置为网页背景background 433.4.5 案例17——排列图像align 443.5 综合案例1——图文并茂房屋装饰装修网页 443.6 综合案例2——在线购物网站产品展示效果 463.7 高手甜点 473.8 跟我练练手 48第4章 用HTML5建立超链接4.1 网页超链接概述 504.1.1 超链接的概念 504.1.2 超链接中的URL 504.1.3 超链接的URL类型 514.2 建立网页超链接href 514.2.1 案例1——创建超文本链接 514.2.2 案例2——创建图片链接 534.2.3 案例3——创建下载链接 544.2.4 案例4——使用相对路径和绝对路径 554.2.5 案例5——设置以新窗口显示超链接页面 564.2.6 案例6——设置电子邮件链接 584.3 案例7——浮动框架iframe 594.4 案例8——精确定位热点区域map、area 614.5 综合案例——使用锚链接制作电子书阅读网页 644.6 高手甜点 674.7 跟我练练手 68第5 章 用HTML5创建表格和表单5.1 表格的基本结构 705.2 使用HTML5创建表格 725.2.1 案例1——创建普通表格<table><tr><td> 725.2.2 案例2——创建一个带有标题的表格<caption> 735.2.3 案例3——定义表格的边框类型border 745.2.4 案例4——定义表格的表头<th> 755.2.5 案例5——设置表格背景bgcolor、background 765.2.6 案例6——设置单元格背景bgcolor 785.2.7 案例7——合并单元格colspan、rowspan 795.2.8 案例8——排列单元格中的内容align 835.2.9 案例9——设置单元格的行高与列宽cellpadding 845.3 案例10——创建完整的表格 855.4 案例11——认识表单<form> 875.5 表单基本元素的使用 885.5.1 案例12——单行文本输入框text 885.5.2 案例13——多行文本输入框textarea 895.5.3 案例14——密码域password 895.5.4 案例15——单选按钮radio 905.5.5 案例16——复选框checkbox 915.5.6 案例17——下拉列表框select 925.5.7 案例18——普通按钮button 935.5.8 案例19——提交按钮submit 945.5.9 案例20——重置按钮reset 955.6 表单高级元素的使用 965.6.1 案例21——url属性的应用 965.6.2 案例22——email属性的应用 975.6.3 案例23——date和time的应用 985.6.4 案例24——number属性的应用 995.6.5 案例25——range属性的应用 1005.6.6 案例26——required属性的应用 1015.7 综合案例1——创建用户反馈单 1025.8 综合案例2——制作商品报价单 1035.9 高手甜点 1055.10 跟我练练手 106第6章 HTML5中的多媒体6.1 网页音频标记audio 1086.1.1 audio标记概述 1086.1.2 audio标记的属性 1086.1.3 音频解码器 1096.1.4 audio标记浏览器的支持情况 1096.2 网页视频标记video 1096.2.1 video标记概述 1096.2.2 video标记的属性 1106.2.3 视频解码器 1106.2.4 video标记浏览器的支持情况 1106.3 添加网页音频文件 1116.3.1 案例1——设置背景音乐 1116.3.2 案例2——设置音乐循环播放loop 1126.4 添加网页视频文件 1126.4.1 案例3——为网页添加视频文件video 1126.4.2 案例4——设置自动运行autoplay 1136.4.3 案例5——设置视频文件的循环播放loop 1146.4.4 案例6——设置视频窗口的高度与宽度height、width 1156.5 添加网页滚动文字 1156.5.1 案例7——滚动文字标记marquee 1166.5.2 案例8——滚动方向属性direction 1166.5.3 案例9——滚动方式属性behavior 1176.5.4 案例10——滚动速度属性scrollamount 1186.5.5 案例11——滚动延迟属性scrolldelay 1196.5.6 案例12——滚动循环属性loop 1206.5.7 案例13——滚动范围属性height、width 1216.5.8 案例14——滚动背景颜色属性bgcolor 1226.5.9 案例15——滚动空间属性hspace、vspace 1236.6 高手甜点 1246.7 跟我练练手 124第7章 使用HTML5绘制图形7.1 什么是canvas 1267.2 绘制基本形状 1277.2.1 案例1——绘制矩形 1277.2.2 案例2——绘制圆形 1287.2.3 案例3——使用moveTo与lineTo绘制直线 1297.2.4 案例4——使用bezierCurveTo绘制贝济埃曲线 1317.3 绘制渐变图形 1337.3.1 案例5——绘制线性渐变 1337.3.2 案例6——绘制径向渐变 1357.4 绘制变形图形 1367.4.1 案例7——变换原点坐标 1367.4.2 案例8——图形缩放 1377.4.3 案例9——旋转图形 1387.5 绘制其他样式的图形 1397.5.1 案例10——图形组合 1407.5.2 案例11——绘制带阴影的图形 1427.5.3 案例12——绘制文字 1437.6 使用图像 1457.6.1 案例13——绘制图像 1457.6.2 案例14——图像平铺 1467.6.3 案例15——图像裁剪 1487.6.4 案例16——像素处理 1497.7 图形的保存与恢复 1517.7.1 案例17——保存与恢复状态 1527.7.2 案例18——保存文件 1537.8 综合案例1——绘制火柴棒人物 1547.9 综合案例2——绘制商标 1577.10 高手甜点 1597.11 跟我练练手 160第8章 获取地理位置8.1 Geolocation API获取地理位置 1628.1.1 地理定位的原理 1628.1.2 获取定位信息的方法 1628.1.3 常用地理定位方法 1628.1.4 案例1——判断浏览器是否支持HTML5获取地理位置信息 1638.1.5 案例2——指定纬度和经度坐标 1648.1.6 案例3——获取当前位置的经度与纬度 1658.2 目前浏览器对地理定位的支持情况 1678.3 综合案例——在网页中调用Google地图 1688.4 高手甜点 1718.5 跟我练练手 172第9章 Web通信新技术9.1 跨文档消息传输 1749.1.1 跨文档消息传输的基本知识 1749.1.2 案例1——跨文档通信应用测试 1749.2 Web Sockets API 1779.2.1 WebSocket API的概念 1779.2.2 Web Sockets通信基础 1779.2.3 案例2——服务器端使用WebSockets API 1799.2.4 案例3——客户端使用WebSockets API 1839.3 综合案例——编写简单的Web Socket服务器 1839.4 高手甜点 1889.5 跟我练练手 188第10章 构建离线的Web10.1 HTML5离线Web应用概述 19010.2 使用HTML5离线Web应用API 19010.2.1 案例1——检查浏览器的支持情况 19010.2.2 案例2——搭建简单的离线应用程序 19110.2.3 案例3——支持离线行为 19110.2.4 案例4——manifest文件 19210.2.5 案例5——Application Cache API 19310.3 实例2——使用HTML5离线Web应用构建应用 19510.3.1 案例6——创建记录资源的manifest文件 19510.3.2 案例7——创建构成界面的HTML和CSS 19510.3.3 案例8——创建离线的JavaScript 19610.3.4 案例9——检查applicationCache的支持情况 19810.3.5 案例10——为Update按钮添加处理函数 19810.3.6 案例11——添加Storage功能代码 19910.3.7 案例12——添加离线事件处理程序 19910.4 高手甜点 20010.5 跟我练练手 201第2篇 CSS3美化网页第11章 CSS3概述与基本11.1 CSS3概述 20611.1.1 CSS3功能 20611.1.2 浏览器与CSS3 20611.1.3 CSS3基础语法 20711.1.4 CSS3常用单位 20711.2 编辑和浏览CSS3 21211.2.1 案例1——手工编写CSS3 21211.2.2 案例2——Dreamweaver编写CSS 21311.3 在HTML5中使用CSS3的方法 21511.3.1 案例3——行内样式 21511.3.2 案例4——内嵌样式 21611.3.3 案例5——链接样式 21711.3.4 案例6——导入样式 21911.3.5 案例7——优先级问题 22011.4 CSS3的常用选择器 22211.4.1 案例8——标签选择器 22311.4.2 案例9——类选择器 22311.4.3 案例10——ID选择器 22411.4.4 案例11——全局选择器 22511.4.5 案例12——组合选择器 22611.4.6 案例13——继承选择器 22711.4.7 案例14——伪类选择器 22811.5 选择器声明 23011.5.1 案例15——集体声明 23011.5.2 案例16——多重嵌套声明 23111.6 综合实例1——制作炫彩网站Logo 23111.7 综合案例2——制作学生信息统计表 23411.8 高手甜点 23611.9 跟我练练手 237第12章 使用CSS3美化网页字体与段落12.1 美化网页文字 24012.1.1 案例1——设置文字的字体 24012.1.2 案例2——设置文字的字号 24112.1.3 案例3——设置字体风格 24212.1.4 案例4——设置加粗字体 24312.1.5 案例5——将小写字母转换为大写字母 24412.1.6 案例6——设置字体的复合属性 24512.1.7 案例7——设置字体颜色 24612.2 设置文本的高级样式 24712.2.1 案例8——设置文本阴影效果 24812.2.2 案例9——设置文本溢出效果 24912.2.3 案例10——设置文本的控制换行 25012.2.4 案例11——保持字体尺寸不变 25112.3 美化网页中的段落 25212.3.1 案例12——设置单词之间的间隔 25212.3.2 案例13——设置字符之间的间隔 25312.3.3 案例14——设置文字的修饰效果 25412.3.4 案例15——设置垂直对齐方式 25512.3.5 案例16——转换文本的大小写 25712.3.6 案例17——设置文本的水平对齐方式 25812.3.7 案例18——设置文本的缩进效果 26012.3.8 案例19——设置文本的行高 26112.3.9 案例20——文本的空白处理 26212.3.10 案例21——文本的反排 26312.4 综合案例1——设置网页标题 26412.5 综合案例2——制作新闻页面 26612.6 高手甜点 26712.7 跟我练练手 268第13章 使用CSS3美化网页图片13.1 图片缩放 27013.1.1 案例1——通过描述标记width和height缩放图片 27013.1.2 案例2——使用CSS3中的max-width和max-height缩放图片 27013.1.3 案例3——使用CSS3中的width和height缩放图片 27213.2 设置图片的对齐方式 27213.2.1 案例4——设置图片横向对齐 27313.2.2 案例5——设置图片纵向对齐 27313.3 图文混排 27513.3.1 案例6——设置文字环绕效果 27513.3.2 案例7——设置图片与文字的间距 27713.4 综合案例1——制作学校宣传单 27813.5 综合案例2——制作简单图文混排网页 28113.6 高手甜点 28213.7 跟我练练手 283第14章 使用CSS3美化网页背景与边框14.1 使用CSS3美化背景 28614.1.1 案例1——设置背景颜色background-color 28614.1.2 案例2——设置背景图片background-image 28714.1.3 案例3——背景图片重复background-repeat 28814.1.4 案例4——背景图片显示background-attachment 29014.1.5 案例5——背景图片位置background-position 29114.1.6 案例6——背景图片大小background-size 29314.1.7 案例7——背景显示区域background-origin 29414.1.8 案例8——背景图像裁剪区域background-clip 29614.1.9 案例9——背景复合属性 29714.2 使用CSS3美化边框 29914.2.1 案例10——设置边框样式border-style 29914.2.2 案例11——设置边框颜色border-color 30014.2.3 案例12——设置边框线宽border-width 30214.2.4 案例13——设置边框复合属性 30314.3 设置边框圆角效果border-radius 30414.3.1 案例14——设置圆角边框 30414.3.2 案例15——指定两个圆角半径 30514.3.3 案例16——绘制四个不同圆角边框 30614.3.4 案例17——绘制不同种类的边框 30814.4 综合案例1——制作简单公司主页 31014.5 综合案例2——制作简单生活资讯主页 31414.6 高手甜点 31614.7 跟我练练手 317第15章 使用CSS3美化表格和表单样式15.1 美化表格样式 32015.1.1 案例1——设置表格边框样式border-collapse 32015.1.2 案例2——设置表格边框宽度border-width 32215.1.3 案例3——设置表格边框颜色background-color 32315.2 美化表单样式 32515.2.1 案例4——美化表单中的元素font 32515.2.2 案例5——美化提交按钮transparent 32715.2.3 案例6——美化下拉列表font 32815.3 综合案例1——制作用户登录页面 33015.4 综合案例2——制作用户注册页面 33215.5 高手甜点 33415.6 跟我练练手 335第16章 使用CSS3美化超链接和鼠标16.1 使用CSS3美化超链接 33816.1.1 案例1——改变超链接基本样式 33816.1.2 案例2——设置带有提示信息的超链接 33916.1.3 案例3——设置超链接的背景图 34016.1.4 案例4——设置超链接的按钮效果 34116.2 使用CSS3美化鼠标特效 34316.2.1 案例5——使用CSS3控制鼠标箭头 34316.2.2 案例6——设置鼠标变幻式超链接 34416.2.3 案例7——设置网页页面滚动条 34516.3 综合案例1——图片版本超链接 34816.4 综合案例2——关于鼠标特效实例 35016.5 综合案例3——制作一个简单的导航栏 35216.6 高手甜点 35416.7 跟我练练手 355第17章 使用CSS3控制网页导航菜单的样式17.1 使用CSS3美化项目列表 35817.1.1 案例1——美化无序列表 35817.1.2 案例2——美化有序列表 36017.1.3 案例3——美化自定义列表 36217.1.4 案例4——制作图片列表 36317.1.5 案例5——缩进图片列表 36417.1.6 案例6——列表复合属性 36517.2 使用CSS3制作网页菜单 36717.2.1 案例7——制作无序表格的菜单 36717.2.2 案例8——制作水平菜单 36917.3 综合案例1——模拟soso导航栏 37117.4 综合案例2——将段落转变成列表 37517.5 高手甜点 37717.6 跟我练练手 377第3篇 网页版式布局第18章 CSS定位与DIV布局核心技术18.1 了解块级元素和行内级元素 38218.1.1 案例1——块级元素和行内级元素的应用 38218.1.2 案例2——div元素和span元素的区别 38418.2 盒子模型 38518.2.1 盒子模型的概念 38518.2.2 案例3——定义网页border区域 38618.2.3 案例4——定义网页padding区域 38718.2.4 案例5——定义网页margin区域 38818.3 CSS3新增弹性盒模型 39218.3.1 案例6——定义盒子布局取向(box-orient) 39218.3.2 案例7——定义盒子布局顺序(box-direction) 39418.3.3 案例8——定义盒子布局位置(box-ordinal-group) 39518.3.4 案例9——定义盒子弹性空间(box-flex) 39718.3.5 案例10——管理盒子空间(box-pack和box-align) 39918.3.6 案例11——盒子空间的溢出管理(box-lines) 40118.4 综合案例1——图文排版效果 40218.5 综合案例2——淘宝导购菜单 40418.6 高手甜点 40718.7 跟我练练手 408第19 章 CSS+DIV盒子的浮动与定位19.1 定义DIV 41019.1.1 什么是DIV 41019.1.2 案例1——创建DIV 41019.2 盒子的定位 41119.2.1 案例2——静态定位static 41219.2.2 案例3——相对定位relative 41219.2.3 案例4——绝对定位absolute 41319.2.4 案例5——固定定位fixed 41419.2.5 案例6——盒子的浮动float 41619.3 其他CSS布局定位方式 41819.3.1 案例7——溢出(overflow)定位 41819.3.2 案例8——隐藏(visibility)定位 41919.3.3 案例9——z-index空间定位 42119.4 新增CSS3多列布局 42319.4.1 案例10——设置列宽度column-width 42319.4.2 案例11——设置列数column-count 42419.4.3 案例12——设置列间距column-gap 42619.4.4 案例13——设置列边框样式column-rule 42719.5 综合案例1——定位网页布局样式 42919.6 综合案例2——制作阴影文字效果 43219.7 高手甜点 43319.8 跟我练练手 434第20 章 网页布局实战案例剖析20.1 固定宽度网页剖析与布局 43620.1.1 案例1——网页单列布局模式 43620.1.2 案例2——网页1-2-1型布局模式 44020.1.3 案例3——网页1-3-1型布局模式 44320.2 自动缩放网页1-2-1型布局模式 44720.2.1 案例4——“1-2-1”等比例变宽布局 44720.2.2 案例5——“1-2-1”单列变宽布局 44820.3 自动缩放网页1-3-1型布局模式 44920.3.1 “1-3-1”三列宽度等比例布局 44920.3.2 案例6——“1-3-1”单侧列宽度固定的变宽布局 45020.3.3 案例7——“1-3-1”中间列宽度固定的变宽布局 45420.3.4 案例8——“1-3-1”双侧列宽度固定的变宽布局 45820.3.5 案例9——“1-3-1”中列和左侧列宽度固定的变宽布局 46220.4 综合案例1——单列宽度变化布局 46520.5 综合案例2——多列等比例宽度变化布局 46720.6 高手甜点 47020.7 跟我练练手 471第4篇 综合案例实战第21章 制作在线购物类网页21.1 整体布局 47621.1.1 设计分析 47621.1.2 排版架构 47721.2 主要模块设计 47721.2.1 Logo与导航区 47721.2.2 Banner与资讯区 47921.2.3 产品类别区域 48021.2.4 页脚区域 481第22章 制作移动设备类网页22.1 网站设计分析 48422.2 网站结构分析 48422.3 网站主页面的制作 48522.4 网站成品预览 487第23 章 制作娱乐休闲类网页23.1 整体设计 49423.1.1 应用设计分析 49423.1.2 架构布局分析 49523.2 主要模块设计 49623.2.1 网页整体样式插入 49623.2.2 顶部模块代码分析 49823.2.3 视频模块代码分析 49923.2.4 评论模块代码分析 50023.2.5 热门推荐模块代码分析 50123.2.6 底部模块分析 50423.3 网页调整 50423.3.1 部分内容调整 50423.3.2 调整后预览测试 506