HTML5应用开发课后习题题库期末考试试卷及答案_第1页
HTML5应用开发课后习题题库期末考试试卷及答案_第2页
HTML5应用开发课后习题题库期末考试试卷及答案_第3页
HTML5应用开发课后习题题库期末考试试卷及答案_第4页
HTML5应用开发课后习题题库期末考试试卷及答案_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

实操题:一.设计制作照片墙,效果如图四-四八所示,要求使用CSS三背景设置,阴影与旋转以及定位综合实现。图四-四八素材图片参考代码:<!DOCTYPEhtml><html> <head> <title>阴影效果</title> <styletype="text/css"> html:root{ padding:五零px; } .container{ height:六零零px; position:relative; } div{ width:九零零px; border:一pxsolid#八八八; box-shadow:#九九九一零px一零px三零px五px; border-radius:一零px; background-repeat:no-repeat; background-position:一五px; padding:一五px一五px三五px一五px; background-color:#FFF; } div:hover{ box-shadow:#九九九零px零px一零px二px; z-index:一零; } .img一{ width:三五零px; height:二零零px; background-image:url(img/sanya二.png); background-size:cover; background-position:center; position:absolute; left:一二零px; top:二零px; transform:rotate(五deg); } .img一:hover{ left:一二二px; top:一八px; transform:rotate(零deg); } .img二{ width:四零零px; height:二五零px; background-image:url(img/sanya三.png); background-size:cover; background-position:center; position:absolute; left:三零px; top:二三零px; transform:rotate(-五deg); } .img二:hover{ left:三三px; top:二二八px; transform:rotate(零deg); } .img三{ background-image:url(img/sanya四.png); background-size:cover; background-position:center; width:三零零px; height:二零零px; position:absolute; left:五零零px; top:一五零px; transform:rotate(二deg); } .img三:hover{ left:四九八px; top:一四八px; transform:rotate(零deg); } </style> </head> <body> <divclass="container"> <divclass="img一"></div> <divclass="img二"></div> <divclass="img三"></div> </div> </body></html>用CSS三渐变结合定位设计一个无js地banner动画展板八零零px宽,如图四-四九与图四-五零所示,默认每个图片占用一六零px展示图片,鼠标滑过图片时,当前图片展示六四零px,其余图片缩减为四零px。图四-四九默认展示效果图四-五零鼠标滑过某个图片时（a）（b）（c）（d）（e）图四-五一素材图片参考代码:<!DOCTYPEHTML><html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-八"> <title>CSS三无js动画</title> <style> *{ margin:零; padding:零; } body{ background:#ccc; font-family:arial,verdana,tahoma; } .accordian{ width:八零五px; height:三二零px; overflow:hidden; margin:一零零pxauto; -webkit-box-shadow:零零一零px一pxrgba(零,零,零,零.三五); -moz-box-shadow:零零一零px一pxrgba(零,零,零,零.三五); box-shadow:零px零px一零px一pxrgba(零,零,零,零.三五); } .accordianul{ width:二零零零px; } .accordianli{ position:relative; display:block; width:一六零px; float:left; border-left:一pxsolid#八八八; /*投影*/ box-shadow:零零二五px一零pxrgba(零,零,零,零.五); -webkit-box-shadow:零零二五px一零pxrgba(零,零,零,零.五); -moz-box-shadow:零零二五px一零pxrgba(零,零,零,零.五); /*过渡*/ -webkit-transition:all零.五s; -moz-transition:all零.五s; transition:all零.五s; } .accordianul:hoverli{ width:四零px; } .accordianulli:hover{ width:六四零px; } .image_title{ background:rgba(零,零,零,零.五); position:absolute; left:零px; background:零px; width:六四零px; } .image_titlea{ display:block; color:#ddd; text-decoration:none; font-family:"微软雅黑"Verdana,Geneva,sans-serif; padding:一零px; font-size:一六px; text-shadow:五px二px六px#零零零; font-weight:bolder; } </style> </head> <body> <divclass="accordian"> <ul> <li> <divclass="image_title"> <ahref="#">功夫熊猫</a> </div> <ahref="#"><imgsrc="images/三yiC六Yq.jpg"/></a> </li> <li> <divclass="image_title"> <ahref="#">玩具总动员二</a> </div> <ahref="#"><imgsrc="images/四零Ly三VB.jpg"/></a> </li> <li> <divclass="image_title"> <ahref="#">机器总动员</a> </div> <ahref="#"><imgsrc="images/零零kih八g.jpg"/></a> </li> <li> <divclass="image_title"> <ahref="#">Up</a> </div> <ahref="#"><imgsrc="images/二rT二vdx.jpg"/></a> </li> <li> <divclass="image_title"> <ahref="#">卡通赛车</a> </div> <ahref="#"><imgsrc="images/八k三N三EL.jpg"/></a> </li> </ul> </div> </body></html>要求设计一个菱形布局页面,默认效果如图四-五二所示,鼠标滑过切换板块展示地内容效果如图四-五三所示。图四-五二默认布局图四-五三鼠标滑过板块参考代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-八"> <title></title> <styletype="text/css"> @charset"utf-八"; /*CSSDocument*/*{ margin:零; padding:零;}body{ font-family:'MicrosoftYaHei'; font-size:一二px;}body,div,dl,dt,dd,ul,ol,li,h一,h二,h三,h四,h五,h六,pre,form,fieldset,input,textarea,blockquote{ padding:零; margin:零;}table,td,tr,th{ font-size:一二px;}li{ list-style-type:none;}table{ margin:零auto;}img{ vertical-align:top; border:零;}ol,ul{ list-style:none;}caption,th{ text-align:left;}a{ text-decoration:none; color:#零零零;}a:hover{ color:#零零零; text-decoration:none;}.main一一四零{ width:一一四零px; margin:零auto; overflow:hidden;}.process-box{ width:一一四零px; height:四五零px;}.process-boxul{ width:一一四零px;}.process-boxulli{ width:一九六px; height:一九六px; float:left; cursor:pointer; position:relative;}.process-boxulli.kuang{ position:absolute; width:一九六px; height:一九六px; -moz-transform:rotate(四五deg); -webkit-transform:rotate(四五deg); -o-transform:rotate(四五deg); transform:rotate(四五deg); border:一pxsolid#ddd; margin-top:四二px; margin-left:四二px;}.process-boxulli.kuang一{ top:零; left:零; z-index:一;}.process-boxulli.kuang二{ left:五px; top:零px; z-index:二;}.process-boxulli.text一{ width:二七六px; height:二七六px; text-align:center; z-index:三; position:absolute; left:七px; top:二px;}.process-boxulli.text一.bg{ width:二七六px; height:二七六px;}.process-boxulli.text一.num{ padding-top:五零px; font-size:八六px; color:#dacdc二; font-weight:七零零;}.process-boxulli.text一.title{ font-size:一五px; color:#四二二七一零;}.process-boxulli.text一.eng{ font-size:一二px; color:#b四a零七八;}.process-boxulli.text二{ width:二七六px; height:二七六px; z-index:四; position:absolute; left:五px; top:零px; display:none;}.process-boxulli.text二.mengban{ border:一pxsolid#五三三b二六; position:absolute; z-index:一; width:一九六px; height:一九六px; -moz-transform:rotate(四五deg); -webkit-transform:rotate(四五deg); -o-transform:rotate(四五deg); transform:rotate(四五deg); background:#五三三b二六; margin-top:四二px; margin-left:四二px;}.process-boxulli.text二.desc{ position:absolute; z-index:二; width:一四零px; height:一一零px; top:八八px; left:七零px; font-size:一二px; color:#fff; text-align:center; line-height:二四px;}.process-boxulli{ margin-right:八九px;}.process-boxul.twoli{ margin-top:-四零px;}.process-boxulli:hover.text二{ display:block;} </style> </head> <body> <divclass="main一一四零"><divclass="process-box"><ulclass="one"><li><divclass="kuangkuang一"></div><divclass="kuangkuang二"></div></li><listyle="margin-left:-一四五px;"><divclass="kuangkuang一"></div><divclass="kuangkuang二"></div><divclass="text一"><divclass="bgbg一"><pclass="num">一</p><pclass="title">展示第一个板块</p><pclass="eng">first</p></div></div><divclass="text二"><divclass="mengban"></div><pclass="desc">第一个板块详细内容</p></div></li><li><divclass="kuangkuang一"></div><divclass="kuangkuang二"></div><divclass="text一"><divclass="bgbg二"><pclass="num">二</p><pclass="title">展示第二个板块</p><pclass="eng">second</p></div></div><divclass="text二"><divclass="mengban"></div><pclass="desc">第二个板块详细内容</p></div></li><li><divclass="kuangkuang一"></div><divclass="kuangkuang二"></div><divclass="text一"><divclass="bgbg三"><pclass="num">三</p><pclass="title">展示第三个板块</p><pclass="eng">third</p></div></div><divclass="text二"><divclass="mengban"></div><pclass="desc">第三个板块详细内容</p></div></li><listyle="margin-left:-一四五px;"><divclass="kuangkuang一"></div><divclass="kuangkuang二"></div></li></ul><ulclass="two"><li><divclass="kuangkuang一"></div><divclass="kuangkuang二"></div><divclass="text一"><divclass="bgbg四"><pclass="num">四</p><pclass="title">展示第四个板块</p><pclass="eng">fourth</p></div></div><divclass="text二"><divclass="mengban"></div><pclass="desc">第四个板块详细内容</p></div></li><li><divclass="kuangkuang一"></div><divclass="kuangkuang二"></div><divclass="text一"><divclass="bgbg五"><pclass="num">五</p><pclass="title">展示第五个板块</p><pclass="eng">fifth</p></div></div><divclass="text二"><divclass="mengban"></div><pclass="desc">第五个板块详细内容</p></div></li><li><divclass="kuangkuang一"></div><divclass

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论