跨平台开发 H5 学习第一天 - 登录页面设计

一个具体功能的完整的网页,一般由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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,541评论 1 91
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 1,568评论 1 11
  • 问答题1 /72浏览器页面有哪三层构成,分别是什么,作用是什么?参考答案构成:结构层、表示层、行为层分别是:HTM...
    _Yfling阅读 916评论 0 23
  • 源自SeeYouBug博客 地址为:http://www.cnblogs.com/SeeYouBug 一、HTML...
    欲泪成雪阅读 954评论 0 15
  • 青春如诗,句句悠扬,青春如歌,余音绕梁。经历是短暂的,但画面却是永恒的,就让那永恒的画面定格在年华的沧海,短暂的经...
    _SummerTree阅读 232评论 0 2
  • 吃点啥? 其实我个人感觉自己做的饭还行,主要是我自己特爱吃。什么蛋炒饭啊,都能到达金包银的最高境界了,最近给大豆豆...
    D058Icepunk日照阅读 60评论 2 2
  • 不知道为什么,在办公室里坐上一天,虽然不用消耗太多的体力,虽然空调的温度也被调的足够低,有时候甚至还会羡慕别人在室...
    Eik阅读 534评论 0 0
  • Watching movie, Learning movie and Applying movie 看电影,学电影...
    王正磊01阅读 81评论 0 1
  • 不要把情绪表露出来,表现的越急切,越不把你当回事,耍人玩有意思吗?记住,这是第二次了,下次她们再说什么光听就行了。...
    whitedaisy阅读 183评论 0 1