Chinatown666的博客

此时,模态框并不能在页面上显示出来,我们需要将它与缩略图中的“译文”“评论”按钮建立关联,为两个按钮增加 data-toggle 属性和 data-target 属性, data-target 的取值就是上面为模态框定义的id值。（1）首先增加标签，再在标签内添加一个标签，为它增加.carousel类和.slide类，并设置id为carouselPic。注意：属性data-target的值，要与需要折叠展开的导航栏id，保持相同。

此时,模态框并不能在页面上显示出来,我们需要将它与缩略图中的“译文”“评论”按钮建立关联,为两个按钮增加 data-toggle 属性和 data-target 属性, data-target 的取值就是上面为模态框定义的id值。（1）首先增加标签，再在标签内添加一个标签，为它增加.carousel类和.slide类，并设置id为carouselPic。注意：属性data-target的值，要与需要折叠展开的导航栏id，保持相同。

页面在逻辑宽度大于 992px （Large, Extra large）时的样式，如项目图12-1所示。该项目在逻辑宽度小于992px （Extra Small, Small, Medium）时的部分样式，如项目图12-2所示。第一行又分为左右两个区域，如项目图12-5，第一行左区域是读者个人信息，第一行右区域是四个作品选项图。当宽度小于992px时，此部分的元素会变成两行两列的效果，如项目图12-7所示。在第一行右区域，还有一个包裹在内部的行（.row），它用来显示4个作品，每一个作品所占的宽度均。

页面在逻辑宽度大于 992px （Large, Extra large）时的样式，如项目图12-1所示。该项目在逻辑宽度小于992px （Extra Small, Small, Medium）时的部分样式，如项目图12-2所示。第一行又分为左右两个区域，如项目图12-5，第一行左区域是读者个人信息，第一行右区域是四个作品选项图。当宽度小于992px时，此部分的元素会变成两行两列的效果，如项目图12-7所示。在第一行右区域，还有一个包裹在内部的行（.row），它用来显示4个作品，每一个作品所占的宽度均。

position 设置为绝对定位。堆叠顺序设置为“-1”。right设置为“100px"。bottom 设置为“0”。宽度设置为“500px”。animation执行动画“showContentl完成后部分效果如项目图11-5所示：项目图11-5content整体效果展示1. 0%的部分。right设置为 “50px”。top 设置为“350px”。transform 设置为"rotateX（0deg）。2. 10%的部分：透明度设置为“1”。

position 设置为绝对定位。堆叠顺序设置为“-1”。right设置为“100px"。bottom 设置为“0”。宽度设置为“500px”。animation执行动画“showContentl完成后部分效果如项目图11-5所示：项目图11-5content整体效果展示1. 0%的部分。right设置为 “50px”。top 设置为“350px”。transform 设置为"rotateX（0deg）。2. 10%的部分：透明度设置为“1”。

（1） ＜guidance>中的div 部分：添加新内容，外边距设置为 30px 属性值为 “auto”；3.背景图片设置內 “images” 文件夹中的 “h2BG.png”图片设置为不重复。4.1.justify-content 设置为：space-between；4.justify-content 设置为：space-between；3.justify-content 设置为：space-around；5.文字对齐方式设置为：居中对齐、行高设置为：100px；1.宽度设置为：110px；

（1） ＜guidance>中的div 部分：添加新内容，外边距设置为 30px 属性值为 “auto”；3.背景图片设置內 “images” 文件夹中的 “h2BG.png”图片设置为不重复。4.1.justify-content 设置为：space-between；4.justify-content 设置为：space-between；3.justify-content 设置为：space-around；5.文字对齐方式设置为：居中对齐、行高设置为：100px；1.宽度设置为：110px；

分析其原因，由于部分的两 个子元素#content和#story均被设置为浮动，会脱离文档流，造成main中没有任何内容用 以撑起高度，footer部分就跟着排在了只剩下一条线的main下面，这就是布局塌陷。用 sublime 编辑器打开素材文件夹中的 libai-experience.html 页面，使用标记引入css 文件夹中的“main.css”与"libai-experience.css”两个css文件。（2）上下边框：宽度1px，边框线的类型：实线，颜色：“#aaa”。

