网页设计与制作（HTML5+CSS3+JavaScript） 第10章：综合小案例.pptxVIP

第10章综合小案例;【设计说明】 演示效果如图10.1所示，当点击网页中的“点我”按钮时，一个小方块从页面左上角移动到右下角，可以使用到一些浮动广告等实际应用场景中。 ;步骤1：设计HTML5页面显示，设计一个p元素存放“点我的”button元素，button元素上添加onclick事件，当点击button元素时，响应的事件为“myMove()”函数；设计两个div，用id（myContainer和myAnimation）来唯一标识它们，myContainer黄色的背景矩形框，myAnimation为运动的红色矩形框： p button onclick=myMove()点我/button /p div id =myContainer div id =myAnimation/div /div ;步骤2：设计CSS渲染效果：设计id为myAnimation和myContainer的div属性，设置其大小、位置、颜色等 #myContainer { width: 400px; //宽度为400像素 height: 400px; //高度为400像素 position: relative; //位置为相对位置 background: yellow; //背景色为黄色 } #myAnimation { width: 50px;