Web前端开发实战教程（HTML5+CSS3+JavaScript）（AI协同）（第2版）课件全套 模块1-10 Web开发环境配置-AI智慧导游项目实战

Web开发环境配置课件目录01VSCode开发工具02申请AI大模型Key03配置AI编程插件及插件应用VSCode开发工具安装VSCode1．VSCode概述VSCode是一个功能强大的代码编辑器，具有以下重要特性。（1）轻量级和快速：VSCode是一个轻量级的编辑器，启动速度快，运行流畅，适用于各种开发环境。（2）跨平台支持：VSCode支持Windows、macOS和Linux操作系统，开发者可以在不同平台上使用。（3）丰富的扩展：VSCode拥有丰富的扩展，开发者可以根据需要安装各种扩展来增强编辑器的功能，如代码格式化、调试工具、版本控制、AI代码生成等。（4）内置终端：VSCode内置终端，开发者可以在编辑器中直接运行命令行工具，提高开发效率。VSCode开发工具安装VSCode（5）智能代码补全：VSCode提供智能代码补全功能，能够根据上下文自动补全代码，提高编程速度和准确性。（6）调试支持：VSCode支持多种编程语言的调试功能，如设置断点、查看变量、调试代码等。（7）Git集成：VSCode提供Git集成，开发者可以方便地进行版本控制操作，如提交、推送、拉取等。（8）多语言支持：VSCode支持多种编程语言，包括但不限于JavaScript、Python、Java、C++、Go、PHP等，适合不同语言的开发者使用。（9）自定义配置：VSCode提供丰富的配置选项，开发者可以根据个人喜好自定义编辑器。VSCode开发工具安装VSCode2.安装与配置在

VSCode

官网下载最新版本的安装文件，双击安装文件安装VSCode即可。VSCode开发工具安装VSCodeVSCode开发工具创建项目当创建一个新的HTML文件后，文件内容通常是空的，此时可以在编辑窗口中输入“！”来自动填充HTML的文档结构。只需要输入“！”，并按Enter键即可自动生成以下代码。申请AI大模型Key关于AI编程插件使用AI大模型进行编程辅助，通常有以下两种方式。（1）在AI对话窗口中将编程需求或规格要求通过提示词描述清楚，并将AI生成的代码复制到项目中。（2）在各类编程开发环境中安装AI编程插件，并在当前开发环境中通过提示词编写需求，调用AI大模型生成代码。申请AI大模型Key关于AI编程插件目前市场上比较主流的AI编程插件主要有以下几个。（1）Cline：可以很好地帮助开发者生成“从零到一”的项目代码。如果发现生成的代码存在漏洞，则可以通过提示词进行修改。（2）Continue：Continue不具备操作本地文件的能力，只能通过AI对话窗口来生成代码，或对已有的代码进行分析和修改。（3）Copilot：基于OpenAI提供的GPT系列大模型进行编程，也支持Gemini或Claude大模型。（4）通义灵码：由阿里云提供的AI编程插件，除了支持通义千问的编程大模型，还支持DeepSeek大模型。（5）Cursor和Devin：Cursor与Devin的编程能力都非常不错，并能进行复杂的需求分析与代码生成。申请AI大模型Key对接DeepSeek访问DeepSeek的API开放平台并注册账号，申请开通一个APIKey，如图1-4所示。申请AI大模型Key对接硅基流动DeepSeek的访问量非常大，导致DeepSeek时常出现不稳定的情况。硅基流动平台可以作为一个备选方案。申请AI大模型Key对接硅基流动进入“API密钥”界面，创建一个新的APIKey即可完成对接，如图1-6所示。申请AI大模型Key对接OpenRouter1．登录OpenRouter访问OpenRouter官网，单击相应页面右上角的“Signin”按钮进行登录。其目前支持3种登录方式——Google、MetaMask及本站登录，如图1-7所示。申请AI大模型Key对接OpenRouter2．申请APIKey单击登录后的用户头像，选择“Keys”选项，进入APIKey管理页面，单击“CreateKey”按钮即可创建APIKey，如图1-8所示。申请AI大模型Key对接OpenRouter3．信用卡支付如果确定需要长期使用OpenRouter，则需要绑定信用卡以支付费用，OpenRouter支付页面如图1-9所示。配置AI编程插件及插件应用配置AI编程插件1．安装AI编程插件在VSCode中安装插件是非常方便的，只需要在VSCode的左侧边栏中单击“EXTENSIONS”图标并搜索相应的插件名称，找到相应插件并单击“Install”按钮即可完成安装，重启VSCode即可生效。图1-10所示为VSCode中的编程插件。配置AI编程插件及插件应用配置AI编程插件配置Cline插件如果要在Cline中对接DeepSeek或OpenRouter，则只需要提供申请的APIKey即可，在Cline中对接DeepSeek如图1-11所示。配置AI编程插件及插件应用配置AI编程插件配置Continue插件Continue的默认配置模型为Claude大模型，是效果较好的大模型，但是该大模型在申请APIKey时需要提供电话号码，且不支持我国的手机号码，因此需要配置模型并配合OpenRouter来使用，具体操作如下。①

进入Continue设置界面，打开配置文件。②

在配置文件中配置DeepSeek、OpenRouter上的Claude大模型及硅基流动的Qwen大模型。配置AI编程插件及插件应用配置AI编程插件配置Copilot与通义灵码如果要配置Copilot，则需要先开通一个GitHub的账号，再安装

