一、内容及目标

安装Web网站前端开发工具和服务器软件，推荐使用VSCode和Tomcat9。
掌握在本地计算机上发布网站的方法，使用手机通过局域网浏览自己的网站。不清楚Tomcat9虚拟目录设置的同学，可参考文件：配置虚拟目录-比较易于调试程序的方法.docx。
第一步，将web源代码配置为web应用（虚拟目录），
第二步，设置web应用的网站首页（默认文档）。
使用HTML5中<canvas> 元素完成一个比较复杂的图形绘制，形状自己定。
编辑1种便于在手机屏幕上使用的导航栏。
设计1个html页面，包含三部分内容，实现CSS3 2D转换效果和CSS3 3D转换效果，设计一种适合手机Web网站上展示的CSS 3按钮。

二、实验结果

1.使用HTML5中<canvas> 元素完成一个比较复杂的图形绘制，形状自己定。

(效果截图和文字描述)

主要的源代码：

       <canvas id="canvas" width="400" height="300" >您的浏览器不支持canvas，建议用360极速模式看</canvas><script>function draw(){var canvas = document.getElementById("canvas"),ctx = canvas.getContext("2d");ctx.fillStyle = "#eeeeff";ctx.fillRect(0,0,400,300);var n = 0;var dx = 150;var dy = 150;var s = 100;ctx.beginPath();ctx.fillStyle = "cornflowerblue";ctx.strokeStyle = "#eee";var x = Math.sin(0);var y = Math.cos(0);var dig = 11 * Math.PI / 15;for(var i=0; i<30; i++){var x = Math.sin(i * dig);var y = Math.cos(i * dig);ctx.lineTo(dx+x*s,dy+y*s);}ctx.closePath();ctx.fill();ctx.stroke();}draw();</script>

2.编辑1种便于在手机屏幕上使用的导航栏。

由于手机屏幕大小，平时把导航栏收缩是一种很好的选择，点击即可展开。

主要源代码：

                    <div class="uk-hidden@m uk-inline uk-padding-small"><button class="toggle-button uk-icon-button uk-button-primary uk-icon" uk-icon="icon: menu"></button><div uk-dropdown="mode: click; animation: uk-animation-slide-top-small; pos: bottom-right;" class="dropdown-menu uk-border-rounded uk-dropdown"><ul class="uk-nav uk-dropdown-nav"><li><a href="#cluster"><span class="uk-margin-small-right uk-icon" uk-icon="icon: bookmark"></span> Cluster</a></li><li><a href="#showcase"><span class="uk-margin-small-right uk-icon" uk-icon="icon: star"></span> Showcase</a></li><li><a href="#team"><span class="uk-margin-small-right uk-icon" uk-icon="icon: users"></span> Team</a></li><li><a target="_blank" href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: github"></span> Github Repos</a></li></ul></div></div>

3.设计1个html页面，包含三部分内容：

CSS3 2D转换效果，截图：

CSS3 3D转换效果，截图：

设计一种适合手机Web网站上展示的CSS 3按钮。

主要代码：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 224px;height: 224px;margin: 100px auto;position: relative;animation: secfirst 4s linear infinite;transform-style: preserve-3d;}div img {position: absolute;top: 0;left: 0;transition: all 8s;}div:hover img {transform: rotateY(180deg);}div div {position: absolute;top: 0;left: 0;transition: all 8s;}/* 定义动画 */@keyframes secfirst {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}.taiji {position: relative;width: 200px;height: 100px;background: white;border-color: black;border-style: solid;border-width: 4px 4px 100px 4px;/*变成圆形*/border-radius: 50%;margin: 100px auto;/* 定义动画 名称 时长  匀速 无限循环播放 */animation: myfirst 4s linear infinite;transform-style: preserve-3d;}.taiji::before,.taiji::after {content: " ";position: absolute;top: 50%;left: 0;width: 25px;height: 25px;background: white;border: 38px solid black;border-radius: 50%;}.taiji::after {left: 50%;background: black;border-color: white;}/* 定义动画 */@keyframes myfirst {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.a_demo_one {background-color:#ba2323;padding:10px;position:relative;font-size:12px;text-decoration:none;color:#fff;border: solid 1px #831212;background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);border-radius: 5px;} .a_demo_one:active {padding-bottom:9px;padding-left:10px;padding-right:10px;padding-top:11px;top:1px;background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);}</style>
</head>
<body>
<div><img src="https://gitee.com/static/images/logo-black.svg?t=158106664" alt=""/>
</div>
<div class="taiji"></div>
<button class="a_demo_one">手机按钮</button>
</body>
</html>

三、实验心得体会

1、学习HTML、CSS、JavaScript基础

2、练习CSS 2D、CSS 3D和JavaScript脚本控制。

《移动应用开发》作业——HTML、CSS相关推荐

Web前端开发北京林业大学 CSS样式-单元作业
Web前端开发北京林业大学通关攻略 Web前端开发客观题编程题概论单元测试1 HTML基础单元测试2 单元作业1 CSS样式单元测试3 单元作业2 CSS布局与定位单元测试4 单元作 ...
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结 ...
HTML网页设计期末课程大作业：汽车网页——宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载
HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
网页设计作业开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例
HTML5期末大作业:旅行网站设计--开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)
HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML网页设计期末课程大作业：汽车网页——宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载...
HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
HTML期末作业-旅游网页作业Html+css+Bootstarp
HTML期末作业-旅游网页作业Html+css+JavaScript+Bootstarp,共有8个页面部分网页截图网页源码 <!DOCTYPE html> <html lang= ...
HTML5期末大作业：漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码常见网页设计作业题材有个 ...

《移动应用开发》作业——HTML、CSS

一、内容及目标

二、实验结果

三、实验心得体会

《移动应用开发》作业——HTML、CSS相关推荐

最新文章

热门文章