实验教学网站建设策划方案,安庆网站开发,vue旅游网站怎么做,烟台做外贸网站建设1.项目1 文本与段落标记的应用#xff1a;
A.题目要求: B.思路#xff1a;
#xff08;1#xff09;首先#xff0c;HTML文档的基本结构是通过html.../html标签包围的#xff0c;包含了头部信息和页面主体内容。
#xff08;2#xff09;在头部信息…1.项目1 文本与段落标记的应用
A.题目要求: B.思路
1首先HTML文档的基本结构是通过html.../html标签包围的包含了头部信息和页面主体内容。
2在头部信息中使用meta charsetutf-8指定文档的字符编码为UTF-8以确保正确显示中文字符。
3在style标签内定义了一些CSS样式类以用于后续的文本格式化。
包括居中、居右、居左以及小标题和斜体蓝色体文本。
4页面主体内容从body.../body标签开始。
针对文本信息的格式化部分分为四个部分
a. [1.标题字应用]使用p标签并应用了CSS类left-align和special-title来创建一个左对齐的特殊标题文本块之后运用h1和h4并应用CSS类显示格式不同的标题字。
b. [2.段落、字体标记应用]使用p标签包含了一段文本其中使用了font标签来指定字体、大小和CSS类blue-text来设置蓝色文本颜色。
c. [3.文本标记应用]创建了一个包含数学表达式和地址等其它内容的文本块使用strong标签来加粗文本、i标签或者calss中的“italic-text”两种方法显示斜体文本并使用blockquote成文本块。
d. [4.其它标记应用]使用pre 标签来预格式化文本包含了不同的字体和颜色。
诗歌文本以不同的字号和颜色显示使用 或者直接空格来插入空格。
hr 标签插入另一水平线颜色为紫色线宽为3像素。
C.总体代码
!DOCTYPE html
html
headmeta charsetutf-8title格式化文本信息/titlestyle.center-align {text-align: center;}.left-align {text-align: left;}.right-align {text-align: right;}.special-title {font-weight: bold;font-size: 17px;}.italic-text {font-style: italic;}.blue-text {color: blue;}/style
/head
bodyp classleft-align special-title[1.标题字应用]/ph1 classcenter-alignruby软件工程/ruby是全国就业薪酬涨幅最大的专业/h1h4软件工程是全国就业薪酬涨幅最大的专业/h4h4 classright-alignruby软件工程/ruby是全国就业薪酬涨幅最大的专业/h4hr color#ff3333p classleft-align special-title[2.段落、字体标记应用]/ppfont face隶书 size5 classblue-textnbsp;nbsp;nbsp;nbsp;网页的本质就是超级文本标记语言通过结合使用其他的Web技术如脚本语言、公共网关接口、组件等可以创造出功能强大的网页。/font/pp classleft-align special-title[3.文本标记应用]/pp classleft-alignstrong2Xsup2/sup3x9/strongnbsp;nbsp;nbsp;nbsp;ixsub1/subxsub2/sub10/i/pp classleft-align italic-texti地址江苏省南京市珠江路1924号/i/pblockquote超级文本标记语言是标准通用标记语言下的一个应用也是一种规范一种标准通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件通过在文本文件中添加标记符可以告诉浏览器如何显示其中的内容如文字如何处理画面如何安排图片如何显示等。/blockquotep classleft-align special-title[4.其它排版标记应用]/pprefont size7 colorrednbsp;nbsp;春nbsp;nbsp;思/fontfont size5nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;--李白燕草如碧丝秦桑低绿枝。当君怀归日是妾断肠时。春风不相识何事入罗帏【评析】这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物起兴写独处秦地的思妇触景生情终日思念远在燕地卫戍的夫君盼望他早日归来。三、四句由开头两句生发而来继续写燕草方碧夫君必定思归怀己此时秦桑已低妾已断肠进一层表达了思妇之情。五、六两句以春风掀动罗帏时思妇的心理活动来表现她对爱情坚贞不二的高尚情操。全诗以景寄情委婉动人。/font/prehr color#ff00ff size3
/body
2.项目2 设计新闻访问列表
A.题目要求: B.思路
1首先title 标签定义网页的标题然后在style 标签内定义了一些CSS样式用于设置页面元素的外观。
2CSS样式定义
.bt 样式定义了一些特定文本的样式包括字体大小、字体类型、边距和填充。
.div1 样式定义了一个具有固定宽度、高度和边框的div元素。
ul 样式定义了无序列表的样式包括标志符号的类型、字体大小、行高和文本颜色。
h2 样式定义了标题2的样式包括字体大小、背景颜色、文本颜色和边距。
3页面内容
div 元素的id 属性为空class 为 div1用于包裹新闻内容。
h2 标签用于显示新闻的标题 科研发展应用了样式定义。
p 标签包含了一些文本内容使用了样式 bt表示高校资讯和科研相关信息。
ul 标签表示无序列表其中包含了多个新闻条目。
li 标签用于每个新闻条目展示不同的新闻标题。
C.总体代码
!DOCTYPE html
htmlheadmeta charsetutf-8title无序列表实现新闻展示/titlestyle typetext/css.bt{font-size: 22px;font-family: 黑体;margin:0 auto;padding: 0 20px;}.div1{width:530px;height:280px;border:1px solid #ccff99;}ul{list-style-type: disc;font-size: 22px;line-height: 33px;color: blue;}h2{font-size: 32px;background-color: #ebebeb;color: #000099;margin: 0 auto 10px auto;}/style/headbodydiv id classdiv1h2科研发展/h2p classbt高校资讯 科技前沿 成果展示 学术会议/pulli国防科技大学员问鼎2014国际数模竞赛最高奖 /lili同济大学教授阮仪三获2014亨利•霍普•里德奖/lili中科大徐春叶教授获2014年国际材料科学奖 /lili北京和睦家医院肺癌诊疗会诊中心成立/lili兰州大学博士生获全国优秀博士学位论文提名/li/ul/div/body
/html
3.项目3 设计制度宣传展板
A.题目要求: B.思路
1首先title 标签定义网页的标题在style 标签内定义了一些CSS样式用于设置页面元素的外观。
2CSS样式定义
body 样式定义了整个页面的文本居中、字体大小和粗细。
h1 样式定义了标题 大型分析仪器管理办法 的样式包括字体大小、字体类型、背景颜色、文本颜色和边距。
.div1 样式定义了一个具有固定宽度、高度、背景图片、文本对齐方式和字母间距的div元素其中背景图片设置为background:url(./img/prj_image2_2.jpg)。
3页面内容
div 元素的 id 属性为空class 为 div1用于包裹展示的内容。
h1 标签用于显示页面的主标题 大型分析仪器管理办法应用了样式定义。
ol 标签表示有序列表类型为数字从 1 开始。
li 标签用于每个规章条例的项目列出了管理大型仪器的一些规则。
4最后的 p 标签中应用 styletext-align: right;实现了右对齐文本显示 大型仪器管理办公室。
C.总体代码
!DOCTYPE html
htmlheadmeta charsetutf-8title设计制度宣传展板/titlestyle typetext/cssbody{text-align: center;font-size: 20px;font-weight: bold;}h1{font-size: 32px;font-family: 黑体;heigh:62px;padding-top: 15px;text-align: center;color: white;background-color: #9999ff;}.div1{width: 650px;height: 940px;text-align: left;padding: 50px;background:url(./img/prj_image2_2.jpg);letter-spacing: 1px;}/style/headbodydiv id classdiv1h1大型分析仪器管理办法/h1ol type1 start1li大型仪器必须有专人保管须配有稳压电源使用前须先检查仪器间各电路连接情况再开稳压电源然后再启动仪器开关。/lili必须严格执行仪器设备运行记录制度记录仪器运行状况、开关机时间。凡不及时记录者一经发现停止使用资格一周。/lili使用仪器必须熟悉本仪器的性能和操作方法本科生作毕业论文使用时应有教师在场熟悉操作使用后必须经有关教师和实验人员同意方可进行独立操作。/lili仪器使用完毕必须将各使用器件擦洗干净归还原处盖上防尘罩关闭电源打扫完室内清洁方可离开。/lili下次使用者在开机前首先检查仪器清洁卫生、仪器是否有损坏接通电源后检查是否运转正常。发现问题及时报告管理员并找上一次使用者问明情况知情不报者追查当次使用者责任。/lili若在操作使用期间出现故障应及时关闭电源并向有关管理人员报告严禁擅自处理、拆卸、调整仪器主要部件凡自行拆卸者一经发现将给予严重处罚。用后切断电源、水源各种按钮回到原位并做好清洁工作、锁好门窗。/lili所有仪器设备的操作手册及技术资料原件一律建档保存随仪器使用的只能是复印件。/lili保持仪器清洁仪器的放置要远离强酸、强碱等腐蚀性物品远离水源、火源、气源等不安全源。/lili各仪器要根据其保养、维护要求进行及时或定期的干燥处理、充电、维护、校验等确保仪器正常运转。每学期进行一次仪器使用检查发现有损坏应及时请有关部门维修。/lili仪器不能随意搬动更不能借给外单位使用校内人员经实验室主任批准后可在实验室按上述规定使用。/li/olp styletext-align: right;大型仪器管理办公室/p/div/body
/html
4.项目4 制作饭店菜单价目表
A.题目要求: B.思路
1首先title 标签定义网页的标题在style 标签内定义了一些CSS样式用于设置页面元素的外观。
2CSS样式定义
body 样式定义了页面的背景图片background:url(./img/prj_image_2_4_153.jpg) no-repeat;
div 样式定义了一个包含菜单内容的div元素设置了宽度、高度、文本对齐方式和左边距。
dt 样式定义了菜单中的标题文本的样式包括字体加粗和字体大小。
dd 样式定义了菜单中的描述文本的样式包括字体大小和字体类型。
h3 样式定义了页面顶部的标题 绿晶饭店菜单价目表 的样式包括字体加粗、字体大小、文本颜色和背景图片。
3页面内容
div 元素的 id 属性为空用于包裹整个菜单内容。
h3 标签用于显示页面的主标题 绿晶饭店菜单价目表应用了样式定义。
使用了多个 dl 元素每个 dl 表示一个菜单部分如 心满意粥、饮料、红酒。
dt 标签用于每个菜单部分的标题。
dd 标签用于列出每道菜或饮料的名称和价格。
C.总体代码
!DOCTYPE html
htmlheadmeta charsetutf-8title绿晶饭店菜单价目表/titlestyle typetext/cssbody{background:url(./img/prj_image_2_4_153.jpg) no-repeat;}div{width: 950px;height: 730px;text-align: center;padding-left: 80px;}dt{font: bold 24px;}dd{font: 18px 隶书;}h3{font: bold 32px 黑体;color: red;}/style/headbodydiv idh3绿晶饭店菜单价目表/h3dldt心满意粥/dtdd菜心粒肉片粥.......6元/dddd皮蛋瘦肉粥.........5元/dddd香茜鱼片粥.........8元/dddd生菜丝骨腩粥.......6元/dddd枣丝杞子猪肝粥.....6元/dddd状元及第粥.........8元/dddd生菜肚丝粥.........8元/dddd明火白粥...........2元/dd/dldldt饮料/dtdd矿泉水...........2元/瓶/dddd旺仔牛奶.........5元/瓶/dddd高山青草奶......10元/瓶/dddd王老吉...........5元/罐/dddd雪碧.............4元/瓶/dddd可口可乐.........4元/罐/dddd和其正凉茶.......4元/罐/dddd康师傅红/绿茶....4元/瓶/dd/dldldt红酒/dtdd特饮干红.........................98元/瓶/dddd法国查尔斯干红..................128元/瓶/dddd注册解百纳干红..................168元/瓶/dddd张裕圆桶干红特选级黑色......168元/瓶/dddd张裕圆桶解百纳特选级红色...258元/瓶/dddd张裕卡斯特特选级黑色.........398元/瓶/dd/dl/div/body
/html
5.课外拓展训练2
1设计Web页面font标记及文本标记的应用
A.题目要求 B.思路
1CSS样式
在head部分的style标签中定义了三个CSS样式规则分别为ba、bb和bc用于设置不同文本元素的样式。
ba规则定义了字体大小为22px、字体为宋体、文本颜色为蓝色的样式。
bb规则定义了字体大小为18px、字体为黑体、文本颜色为黑色的样式。
bc规则定义了字体大小为18px、斜体字体样式、带下划线文本样式、文本颜色为黑色的样式。
2文档内容
在body部分使用h4标签显示文档标题 font标记及文本标记的应用并通过 align 属性将标题居中对齐。
使用blockquote元素包裹了一段文本并应用了ba样式规则用strong标签加粗文本内容。
使用bb元素包裹了另一段文本并应用了bb样式规则同样使用strong标签加粗文本内容。
使用bc元素包裹了最后一段文本应用了bc样式规则。
C.总体代码
!DOCTYPE html
htmlheadmeta charsetutf-8titlefont标记及文本标记的应用/titlestyle typetext/cssba{font-size: 22px;font-family: 宋体;color: blue;}bb{font-size: 18px;font-family: 黑体;color: black;}bc{font-size: 18px;font-style: italic;text-decoration: underline;color: black;}/style/headbodyh4 aligncenterfont标记及文本标记的应用/h4blockquotebastrong平淡的语言娓娓道来如清水芙蓉不带半点修饰。完全是信手拈来没有任何矫揉造作之痕正是平平淡淡才是真。/strong/ba/blockquotebbstrongnbsp;nbsp;客居他乡的游子面对如霜的秋月怎能不想念故乡、不想念亲人呢?/strong/bbbc如此一个千人吟、万人唱的主题却在这首小诗中表现得淋漓尽致以至千年以来脍炙人口流传不衰!/bc/body
/html
6.实现“食品安全管理制度”网页设计
A.题目要求 B.思路
1CSS样式
在head部分的style标签中定义了三个CSS样式规则分别为body、h1和ul用于设置不同部分的样式。
body规则设置了全局样式包括文本左对齐、字体大小为20px、文本加粗。
h1规则定义了标题样式设置字体大小为32px、字体为黑体、文字居中对齐、文本颜色为白色、背景颜色为蓝色。
ul规则定义了无序列表样式包括列表项目的样式如项目符号为实心圆、字体大小为22px、行高为33px、文本颜色为黑色。
2文档内容
在body部分使用h1标签显示文档标题 食品安全管理制度并应用了相应的CSS样式。
使用ol标签创建一个有序列表设置了列表类型为1阿拉伯数字和开始序号为1。
在有序列表中列出了几项食品安全管理制度的要求每一项都包含在li标签内。
3嵌套列表
在第四项中使用ul标签创建一个嵌套的无序列表每一项要求都包含在li标签内
C.总体代码
!DOCTYPE html
htmlheadmeta charsetutf-8title食品安全管理制度/titlestyle typetext/cssbody{text-align: left;font-size: 20px;font-weight: bold;}h1{font-size: 32px;font-family: 黑体;heigh:62px;padding-top: 15px;text-align: center;color: white;background-color: blue;}ul{list-style-type: disc;font-size: 22px;line-height: 33px;color: black;}/style/headbodyh1食品安全管理制度/h1ol type1 start1li食堂从业人员和管理人员必须掌握有关食品卫生的基本要求。 /lili食堂从业人员每年必须进行健康检查新参加工作和临时参加工作的食品生产经营人员都必须进行健康检查 /lili食堂从业人员在出现咳嗽、腹泻、发热、呕吐等有碍于食品卫生的症状时应立即脱离工作岗位待查明病因排除有碍食品卫生的病症或愈后方可重新上岗。/lili食堂从业人员应有良好的个人卫生习惯必须做到/liulli工作前处理食品原料后用肥皂及流动清水洗手接触直接入口食品之前应洗手消毒。/lili穿戴清洁的工作衣、帽并把头发置于帽内。/lili加工食品时不得留长指甲、涂指甲油及戴戒指等。/lili不得在食品加工和销售场所内吸烟。/li/ul /olh1nbsp;nbsp;nbsp;nbsp;/h1/body
/html