分析其原因，由于部分的两 个子元素#content和#story均被设置为浮动，会脱离文档流，造成main中没有任何内容用 以撑起高度，footer部分就跟着排在了只剩下一条线的main下面，这就是布局塌陷。用 sublime 编辑器打开素材文件夹中的 libai-experience.html 页面，使用标记引入css 文件夹中的“main.css”与"libai-experience.css”两个css文件。（2）上下边框：宽度1px，边框线的类型：实线，颜色：“#aaa”。

请将 questionnaire1.html 另存为 questionnaire2.html，在该文件中引用 main.css 样式文件，即在标签中加入

请将 questionnaire1.html 另存为 questionnaire2.html，在该文件中引用 main.css 样式文件，即在标签中加入

项目七的素材文件是项目三的结果文件 libai-representativeworks2.html 和 main.css，将此素材网页文件另存为 libai-representativeworks3.html，本次实践将完成李白代表作品页面的CSS部分，libai-representativeworks.css 文件用来存放本页面独有的css 属性样式。（2） #guidance ul li： 设置其背景色为黑色，列表项无圆点，行内块级元素，宽度为。（2）设置图片边框：文件为7-border.png.

项目七的素材文件是项目三的结果文件 libai-representativeworks2.html 和 main.css，将此素材网页文件另存为 libai-representativeworks3.html，本次实践将完成李白代表作品页面的CSS部分，libai-representativeworks.css 文件用来存放本页面独有的css 属性样式。（2） #guidance ul li： 设置其背景色为黑色，列表项无圆点，行内块级元素，宽度为。（2）设置图片边框：文件为7-border.png.

背景音乐 ->、＜！--页面尾部-->、.••、、标签将。（2） 标签：将注释背景音乐部分，即文字〝背景音乐”，将添加到标签。此部分作为页面的尾部导航，因此将使用、、等标记，版权等使用。--1导读-->部分的内容，用＜pre＞标签结构化。①：根据注释，将中的内容用标签结构化。

（1）请将 dufu-achievement.html 页面按项目图6-1所示进行结构划分，在各个区域的上下分别加入开始和结束标签，需要用到、、、和等语义标签和标签，需要用到、、、和（4）设置guidance中的div部分：宽度为500px。（2）设置id 为top 的div 标签：宽度为100%，高度 50px，背景图片“repeatBG.，png”

（1）请将 dufu-achievement.html 页面按项目图6-1所示进行结构划分，在各个区域的上下分别加入开始和结束标签，需要用到、、、和等语义标签和标签，需要用到、、、和（4）设置guidance中的div部分：宽度为500px。（2）设置id 为top 的div 标签：宽度为100%，高度 50px，背景图片“repeatBG.，png”

背景音乐 ->、＜！--页面尾部-->、.••、、标签将。（2） 标签：将注释背景音乐部分，即文字〝背景音乐”，将添加到标签。此部分作为页面的尾部导航，因此将使用、、等标记，版权等使用。--1导读-->部分的内容，用＜pre＞标签结构化。①：根据注释，将中的内容用标签结构化。

项目图4-1最终效果。2. 利用表格标记，进行表单布局，利用表格的 background 属性设置tableBg.jpg。1. 设置表单的 action 属性，将用户填写的内容以 post 方式提交到 ok.html 页。questionnaire1.html 的部分，按项目图4-1所示的效果完成下列步骤。唐代诗词是同学们从小就开始背诵的，本次项目主要完成一个古诗词的调查问卷，本项目创建“唐朝诗人群像”网站的第二个页面，即“古诗词调查问卷”表单。