Copilot，根据提示登录即可完成配置。如果需要配置通义灵码，则也是类似的操作，在阿里云注册账号并登录即可。通义灵码登录提示如图1-17所示。配置AI编程插件及插件应用Cline插件应用1．Cline功能介绍Cline是一款先进的AI编程插件，为开发者提供了一系列强大的功能，具体功能如下。（1）能够分析项目的文件结构和代码抽象语法树（AbstractSyntaxTree，AST）。（2）通过正则表达式搜索和读取相关文件，快速了解现有项目。（3）能够处理复杂的软件开发任务，并逐步完成这些任务。（4）文件操作与错误处理，可以创建和编辑文件。（5）能够主动修复诸如缺少导入和语法错误等问题。（6）直接在用户终端中执行命令并监控输出。配置AI编程插件及插件应用Cline插件应用（7）支持多种API提供商，如OpenRouter、Anthropic、OpenAI、Google、DeepSeek等。（8）可配置任何兼容OpenAI的API。（9）支持通过Ollama使用本地模型。（10）跟踪整个任务循环和单个请求的总token数和API使用成本，让用户随时了解开支情况。Cline的这些功能使其成为一个全面的AI编程助手，能够在项目开发的各个阶段为开发者提供支持。配置AI编程插件及插件应用Cline插件应用2.生成贪吃蛇游戏代码Cline内置了文件操作功能，可以通过提示词来创建文件或读取文件内容。所以，可以直接在Cline中通过提示词完成一个项目，如生成贪吃蛇游戏代码。配置Cline使用DeepSeek大模型来生成代码，同时确保勾选了“Auto-approve:Read，Edit，Commands，Browser，…”复选框，表示代码生成过程中系统不再询问，而是直接进行创建文件等操作。Cline提示词示例如下。配置AI编程插件及插件应用Cline插件应用3.分析代码功能除生成代码外，Cline或Continue等AI编程助手也可以帮助用户分析代码结构、分析代码功能、寻找代码中存在的漏洞、为代码添加注释等。例如，利用Cline来分析某段代码的功能，并为其添加注释，此时，需要在提示词输入区中将文件添加进来，如图1-20所示。配置AI编程插件及插件应用Cline插件应用4.识图并生成代码借助目前大模型在图像识别方面的能力，可以利用设计稿直接生成界面和功能代码。此处，为了进行测试，将Windows操作系统中的计算器界面（见图1-22）作为设计图，在提示词输入区中添加该图像，并让AI编程助手识别图像中的界面布局来生成对应的HTML和JavaScript代码。配置AI编程插件及插件应用Continue插件应用1．Continue功能介绍Continue的主要功能如下。（1）聊天（Chat）：在VSCode的侧边栏中与AI进行互动，帮助用户理解和迭代代码。（2）自动补全（Autocomplete）：实时提供代码补全建议，提升编程效率。（3）代码编辑（Edit）：无须切换文件即可直接修改代码。（4）快捷操作（Action）：为常见用例提供快捷操作，如按Ctrl+L组合键将打开对话窗口并将选中的代码作为提示词的一部分，按Ctrl+I组合键将进入编辑模式并对选中的代码进行修改和编辑。配置AI编程插件及插件应用Continue插件应用2．使用Continue生成代码新建一个HTML文件，将其命名为“clock.html”，在打开的代码编辑器中按Ctrl+I组合键进入Continue的编辑模式，输入提示词来生成实现时钟功能的代码，如图1-25所示。配置AI编程插件及插件应用Continue插件应用3．使用Continue修改代码上述时钟虽然功能一切正常，但是表盘上没有显示分针和秒针的刻度，现在通过Continue添加提示词来让AI修改代码，实现分秒的刻度显示，具体操作如下。先在代码编辑区中按Ctrl+A组合键全选代码，再按Ctrl+I组合键对选中的代码进行编辑，并在提示词输入区中输入如下内容：“该时钟的界面上没有分针和秒针的刻度，请为界面添加刻度元素，并为其添加CSS，本次操作不修改JavaScript代码。”，如图1-27所示。配置AI编程插件及插件应用Continue插件应用在Continue中，可以拒绝或接受修改的代码，单击左侧窗格中的“Accept”按钮表示全部接受本次修改，右侧代码编辑窗格中会对修改的部分进行高亮显示，如果这部分代码有效，则可以单击代码编辑窗口上方的“Accept”按钮，否则单击“Reject”按钮。这样便于开发者复核修改的代码是否存在问题，进而避免因全部代码被修改而出现新的问题。修改代码后得到的时钟代码的运行结果如图1-28所示。HTML页面布局实战课件目录01HTML常用标签02申请AI大模型Key03配置AI编程插件及插件应用HTML常用标签HTML简介1．什么是HTML超文本标记语言（HyperTextMarkupLanguage，HTML）是用来描述网页的一种语言。通过HTML的全称可以看出，HTML不是一种编程语言，而是一种标记语言，HTML使用诸多不同的HTML标签来完成对网页内容的描述。HTML是标准通用标记语言下的一个应用，也是一种规范、一种标准。它通过标记符来标记想要显示的网页中的各个部分。HTML文件本身是一种文本文件，通过在HTML文件中添加标记符即可告诉浏览器如何显示其中的内容（如文字如何处理、画面如何安排、图像如何显示等）。HTML常用标签HTML简介2．HTML的特点HTML文档制作不是很复杂，但其功能强大，支持不同数据格式的文件嵌入，其主要特点如下。（1）简易性：HTML版本升级采用超集方式，操作更加灵活、方便。（2）可扩展性：HTML的广泛应用带来了加强功能、增加标识符等要求，HTML采取子类元素的方式为系统扩展提供保证。（3）平台无关性：HTML可以在多种操作系统平台上使用，这也是万维网盛行的一个原因。（4）通用性：HTML是网络的通用语言，是一种简单、通用的标记语言。它允许网页制作者建立文本与图像相结合的复杂页面，这些页面可以被网络上的其他人浏览，且不考虑使用的是什么类型的计算机或浏览器。HTML常用标签HTML简介3．HTML标签HTML标签（HTMLTag）即HTML标记标签，是由角括号包围的标签，如<html>。HTML标签通常成对出现，如<font>和</font>，其中的第一个标签是开始标签（也称为开放标签），第二个标签是结束标签（也称为闭合标签）。HTML标签的语法格式如下。<标签名>内容</标签名>HTML常用标签HTML简介4．HTML版本从初期的网络诞生到现在，已经出现了许多HTML版本，其主要版本历史如表2-1所示。目前较为流行且对移动互联网支持最好的是HTML5。HTML常用标签HTML页面HTML文档是由纯文本构成的，可以使用记事本来编辑HTML文档。下面介绍一个最基本的HTML页面如何实现。打开记事本，输入图2-1所示的文本内容，并将其保存为扩展名为“.html”的文件。双击这个HTML文件，系统会用默认的浏览器打开页面，即可看到其运行结果，如图2-2所示。HTML常用标签HTML页面1．<!DOCTYPE>声明<!DOCTYPE>声明有助于浏览器正确显示网页。<!DOCTYPE>声明是不区分字母大小写的，以下书写方式均可。<!DOCTYPEhtml><!DOCTYPEHTML><!doctypehtml><!DoctypeHtml>2．<html>标签标签<html>与</html>表明了文档类型，表明这是一个按照HTML规范来书写的HTML文档。HTML常用标签HTML页面3．<head>标签标签<head>与</head>之间的内容主要用于描述页面的头部信息。4．<meta>标签<meta>标签主要用于设置页面的基础元信息。5．<title>标签<title>标签只用于设置页面的标题。6．<body>标签<body>标签是网页中最为重要的标签之一，主要用于展示网页的内容。7．网页注释在HTML中，<!--和-->是特殊标签，用于标注网页内容的注释部分。HTML常用标签文本上述代码中的标签及属性简单说明如下。（1）<font>表示格式化文本内容的文字大小、颜色和字体名称。（2）<h1>～<h6>表示文本内容标题文字大小，依次从大到小。（3）<i>表示斜体，<b>和<strong>表示粗体，<p>表示包含一个段落，会自动换行。（4）有的标签后面使用了<br/>标签，这个标签是一个特殊标签，表示让浏览器显示内容时强制换行。HTML常用标签超链接在HTML中，超链接的地位是极为重要的，使用标签<a>来设置超链接。超链接可以是一个字、一个词，或者一组词，也可以是一幅图像，单击这些内容可以跳转到新的文档或者当前文档中的某个部分。默认情况下，超链接以以下形式出现在页面中。（1）未访问过的超链接显示为蓝色字体并带有下画线。（2）访问过的超链接显示为紫色并带有下画线。（3）单击超链接时，超链接显示为红色并带有下画线。超链接的HTML代码很简单，定义超链接的语法如下。ahref="url">超链接文本</a>HTML常用标签图像在

