头歌Web实训答案(2023TYUT)
1.html5-结构元素
第1关:文档结构元素相关概念
ACBAB
第2关:header元素和article元素的应用
页面结构 header { border-bottom: 4px double #eee; text-align: center; font-size: 20px }茗茶推荐——祁门红茶
祁门红茶,茶叶原料选用当地的中叶,中生种茶树制作,是中国历史名茶,著名红茶精品。
第3关:figure元素和figcaption元素的应用
页面结构2 header { border-bottom: 4px double #eee; text-align: center; font-size: 20px }茗茶推荐——祁门红茶
祁门红茶,茶叶原料选用当地的中叶,中生种茶树制作,是中国历史名茶,著名红茶精品。
茶道欣赏
2.html5-交互元素
第1关:交互元素相关概念
ACBAB
第2关:progress元素
progerss元素的使用 下载进度:
第3关:meter元素
meter元素的使用 显示度量值:
第4关:details/summary元素
details/summary元素 第三章3.1结构元素
3.2页面结点
3.3交互元素
(图片来源网络,侵删)
3.html5-文本层次语义元素
第1关:文本层次语义元素相关概念
CADBB
第2关:文本层次语义元素
重要通知:
定于明日上午9:00整在213教室开会。
第3关:cite元素和time元素
今日分享:盛年不再来,一日难再晨,及时当勉励,岁月不待人。
出处:魏晋·陶渊明《杂诗》
4.html5-分组元素
第1关:分组元素相关的概念题
BCDAD
第2关:无序列表
无序列表
- 圆饼
- 黑板
- 圆圈
第3关:有序列表
有序列表
- 男装
- 上衣
- T恤
第4关:定义列表
定义列表 Web前端开发 Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。
5.播放视频
第1关:HTML5视频相关的概念
DCBAA
第2关:播放视频
HTML5-视频我和我的祖国
你的浏览器不支持该视频格式
6.播放音频
第1关:HTML5音频相关的概念
BACB AC(多选)
第2关:播放音频
HTML5-音频安妮的仙境
你的浏览器不支持该音频格式
7.web编程训练-html5-超链接的应用
第1关:创建热字超链接
创建超链接听音乐找酷我
第2关:创建热图超链接
创建超链接听音乐找酷我
好音质用酷我
第3关:下载歌曲超链接
创建超链接听音乐找酷我
好音质用酷我
安妮的仙境在线播放:
第4关:创建页内超链接
创建超链接听音乐找酷我
好音质用酷我查看第7个音频
查看第7个音频 推荐下载: 安妮的仙境在线播放:
这是第1个音频
这是第2个音频
这是第3个音频
这是第4个音频
这是第5个音频
这是第6个音频
这是第7个音频 这是第7个音频
这是第8个音频
8.web知识训练-html5-超链接的应用
第1关:web知识训练-html5-超链接的应用
ABCDB
9.html5-表格高级样式的设置
第1关:表格高级样式设置相关概念
CABAD
第2关:设置表格的外边框样式
设置表格外边框属性
第3关:设置表格的内边框样式
设置表格内边框属性
单元格1 | 单元格2 |
单元格3 | 单元格4 |
第4关:表格中单元格的合并
签到表 th{background-color:#00ff33;} td{background-color:#00ffff;}
姓名 | 签到 | 备注 | |
---|---|---|---|
第1次 | 第2次 | ||
张三 | 大会主题报告 | 分会专题报告 | 总结报告 |
专家报告 | 分组讨论 |
第5关:表格的综合案例
表格综合 th{background-color:#00ff33;} td{background-color:#00ffff;text-align:center} caption{font-family:黑体;font-size:30px;color:blue}
本周项目 | 费用明细 | 备注 | ||
---|---|---|---|---|
收入 | 支出 | |||
收入 | 工资 | 10000 | 0 | |
兼职 | 2000 | 0 | ||
收入合计 | 12000 | 0 | ||
支出 | 生活用品 | 0 | 4000 | |
生活用品 | 0 | 3000 | ||
支出合计 | 0 | 7000 |
10.表单的结构
第1关:表单的基本概念
DACBC
第2关:学会设置action和method属性
... 橘子 苹果 香蕉
11.创建输入控件
第1关:input控件相关概念
DBCAD
第2关:创建文本框
设置单行文本框 姓名:
第3关:创建密码框
设置密码框 姓名:
密码:
第4关:创建单选按钮
设置单行文本框 姓名:
密码:
国庆期间你最喜欢看的电影?
夺冠 我和我的祖国 姜子牙
第5关:创建复选框
设置单行文本框 姓名:
密码:
国庆期间你最喜欢看的电影?
夺冠 我和我的祖国 姜子牙
你喜欢的运动是?
打篮球 打排球 踢足球 其他
第6关:重置与提交按钮
设置单行文本框 姓名:
密码:
国庆期间你最喜欢看的电影?
夺冠 我和我的祖国 姜子牙
你喜欢的运动是?
打篮球 打排球 踢足球 其他
12.创建文本区域
第1关:textarea控件相关概念
CBDAB
第2关:创建文本域
设置文本域 请输入你选择本专业的理由:
13.css样式规则
第1关:CSS基础知识
BDCAB
第2关:初识CSS
初识CSS样式静夜思
床前明月光
疑是地上霜
举头望明月
低头思故乡
第3关:用内嵌式引入CSS样式
内嵌CSS样式 /* ********** BEGIN ********** */ body { background-image:url(https://www.educoder.net/api/attachments/1427381); background-size:cover; } /* ********** END ********** */ div { position:fixed; left:400px; top:100px; color:#ffffff; font-family:黑体; text-align:center; }静夜思
床前明月光
疑是地上霜
举头望明月
低头思故乡
第4关:用外链式引入CSS样式
外链CSS样式静夜思
床前明月光
疑是地上霜
举头望明月
低头思故乡
14.css3选择器-组合选择器
第1关:组合选择器相关的概念
ACA
第2关:群组选择器
群组选择器 h1,h2,h3{ color:green;}一级标题
二级标题
三级标题
第3关:后代选择器
后代选择器 div p{color:blue;font-size:16px;}我的颜色是蓝色,我的字体大小是16px
第4关:子元素选择器
子元素选择器 div>p{color:green;font-size:20px;}我的颜色是绿色,我的字体大小是20px
第5关:相邻兄弟选择器
相邻兄弟选择器 h1+p{background-color:red;}我是兄长
我是弟弟
我是小弟
第6关:普通兄弟选择器
普通兄弟选择器 h1~p{color:blue;font-size:36px;}我是兄长
我是弟弟
我是小弟
15.css3选择器-基础选择器
第1关:CSS基础选择器相关概念
DCB
第2关:通用选择器
*{ font-size:100px; color:#D33E2A; } G o o g l e
第3关:标签选择器
strong { font-size:100px;color:#D33E2A; } G o o g l e
第4关:文字Google结构设计
文字Logo G o o g l e
第5关:文字Google样式设计
文字Logo strong{ font-size:100px;} .blue{ color:#2B75F5;} .red{color:#D33E2A;} #orange{color:#FFC609;} #green{color:#00A45D;} G o o g l e
16.css3-文本外观样式
第1关:文本外观样式相关的概念
BDB
第2关:CSS-文本空间的设置
美食专题栏目 p{ font-size:16px; font-family:微软雅黑; text-indent:2em; line-height:28px; } .blue{color:#33F; text-decoration:underline; } .red{color:#F00;} .money{font-size:16px;}导语:臭豆腐是长沙有名的小吃,是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...【详情】
火宫殿臭豆腐:价格18元
第3关:搜索页面的结构设计
搜索页面什么是CSS?—CSS教程
猴子提示: 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是CSS了,现在就开始学习CSS吧 ...
www.dreamdu.com/css/wh...百度快照85%好评
第4关:搜索页面的样式设计-文本外观样式的应用
搜索页面 body{ font-size:14px; color:#333; font-family:微软雅黑; } em{ font-style:normal; } .header{ font-size:18px; color:#D52D2D; font-weight:normal; text-decoration:underline; } .header em{ color:#2525D3; text-decoration:underline; } .red{ color:#D52D2D; } .green{ color:#167A16; } .gray{ color:#595959; text-decoration:underline; }什么是CSS?—CSS教程
猴子提示: 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是CSS了,现在就开始学习CSS吧 ...
www.dreamdu.com/css/wh...-百度快照-85%好评
17.css3-文本字体样式
第1关:字体样式属性相关的概念
BDA
第2关:美食专栏网页的结构设置
美食专题栏目导语:臭豆腐是长沙有名的小吃,是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...【详情】
火宫殿臭豆腐:价格18元
第3关:美食专栏网页的样式设置
美食专题栏目 p { font-size:16px; font-family:微软雅黑; } .blue { color:#33F; } .red { color:#F00; } .money { font-size:16px; }导语:臭豆腐是长沙有名的小吃,是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...【详情】
火宫殿臭豆腐:价格18元
18.css3选择器-属性选择器
第1关:CSS3-属性选择器相关概念
CBAD
第2关:CSS3-属性选择器
属性选择器 div{ width:70px; height:40px; border:1px solid teal; float:left; } li{list-style:none;} /* ********* Begin ******* */ *{ font-size:25px; text-align:center; vertical-align:middle; } /* ********* End ******* */
第3关:CSS3-包含及连字符选择器
属性选择器 div{ width:70px; height:40px; border:1px solid teal; float:left; } li{list-style:none;} div[title]{ font-size:25px; text-align:center; } /* ********* Begin ******* */ .b{ font-weight:bold; } div[name~="a"]{ background-color:pink; } div[name|="b"]{ background-color:orange; } /* ********* End ******* */
第4关:CSS3-前缀后缀选择器
属性选择器 div{ width:70px; height:40px; border:1px solid teal; float:left; } li{list-style:none;} div[title]{ font-size:25px; text-align:center; } div[]{ font-weight:bold; } div[name~="a"]{ background-color:pink; } div[name|="b"]{ background-color:orange; } /* ********* Begin ******* */ div[title^="n"]{ color:blue; } div[title*="o"]{ color:red; } div[title$="t"]{ color:green; } /* ********* End ******* */
19.css3背景样式
第1关:CSS背景相关的概念
DACAD
第2关:CSS-背景色的设置
CSS-背景色的设置 h2{font:微软雅黑; text-align:center; } #p1{font-size:13px; color:#979797; text-align:center; } hr{border:1px solid #CCCCCC;} #p2{text-indent:2em;} span{color:blue;} .background{ /* ********* Begin ********* */ background-color: #add /* ********* End ********* */ }新媒体的大势所趋
更新时间:2021年11月30日14时08分 来源:开源社区
近年来,随着移动互联网的火爆,公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展,运营人在企业中的价值也不断的被放大和受到重视,很多企业在做线上这块时都会考虑“两微一抖”,也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。
第3关:CSS-背景图的设置
CSS-背景色的设置 h2{font:微软雅黑; text-align:center; } #p1{font-size:13px; color:#979797; text-align:center; } hr{border:1px solid #CCCCCC;} #p2{text-indent:2em;} span{color:blue;} .background{background-color:#add;} .backgroundImage{ width:360px; height:240px; overflow:scroll; padding:30px; border:3px solid #30F; /* ********* Begin ********* */ background-image: url(https://www.educoder.net/api/attachments/2478800); background-attachment: scroll; background-size: cover; background-position: -260px 0px; /* ********* End ********* */ }新媒体的大势所趋
更新时间:2021年11月30日14时08分 来源:开源社区
近年来,随着移动互联网的火爆,公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展,运营人在企业中的价值也不断的被放大和受到重视,很多企业在做线上这块时都会考虑“两微一抖”,也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。
20.移动端电商网页制作
第1关:移动端电商页面制作
移动电商页面 /* ********* Begin ********* */ body{ font-size:12px;} body,img{padding:0; margin:0; border:0;} .all{ width: 346px; height: 578px; background:url(https://www.educoder.net/api/attachments/2073417) no-repeat; margin: 20px auto; padding: 90px 0 0 34px; } .content{ width: 277px; height: 414px; overflow: scroll; /* ********* End ********* */ }
21.网页布局页面的制作
第1关:网页布局的结构设计
网页布局
第2关:网页布局的样式设计
网页布局 body{margin:0; padding:0;} div{ width:980px;/*设置所有模块的宽度为980px、居中显示*/ margin:0 auto; } #top{height:40px; background:url(https://www.educoder.net/api/attachments/2141326)} #nav{height:60px; background:url(https://www.educoder.net/api/attachments/2141327)} #banner{height:200px; background:url(https://www.educoder.net/api/attachments/2141342)} #content{height:300px; } .content_left{ /*左侧部分左浮动*/ width:200px; height:300px; background-color:#CCC; float:left; margin:0 0; background:url(https://www.educoder.net/api/attachments/2141349) } .content_middle{ /*中间部分左浮动*/ width:570px; height:300px; background-color:#CCC; float:left; margin:0 0 0 5px; background:url(https://www.educoder.net/api/attachments/2141352) } .content_right{ /*右侧部分右浮动*/ width:200px; background-color:#CCC; float:right; height:300px; margin:0 0; background:url(https://www.educoder.net/api/attachments/2141351) } #footer{ height:90px; background:url(https://www.educoder.net/api/attachments/2141353) }
22.团购悬浮框页面的制作
第1关:团购悬浮框页面的结构设计
电商团购悬浮框
- 7月30日0:00开团
- 新品团
- 尝鲜团
- 秒杀团
- 清仓团
- 返回顶部
第2关:团购悬浮框页面的样式设计
电商团购悬浮框 body, ul, li { padding: 0; margin: 0; list-style: none; } body { font-size: 18px; font-family: 微软雅黑; } ul { width: 200px; height: 270px; margin: 20px; border: 3px solid #613e72; padding: 10px; } li { width: 142px; height: 40px; line-height: 40px; background: url(https://www.educoder.net/api/attachments/2046898) no-repeat left center; padding-left: 40px; margin: 0 auto 5px; color: #613e72; } .item { background: #613e72 url(https://www.educoder.net/api/attachments/2046946) no-repeat 5px center; color: #fff; } .back { background: url(https://www.educoder.net/api/attachments/2046953) no-repeat left center; }
- 7月30日0:00开团
- 新品团
- 尝鲜团
- 秒杀团
- 清仓团
- 返回顶部
23.太极图的制作-css的应用
第1关:太极图的绘制
无标题文档 div{ width: 96px; height: 48px; border: 2px solid #000; border-bottom:50px solid #000; position:absolute; left:0px;top:0px;right:0px;bottom:0px; margin:auto; border-radius:50%; }
第2关:太极图的绘制
Title div{ width:96px; height:48px; border:2px solid #000; border-bottom:50px solid #000; position:absolute; left:0;top:0;right:0;bottom:0; margin:auto; border-radius:50%; } div:before{ content:""; position:absolute; left:0;top:50%; width:8px;height:8px; background:#000; border:20px solid #fff; border-radius:50%; } div:after{ content:""; position:absolute; right:0;top:50%; width:8px;height:8px; background:#fff; border:20px solid #000; border-radius:50%; }
第3关:使太极图旋转:
Title div{ width:96px; height:48px; border:2px solid #000; border-bottom:50px solid #000; position:absolute; left:0;top:0;right:0;bottom:0; margin:auto; border-radius:50%; transition:all 2s linear;/*将全部元素以均匀速度在2S内完成旋转*/ } div:before{ content:""; position:absolute; left:0;top:50%; width:8px;height:8px; background:#000; border:20px solid #fff; border-radius:50%; } div:after{ content:""; position:absolute; right:0;top:50%; width:8px;height:8px; background:#fff; border:20px solid #000; border-radius:50%; } div:hover{ transform:rotate(-360deg);
还没有评论,来说两句吧...