html5_小项目

最新推荐文章于 2024-08-24 20:54:28 发布
最新推荐文章于 2024-08-24 20:54:28 发布
阅读量5.2k 收藏 6
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Android___vv/article/details/78292956
版权

 

主页面1:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>ionic开发</title>
    <link href="ionic/css/ionic.css" rel="stylesheet">
    <script src="ionic/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
        var app= angular.module('ionicApp', ['ionic']);
        app.controller('SlideController', function($scope) {
           //显示第0页
            $scope.myActiveSlide = 0;
        });
    </script>

    <style>
        .slider {
            height: 100%;
        }
        .slider-slide {
            color: #000;
            background-color: #fff; text-align: center;
            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;
        }

        img{
            height: 100%;
        }

        button{
            background-color: red;
            width: 80px;
            height: 40px;
            border-radius: 10%;
            position: absolute;
            margin-top: 800px;
        }

        a{
            text-decoration: none;
            color: #000000;
        }

    </style>
</head>

<body ng-app="ionicApp" ng-controller="SlideController">

<ion-slide-box active-slide="myActiveSlide">
    <ion-slide>
        <div><img src="img/splash-01.jpg"></div>
    </ion-slide>
    <ion-slide>
        <div><img src="img/splash-02.jpg"></div>
    </ion-slide>
    <ion-slide>
        <div><img src="img/splash-03.jpg"><button><a href="http://localhost:63342/untitled/Baikaijun20171019/main2.html">进入</a></button></div>
    </ion-slide>
</ion-slide-box>

</body>
</html>

主页面2:

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href="ionic/css/ionic.css" rel="stylesheet"> <script src="ionic/js/ionic.bundle.min.js"></script> <link href="css.css" rel="stylesheet"/> <title></title> <script> var app = angular.module("myapp",["ionic"]); //路由  app.config(function($stateProvider, $urlRouterProvider){ $stateProvider.state("home", { //设置一个url,其他地方可以根据url跳到本页面  url: "/home", //自己制作的页面  views: { "home": { templateUrl: "pages/home.html"  } } }).state("buy", { url: "/buy", views: { "home": { templateUrl: "pages/buy.html"  } } }).state("my", { url: "/my", views: { "home": { templateUrl: "pages/my.html"  } } }); //默认跳到url为z的页面  $urlRouterProvider.otherwise("home"); }); //主页面操作  app.controller("HomeCtrl",function($scope, $ionicSideMenuDelegate, $http){ //点击左上角按钮跳出侧滑栏  $scope.toggleLeft = function () { $ionicSideMenuDelegate.toggleLeft(); } //主页面遍历的数组,先赋予空  $scope.books = []; //设置一个起始页数  var i = 1; //请求网络的数据的方法  var http = function(){ $http.get("json/book_list_"+i+".json").success(function(data){ $scope.books = $scope.books.concat(data); }).finally(function(){ //关闭上拉或下拉出来的页面  $scope.$broadcast('scroll.infiniteScrollComplete'); }); } //首先执行一次访问数据  http(); //下拉刷新触发的方法  $scope.doRefresh = function(){ //初始化  $scope.books = []; //刷新访问第一页  i=1; http(); } //上拉加载触发的方法  $scope.loadMore = function () { i++; if(i>3){ alert("加载到底了!!!"); return; } http(); }; }); </script> </head> <body ng-app="myapp"> <ion-side-menus> <ion-pane ion-side-menu-content> <ion-nav-bar class="bar-stable nav-title-slide-ios"></ion-nav-bar> <ion-nav-view animation="slide-left-right"> <ion-nav-view name="home"></ion-nav-view> </ion-nav-view> </ion-pane> <ion-side-menu side="left" class="mine"> <header class="bar bar-header bar-stable"> <h1 class="title">个人中心</h1> </header> <ion-content class="has-header"> <div style="width: 100%; height: 150px;background:url('img/mine_bg.jpg');background-size: cover"> <img src="img/mine_avatar.jpg" style="border-radius: 50%; margin-top: 20px;width: 80px;height: 80px;margin-left: 100px"> <p style="margin-left: 120px">姓名</p> </div> <div> <a class="item item-icon-left item-icon-right"> <i class="icon ion-clipboard"></i> 我的订单  <i class="icon ion-ios-arrow-right"></i> </a> <a class="item item-icon-left item-icon-right"> <i class="icon ion-star"></i> 我的收藏  <i class="icon ion-ios-arrow-right"></i> </a> <a class="item item-icon-left item-icon-right"> <i class="icon ion-gear-a"></i> 设置  <i class="icon ion-ios-arrow-right"></i> </a> </div> </ion-content> </ion-side-menu> </ion-side-menus> <ion-tabs class="tabs-positive tabs-icon-top"> <!--有背景颜色tabs-positive tabs-icon-top,无背景颜色tabs tabs-icon-to-->  <ion-tab  title="首页" icon-on="icon ion-ios-home" icon-off="icon ion-ios-home-outline" ui-sref="home"> <!-- icon-on:在当前页面显示的图标 icon-off:离开当前页面显示的图标-->  </ion-tab> <ion-tab  title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="buy"> <ion-nav-view name="buy"></ion-nav-view> </ion-tab> <ion-tab  title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="my"> <ion-nav-view name="my"></ion-nav-view> </ion-tab> </ion-tabs> </body> </html>

 

