H5前端学习基地iOS学习

跨平台开发，html学习第一天-登录页面

2016-11-03  本文已影响179人  zhangyunjiang

一个具体功能的完整的网页，一般由3个部分组成

1.HTML

网页的具体内容和结构

2.css

网页的样式

3.JavaScript

网页的交互效果，比如对用户鼠标事件作出响应


HTML5新增标签
HTML5新增了27个标签元素，废弃了16个标签，主要包括结构性标签，级块性标签，行内语义性标签，交互性标签

1.结构性标签

负责web上下文结构的定义，确保html文档，包含：

* article 文章主体内容（一篇博客，一篇论坛帖子，一段用户评论，插件）
* header 标记头部区域内容
* footer 标记脚部区域内容
* section 区域章节表述
* nav 菜单导航，链接导航

2.块级性标签

完成web页面区域的划分，确保内容的有效分隔，包含

* aside 注记，贴士，侧栏，摘要，插入的引用作为补充主体的内容
* figure 对多个元素组合并展开的元素，常与figcation联合使用
* code 表示一段代码块
* dialog 人与人之间对话，包含dt和dd两个组合元素（dt 用于表示说话者，dd用于表示说话着的内容）

3.行行语义行标签

完成web页面具体内容的引用和表述，丰富展示内容，包含

* meter 特定范围内的数值，如工资，数量，百分比
* time 时间值
* progress 进度条，可用max，min，step进行控制，完成对进度的表示和监听
* video 视频元素，用于视频播放，支持缓冲预加载和多种视频媒体格式
* audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
<audio src="audio/石头李玉刚 - 雨花石 [mqms].mp3" controls="controls"></audio>
<video src="audio/223916230816be3143063373.mp4" controls="controls"></video>

4.交互性标签

功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包含：

* details 表达一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
* datagrid 控制客户端数据与显示，可用于动态脚本及时更行
* menu 用于交互菜单
* command 用来处理命令按钮

简单登录页面

<!DOCTYPE html>
<html class="ui-page-login">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>数据采集</title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <style>
        a,
        address,
        b,
        big,
        blockquote,
        body,
        center,
        cite,
        code,
        dd,
        del,
        div,
        dl,
        dt,
        em,
        fieldset,
        font,
        form,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        html,
        i,
        iframe,
        img,
        ins,
        label,
        legend,
        li,
        ol,
        p,
        pre,
        small,
        span,
        strong,
        u,
        ul,
        var {
            padding: 0;
            margin: 0;
        }
        
        body {
            text-align: center;
            background-color: blue;
        }
        
        #panel .panel-top {
            color: white;
            height: 150px;
            padding: 100px 100px 50px 100px;
        }
        
        #panel .panel-top h2 {
            font-size: 28px;
            border-bottom: 100px;
        }
        
        #panel .panel-content {
            margin-top: 40px;
        }
        
        #panel .panel-content .int {
            display: inline-block;
            text-align: center;
            /*水平居中*/
            margin-bottom: 10px;
            position: relative;
            height: 45px;
            width: 80%;
        }
        
        #panel .panel-content label {
            position: absolute;
            width: 45px;
            height: 45px;
            line-height: 45px;
        }
        
        #panel .panel-content .int input {
            width: 100%;
            height: 100%;
            border: 1px solid #ddd;
            padding-left: 40px;
            box-sizing: border-box;
            border-radius: 6px;
            font-size: 18px;
            fd
        }
        
        #panel .panel-content .int input:focus {
            outline: none;
            border: 1px solid orangered;
            box-shadow: 0 0 2px orangered;
        }
        
        #panel .panel-content .setting a {
            margin-left: 40px;
            margin-right: 40px;
            margin-top: 10px;
            font-size: 16px;
            text-decoration: none;
            margin-bottom: 20px;
            color: black;
        }
        
        #panel .panel-content a.pwd-login-left {
            float: left;
        }
        
        #panel .panel-content a.pwd-login-rigth {
            float: right;
        }
        
        #panel .panel-content button {
            width: 60%;
            height: 50px;
            border: 0;
            color: white;
            margin-bottom: 10px;
            border-radius: 6px;
            background-color: orange;
            font-size: 18px;
        }
        
        #panel .panel-content button:active {
            background-color: darkorange;
        }
        
        #panel .panel-content button:focus {
            outline: none;
        }
    </style>
</head>

<body>
    <div id="panel">
        <div class="panel-top">
            <h2>数据采集</h2>
        </div>
        <div class="panel-content">
            <div class="int">
                <label class="mui-icon mui-icon-person"></label>
                <input onkeyup="var reg = /^[\d\_a-zA-Z]+$/;if(!reg.test(this.value)) this.value='';" id="mnumber" type="text" placeholder="请输入用户名" value="">
            </div>
            <div class="int">
                <label class="mui-icon mui-icon-locked"></label>
                <input onkeyup="var reg = /^[\d\_a-zA-Z]+$/;if(!reg.test(this.value)) this.value='';" id="pwd" type="text" placeholder="请输入密码" value="">
            </div>
            <div class="setting">
                <a href="#" class="pwd-login-left"><input type="checkbox"><span>记住密码</span></a>
                <a onclick="registered()" class="pwd-login-rigth"><span>注册登陆</span></a>
            </div>
            <div>
                <button onclick="Thelogin()">登陆</button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/mui.min.js"></script>
    <script type="text/javascript">
        mui.init()

        function Thelogin() {
            var number = document.getElementById('mnumber').value;
            var pwd = document.getElementById('pwd').value;
            if(number.length > 0 && pwd.length > 0) {
                if(number == 'admin' && pwd == 1234) {
                    mui.openWindow({
                        url: 'html/main.html',
                        id: 'main'
                    });
                } else {
                    mui.toast('用户名或密码错误')
                }
            } else {
                mui.toast('输入不能为空')
            }

        }

        function registered() {
            mui.openWindow({
                url: 'html/registered.html',
                id: 'registered'
            });
        }
    </script>
</body>
</html>

图效果

登录页面.png

说明

图标采用的是mui-icon，跳转和提示功能采用方式的mui，使用时需导入mui.min.css和mui.min.js

上一篇下一篇

猜你喜欢

热点阅读