HTML

中，图像的应用非常广泛，图像由<img>标签定义。<img>是单标签，即它只包含属性，且没有结束标签，可以使用“/>”结束该标签。要在页面中显示图像，需要使用源属性（src），src即source的缩写。源属性的值是图像的URL。定义图像的语法如下。<imgsrc="url"alt="some_text"/>1．HTML图像的alt属性alt属性用来为图像定义替换文本，替换文本是用户定义的。2．HTML图像的高度与宽度height与width属性用于设置图像的高度与宽度，属性值的默认单位为像素。HTML常用标签图像对于图文混排导致无法对齐的情况，还需要设置图像的附加属性align。图像的align属性取值及说明如表2-2所示。HTML常用标签表格在HTML中，表格一直以来都发挥着非常重要的作用。除显示表格化数据以外，表格也用于页面布局。HTML表格示例如表2-3所示。HTML常用标签表单元素1．文本框示例代码如下。<inputtype="text"value="admin"id="username"maxlength="20"/>其中，id表示该元素在网页中的唯一识别符；maxlength表示文本框允许输入的最大字符数。2．密码框示例代码如下。<inputtype="password"value="123456"id="password"name="password"/>3．按钮示例代码如下。<inputtype="button"value="单击我"onclick="alert('hi');"/>HTML常用标签表单元素4．单选框示例代码如下。<inputtype="radio"name="sex"/>男<inputtype="radio"name="sex"/>女单选框必须确保name属性的值是一样的。5．复选框示例代码如下。<inputtype="checkbox"value="car"/>汽车<inputtype="checkbox"value="game"/>游戏<inputtype="checkbox"value="travel"/>旅游HTML常用标签表单元素6．下拉列表示例代码如下。<selectid="city"><optionvalue="成都">成都</option><optionvalue="绵阳">绵阳</option><optionvalue="德阳">德阳</option><optionvalue="资阳">资阳</option></select>7．文本域文本域不同于一般的文本框，文本框只能输入一行内容，而文本域可以输入多行内容。HTML常用标签表单元素8．提交和重置表单示例代码如下。<formid="myform"action="http://服务器地址"method="post"><inputtype="text"value="123456"/><inputtype="reset"value="重置"/><inputtype="submit"value="提交"/></form>上述代码会生成一个表单，单击“重置”按钮会直接将表单内的元素重置为默认值，单击“提交”按钮会将表单的内容提交给服务器。HTML常用标签列表1．有序列表示例代码如下。<ol><li>这是第一项</li><li>这是第二项</li><li>这是第三项</li><li>这是第四项</li><li>这是第五项</li><li>这是第六项</li></ol>HTML常用标签列表2．无序列表示例代码如下。<ul><li>这是第一项</li><li>这是第二项</li><li>这是第三项</li><li>这是第四项</li><li>这是第五项</li><li>这是第六项</li></ul>HTML常用标签其他标签1．水平线示例代码如下。<hralign="center"width="100%"size="10"/>默认情况下，水平线是一条贯穿其父容器的线条，用于分隔部分内容，让界面整体布局显得更有层次感。通过设置其size属性，可以设置水平线的高度。2．iframeiframe主要用于在当前页面中显示另外一个页面的内容。3．盒模型盒模型是一种容器元素，本身并不直接显示任何内容，而是用于存放其他元素，特别是应用在页面布局上，比表格布局更加灵活，更加有优势。HTML常用标签其他标签4．特殊符号HTML中的特殊符号如表2-4所示，其中实体名称和实体编号都是在HTML中安全显示特殊符号的方法。HTML常用标签其他标签5．颜色取值在HTML中，颜色值有两种表示方式，一种是使用RGB编码来进行精确的颜色控制，另一种是使用颜色的英文单词来表示。在线计算器项目介绍本实战项目主要完成一个Web页面的计算器布局，在线计算器界面如图2-16所示。在线计算器开发思路1．绘制布局表格2．绘制结果框3．绘制按键在线计算器的按键并不需要使用<inputtype="button">或<button>标签来绘制，一个单元格加上背景，再加入按键的内容，同样可以起到按键的作用。4．设置按键样式按键即单元格，只需要使用<td>标签的bgcolor属性设置其背景色，同时使用<font>标签及其属性设置其显示内容即可。因为各单元格的背景色都是一样的，所以直接对该行设置背景色即可，即使用标签<tr>设置背景色。5．绘制红蓝绿三色小圆点在线计算器代码实现在线计算器利用Cline生成代码1．对接硅基流动因为现在只学习了最基础的HTML，并使用表格进行布局，所以需要在提示词中明确这些基本要求。提示词内容如下。请在当前目录的ai目录下，新建一个calc-1.html文件，并使用HTML+Table的传统的表格方式来布局一个计算器页面。在Cline中输入上述提示词，如图2-18所示。在线计算器利用Cline生成代码2．对接OpenRouter请在当前目录的ai目录下，新建一个calc-2.html文件，并使用HTML+Table的传统的表格方式来布局一个计算器页面。计算器界面设计风格和布局请参考并复制图片中的配色和布局。另外，本代码只能使用HTML标签，不允许使用CSS。在输入提示词后，需要同步上传计算器设计图，如图2-21所示。

