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

左手的ㄟ右手 2022-11-11 05:58 126阅读 0赞

# **一、内容及目标** #

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

# **二、实验结果** #

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

(效果截图和文字描述)

![20210319192137219.png][]

**主要的源代码：**

<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种便于在手机屏幕上使用的导航栏。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70][]

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

**主要源代码：**

<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****转换效果，截图：**

![20210319215422590.png][]

**CSS3 3D****转换效果，截图：**

![20210319215426747.png][]

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

![20210319215418842.png][]

**主要代码：**

<!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脚本控制。

[20210319192137219.png]: /images/20221022/37af4172d1714ceabf01d730cc30af20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70]: /images/20221022/ecae3bb7f4ae495d9c2632b078163bc1.png
[20210319215422590.png]: /images/20221022/ce2f62fb6aa44c148e7a31ec8c231684.png
[20210319215426747.png]: https://img-blog.csdnimg.cn/20210319215426747.png
[20210319215418842.png]: https://img-blog.csdnimg.cn/20210319215418842.png