第二部分 第二十四章 移动网站开发-【职升课堂】中职计算机应用1同步训练（高教版）

第二十四章移动网站开发 学习目标 1.了解如何做一个具有基本功能的移动网页。 2.能自适应各种不同的移动设备 3.能够以符合移动设备的操作方式对网页进行操作。 ■同步训练 <style> 程序设计题 .yemian [width:86%;height:100%: 本案例在谷歌浏览器下，以iPhone :5%7%07%;/*设置yemian元素4个外 6/7/8Plus模式运行。网页如下图所示，初 边距*hext-align:center; 始页面WEB前端概念，并播放背景音乐， zhubiaoti{font-family:"微软雅 网页下方有三个按钮，可以用鼠标（在移动 黑"：font-size:30px:color:#782110: 端上用手指)点击，背景出现相应的内容。 .fubiaoti (margin-bottom:0:/* 根据题意，将备选项中对应的选项字母填写 置fubiaoti元素底部外边距*/margin--lop: 在横线上。 3%:font-family:"微软雅黑"；font-size:24px: color:#782110;text-align:lefi:) 夏一十■税3周开 .neirong (margin-bottom:0:margin- top:3%:font-family:"微软雅黑"：color: #782110:text-align:left;font-size:18px; 40px:/*设置neirong元素首行缩进量*/】 色⊙的 卧。国 卧。因 annue (float:left; :30%:/*每个 按钮占用30%的宽度*/ <!DOCTYPE html> <html> .tupian(width:100%;] <head><ie>第二十四章移动网站 </style></head> 开发<idle><meta charset=-"UTF-8"> <body style=" :#98FB98:"> <!-设置页面背景颜色--> <meta name="viewport"content= "width= /体自适应移动端设备宽度*， <div class="yemian"> initial-scale=1.0"> src="bgm.mp3" 164 第二部分HTML、CSS、JavaScript标准教程◆◆◆◆ autoplay:="autoplay'"></audio><!-设置页面背 级，解释型或即时编译型的编程语言。虽然 景音乐--> 它是作为开发Wb页面的脚本语言而出名， <印class="zhubiaoti'">第二十四章移 但是它也被用到了很多非浏览器环境中， 动网站开发<p> JavaScript基于原型编程、多范式的动态脚 <div id="chushiceng"><p 本语言，并且支持面向对象、命令式、声明 classz="fubiaoti">前端开发<p> 式、函数式编程范式。<p> <p class="neirong'">前端开发是创 </div> 建WEB页面或APP等前端界面呈现给用户的 <div style=" fixed;bottom: 过程，通过HTML,CSS及JavaScript以及衍 Opx:"><!--设置该层定位为ixed--> 生出来的各种技术、框架、解决方案，来实 <div class="annue"><img_= 现互联网产品的用户界面交互。<p><div> "img/HTML_TM.png"id="button_one" <div ="yiceng"><p class="tupian"onclick=" (）"></ class=-"biaoti'">HTML简介<p><!-设置为一 div><!--引用图像，点击它执行xianshiyi函 层，供JS调用-> 数-> <印class=-"neirong">HTML的全称为 <div class="annue"><img sre="img/ 超文本标记语言，是一种标记语言。它包括 CSS_tm.png"id="button_two"class="tupian" 一系列标签.通过这些标签可以将网络上的 onclick="xianshier ()"></div> 文档格式统一，使分散的Internet资源连接 <div class="annue"><img sre="img/ 为一个逻辑整体。<p> JS_tm.png"id="button_three"class="tupian" </div> onclick="xianshisan ()"></div> <div id="erceng"><p class="fubiaoti"> </div></div> CSS简介<p> <script>