蜗牛学苑宣传页项目介绍本实战项目主要完成蜗牛学苑鸿蒙宣传页的布局与美化，其效果如图2-23所示。蜗牛学苑宣传页开发思路通过手绘或绘图工具，对其网页结构进行初步分析。根据对线框图的分析，整个页面布局只需要4张表格，且4张表格均设置绝对的宽度和高度，同时相对于页面主体保持水平居中，且所有表格不需要边框。蜗牛学苑宣传页开发思路（1）为整个页面主体设置一张背景图，使用background属性即可设置背景图像。（2）第一个表格中共有1行6列，为单元格设置相应的宽度，并逐步调整到最合适的宽度，且单元格中的文字和图标需要设置正确的对齐方式、文字大小及文字颜色。整个表格的宽度为1100像素。（3）第二个表格设置为2行1列，且相对于body水平居中，同时设置相应的宽度，基本上可设置宽度为900像素左右。（4）第三个表格设置为3行4列，全部水平居中，单元格内容水平垂直居中，为每一行设置合适的高度、文字大小及间距。（5）第四个表格只需要1行2列，为单元格设置背景色，并设置相应的间距即可。蜗牛学苑宣传页代码实现蜗牛学苑宣传页利用Continue修改代码1．修改代码的提示词Continue主要用于代码的修改。请针对本HTML的源代码进行优化，让页面布局更加协调，如图片或文字的字体不能过大，图片和文字通常居中对齐比较好看，边框或线条不能过粗或颜色过深等。同时为页面中的超链接添加一些动画效果，为图片添加鼠标滑动的一些特效等。Continue添加上下文文件和提示词的操作及AI的思考和优化如图2-25所示。蜗牛学苑宣传页利用Continue修改代码2．生成代码及操作Continue将基于原代码来修改生成一份新的代码，代码中增加了CSS和动画，并使用盒模型替换了原本的表格布局。选择整体复制代码并覆盖原代码（此处省略生成的代码），此时可以在浏览器中预览其效果，如图2-26所示。CSS核心基础课件目录01CSS基础02CSS选择器03CSS元素样式04CSS3新增样式CSS基础CSS简介CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有字体、字号样式，拥有对网页对象和模型样式进行编辑的能力。CSS是从HTML4开始使用的，是为了更好地渲染HTML元素而引入的。CSS基础CSS的特点CSS为HTML提供了一种样式描述，定义了其中元素的显示方式。CSS是Web设计领域的一个突破，利用它可以实现修改一个小的样式并更新与之相关的所有页面元素。1．丰富的样式定义2．易于使用和修改3．多页面应用4．层叠5．页面压缩CSS基础CSS的使用CSS可以通过以下方式添加到HTML页面中。（1）内联样式：在HTML元素中使用style属性进行设置。（2）内部样式表：在HTML文档的头部<head>标签区域使用<style>标签来包含CSS。（3）外部引用：使用外部CSS文件，可以让一个CSS文件被多个页面引用。在使用CSS的过程中，主要通过选择器来定位某一个或一批元素，并为其设置相应的CSS属性和不同的值来实现不同的样式。CSS基础CSS的使用1．属性属性的名称是合法的标识符，它们是CSS语法中的关键字。一种属性规定格式修饰的一个方面，如color是文本的颜色属性，而font-size规定了文字的大小，background-color定义的是容器的背景色等。（1）属性的合法属性值。（2）属性的默认值。（3）属性所适用的元素。（4）属性的值是否被下一级继承。（5）如果某个属性能取百分值，那么该百分值将如何解释，也就是百分值所对应的标准是什么。例如，margin属性可以取百分值，它是相对于margin所存元素的容器的宽度。（6）属性所属的媒介类型组。CSS基础CSS的使用2．属性值（1）整数和实数：与普通意义上的整数和实数没有多大区别，但在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，如1.2E3在CSS中是不合法的。（2）长度量：一个长度量由整数或实数加上相应的长度单位组成。①em：当前文字的高度，也就是font-size属性的值。②ex：当前文字中小写字母x的高度。③px：一个像素的长度，其实际的长度由显示器的设置决定，例如，在1440像素×900像素的设置下，一个像素的长度就等于屏幕的宽度除以1440。值得注意的是，子级元素不继承父级元素的长度，只继承它们的实际值。（3）百分数量：百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和长度量一样，百分数量不被子级元素继承。CSS基础CSS的使用3．选择器（1）标签选择器：可以向一种元素类型的每个实例应用样式。（2）属性选择器：如ID选择器和Class选择器，通过设置元素的class属性或id属性来定位元素，甚至可以直接使用元素的内嵌属性style来直接设置样式；也可以通过HTML的传统属性来进行定位，如[type="button"]。（3）组合选择器：可以将多个基础选择器组合成更复杂的选择器。（4）伪类选择器：设计伪类和伪元素可以实现一些效果。借助伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。CSS基础CSS的使用4．style属性尽管在选择器中可以使用class和id属性值匹配元素，但style属性本身就可以替代选择器机制。与仅作为选择器引用标识的ID和Class不同，style属性的值直接包含一个或多个CSS声明。通常情况下，使用CSS时，设计者将把所有样式规则置于一个样式表中，该样式表位于文档顶部的style属性内（或在外部进行链接）。但是，使用style属性能够绕过样式表将声明直接放置到文档的开始标签中，从而更直接地影响某个元素，且style属性设置的样式具有最高优先级。它与ID选择器一样，主要的弊端是无法重用。CSS选择器标签选择器一个完整的HTML文档是由很多标签组成的，而标签选择器决定了哪些标签采用相应的CSS。例如，以下简单规则的选择器是td，因此规则作用于文档中所有的td元素。CSS选择器标签选择器CSS选择器标签选择器使用CSS修改后的在线计算器界面如图3-1所示。通过对标签<td>设置CSS，在线计算器的按键部分获得了同样的效果。但是，计算器顶部的3个小圆点也居中显示了，这是因为代码中针对所有

td

元素设置了相同的水平居中的属性，所以影响到了第1行的内容。CSS选择器ID选择器以下示例通过对单元格分别设置不同的CSS来达到使每一个单元格都显示不同样式的效果。CSS选择器ID选择器利用ID选择器设置表格样式后的效果如图3-2所示。CSS选择器Class选择器基于3.2.2小节的示例重新设置样式，使用CSS来对单元格设置样式，并对某个单元格设置多个Class选择器，所有样式就都会作用在这个单元格上，示例代码如下。CSS选择器Class选择器使用Class选择器优化表格后的效果如图3-3所示。CSS选择器组合选择器组合选择器可以结合所有标签、ID、Class等对元素进行灵活定位，算是基础选择器的升级版，也就是组合使用基础选择器，因为组合选择器中有一些CSS的专有语法，所以初学者比较难看懂，下面列举几个常用的组合选择器，如表3-1所示。CSS选择器伪类选择器伪类是指不需要显式声明的类，一般是页面自带的一些特别的类。开发者可以针对任何元素使用伪类，以实现一些页面特效。伪类选择器如表3-2所示。CSS元素样式文本与图像在HTML中，显示文本的标签非常多，通常使用比较多的是<p></p>和<span></span>以及后面会讲到的<div></div>。当然，单元格也可以存放文本，还有其他一些专门针对文本样式的预定义标签，如<h1>～<h6>、<i>、<b>等。这些标签都可以应用CSS。CSS元素样式文本与图像现在使用纯CSS来完成针对<p>或<span>标签的文本内容格式化，代码如下。CSS元素样式文本与图像（1）font-size：设置文本的文字大小，单位为像素，也可以使用相对单位，这将在后续章节中介绍。（2）font-style：文本风格，值为normal表示正常显示，值为italic表示斜体显示。（3）font-family：文本的字体名称，需要使用系统存在的字体名称，且不能输入错误，如果字体名称输入错误，则会使用系统的默认字体。（4）color：文本的颜色，使用颜色名或RGB编码均可。（5）font-weight：设置字体的粗细，值为bold时表示加粗。（6）width：设置元素的宽度。（7）border：设置元素的边框，这是一个组合属性，其是由如下3个属性构成的。①border-style：值为soild时表示边框为实线。当然，其值还可以为dashed（表示虚线）和dotted（表示点）等。②border-width：边框的宽度。③border-color：边框的颜色。CSS元素样式表格3.3.1小节的示例代码使用style属性来完成CSS属性的设置CSS元素样式超链接超链接默认情况下会有下画线，且颜色不可更改。在这种情况下，需要对超链接进行格式化，CSS中对超链接定义了下述4个伪类，分别应对超链接的4种情况。（1）a:link：超链接的默认显示样式。（2）a:hover：鼠标指针悬停时的样式。（3）a:active：单击时的样式。（4）a:visited：超链接被访问后的样式。CSS元素样式列表1．针对<ol>或<ul>标签（1）可以使用list-style组合属性，包括如下属性。①list-style-type：设置列表项标记类型，其可能的值及说明如表3-3所示。CSS元素样式列表CSS元素样式表单表单是网页中比较常见的元素，通常用于与用户进行数据交互。对于表单元素，通常会使用以下属性。（1）font系列属性：设置字体样式。（2）width和height系列属性：设置大小。（3）background：设置背景图像，与之相关的属性及说明如表3-5所示。CSS3新增样式边框阴影CSS3中增加了不少新的样式，本节先介绍其中比较常用的一些用于页面美化的样式，如边框阴影、边框圆角、背景固定与渐变等。边框阴影通过box-shadow进行设置，基本语法如下。box-shadow:x轴偏移量y轴偏移量

