精华内容
下载资源
问答
  • html5简单的 登陆界面

    2015-09-06 10:05:34
    html5 简单的登陆界面 美观可以用 易于新手学习与应用
  • html+css+js实现简单登陆注册界面

    万次阅读 2020-01-16 13:33:12
    其中html提供标签配合CSS实现界面美化功能,CSS3中加入了新样式,HTML5中也加入了更加方便控件选择。例如本次页面中输入框中提示就是用新加入placeholder实现。谷歌、火狐等浏览器都可以正常解析。 ...

    前辈们请跳过

     

    前端入门学习第二天,对照W3C的文档写了简单的登录注册实现

          html和css,js分别负责网页的界面、样式、动作。其中html提供的标签配合CSS实现界面美化的功能,CSS3中加入了新的样式,HTML5中也加入了更加方便的控件选择。例如本次页面中的输入框中提示就是用新加入的placeholder实现。谷歌、火狐等浏览器都可以正常解析。

    login.html:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>login</title>
            <link type="text/css"  rel="stylesheet" href="css/login.css" />
        </head>
        <body>
            <div class="top">
              <a href="index.html" class="Wel">Welcome to login</a>
            </div>
                <span class="title"></span>
                
                <div class="card">
                    <div class="img">
                        <img src="" />
                    </div>
                    <div class="card_body">
                        <form action="index.html" method="post">
                            <div class="form-group">
                                <label for="username">用户名:</label>
                                <input type="text" name="username" placeholder="请输入您的用户名" οnchange="chkname()" id="username" /><br />
                                <p id="tip"class="tip"></p>
                            </div>
                            <div class="form-group">
                                <label for="password">密&nbsp;&nbsp;&nbsp;码:</label>
                                <input type="password" name="password"  placeholder="请输入您的密码" οnchange="chkpassword()" id="password" /><br />
                                <p id="tip2"class="tip"></p>
                            </div>
                            <div class="form-group">
                                <label for="checkcode">验证码:</label>
                                <input type="text" name="checkcode" placeholder="验证码" οnchange="chkcode()" id="checkcode"/><br /><br />
                            </div>
                            <button type="button" οnclick="check()" >确认登录</button>
                        </form>
                        <p class="jump">没有账号?立即<a href="register.html">注册</a></p>
                    </div>
                </div>    
            <script src="js/login.js"></script>
        </body>
    </html>

    login.js:

    function chkname(){
        str=document.getElementById("username").value;
        if (!(/^\w+$/.test(str)) && str.length>0){
            document.getElementById("tip").innerHTML="*用户名须由字母数字下划线组成!";
            // document.write("用户名须由字母数字下划线组成");
        }else{
            document.getElementById("tip").innerHTML="";
        }
    }
    function chkpassword(){
        str=document.getElementById("password").value;
        if(str.length<8 && str){
            document.getElementById("tip2").innerHTML="*密码不可以少于八位!";
            
        }else{
            document.getElementById("tip2").innerHTML="";
        }
    }
        
    function chkcode(){
        str = document.getElementById("checkcode").value;
        if(!str){
            alert("请输入验证码!");
        }    
    }

     

     

    展开全文
  • 继上一次介绍了《神奇六边形》完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏《跳跃方块》完整开发流程。 ... 因内容太多,为方便大家阅读,所以分多次来...这个界面比较简单,创...

    继上一次介绍了《神奇的六边形》的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏《跳跃的方块》的完整开发流程。

              (点击图片可进入游戏体验

    因内容太多,为方便大家阅读,所以分多次来讲解。

    若要一次性查看所有文档,也可点击这里

     

    接上回(《跳跃的方块》Part 8

     

    (二)登陆等待界面

    这个界面比较简单,创建一个alpha=0.6的全屏图片节点,然后居中显示“正在登录中,请稍候……”就可以了。

     

     

    (三)结算界面

    创建管理脚本

    创建脚本:GameOver.js。用于更新界面数据,和管理按钮功能。 内容如下:

     1 /**
     2  * 游戏结束结算界面
     3  */
     4 var GameOver = qc.defineBehaviour('qc.JumpingBrick.GameOver', qc.Behaviour, function() {
     5     var self = this;
     6     JumpingBrick.gameOver = self;
     7 }, {
     8     highScoreShow : qc.Serializer.NODE,
     9     lastScoreShow : qc.Serializer.NODE,
    10     newHighShow : qc.Serializer.NODE,
    11     descShow : qc.Serializer.NODE,
    12     retryButton : qc.Serializer.NODE,
    13     followButton : qc.Serializer.NODE,
    14     annoButton : qc.Serializer.NODE,
    15     shareButton : qc.Serializer.NODE,
    16     shareGuide : qc.Serializer.NODE,
    17     otherShareGuide : qc.Serializer.NODE,
    18     shareText : qc.Serializer.NODE
    19 });
    20 
    21 
    22 // Awake is called when the script instance is being loaded.
    23 GameOver.prototype.awake = function() {
    24     var self = this;
    25     self.retryButton.onClick.add(function() {
    26         JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.Game);
    27     }, self);
    28     self.followButton.onClick.add(function() {
    29     document.location.href =
    30                     'http://mp.weixin.qq.com/s?__biz=MzI5MTA3Nzc4Mw==&mid=400360588&idx=1&sn=090f19666259b1ab5d0a5c5d870de8ad&scene=0#rd';
    31     }, self);
    32     self.annoButton.onClick.add(function() {
    33         JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.Announcement);
    34     }, self);
    35     self.shareButton.onClick.add(function() {
    36         if (JumpingBrick.data.isWeChat()) {
    37             self.shareGuide.visible = true;    
    38         }
    39         else {
    40             self.otherShareGuide.visible = true;
    41         }
    42     }, self);
    43     self.shareGuide.onClick.add(function() {
    44         self.shareGuide.visible = false;
    45     });
    46     self.otherShareGuide.onClick.add(function() {
    47         self.otherShareGuide.visible = false;
    48     });
    49 
    50     self.game.input.onKeyDown.add(function(keyCode) {
    51         if (!self.gameObject.worldVisible) return;
    52         if (keyCode === qc.Keyboard.ENTER || keyCode === qc.Keyboard.SPACEBAR) {
    53             JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.Game);
    54         }
    55     }, self);
    56 };
    57 
    58 
    59 GameOver.prototype.refresh = function() {
    60     var self = this,
    61         data = JumpingBrick.data;
    62     self.shareGuide.visible = false;
    63     self.annoButton.visible = data.loginType === qc.JumpingBrick.DataManager.WECHATLOGIN;
    64     if (self.annoButton.visible) {
    65         self.shareButton.setStretch(190, 0, 0, 16);
    66         self.shareText.fontSize = 32;
    67     }
    68     else {
    69         self.shareButton.setStretch(0, 0, 0, 0);
    70         self.shareText.fontSize = 40;
    71     }
    72     self.highScoreShow.text = '最高分:' + data.highScore;
    73     self.lastScoreShow.text = data.lastScore.toString();
    74     self.newHighShow.visible = !!data.lastScore && data.newHigh;
    75     self.descShow.text = self._makeDesc(data.lastScore);
    76 };
    77 
    78 GameOver.prototype._makeDesc = function(score) {
    79     var percent = Math.min(30, score) * 2;
    80     if (score > 30) {
    81         percent += Math.min(20, score - 30);
    82     }
    83     if (score > 50) {
    84         percent += Math.floor((score - 50) / 2);
    85     }
    86     percent = Math.min(99, percent);
    87     return '你击败了全球' + parseInt(percent) + '%的玩家';
    88 };
    View Code

    处理界面

    和登录界面类似,都是以屏幕中心为锚点,进行布局。然后和脚本关联上。如下图所示:

     

     

    游戏中,对于在微信中分享和在其他浏览器分享,期望有两套分享指引,如图所示: 

      

     

    下次将继续介绍“排行榜界面”,敬请期待!

     

    其他相关链接

    开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了!

    JS开发HTML5游戏《神奇的六边形》(一)

    青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 1

    转载于:https://www.cnblogs.com/qici/p/5101338.html

    展开全文
  • 该篇文章是作者博客资源,课程上课内容。...5.JS登陆界面实现 6.图片浏览器 --------------------- 作者:Eastmount 来源:CSDN 博客地址:https://blog.csdn.net/Eastmount/article/details/84104692
  • 这篇文章是作者《中小型网站开发及web设计》课程给同学们分享网页设计在线知识,主要涉及Dreamweaver实现网站布局、简单站点开发、区域跳转、注册登录界面、图片查看器等内容,课程...5.JS登陆界面实现 6.图片浏览器

    这篇文章是作者《中小型网站开发及web设计》课程给同学们分享的网页设计在线知识,主要涉及Dreamweaver实现网站布局、简单站点开发、区域跳转、注册登录界面、图片查看器等内容,课程前期已经详细讲解了TXT撰写HTML基础代码,后期准备结合软件加深下。非常基础的文章,希望对初学者有所帮助。

    1.Dreamweaver创建站点及注册页面
    2.DW实现网页区域跳转
    3.图片广告漂浮及Spry菜单栏
    4.网站简单布局及样式设置
    5.JS登陆界面实现
    6.图片浏览器

    代码下载地址:https://download.csdn.net/download/eastmount/10801407

    PS:2019年1~2月作者参加了CSDN2018年博客评选,希望您能投出宝贵的一票。我是59号,Eastmount,杨秀璋。投票地址:https://bss.csdn.net/m/topic/blog_star2018/index

    五年来写了314篇博客,12个专栏,是真的热爱分享,热爱CSDN这个平台,也想帮助更多的人,专栏包括Python、数据挖掘、网络爬虫、图像处理、C#、Android等。现在也当了两年老师,更是觉得有义务教好每一个学生,让贵州学子好好写点代码,学点技术,"师者,传到授业解惑也",提前祝大家新年快乐。2019我们携手共进,为爱而生。

    一. 创建站点及注册页面

    首先,创建站点。点击“站点”=>“新建站点”。

    创建的站点比如位于桌面“eastmount”文件夹中,整个网站相关的内容都存放在该文件夹中。

    选中站点,右键新建HTML文件及文件夹。

    在站点中创建一个“register.html”文件,如下所示:

    插入的代码如下图所示:

    register.html

    <html>
    <head>
    <style type="text/css">
    	/* 这个链接改变颜色 */
    	a.one:link {color: #ff0000}
    	a.one:visited {color: #0000ff}
    	a.one:hover {color: #ffcc00}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户注册</title>
    <style type="text/css">
    <!--
    .STYLE1 {color: #FF0000}
    -->
    </style>
    </head>
     
    <body>
    <form id="form1" name="form1" method="post">
      <table width="570" border="0" align="center">
        <tr>
          <td colspan="2" align=center><H2>学生用户注册</H2></td>
        </tr>
        <tr>
          <td colspan="2" align=right><A href="index.php" class="one">返回</A></td>
        </tr>
        <tr>
          <td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
        </tr>
        <tr>
          <td  width="217"><div align="right">学号:<span class="STYLE1">*</span></div></td>
          <td width="343"><input type="text" name="number" id="number" value="" style=width:165pt; maxlength="50"/></td>
        </tr>
        <tr>
          <td><div align="right">姓名:<span class="STYLE1">*</span></div></td>
          <td><input type="text" name="name" id="name" value="" style=width:165pt; maxlength="50"/></td>
        </tr>
        <tr>
          <td><div align="right">插入文件:<span class="STYLE1">*</span></div></td>
          <td><input type="file" name="wj" id="wj" value="" style=width:165pt; maxlength="50"/></td>
        </tr>
        <tr>
          <td><div align="right">性别:<span class="STYLE1">*</span></div></td>
          <td><input type="radio" value="" name="sex"><input type="radio" value="" name="sex"> 
          </td>
        </tr>
        <tr>
          <td><div align="right">兴趣:<span class="STYLE1">*</span></div></td>
          <td>吃饭<input type="checkbox" value="吃饭" name="interest1"> 
    	睡觉<input type="checkbox" value="睡觉" name="interest2"> 
    	写代码<input type="checkbox" value="睡觉" name="interest3"> 
          </td>
        </tr>
        <tr>
          <td><div align="right">Email邮件:<span class="STYLE1">*</span></div></td>
          <td><input type="text" name="email" id="email" value="" style=width:165pt; maxlength="50"/></td>
        </tr>
        <tr>
          <td><div align="right">密码:<span class="STYLE1">*</span></div></td>
          <td><input type="password" name="pwd" id="pwd" value="" style=width:165pt; maxlength="50"/></td>
        </tr>
        <tr>
          <td><div align="right">确认密码:<span class="STYLE1">*</span></div></td>
          <td><input type="password" name="pwd2" id="pwd2" value="" style=width:165pt; maxlength="50"/></td>
        </tr>
        <tr>
          <td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
        </tr>
        <tr>
          <td><div align="right">学院:</div></td>
          <td><select name="zy" id="zy" value="" style=width:165pt; maxlength="50">
            <option value="软件学院">软件学院</option>
            <option value="计算机学院">计算机学院</option>
            <option value="自动化学院">自动化学院</option>
            <option value="光电学院">光电学院</option>
            <option value="车辆学院">车辆学院</option>
            <option value="信息与电子学院">信息与电子学院</option>
            <option value="机电学院">机电学院</option>
            <option value="基础教育学院">基础教育学院</option>
            <option value="其他">其他</option>
          	</select>      
          </td>
        </tr>
        <tr>
          <td><div align="right">出生日期:<span class="STYLE1">*</span></div></td>
          <td><input type="date" name="birth" id="birth" value="" 
          	style=width:165pt; maxlength="50" ></td>
        </tr>
        <tr>
          <td><div align="right">喜欢颜色:<span class="STYLE1">*</span></div></td>
          <td><input type="color" name="col" id="col" value="" 
          	style=width:165pt; maxlength="50" ></td>
        </tr>
        <tr>
          <td><p align="right">专业:</p>
          <p align="right">(单选)</p></td>
          <td><select name="subject" size="4" id="subject" value="" style=width:165pt; maxlength="50">
            <option value="软件工程">软件工程</option>
            <option value="数字媒体">数字媒体</option>
            <option value="信息安全">信息安全</option>
            <option value="数字仿真">数字仿真</option>
            <option value="移动应用开发">移动应用开发</option>
          </select></td>
        </tr>
    		<tr>
          <td><div align="right">入学年月:</div></td>
          <td><select name="year" id="year" value="" style=width:165pt; maxlength="50">
            <option value="2010年">2010年</option>
            <option value="2011年">2011年</option>
            <option value="2012年">2012年</option>
            <option value="2013年">2013年</option>
            <option value="2014年">2014年</option>
            <option value="2015年">2015年</option>
            <option value="2016年">2016年</option>
            <option value="2017年">2017年</option>
            <option value="2018年">2018年</option>
          	</select>      
          </td>
        </tr>
        <tr>
          <td><div align="right"></div></td>
          <td><select name="month" id="month" value="" style=width:165pt; maxlength="50">
            <option value="1月">01月</option>
            <option value="2月">02月</option>
            <option value="3月">03月</option>
            <option value="4月">04月</option>
            <option value="5月">05月</option>
            <option value="6月">06月</option>
            <option value="7月">07月</option>
            <option value="8月">08月</option>
            <option value="9月">09月</option>
            <option value="10月">10月</option>
            <option value="11月">11月</option>
            <option value="12月">12月</option>
          	</select>      
          </td>
        </tr>
        <tr>
          <td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
        </tr>
        <tr>
          <td><div align="right">
            <input type="submit" style='font-size:15px' name="Submit" value="提交"/>
          </div></td>
          <td><div align="center">
          	<input type="reset" name="button2" style='font-size:15px' id="button2" value="重置" />
          	</div></td>
        </tr>
      </table>
    </form>
    </body>
    </html>
    

    运行结果如下所示:



    二. DW实现网页区域跳转

    接下来讲解网页区域跳转,首先创建新的网页 main1.html。

    然后插入一张图片,如下所示:

    通过div设置图片居中,该图片建议学生采用PS技术构建自己的网页主界面。接在在Dreamweaver中点击图片,在左下角中可以插入热点区域。

    可以选择矩形、圆形或多边形。

    选中之后可以勾线我们的“个人简介”等字样,当鼠标点击这些区域时能够进行跳转。底部可以添加要跳转的网址,比如百度或本地的HTML网页。

    其实热点区域跳转对应的HTML标签是MAP,如下:

    main1.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    	<div align="center">
    		<img src="images/bg.png" width="900" height="486" usemap="#Map" border="0" />
            <map name="Map" id="Map">
              <area shape="rect" coords="51,115,172,156" href="http://www.baidu.com" />
              <area shape="rect" coords="203,82,268,127" href="#" />
              <area shape="rect" coords="286,146,400,194" href="#" />
              <area shape="rect" coords="432,176,531,214" href="#" />
              <area shape="rect" coords="555,112,660,156" href="#" />
              <area shape="rect" coords="715,117,810,155" />
            </map>
        </div>
    </body>
    </html>
    

    跳转过程如下所示,点击个人简介跳转至百度主页。



    三. 图片广告漂浮及Spry菜单栏

    接着创建一个 pic.html文件,并添加相应代码。其中images文件夹中插入一张 test.jpg 图片。

    对应的代码如下所示:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            #demo {
                width: 100px;
                height: 100px;
                position:absolute;
                border-radius:50px;
            }
        </style>
     
        <script type="text/javascript">
            window.onload = function(){
                var demo = document.getElementById('demo');
                var sx = sy = 10;
                var x = y = 0;
     
                function move(){
                    if(document.documentElement.clientWidth - demo.offsetWidth-10 < x || x < 0){
                        sx = -sx;
                    }
     
                    if(document.documentElement.clientHeight - demo.offsetHeight-10 < y || y < 0){
                        sy = -sy;
                    }
     
                    x = demo.offsetLeft + sx;
                    y = demo.offsetTop + sy;
     
                    demo.style.left = x + 'px';
                    demo.style.top = y + 'px';
                }
     
                var timer = setInterval(move, 100);
     
                demo.onmouseover = function(){
                    clearInterval(timer);
                }
     
                demo.onmouseout = function(){
                    timer = setInterval(move, 100);
                }
            }
        </script>
     
        <img src="images/test.jpg" id="demo" />
        
    </body>
    </html>
    

    注意:该文件将JavaScript代码切入其中,没有格外的JS文件。
    运行结果如下图所示:

    接着讲解网站导航栏,可以通过Dreamweaver插入Spry菜单栏实现。

    选择水平菜单栏。

    最终结果如下图所示,更多知识希望同学们结合TABEL或DIV+CSS布局进行设计。



    四. 网站简单布局及样式设置

    下面补充一个简单的界面布局,代码如下:
    main2.html

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    	.1{
    		position:absolute;
    		margin-top:20px;
    		width:1200px;
    		text-align:center;
    	}
    	.toubu {
    		position:absolute;
    		font-size: 36px;
    		color:#333;
    		margin-top:10px;
    		margin-left:230px;
    		width:100px;
    	}
    	.diyi{
    		position:absolute;
    		height:40px;
    		width:600px;
    		border-radius:25px;
    		background-color:#0C9;
    		margin-left:550px;
    		margin-top:0px;
    		font-size:36px;
    		padding-left:15px;
    		padding-top:6px;
    		padding-bottom:6px;
    	}
    	a{
    		text-decoration:none;
    	}
    	.dier{
    		position:absolute;
    		margin-top:60px;
    		margin-left:80px;
    				
    	}
    	
    	p {
    		font-weight: 400;
    	}
    						
    	h2 {
    		color: #9FF;
    	}
    </style>
    </head>
    
    <body >
        <header>
          <div class="1">
                <div class="toubu">
                  <span>秀璋</span >
                </div>
        
                <span class="diyi">
                  <span ><marquee height="140px">欢迎访问Eastmount的主页</marquee></span>
              </span>
          <div>
              
          <div>          
          </div>
        </header>
         <div class="dier">
         <img  height="300px" width="1200px" src="images/bg02.jpg"  />
        </div>
    </body>
    </html>
    

    插入图片bg02.jpg,显示结果如下所示:



    五. JS简单登陆界面实现

    下面简单讲解一个登陆界面实现,该界面采用JS、CSS等文件。同学们在制作网站过程中,可以从开源网站下载一些比较好的代码,然后结合PS等技术修改为自己的成果。

    如下图所示,在站点中插入已下载的图片、CSS、JS等文件。

    然后建立 login.html 并添加对应的代码,代码中含有简单的输入用户名、密码判断。

    运行结果如下所示:

    login.html

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>系统登录</title>
    <link href="css/login.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
    <link href="css/demo.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="js/jquery1.42.min.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
    <script type="text/javascript" src="js/Validform_v5.3.2_min.js"></script>
    <script>
    	$(function(){
    		$(".i-text").focus(function(){
    			$(this).addClass('h-light');
    		});
    	
    		$(".i-text").focusout(function(){
    			$(this).removeClass('h-light');
    		});
    	
    		$("#username").focus(function(){
    			var username = $(this).val();
    			if(username=='输入账号'){
    				$(this).val('');
    			}
    		});
    		
    		$("#username").focusout(function(){
    			var username = $(this).val();
    			if(username==''){
    			$(this).val('输入账号');
    			}
    		});
    		
    		$("#password").focus(function(){
    			 var username = $(this).val();
    			 if(username=='输入密码'){
    				 $(this).val('');
    			}
    		});
    		
    		$("#yzm").focus(function(){
    			 var username = $(this).val();
    			 if(username=='输入验证码'){
    			 $(this).val('');
    			}
    		});
    		
    		$("#yzm").focusout(function(){
    			 var username = $(this).val();
    			 if(username==''){
    				$(this).val('输入验证码');
    			 }
    		});
    	
    		$(".registerform").Validform({
    			tiptype:function(msg,o,cssctl){
    				var objtip=$(".error-box");
    				cssctl(objtip,o.type);
    				objtip.text(msg);
    			},
    			ajaxPost:true
    		});
    	
    	});
    
    </script>
    </head>
    <body>
    
    <div class="header">
      <h1 class="headerLogo"><a title="后台管理系统" target="_blank" href="http://www.jq22.com"><img alt="logo" src="images/logo.gif"></a></h1>
    	<div class="headerNav">
    		<a target="_blank" href="http://www.jq22.com">华软官网</a>
    		<a target="_blank" href="http://www.jq22.com">关于华软</a>
    		<a target="_blank" href="http://www.jq22.com">开发团队</a>
    		<a target="_blank" href="http://www.jq22.com">意见反馈</a>
    		<a target="_blank" href="http://www.jq22.com">帮助</a>	
    	</div>
    </div>
    
    <div class="banner">
    <div class="login-aside">
      <div id="o-box-up"></div>
      <div id="o-box-down"  style="table-layout:fixed;">
      <div class="error-box"></div>
      <form class="registerform"action="demo/ajax_post.jsp">
       <div class="fm-item">
    	   <label for="logonId" class="form-label">MISS系统登陆:</label>
    	   <input type="text" value="输入账号" maxlength="100" id="username" class="i-text" ajaxurl="demo/valid.jsp"  datatype="s6-18" errormsg="用户名至少6个字符,最多18个字符!"  >    
           <div class="ui-form-explain"></div>
      </div>
    
      <div class="fm-item">
    	   <label for="logonId" class="form-label">登陆密码:</label>
    	   <input type="password" value="" maxlength="100" id="password" class="i-text" datatype="*6-16" nullmsg="请设置密码!" errormsg="密码范围在6~16位之间!">    
           <div class="ui-form-explain"></div>
      </div>
    
      <div class="fm-item pos-r">
    	   <label for="logonId" class="form-label">验证码</label>
    	   <input type="text" value="输入验证码" maxlength="100" id="yzm" class="i-text yzm" nullmsg="请输入验证码!" >    
           <div class="ui-form-explain"><img src="images/yzm.jpg" class="yzm-img" /></div>
      </div>
    
      <div class="fm-item">
    	   <label for="logonId" class="form-label"></label>
    	   <input type="submit" value="" tabindex="4" id="send-btn" class="btn-login"> 
           <div class="ui-form-explain"></div>
      </div>
      </form>
      </div>
    </div>
    
    	<div class="bd">
    		<ul>
    			<li style="background:url(themes/theme-pic11.jpg) #CCE1F3 center 0 no-repeat;"><a target="_blank" href="http://www.jq22.com"></a></li>
    			<li style="background:url(themes/theme-pic21.jpg) #BCE0FF center 0 no-repeat;"><a target="_blank" href="http://www.jq22.com"></a></li>
    		</ul>
    	</div>
    	<div class="hd"><ul></ul></div>
    </div>
    <script type="text/javascript">jQuery(".banner").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"fold",  autoPlay:true, autoPage:true, trigger:"click" });</script>
    <div class="banner-shadow"></div>
    </body>
    </html>
    

    六. 图片浏览器

    就个人而言,我非常推崇同学们学习别人的代码进行重构,再制作属于自己的作品,但需要注明出处。比如下面这是来自 HTML5 Tricks 网站的图片查看器。
    官网地址:https://www.html5tricks.com/jquery-hor-thumb-slider.html
    下载地址:https://download.csdn.net/download/eastmount/10801407

    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>带缩略图水平切换的jQuery焦点图插件DEMO演示</title>
    
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    
    <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    body{background:url(img/bg.gif);}
    a,img{border:none;}
    
    .zx_slider{position:relative;margin:40px auto 0 auto;width:1002px;height:350px;overflow:hidden;border-radius:5px;}
    .zx_slider .imgbox{width:3750px;height:310px;position:absolute;left:5px;top:4px;}
    .zx_slider .imgbox img{float:left;width:750px;height:310px;}
    .zx_slider .png{width:1002px;height:350px;left:0px;top:0px;position:absolute;background:url(img/slider_bg.png);_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/slider_bg.png");}
    .zx_slider .lbtn{cursor:pointer;width:45px;height:55px;position:absolute;left:0px;bottom:-3px;background:url(img/slider_l_btn.png);_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/slider_l_btn.png");}
    .zx_slider .rbtn{cursor:pointer;width:45px;height:55px;position:absolute;left:718px;bottom:-3px;background:url(img/slider_r_btn.png);_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/slider_r_btn.png");}
    .zx_slider .btnbox{width:750px;height:60px;position:absolute;left:30px;bottom:0px;}
    .zx_slider .btnbox a{cursor:pointer;display:inline-block;float:left;width:126px;height:54px;margin:0 0 0 10px;}
    .zx_slider .btnbox a img{position:relative;display:inline;width:120px;height:48px;float:left;border:3px solid #392101;border-radius:2px;}
    .zx_slider .btnbox a .img_hover{border:3px solid #e4471f;border-radius:2px;}
    .zx_slider .slider_p{overflow:hidden;width:220px;height:290px;position:absolute;right:15px;top:15px;}
    .zx_slider .slider_p h3{margin:20px 0 10px 0;font-size:20px;text-align:center;color:#faa629;}
    .zx_slider .slider_p p{line-height:26px;font-size:14px;color:#faa629;}
    .hi_btn{width:740px;height:330px;position:absolute;left:0px;top:0px;display:block;}
    </style>
    
    </head>
    
    <body>
    
    <div class="zx_slider">
    
        <div class="imgbox">
            <img alt="Danx" src="img/danx1.jpg" width="750" height="310" />
            <img alt="Danx" src="img/danx2.jpg" width="750" height="310" />
            <img alt="Danx" src="img/danx3.jpg" width="750" height="310" />
            <img alt="Danx" src="img/danx4.jpg" width="750" height="310" />
            <img alt="Danx" src="img/danx5.jpg" width="750" height="310" />
        </div>
    	
        <div class="png"></div>
    	
        <a href="#" id="hi_btn0" class="hi_btn"></a>
        <a href="#" id="hi_btn1" class="hi_btn"></a>
        <a href="#" id="hi_btn2" class="hi_btn"></a>
        <a href="#" id="hi_btn3" class="hi_btn"></a>
        <a href="#" id="hi_btn4" class="hi_btn"></a>
    	
        <div class="btnbox">
            <a onmouseover="btn_m_over(0)"><img alt="Danx" id="btn_img0" class="thumb img_hover" src="img/danx1.jpg" /></a>
            <a onmouseover="btn_m_over(1)"><img alt="Danx" id="btn_img1" class="thumb" src="img/danx2.jpg" /></a>
            <a onmouseover="btn_m_over(2)"><img alt="Danx" id="btn_img2" class="thumb" src="img/danx3.jpg" /></a>
            <a onmouseover="btn_m_over(3)"><img alt="Danx" id="btn_img3" class="thumb" src="img/danx4.jpg" /></a>
            <a onmouseover="btn_m_over(4)"><img alt="Danx" id="btn_img4" class="thumb" src="img/danx5.jpg" /></a>
        </div>
    	
        <div class="lbtn"></div>
        <div class="rbtn"></div>
    	
        <div class="slider_p">
    	
            <div id="slider_p0" class="slider_p_div">
    			<h3>标题1</h3>
    			<p>百度(Nasdaq简称:BIDU)是全球最大的中文搜索引擎,2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</p>
            </div>
    		
            <div id="slider_p1" class="slider_p_div">
    			<h3>标题2</h3>
    			<p>2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</p>
            </div>
    		
            <div id="slider_p2" class="slider_p_div">
    			<h3>标题3</h3>
    			<p>致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的</p>
            </div>
    		
            <div id="slider_p3" class="slider_p_div">
    			<h3>标题4</h3>
    			<p>您到卡上黑暗圣经卡萨丁</p>
            </div>
    		
            <div id="slider_p4" class="slider_p_div">
    			<h3>标题5</h3>
    			<p>打考勤卡和饭来欺骗卡号发</p>
            </div>
    		
        </div>
    	
    </div><!--zx_slider end-->
    
    
    <script type="text/javascript">
    var slider_count=4;
    $(".slider_p_div").hide();
    $("#slider_p0").show();
    $(".hi_btn").hide();
    $("#hi_btn0").show();
    $(".img_hover").animate({bottom:'10px'});
    var slider_i=1;
    var m_over=true;
    
    function zx_slider(){
    	if(m_over){
    		if(slider_i<0){slider_i=slider_count;}
    		//p
    		$(".slider_p_div").hide();
    		$("#slider_p"+slider_i).show();
    		//p end
    		//hi_btn
    		$(".hi_btn").hide();
    		$("#hi_btn"+slider_i).show();
    		//hi_btn end
    		//btn
    		$(".btnbox img").stop(true,true);
    		$(".btnbox img").removeClass("img_hover");
    		$(".btnbox img").animate({bottom:'0px'},200);
    		$("#btn_img"+slider_i).addClass("img_hover");
    		$("#btn_img"+slider_i).animate({bottom:'10px'},200);
    		//btn end
    		$(".imgbox").stop();
    		$(".imgbox").animate({left:'-750'*slider_i+'px'});
    		if(slider_i<slider_count){
    			slider_i++;	
    		}else{
    			slider_i=0;
    		}
    	}
    }
    
    $(".lbtn").click(function(){
    	m_over=true;
    	if(slider_i==0){slider_i=slider_count-1}else{slider_i=slider_i-2;}
    	zx_slider();
    	m_over=false;
    });
    
    $(".rbtn").click(function(){
    	m_over=true;
    	zx_slider();
    	m_over=false;
    });
    
    function btn_m_over(btn_i){
    	if(slider_i-1!=btn_i){
    		m_over=true;
    		slider_i=btn_i;
    		zx_slider();
    		m_over=false;
    	}
    }
    
    zx_timer=setInterval("zx_slider();",5000); 
    $(".zx_slider").mouseover(function(){
    	m_over=false;
    });
    $(".zx_slider").mouseout(function(){
    	m_over=true;
    });
    </script>
    
    <div style="text-align:center;clear:both">
    <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
    <script src="/follow.js" type="text/javascript"></script>
    </div>
    </body>
    </html>
    

    希望文章对大家有所帮助,如果有错误或不足之处,还请原谅。浮躁了两天,又开始回归正规,致深夜编程奋斗的青春少年,一起加油。分享一首喜欢的诗:
    一生百年凡尘苦,
    风华燃尽指尖输。
    人间岁月尽虚度,
    崎岖坎坷走迷途。
    梅傲寒霜香如故,
    旭日依旧东方出。
    回首前世无为路,
    三十余载形神孤。
    晚安,娜璋同在同乐[小狗]

    代码下载地址:https://download.csdn.net/download/eastmount/10801407
    (By:Eastmount 2018-11-22 下午5点 https://blog.csdn.net/Eastmount/)

    展开全文
  • 下面是一个登陆界面的代码,来自黑子Kuroko,网页制作:一个简易美观登录界面。我把其中的HTML和CSS代码写了比较详细注释,感受一下效果。 HTML部分: CSS部分: /*主体部分*/ body { back...

    通过之前的内容学习了HTML和CSS基础知识之后,我们就可以上手写一些”徒有其表“的网页了~在这个过程中,我们可以参考别人的网页设计和代码,多多学习总结。

    下面是一个登陆界面的代码,来自 黑子Kuroko网页制作:一个简易美观的登录界面。代码不多,但是效果还挺好看的,我把其中的HTML和CSS代码写了比较详细的注释。

    做出来的效果是这样的:

    HTML部分:

    CSS部分: 

    /*主体部分*/
    body {
        background-image: url("images/login/loginBac.jpg");; /*设置背景图片*/
        background-size: 100%;                               /*设置图片大小充满全部界面*/
        background-repeat: no-repeat;                        /*平铺设置*/
    }
     
    /*login_frame,用于容纳登录功能界面*/
    #login_frame {
        width: 400px;  /*设置尺寸*/
        height: 260px;
        padding: 13px;
     
        position: absolute; /*设置位置*/ 
        left: 50%; 
        top: 50%;
        margin-left: -200px;
        margin-top: -200px;
     
        background-color: rgba(240, 255, 255, 0.5);  /*设置背景颜色*/
     
        border-radius: 10px;  /*设置圆角*/
        text-align: center;
    }
     
    /*子元素选择器*/
    form p > * {
        display: inline-block;
        vertical-align: middle;
    }
     
    /*image_logo,用于展示logo*/
    #image_logo {
        margin-top: 22px;
    }
    
    
    /*设置标签样式*/
    .label_input {
        font-size: 14px;
        font-family: 宋体;
     
        width: 65px;
        height: 28px;
        line-height: 28px;
        text-align: center;
     
        color: white; 
        background-color: #3CD8FF;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    
    /*设置输入样式*/
    .text_field {
        width: 278px;
        height: 28px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 0;
    }
    
    /*设置btn_login*/ 
    #btn_login {
        font-size: 14px;
        font-family: 宋体;
     
        width: 120px;
        height: 28px;
        line-height: 28px;
        text-align: center;
     
        color: white;
        background-color: #3BD9FF;
        border-radius: 6px;
        border: 0;
     
        float: left;
    }
    
    /*设置forget_pwd和伪类*/
    #forget_pwd {
        font-size: 12px;
        color: white;
        text-decoration: none; 
        position: relative;
        float: right;
        top: 5px;
     
    }
     
    #forget_pwd:hover {
        color: blue;
        text-decoration: underline; /*下划线*/
    }
     
    #login_control {
        padding: 0 28px;
    }

    希望大家也能写出棒棒的网页~撒花~

    之后在更新更多代码分析吧~

    展开全文
  • 简单的HTML登录页面

    万次阅读 2017-06-06 23:22:11
    &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt;  &lt;meta charset="...登陆界面&lt;/title&gt;  &lt;style&gt;  html {  background-color: #B5DEF2;  
  • 登录界面效果

    2017-03-03 14:12:13
    刚学完html5和css3,想要简单实践一下,就写了一个简单的登录界面,所有的JQuery效果都是现学现查的,算是实现简单的交互功能。希望通过学习系统的原生JS后,能对代码实现优化,达到平稳退化,浏览器兼容等原则。 ...
  • 对于初入门的PHP新手来说,或许有一定的难度。建议大家先看看PHP中session的基础含义,需要的朋友可以...1.简单的登录界面代码示例:login.html1 2 3 4 5 登录6 7 body {8 background: url(images/bg.png);9 }101...
  • 对于初入门的PHP新手来说,或许有一定的难度。建议大家先看看PHP中session的基础含义,需要的朋友可以选择...1.简单的登录界面代码示例:login.html1 2 3 4 5 登录6 7 body {8 background: url(images/bg.png);9 ...
  • 先弄一个简单的界面 这就是简单的界面 编辑框3 这个框框 用来收取外挂海论坛返回的信息的 端口一般是 80 打开WPE 找到账号和密码发送的封包 me=11111111&password=22222222&questioni 我刚才输入的 11111111...
  • SSM系列3:SSM+easyUI+HTML5部分新特性

    千次阅读 2017-09-01 16:31:37
    首先是登陆界面,添加了一个验证码插件,没有设计什么华丽的样式,就这样显示吧。 然后是主界面,跟之前的版本一样,没有做什么改动。 再然后介绍一下具体的功能,第一个是简单的增删改查,比较基...
  • 简单的一个登陆界面: 代码: <html> <head> <style type="text/css"> form span { display: block; font-size: 1em; color: #787878; padding-bottom: 5px; fo...
  • html+css+js前端以及后台

    千次阅读 热门讨论 2019-08-13 17:26:34
    下学期的结题的创新创业项目: 先上图: ...简单的后台界面(但我觉得功能够我用了)如果有大佬可以自行修改(纯html5) 个人资料功能栏(可以按自己的要求增加删除) 目录: ...
  • 主要界面的效果图,列出了一些主要代码。 关键词 : ASP.NET ,电子商务, 数据库 目 录 第1章 绪 论 1 1.1选题背景 1 1.2可行性研究 2 1.3毕业设计进度 5 第2章 系统解决方案 6 2.1 B/S 6 ...
  • 5:后台登陆验证码识别 6:后台美化 7:新站登陆验证码识别 8:网站信息设置:网站名称,网站地址,站长邮箱等 9:无需修改任何网页,安装更为简单 10:网站信息后台设置 11:优化后台管理 12:网站推荐 13...
  • 5:后台登陆验证码识别 6:后台美化 7:新站登陆验证码识别 8:网站信息设置:网站名称,网站地址,站长邮箱等 9:无需修改任何网页,安装更为简单 10:网站信息后台设置 11:优化后台管理 12:网站推荐 13...
  • 5:后台登陆验证码识别 6:后台美化 7:新站登陆验证码识别 8:网站参数设置:网站名称,网站地址,站长邮箱等 9:无需修改任何网页,安装更为简单 10:网站信息后台设置 11:优化后台管理 12:网站推荐 13...
  • 5:后台登陆验证码识别 6:后台美化 7:新站登陆验证码识别 8:网站信息设置:网站名称,网站地址,站长邮箱等 9:无需修改任何网页,安装更为简单 10:网站信息后台设置 11:优化后台管理 12:网站推荐 13:模板...
  • 网趣HTML静态版V2012运用先进的技术手段,在生成HTM文件的基础上,准确的显示用户当前的登陆状态、新闻的浏览率、用户的身份以及相应的价格级别等信息!完美解决了HTM文件不能实时显示动态信息的瓶颈。 四、多种...
  • 5:后台登陆验证码识别 6:后台美化 7:新站登陆验证码识别 8:网站信息设置:网站名称,网站地址,站长邮箱等 9:无需修改任何网页,安装更为简单 10:网站信息后台设置 11:优化后台管理 12:网站推荐 13:模板仿...
  • 淘宝助理5最新版本

    2012-03-03 14:55:37
    图片搬家,提供简单的操作,帮您将宝贝描述中的图片自动迁移到淘宝图片空间。 支持本地图片,上传宝贝时自动将本地图片上传图片空间,让您的本地图片在宝贝描述中尽情展现。(新) 支持视频、flash,炫出你的宝贝,...
  • 7、在前一版的的基础上进一步美化了程序界面。 使用方法: 1、admin/login.asp登陆后台,初始用户密码都为:http://www.i163.cn 。 2、正常添加栏目和电影后 可点击上面栏目旁/制 即可生成HTML文件。 3、必须分类...
  • 而要实现这一点,应通过系统的开放性来完成,既系统应是一个开放系统,只要符合一定的规范,可以简单的加入和减少系统的模块,配置系统的硬件。通过软件的修补、替换完成系统的升级和更新换代。 3、 系统的易用性和...
  • 一个牛人提供GIS源码(很好)

    千次下载 热门讨论 2010-08-25 22:49:21
    类似一个简单的新闻系统,加上一些简单的留言板等等功能,可能会添加一些Gmap API开发类的内容。 www.wikish.cn:维基上海。有了点想法和思路,但暂时由于技术能力等原因无法实现。 其他:还有两个玉米没有想好(呵呵...
  • 个人冲刺一

    2019-05-05 19:48:00
    例如activity之间最基本跳转,xml界面最基本布局,以及他们之间连接,接下来冲刺打算学习数据库连接和html5与activity之间交互,因为登陆界面使用xml过于简单,所以想用h5替换xml界面,但是目前还不会...
  •   学了HTML之后 , 一直想写一个能够实现登录功能的小网页 ,终于……现在开始学习数据库,经过查阅资料,创建了很简单的一个java web小项目来实现登陆操作,界面不怎么美观,大家见笑了,哈哈。   首先,我们先...
  • web网站模板

    2019-03-13 22:41:31
    HTML5+CSS+JS前端加后端实现网站整个效果,从登陆注册到图形界面,再到前后端交互,一个网站的诞生。 不错的案例2019,可以参考及简单的修改。
  • PHP之我谈

    2009-08-26 23:27:00
    说说我菜鸟成长路:PHP和MYSQL学习之路1.首先是gggAPMserver集成环境安装2....从登陆开始,首先,给学学HTML做界面...其次,就是表单应用,如何将登陆界面输入数据进行处理,5.如何调用MYSQL数据库里数据来和登录

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 176
精华内容 70
关键字:

html5简单的登陆界面