项目图4-1最终效果。2. 利用表格标记，进行表单布局，利用表格的 background 属性设置tableBg.jpg。1. 设置表单的 action 属性，将用户填写的内容以 post 方式提交到 ok.html 页。questionnaire1.html 的部分，按项目图4-1所示的效果完成下列步骤。唐代诗词是同学们从小就开始背诵的，本次项目主要完成一个古诗词的调查问卷。本项目创建“唐朝诗人群像”网站的第二个页面，即“古诗词调查问卷”表单。

项目三中素材文件夹中的“libai-representativeworks1.htm/”文件是项目二的结果文件，将其另存为"libai-representativeworks2.html”。将素材文件中两个部分的文字内容粘贴到网页文件的相应位置，模仿“早年天才”部分 代码，根据项目图3-4所示，为“蹉跎岁月”和“赋歌而终”两个部分添加相应的HTML标。在“题材介绍”标题下方添加表格，其id设置为"themelntro”为了清晰显示，利用HTML属性将边框粗细设置为1px，如项目图3-7所示，。

项目三中素材文件夹中的“libai-representativeworks1.htm/”文件是项目二的结果文件，将其另存为"libai-representativeworks2.html”。将素材文件中两个部分的文字内容粘贴到网页文件的相应位置，模仿“早年天才”部分 代码，根据项目图3-4所示，为“蹉跎岁月”和“赋歌而终”两个部分添加相应的HTML标。在“题材介绍”标题下方添加表格，其id设置为"themelntro”为了清晰显示，利用HTML属性将边框粗细设置为1px，如项目图3-7所示，。

（1）继续按项目图 2-1 所示添加段落、标题、列表、等块级标签，（2）注释部分：“渡荆门送别”、“荆门”、“楚国”、“月下飞天镜”、“海楼”6 个部分文字。②在“联系我们 |”、“关于我们 |”、“隐私声明 |”、“意见反馈”之前加入特殊符号空格。则，在合理的位置添加等标签。③ 在“Copyright ”和“书剑风雪的优快云”之间，加入版权符号。①在“荆门送别”、“[唐]李白” 之前加入特殊符号空格。

③ 在“Copyright ”和“书剑风雪的优快云”之间，加入版权符号。（1）继续按项目图 2-1 所示添加段落、标题、列表、等块级标签，（2）注释部分：“渡荆门送别”、“荆门”、“楚国”、“月下飞天镜”、“海楼”6 个部分文字。②在“联系我们 |”、“关于我们 |”、“隐私声明 |”、“意见反馈”之前加入特殊符号空格。则，在合理的位置添加等标签。根据项目图 2-1 的效果添加行内元素。项目图 2-2 页尾部分的列表设置。

将文件名设置为 introduction-libai，保存类型设置为“HTML”,并保存到 D 盘根目录下的。body 部分控制网页中的内容，如图片、文字和横线。CSS 部分控制网页元素的样式，② 打开“素材”文件夹中的“李白简介素材.txt”文本文档，将其中文字粘贴到。③ 参考项目图 2 中给出的代码，在合适的位置添加上 html 标记。④ 注意图片插入时标记的使用，路径和文件名的写法。如字体、字号和背景色等样式，参考代码如项目图 2 所示。请仿照项目图 1，利用提供的素材进行网页代码编写。

将文件名设置为 introduction-libai，保存类型设置为“HTML”,并保存到 D 盘根目录下的。body 部分控制网页中的内容，如图片、文字和横线。CSS 部分控制网页元素的样式，② 打开“素材”文件夹中的“李白简介素材.txt”文本文档，将其中文字粘贴到。③ 参考项目图 2 中给出的代码，在合适的位置添加上 html 标记。④ 注意图片插入时标记的使用，路径和文件名的写法。如字体、字号和背景色等样式，参考代码如项目图 2 所示。请仿照项目图 1，利用提供的素材进行网页代码编写。

建议使用Visual Studio Code Insider 进行开发，或者使用sublime，因特殊条款原因，不建议使用Notepad++

盘根目录，压缩包上右键选择“解压到当前文件夹”，然后在“实验”文件夹中的“实践练习”文件夹下新建文件index.html，然后用notepad++或者记事本打开。下载“实验”压缩包到。