模糊半径

阴影扩散半径

阴影颜色

内外阴影（可选）。CSS3新增样式边框圆角CSS3中新增了边框圆角效果，可以使边框实现圆润过渡，如图3-11所示。CSS3新增样式背景固定与渐变如果想要使背景固定，则可以为元素设置background-attachment:fixed，或直接设置在背景整体属性background中。下述示例代码用于为body设置背景图并固定，无论怎么拖动滚动条，背景都保持不动。CSS3新增样式背景固定与渐变除固定背景图外，还可能需要使用背景渐变色来体现其层次，以提升页面的整体视觉效果。此时，便可以使用background-image属性来设置渐变色。图3-12展示了背景色从左到右、从白色到黑色的渐变效果。CSS3新增样式背景固定与渐变背景渐变的方向可取的值及说明盒模型与弹性布局课件目录01盒模型基础知识02盒模型浮动03盒模型内容04盒模型嵌套05盒模型定位06弹性布局盒模型基础知识盒模型简介盒模型（也可称为盒子模型）是CSS中的一个重要概念，理解了盒模型，才能更好地排版布局。盒模型具有外边距（margin）、边框（border）、内间距（padding）、内容（content）4个属性。每个属性都包括上、下、左、右4个部分，这4个部分可同时设置，也可分别设置。其中，内间距可以理解为盒子中装的东西到边框的距离，而边框有厚薄和颜色之分，内容就是盒子中装的东西，外边距就是边框外面自动留出的一段空白距离。盒模型基础知识盒模型属性利用margin、padding和border这3个属性（它们都是组合属性），可以用以下几种方式为盒模型设置上下左右的距离和宽度。1．使用组合属性（1）如margin:10px20px15px25px，对应的顺序为上边距、右边距、下边距、左边距，即盒模型顺时针方向4条边的边距。如果记不住这个组合属性的顺序，则可以使用单独属性。（2）如padding:10px20px15px25px，对应的顺序为上间距、右间距、下间距、左间距。（3）如border-width:10px20px15px25px，对应的顺序与上述顺序相同。（4）如margin:10pxauto，表示上下边距为10像素，左右边距为自动，即水平居中。padding和border也有同样的设置。（5）如margin:20px，即上、下、左、右的边距均为20像素。padding和border两个属性的设置方式与此相同。盒模型基础知识盒模型属性2．使用单独属性（1）外边距单独属性：margin-top、margin-right、margin-bottom、margin-left，分别用于设置元素上、右、下、左这4条边的外边距。（2）内间距单独属性：padding-top、padding-right、padding-bottom、padding-left，分别用于设置元素上、右、下、左这4条边的内间距。（3）边框单独属性：border-top、border-right、border-bottom、border-left，分别用于为上、右、下、左这4条边单独定义完整的边框。关于border，如果只设置其宽度，则是不会有任何效果的，还需要为其设置边框的类型和颜色。特别需要说明的是，当对同一个元素进行CSS属性设置时，按照CSS属性的顺序，后一个属性的值将覆盖前一个属性的值；针对相同属性，style属性设置的样式将覆盖<head>标签设置的样式。盒模型基础知识盒模型属性<body>标签的margin属性与padding属性类似，都只能针对<body>标签的内容进行内间距的设置。示例代码如下。盒模型基础知识盒模型基础布局关于盒模型在布局方面的优势，可以从以下两个方面来考虑：一是便于元素样式的统一分享和复用；二是布局灵活且可控，特别是在针对多屏（指计算机、平板计算机、手机这3类设备的屏幕）进行响应式布局时。盒模型浮动浮动的作用默认情况下，盒模型是独占一行的，不会与其他盒模型在同一行中。基于4.1.3小节的代码，再为其添加一个盒模型，示例代码如下。只需要设置盒模型的浮动属性为左浮动或右浮动，盒模型就不会独占一行，而是根据页面宽度及盒模型的宽度自动适配。盒模型浮动盒模型左浮动就像使用float:left设置列表项的横向排列一样，也可以对盒模型同样的设置，示例代码如下。盒模型浮动盒模型左浮动可以看到，浏览器中的两个盒模型并排到了同一行内。由于设置了盒模型向左浮动，因此盒模型的位置是不固定的，如果浏览器宽度足够的话，两个盒模型会并排显示，甚至3个或4个盒模型也可以做到并排显示。盒模型浮动盒模型右浮动浮动其实也代表着容器的对齐方式，如float:left表示容器靠左对齐。当设置为float:right时，浏览器在渲染的时候会优先将第一个出现的盒模型向HTML页面的右侧靠拢，第二个出现的盒模型会紧挨着第一个出现的盒模型。这个时候就会出现一个特别的现象，即在HTML页面中出现的第一个盒模型会使人感觉是第二个出现的。基于4.2.2小节的例子，修改float属性值为right，示例代码如下。盒模型浮动盒模型右浮动通常人们的阅读习惯是从左到右、从上到下，所以如果设置float属性值为right，则需要对盒模型的顺序进行调整，即决定哪一个盒模型先出现在HTML页面中。在上述示例中，如果要让“欢迎来到蜗牛学苑学习（一）”位于页面左边，则需要将其<body>标签部分的代码内容修改为如下。盒模型浮动禁止浮动既然可以设置盒模型浮动，自然也可以禁止其浮动。盒模型在默认情况下就是禁止浮动的，默认设置为float:none。盒模型大部分情况下并不需要刻意禁止浮动。因为CSS属性是可以传递和继承的，所以如果某个低层的盒模型元素继承并传递了更高层的属性，而它自己需要进行特别处理，则需要手动进行属性设置，以覆盖继承的高层次的属性。盒模型内容宽度与高度本小节主要讨论盒模型的宽度和高度都设置为100%的情况。将盒模型的宽度设置为100%时，其宽度会随着浏览器的宽度进行自适应调整，同时通过设置text-align:center可完成普通内容的水平居中。盒模型内容宽度与高度那么，如果想让一个元素的百分比高度（height:100%）起作用，则需要给这个元素的所有父元素的高度设定一个有效值。示例代码如下。盒模型内容水平居中在盒模型中可以放置任意内容，如一段文本、一张图像、一个表格，甚至另一个子容器盒模型等。那么对于内容的水平居中问题，有必要细致地了解。盒模型内容垂直居中本小节要讨论的是盒模型的垂直居中问题。为了模拟垂直居中，可以通过设置line-height属性来提升每一行内容的高度，这样可以间接实现内容的垂直居中。示例代码如下。盒模型内容内容溢出如果不设置盒模型的高度与宽度，也不设置盒模型的边框，盒模型中也没有内容，那么在页面中将什么都看不见。这就是手动设置这些属性的原因，这样可以在页面中更直观地观察盒模型的变化。盒模型嵌套嵌套的作用盒子与盒子之间、表格与盒子之间、容器与容器之间的嵌套在页面布局中是非常常见的。为了实现相对复杂的排版，必然要用到嵌套。有嵌套，就有父子关系，也就有包含与被包含关系，开发者非常有必要理清楚其中的关系，以便更加灵活地处理排版布局。盒模型嵌套套的排版什么叫作盒模型嵌套？简单来说，盒模型嵌套就是盒模型中嵌套盒模型，其所有属性都可以正常使用。但是在相互嵌套中，设置margin和padding属性时容易出现问题。示例代码如下。盒模型嵌套套的排版盒模型嵌套效果如图4-17所示。盒模型嵌套套的排版内层盒模型垂直居中于外层盒模型盒模型定位定位简介在盒模型中，可以设置盒模型为行级元素，或设置为浮动效果，使其按照文档流顺序进行排列。盒模型定位定位简介这里使用CSS的position属性来重新设置盒模型的位置。position属性有5个值，其值及说明如表4-1所示。盒模型定位固定定位这里设置一个盒模型，并设置其相对于浏览器窗口的固定定位，设置其距离浏览器窗口左边100像素，距离浏览器窗口顶部50像素，示例代码如下。盒模型定位固定定位4个盒模型并排并设置其编号的效果如图盒模型定位固定定位对上述代码进行微调，将第一个盒模型单独设置为固定定位，且不设置任何偏移量。代码只对第一个盒模型添加style属性并设置position:fixed，不做其他修改，代码修改部分如下。盒模型定位绝对定位继续利用4.5.2小节中的代码，将position:fixed修改为position:absolute，运行代码后可以看到，盒模型在浏览器窗口中显示的位置与固定定位的效果没有任何不同。盒模型定位相对定位相对定位是指盒模型相对于原本位置的偏移量。相对定位不会脱离文档流，只是相对于其原本在文档流中的位置进行了相应的偏移，同样使用left、top、right或bottom属性设置偏移量。示例代码如下。盒模型定位其他属性1．z-index属性当多个盒模型重叠在一起时，z-index属性用于设置哪个位于最上层（即用户可见的那一层）。z-index属性的值是一个数字，是一个相对的概念，没有特别的值，可以任意设置。为多个盒模型设置z-index属性的值时，哪个盒模型的值最大，哪个盒模型就会显示在最上层。这对盒模型为绝对定位时比较有效，如果是浮动定位，则全部文档流按顺序显示。2．clear属性clear属性的意思是清除浮动。针对一些设置了float属性的容器，如果要让其不再浮动，单独成一行，则可以使用clear:both将浮动清除。盒模型定位其他属性3．display属性display属性通常用于设置某个元素是显示还是隐藏。display:none表示该元素被隐藏，将无法在页面中正常显示；而display:block表示该元素被显示。除此之外，display属性有一个非常特别的值，即display:flex，表示设置该元素为弹性布局。所谓弹性，指可以自由设置自适应高度和宽度、自适应内容，自由变换大小，自由设置显示顺序等，具备更加灵活的特点。在当前针对移动端的页面进行布局时，弹性布局是主流。弹性布局是盒模型中非常重要的一个知识点，4.6节将对其进行重点介绍。弹性布局弹性布局简介1．什么是弹性布局弹性布局可以很好地解决盒模型+CSS布局中存在的居中调整不方便、浮动重叠，以及细节调整过多等问题，也能够更好地适配移动端。弹性布局在针对移动端的页面布局中具有举足轻重的地位。2．弹性布局的原理弹性布局的核心概念有两个：弹性容器和弹性项目。弄懂这两个概念后，掌握弹性布局就简单多了。