home页面:

 

<ion-view title="首页" class="home" ng-controller="HomeCtrl"> <ion-nav-buttons side="left"> <button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button> </ion-nav-buttons> <ion-content> <!--下拉刷新-->  <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher> <ion-list> <ion-item ng-repeat="book in books"> <div style="float: left"> <img ng-src="{{book.picture}}" width="128px" height="128px"/> </div> <div> <h2>{{book.title}}</h2> <h3 style="margin-top: 40px">{{book.description}}</h3> <div style="margin-top: 40px"> <span style="font-size: 20px;color: red">{{ book.price | currency: "￥" }}</span> <i class="icon ion-ios-cart" style="position: absolute;right: 16px;"></i> </div> </div> </ion-item> </ion-list> <!--上拉加载-->  <ion-infinite-scroll on-infinite="loadMore()" distance="1%" immediate-check="false"></ion-infinite-scroll> </ion-content> </ion-view>


buy页面:

<ion-view title="购物车">

    <ion-content>
        <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>

        <ion-list>

            <ion-item>
                <div style="float: left">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div>
                    <h2>Java编程思想</h2>
                    <span style="font-size: 20px;color: red">{{ 86.40 | currency: "￥" }}</span>

                    <div style="margin-top: 40px">
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete" style="position: absolute;right: 16px"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div style="float: left">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div>
                    <h2>Java编程思想</h2>
                    <span style="font-size: 20px;color: red">{{ 86.40 | currency: "￥" }}</span>

                    <div style="margin-top: 40px">
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete" style="position: absolute;right: 16px"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div style="float: left">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div>
                    <h2>Java编程思想</h2>
                    <span style="font-size: 20px;color: red">{{ 86.40 | currency: "￥" }}</span>

                    <div style="margin-top: 40px">
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete" style="position: absolute;right: 16px"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div style="float: left">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div>
                    <h2>Java编程思想</h2>
                    <span style="font-size: 20px;color: red">{{ 86.40 | currency: "￥" }}</span>

                    <div style="margin-top: 40px">
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete" style="position: absolute;right: 16px"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div style="float: left">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div>
                    <h2>Java编程思想</h2>
                    <span style="font-size: 20px;color: red">{{ 86.40 | currency: "￥" }}</span>

                    <div style="margin-top: 40px">
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete" style="position: absolute;right: 16px"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div style="float: left">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div>
                    <h2>Java编程思想</h2>
                    <span style="font-size: 20px;color: red">{{ 86.40 | currency: "￥" }}</span>

                    <div style="margin-top: 40px">
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete" style="position: absolute;right: 16px"></i>
                    </div>
                </div>
            </ion-item>


        </ion-list>
    </ion-content>
</ion-view>

my页面:

<ion-view title="我的s" class="my"> <ion-nav-buttons side="right"> <button class="button button-icon ion-ios-compose-outline"></button> </ion-nav-buttons> <ion-content> <div class="a"> <img src="img/mine_avatar.jpg" style="border-radius: 50%; margin-top: 20px;width: 80px;height: 80px;margin-left: 930px"> <p style="margin-left: 950px">姓名</p> </div> <div> <a class="item item-icon-left item-icon-right"> <i class="icon ion-clipboard"></i> 我的订单  <i class="icon ion-ios-arrow-right"></i> </a> <a class="item item-icon-left item-icon-right"> <i class="icon ion-star"></i> 我的收藏  <i class="icon ion-ios-arrow-right"></i> </a> <a class="item item-icon-left item-icon-right"> <i class="icon ion-gear-a"></i> 设置  <i class="icon ion-ios-arrow-right"></i> </a> </div> </ion-content> </ion-view>

 

 

 

 

