《移动应用开发》作业——HTML、CSS
生活随笔
收集整理的這篇文章主要介紹了
《移动应用开发》作业——HTML、CSS
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、內容及目標
第一步，將web源代碼配置為web應用（虛擬目錄），
第二步，設置web應用的網站首頁（默認文檔）。
二、實驗結果
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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Security——集成S
- 下一篇： 前端传数据到后台部分接收成功，部分接收失