3．弹性项目的排列方式弹性项目在弹性容器中的排列是分主轴和侧轴的，且主轴和侧轴是相互垂直的。无论是主轴还是侧轴，在页面中都是在水平或垂直方向进行选择的。弹性布局弹性布局相关属性弹性布局提供了非常多的CSS属性，根据使用的标签不同，可以将这些CSS属性分为两种：弹性容器专属属性和弹性项目专属属性。弹性布局弹性布局相关属性弹性布局弹性布局相关属性同时，在弹性布局中，如果将弹性项目（即#boxdiv）的每个盒模型的宽度都设置为1000像素，则可以看到浏览器会正常显示每个盒模型，且宽度进行了自适应调整，不会出现水平滚动条，其效果如图4-28所示。但是在非弹性布局中，由于浏览器宽度的限制，是无法对4个盒模型全部进行显示的，因此会出现水平滚动条。弹性布局富余空间富余空间是指在弹性容器一行中扣除该行所有弹性项目所占宽度之后的剩余空间。弹性容器针对富余空间的处理有以下两种方式。（1）作为弹性项目之间的间隙。（2）将空间分配给弹性项目，扩展弹性项目的宽度。负责将富余空间作为间隙处理的CSS属性有以下两个。（1）justify-content：处理主轴上的富余空间，其实就是设置弹性项目在主轴上的对齐方式。（2）align-content：设置侧轴上富余空间的处理方式。弹性布局弹性空间弹性空间指的是一个弹性项目本身的尺寸加上通过分配所得到的富余空间的总和。有的时候需要弹性项目有一定的尺寸自适应效果，以达到更好的页面效果，即对主轴或侧轴的富余空间不作为间隙处理，而是直接分配给弹性项目作为其空间的一部分。如何对此进行分配呢？每个弹性项目都有一个弹性因子专门用于指定当前弹性项目能够占领富余空间的比例。例如，一个弹性容器中有4个弹性项目，如果设置每个弹性项目的弹性因子为1，那么富余空间会被平均分成4份并分配给每个弹性项目。如果有两个弹性项目的弹性因子为2，另外两个弹性项目的弹性因子为1，那么弹性容器会将富余空间平均分成6份，其中，弹性因子为2的弹性项目会获得2份空间，其他弹性项目获得1份空间。弹性布局弹性空间下述代码演示了如何使用flex-grow属性（弹性因子）来进行弹性空间的分配，不同弹性项目占用富余空间后的宽度如图4-30所示。布局项目实战课件目录01在线计算器布局02蜗牛学苑宣传页布局03响应式布局04蜗牛笔记布局在线计算器布局项目介绍本实战项目主要结合第2章完成的在线计算器的布局，对第2章的基于表格完成的布局利用盒模型+CSS进行改造，基本需求描述如下。（1）全部使用盒模型标签完成，不得使用其他标签。（2）3个小圆点使用盒模型完成，利用盒模型的圆角属性完成圆形设计。（3）结果框为红色边框加白色背景，计算器的四周为圆角。在线计算器界面如图5-1所示。在线计算器布局开发思路先从总体上对在线计算器进行布局分析，其需要一个完整的父容器，即最外面的那一层容器，其大小和宽度可以参考第2章的设置。将背景色铺满整个容器，背景色为灰色。再从上而下来分析在线计算器的布局，需要在第1行盒模型中实现3个小圆点，如果盒模型是一个正方形，且圆角足够圆，圆到其半径是正方形边长的一半，则可以将一个正方形变成一个圆形，结合第一行盒模型的容器对距离进行控制，即可模拟出圆点。接下来设计结果框，要求是白色背景加黑色边框，所以在此只需要设置一个盒模型，并保持其相对于父容器水平居中（margin:0auto）即可。最后设计在线计算器的按键部分，按键部分完全可以由单个盒模型构成，只需要为所有按键设置一个父容器，并为各按键设置向左浮动即可。在线计算器布局代码实现具体的实现代码如下，请关注代码的注释部分。蜗牛学苑宣传页布局项目介绍利用盒模型+CSS的布局方式实现的蜗牛学苑Java培训宣传页如图5-2所示。该宣传页顶部导航菜单栏是固定且半透明的，同时页面两边有两个页面内导航工具栏，无论页面如何移动，该工具栏始终存在且一直在固定位置出现。蜗牛学苑宣传页布局项目介绍其次，根据线框图对该页面进行拆分和编号，主要包括顶部导航栏、中上部提问栏、中下部回答栏、底部超链接栏、左右两边的工具栏。下述分析将基于这个线框图和对应位置区域的编号进行。①