绅V科技
关注
html5,小型项目
01-03
我做的，一个小型游戏网站，用到了html5和css知识，简单的一个游戏小网站，适合初学者学习
html5项目例子
11-15
在HTML5项目中，index.html通常作为网站或应用的主页面，而tunneler.html可能是某种特定功能或场景的实现。 在每个示例后面跟着的"_files"目录，如"Geoid Viewer_files"和"Core - a defensive game built in ...
html 小项目
qq_45425315的博客
03-27 2767
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
【HTML知识】——-HTML5介绍(一)
最新发布
2401_86134243的博客
08-24 850
HTML5的介绍 Web 技术发展时间线 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2000 XHTML1（严格的html） 2002 Tableless Web Design（表格布局） 2005 AJAX 2009 HTML5 2014 HTML5 Finalized 2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。 2009年就已经
HTML页面小项目（简陋版）
weixin_45515107的博客
11-15 487
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="wideth=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>练习</title> </hea.
HTML5项目笔记1：项目准备和工具使用
weixin_30335575的博客
05-20 122
公司的NewCase，有需要离线应用工作系统这一块，目标是网络无论在线或离线情况下都可以执行系统操作，这样员工在无网络的情况下依然可以执行公司的项目任务，进行表单填报和数据的客户端保存，并在网络通畅的时候与服务端进行交付和数据通信。整体设计经过讨论使用HTML5的功能开发，并指定用户使用特定的浏览器。 该系统包含了HTML5的FormAPI（表单），WebStorageAPI，Comm...
9个其他流行HTML5项目供您使用和研究
代码教主
06-16 569
毫无疑问，HTML5已成为在多媒体世界中构建应用程序的最佳方法。 这样做带来了Web技术的一些巨大进步。 例如，HTML5为矢量图和文件共享以及照片或视频编辑等交互式在线功能提供了出色的支持。 它还使我们能够在不需要第三方插件的情况下在Web浏览器中流式传输音频和视频文件，幸运的是，这反过来又使连接速度更快。 凭借各种屏幕尺寸和分辨率的智能设备，市场已经饱和，HTML5还使用户能够跨多种设...
仿京东商城H5主页面源代码，html、css、js 下载
05-13
【标签】"仿京东商城H5"表明这是一个针对H5（HTML5）标准的项目，HTML5是目前最新的HTML版本，增加了许多新的元素、API和功能，如音频视频处理、离线存储、Canvas绘图、SVG矢量图等，增强了网页的多媒体和交互能力，...
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。...无论是对个人项目还是商业应用，这些HTML5+CSS3的精美登录界面都是提升网页质量的宝贵资源。
HTML5 CSS3 专题 ：3D展示商品信息项目完整实例源码
07-12
在"HTML5 CSS3 专题：3D展示商品信息项目完整实例源码"这个项目中，我们将深入探讨如何利用这两者来创建一个引人入胜的商品3D展示效果。 首先，HTML5引入了许多新的元素，如`<article>`、`<section>`、`<nav>`等，...
疯狂HTML5CSS3JavaScript讲义_源码
08-04
HTML5、CSS3和JavaScript是现代网页开发的三大核心技术，它们共同构建了丰富的用户体验和交互功能。本讲义源码的提供，旨在帮助学习者深入理解这些技术的实际应用。 HTML5是超文本标记语言的最新版本，它在HTML4的...
HTMl小项目
09-12
html网页开发项目，小组制作，没有后台，只是网页设计
html5网站项目
01-28
html5 css的网页项目。是静态的不带js的
HTML5项目实战 HTML5项目实战 HTML5项目实战
04-28
HTML5项目实战 HTML5项目实战 HTML5项目实战 HTML5项目实战
html5项目实战
06-12
html5项目实战，可以参考一下
Html项目（共8个模块）
06-05
此项目为“企业服务型”项目，共有8个模块：首页、网站介绍、最新公告、模版展示、会员中心、资源下载、练习我们和帮助中心。团队可有2-4个人
关于html的一个小项目
qq_34818060的博客
12-18 677
先上代码 当前输入框高亮显示 body,form,h2,p,input{margin:0;padding:0;} body{color:#4f4f4f;font:14px/1.5 \5fae\8f6f\96c5\9ed1;} form{width:400px;background:#fef4eb;border:2px solid #f60;padding-bottom:10px;overf
html5小项目_2
m0_58451019的博客
04-27 244
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .content{ width: 90px; height: 120px; border: 1px solid red; overflow: scroll; } .PgD.
HTML实战小项目：简单的注册页面，汇款单，“将进酒”布局
weixin_67259816的博客
10-28 772
【代码】HTML实战小项目：简单的注册页面，汇款单，“将进酒”布局。纯HTML写的，希望大家可以共同学习进步；作为前端小白，只是想把功能实现出来。
HTML5实战：10个小项目实例探索
本资源是一份全面的HTML5小型开发实例大全教程，涵盖了丰富的HTML5技术应用实例，旨在帮助学习者深入理解并掌握HTML5在实际项目中的实际操作。以下是部分内容概要： 1. **HTML5 Canvas实现百分比进度条**： 这一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值