整个页面的文字颜色都是白色，字体都是“微软雅黑”，在这种情况下，可以直接针对<body>标签设置这两个全页面的公共属性。②

顶部导航栏是1行N列的样式，只需要设置一个父容器，并相对于浏览器窗口水平居中，在其内部再放置N个盒模型并设置为浮动或使用弹性布局即可。③

中上部提问栏的内容（即“开发者们为何喜欢Java？”）相对简单，需要两个盒模型，只需要设置好其高度、宽度、大小和padding属性即可。④

关于中下部回答栏的内容，即3行4列的格子组合，可以通过表格来实现，即先绘制一个3行4列的表格，并设置相同的宽度和不同的高度，再设置一定的padding属性保持内容之间的距离即可。蜗牛学苑宣传页布局项目介绍⑤

底部的两个超链接按钮实现了一个圆角、一个超链接、一个背景色，这些都是相对简单的处理，此处不再分析，直接看代码实现部分即可。⑥

左、右两边的工具栏是固定于浏览器窗口中的，只需要为其设置position:fixed即可。左边的工具栏只是一张图像，利用一个盒模型进行放置即可；右边的工具栏是导航工具栏，有9行1列，也可以利用盒模型来实现，这里利用列表项来实现，只需让列表项不显示前面的数字或小圆点之类的风格即可。蜗牛学苑宣传页布局代码实现1．页面顶部代码实现蜗牛学苑宣传页布局代码实现2．页面主体部分代码实现2．页面主体部分代码实现蜗牛学苑宣传页布局代码实现2．页面主体部分代码实现蜗牛学苑宣传页布局代码实现3．实现左、右工具栏实现左、右工具栏的界面绘制及固定定位，实现代码如下。蜗牛学苑宣传页布局代码实现响应式布局响应式布局简介响应式布局是伊桑·马科特在2010年5月提出的一个概念，其是指一个网站能够兼容多个终端，而不是为每个终端制作一个特定的版本。响应式布局可以为不同终端的用户提供舒适的界面和良好的用户体验，随着目前大屏幕移动设备的普及，其发展与应用已是“大势所趋”。随着越来越多的设计师采用这种技术，不仅出现了很多创新，还出现了一些成形的模式。响应式布局的优点如下。（1）面对不同分辨率的设备有较高的灵活性。（2）能够快捷地解决多设备显示适应问题。响应式布局的缺点如下。（1）兼容各种设备导致工作量增加，效率低。（2）代码累赘，会出现隐藏的、无用的元素，页面加载时间加长。响应式布局响应式布局简介其实响应式布局是一种折中性质的设计解决方案，受多方面因素影响而达不到最佳效果，且其在一定程度上改变了页面原有的布局结构，会影响用户体验。例如，蜗牛笔记采用响应式布局实现的PC端页面效果如图5-7所示，移动端页面效果如图5-8所示。响应式布局媒体查询1．什么是媒体查询媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color等。使用媒体查询，可以让开发者根据设备显示器的特性（如视口宽度、屏幕比例、设备方向）为其设定CSS，可以在不改变页面内容的情况下，为一些特定的显示设备定制显示效果。媒体查询通过不同的媒体类型和条件定义样式表规则，使CSS可以更精确地作用于不同的媒体类型和同一媒体的不同条件。响应式布局媒体查询2．媒体查询能够获取的值（1）width：浏览器可视宽度。（2）height：浏览器可视高度。（3）device-width：设备屏幕分辨率的宽度。（4）device-height：设备屏幕分辨率的高度。（5）orientation：检测设备目前处于横向还是纵向状态。（6）aspect-ratio：检测浏览器可视宽度和可视高度的比例。（7）device-aspect-ratio：检测设备的宽度和高度的比例。（8）color：检测颜色的位数。（9）color-index：检查设备颜色索引表中的颜色，值不能是负数。（10）monochrome：检测单色帧缓冲区域中的每个像素的位数。（11）resolution：检测屏幕或打印机的分辨率。（12）grid：检测输出设备是网络设备还是位图设备。响应式布局媒体查询3．语法结构及示例媒体查询的基本语法结构如下。@media设备一only（选取条件）not（选取条件）and（设备选取条件），设备二{声明块}示例1：在<link>标签中使用@media，代码如下。<linkrel="stylesheet"type="text/css"media="onlyscreenand(max-width:800px),onlyscreenand(max-device-width:800px)"href="link.css"/>上述代码表示当浏览器可视最大宽度和设备屏幕分辨率的最大宽度为800像素时，导入link.css文件。响应式布局媒体查询示例2：在样式表中内嵌@media，代码如下。<style>@mediascreenand(min-width:720px){div{border:solid5pxred;font-size:20px;}}</style>参数解释如下。①only：可省略。②max-width：浏览器可视最大宽度。③max-device-width：设备屏幕分辨率的最大宽度。响应式布局媒体查询4．综合运用PC端的显示器是横向布局的，即屏幕分辨率的宽度要大于高度，如分辨率为1600像素×900像素时，1600像素是宽度，900像素是高度。而在移动端刚好相反，即宽度要小于高度，如分辨率为1920像素×1080像素时，1920像素是高度，而1080像素是宽度。所以，同一个页面中，在移动端和PC端需要实现不同的布局以更好地适应屏幕。以下示例演示了一个简单的PC端和移动端自适应的响应式布局。PC端显示器一行显示了4格，是横向布局；当屏幕分辨率的宽度低于1080像素时，认为是在移动端访问，将1行4列调整为2行2列。示例代码如下。响应式布局媒体查询响应式布局Bootstrap框架1．栅格系统栅格系统通过一系列的行与列的组合来创建页面布局。其核心思想是先设置一个网页的固定宽度，再对其进行12等分。同时，针对不同分辨率的屏幕进行单独的设定，可以在不同分辨率的情况下，为每一列设置不同的宽度，进而实现响应式布局。表5-1展示了Bootstrap4.x下的栅格系统对应分辨率。响应式布局Bootstrap框架2．综合运用响应式布局Bootstrap框架蜗牛笔记布局整体风格蜗牛笔记是一个博客网站，其界面设计的重点在于让用户快速地找到自己感兴趣的文章，所以在风格设计上不应过于复杂，也不宜设计过多的功能。本书将其整体界面设计为3个部分：顶部导航栏、中部内容栏和底部附加栏。读者可以使用Windows操作系统自带的画图软件绘制图5-15所展现的界面布局。蜗牛笔记布局整体风格为了更好地适配移动端，可以将放置Logo的行缩小，将用户菜单和文章分类折叠为分类导航折叠按钮，使内容呈现的主要区域（主内容区域）占满移动端屏幕，将搜索框和文章推荐栏放置于主内容区域的下面，底部的网站附加功能可以隐藏，也可以直接收缩显示。蜗牛笔记移动端页面布局大致类似于图5-16。蜗牛笔记布局顶部设计顶部的设计主要分为两个区域：Logo区域和导航栏区域。1．Logo区域Logo区域由一张图像和一条文字标语组成，只需要设计1300像素的宽度，并实现水平居中，同时确保Logo和标语垂直居中即可，基础代码如下。蜗牛笔记布局顶部设计2．导航栏区域导航栏的设计本身比较简单，但是考虑到需要适配移动端，所以仍然需要借助Bootstrap的响应式布局。同时，移动端由于宽度不够，无法正常显示所有菜单，因此必须通过折叠的方式对菜单进行隐藏，并将横向菜单变成竖向菜单。示例代码及其注释如下。蜗牛笔记布局顶部设计蜗牛笔记布局中部设计中部页面分为左、右两栏，PC端设计为左边9列、右边3列的宽度，而在移动端设计为全部12列的宽度以迫使元素竖向布局。通常在设计静态页面时，由于静态页面没有从数据库中获取数据进行填充的能力，因此可以直接使用一些固定在HTML页面中的图像和文字进行填充，待最后进行前后端整合的时候再进行替换。通过这样的方式能够看到完整的页面设计效果蜗牛笔记布局中部设计上述框架图并没有使用画图软件进行绘制，而是通过在HTML代码中添加盒模型并设置边框来实现的，这样后续只需要向其中填充内容即可。示例代码如下。蜗牛笔记布局中部设计线框图设计完成后，可以开始填充静态内容，以实现最终的页面效果，具体步骤如下。（1）在放置轮播图的位置，准备大约3张图像，并使用Bootstrap的轮播组件实现轮播效果。（2）在文章摘要部分，准备一张图像用于显示文章缩略图。文章缩略图放置于该部分的最左侧，并设置为在移动端环境下隐藏，以让出位置显示文章标题和正文摘要。同时，为了使首页能够显示一样大小的缩略图，建议通过CSS属性强制设置该图像的宽度和高度。文章摘要部分的正文部分可以使用3行显示内容的样式，即第1行显示文章标题，第2行显示文章信息，第3行显示正文摘要。（3）文章搜索栏只需要显示一个用于输入关键字的文本框，以及一个用于搜索的搜索按钮即可。（4）文章推荐栏部分设置为两行，第1行显示标题，第2行显示文章列表，并使用<ul>标签进行设置。蜗牛笔记布局中部设计下述代码为完整的中部区域的HTML代码，请根据代码注释进行理解。蜗牛笔记布局利用AI生成轮播图轮播效果需要JavaScript的支持，在Bootstrap中需要加载JavaScript组件库才能完成。如果读者想要为页面添加轮播图，则可以借助Cline或Continue进行处理。新建一个HTML源文件并交给Cline或Continue进行处理。提示词如下。请基于Bootstrap4.X框架，生成3张轮播图像，图像路径为../image，图像文件名称为banner-1.jpg、banner-2.jpg和banner-3.jpg。此处编者使用Continue结合Claude3.7模型生成轮播图，代码如下。弹性布局弹性布局简介1．什么是弹性布局弹性布局可以很好地解决盒模型+CSS布局中存在的居中调整不方便、浮动重叠，以及细节调整过多等问题，也能够更好地适配移动端。弹性布局在针对移动端的页面布局中具有举足轻重的地位。2．弹性布局的原理弹性布局的核心概念有两个：弹性容器和弹性项目。弄懂这两个概念后，掌握弹性布局就简单多了。

3．弹性项目的排列方式弹性项目在弹性容器中的排列是分主轴和侧轴的，且主轴和侧轴是相互垂直的。无论是主轴还是侧轴，在页面中都是在水平或垂直方向进行选择的。弹性布局弹性布局相关属性弹性布局提供了非常多的CSS属性，根据使用的标签不同，可以将这些CSS属性分为两种：弹性容器专属属性和弹性项目专属属性。弹性布局弹性布局相关属性弹性布局弹性布局相关属性同时，在弹性布局中，如果将弹性项目（即#boxdiv）的每个盒模型的宽度都设置为1000像素，则可以看到浏览器会正常显示每个盒模型，且宽度进行了自适应调整，不会出现水平滚动条，其效果如图4-28所示。但是在非弹性布局中，由于浏览器宽度的限制，是无法对4个盒模型全部进行显示的，因此会出现水平滚动条。弹性布局富余空间富余空间是指在弹性容器一行中扣除该行所有弹性项目所占宽度之后的剩余空间。弹性容器针对富余空间的处理有以下两种方式。（1）作为弹性项目之间的间隙。（2）将空间分配给弹性项目，扩展弹性项目的宽度。负责将富余空间作为间隙处理的CSS属性有以下两个。（1）justify-content：