Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 国内精品视频一区二区三区,韩国一级片视频,亚洲第一区在线 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          簡單小程序：登錄頁面（html）
          
        
           
          
	
	
          
		
                        
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框寬度

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框寬度
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述
          紹
          介紹
          前面我們以及學會了Bootstrap框架和jQuery庫的基本使用方法，并且已經把這兩個軟件包整合到了我們的TFPHP框架里面，接下來我們就可以使用它們去制作用戶管理系統的視圖模板了。
          用戶管理系統包含幾個主頁模板：
          1）用戶信息表
          2）用戶登錄頁面
          3）用戶注冊頁面
          4）個人資料修改
          5）登錄密碼重置
          6）用戶頭像上傳
          7）安全問題設置
          8）綁定郵箱設置
          9）忘記密碼頁面
          頁面比較多，我們一點點地設計。萬事開頭難，福哥今天下帶著大家完成先完成第一個表單頁面——用戶登錄頁面。
          用戶登錄頁面
          HTML
          登錄頁面的html部分包括一個頁頭和一個表單。
          <div class="wrapper">

    <div class="wrapper-header">

        <!-- top bar begin -->
        <div class="row topbar">
            <div class="navbar navbar-text">
                TFUMS v1.0 - TONGFU.net
            </div>
            <ul class="nav ml-md-auto">
                <li class="nav-item"><a href="" class="nav-link">首頁</a></li>
                <li class="nav-item"><a href="" class="nav-link">登錄</a></li>
                <li class="nav-item"><a href="" class="nav-link">注冊</a></li>
            </ul>
        </div>
        <!-- top bar end -->

    </div>

    <div class="wrapper-content">

        <!-- login form begin -->
        <div class="row login-form">
            <div class="col-sm-12">
                <h3 class="text-center">登錄</h3>
                <p>請輸入正確的用戶名和密碼登錄用戶管理系統</p>
                <form>
                    <div class="form-group">
                        <label>用戶名</label>
                        <input class="form-control" type="text" name="user" />
                    </div>
                    <div class="form-group">
                        <label>密碼</label>
                        <input class="form-control" type="password" name="pass" />
                    </div>
                    <div class="form-group overflow-hidden">
                        <label class="float-left">
                            <input type="checkbox" name="remember" value="Y" />
                            保存登錄狀態
                        </label>
                        <a href="" class="float-right">忘記密碼</a>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm form-control">登錄</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- login form end -->

    </div>

    <div class="wrapper-footer">

    </div>

</div>
          CSS
          用戶登錄頁面的CSS也是一個top bar和一個login form兩個部分。
          /**
 * top bar
 */
.topbar{
    padding: 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.topbar a{
    color: #333;
}
.topbar a:hover{
    color: #007bff;
}

/**
 * login form
 */
.login-form{
    margin: 0 auto;
    width: 350px;
}
          講解
          用戶登錄頁面
          首先，因為這是TFUMS系統的第一個模板，所以福哥先設計了頁頭的樣式。這個頁頭也會作為其他頁面的共用的頁頭。頁頭使用了bs的nav樣式組的樣式，簡化了自己寫CSS的工作。
          其次，表單部分使用了bs的form-group樣式作為每一行表單項的容器樣式，加上label和form-control簡簡單單就把一個漂亮的表單做出來了。
          還有福哥使用浮動加清除實現了“保存登錄狀態”和“忘記密碼”的左右布局設計。
          最后，福哥給button增加了form-control樣式，使按鈕撐滿了整個容器，看起來比較工整了。
          總結
          今天我們完成了第一個表單頁面的模板，包括：HTML和CSS部分。有了這個基礎之后，再去制作其他表單頁面就容易多了。
          下一課我們將嘗試完成用戶注冊頁面、忘記密碼頁面、登錄密碼重置三個頁面的模板的制作。

          https://m.tongfu.net/home/35/blog/512901.html
          上效果圖：
          這是一個用ext3.2.0、js、html、css寫的一個還算好看的登錄界面。
          源代碼已上傳，下載地址請點擊：點擊打開鏈接
          其主要難點在如何使用extjs來畫一個界面，接下來我們就主要看一下其中的html和js吧：

          2. <!DOCTYPE html>
          3. <html lang="en">
          4. <head>
          5.  <meta charset="UTF-8">
          6.  <title>登錄界面</title>
          7.  <link rel="stylesheet" type="text/css" href="ext3.2.0/resources/css/ext-all.css"/>
          8.  <script type="text/javascript" src="ext3.2.0/adapter/ext/ext-base.js"></script>
          9.  <script type="text/javascript" src="ext3.2.0/ext-all.js"></script>
          10.  
          11.  <script type="text/javascript" src="login.js"></script>
          12.  <script type="text/javascript" src="loginToDo.js"></script>
          13.  
          14.  <link rel="stylesheet" type="text/css" href="login.css"/>
          15. </head>
          16. <body onkeydown="keyLogin(event);">
          17. </body>
          18. </html>
          這里面主要是導入頁面所需的js和css文件，當然還有一個亮點就是body標簽上的 onkeydown事件屬性，主要用于監聽鍵盤實現我們js中的enter鍵提交功能。然后看一下extjs的語言風格吧：

          2. Ext.onReady(function () {
          3.  
          4.  // 創建“登錄”面板
          5.  var loginPanel = new Ext.Panel({
          6.  // 設置面板的位置、寬高、樣式
          7.  // 注意：此處我用的是相對布局relative（用于比較兩者的區別）
          8.  id: 'loginPan',
          9.  x: 363,
          10.  y: 0,
          11.  width: 396,
          12.  height: 480,
          13.  baseCls: '',
          14.  defaults: {
          15.  border: false
          16.  },
          17.  // 添加面板里面的物品
          18.  items: [
          19.  {
          20.  // 第一件：logo圖
          21.  id: 'loginLogo',
          22.  height: 160,
          23.  frame: false,
          24.  bodyStyle: 'padding-top:10px',
          25.  html: '<img src="images/fly_icon.png">'
          26.  },
          27.  {
          28.  // 第二件：登錄的表單
          29.  id: 'loginForm',
          30.  defaultType: 'textfield',
          31.  frame: false,
          32.  defaults: {
          33.  allowBlank: false
          34.  },
          35.  // 添加表單里面的物品：兩個輸入框
          36.  items: [
          37.  {
          38.  id: "username",
          39.  cls: "text_field",
          40.  inoutType: 'text',
          41.  width: 330,
          42.  height: 28,
          43.  blankText: '賬號不能為空',
          44.  emptyText: '請輸入賬號',
          45.  },
          46.  {
          47.  id: "password",
          48.  cls: "text_field",
          49.  inputType: 'password',
          50.  width: 330,
          51.  height: 28,
          52.  emptyText: '請輸入密碼',
          53.  blankText: '密碼不能為空',
          54.  }]
          55.  },
          56.  {
          57.  // 第三件：忘記密碼
          58.  id: 'loginForget',
          59.  html: "<a href='forget_pwd.html' target='_blank'>忘記密碼？</a>",
          60.  },
          61.  {
          62.  // 第四件：登錄按鈕
          63.  id: 'loginBtn',
          64.  html: '<button id="btn_login">馬上登錄</button>',
          65.  }
          66.  ],
          67.  });
          68.  
          69.  // 創建“注冊”面板
          70.  var registerPanel = new Ext.Panel({
          71.  // 設置面板的位置、寬高、樣式
          72.  // 注意：此處我用的是絕對布局absolute（用于比較兩者的區別）
          73.  id: 'registerPan',
          74.  x: 0,
          75.  y: 46,
          76.  width: 800,
          77.  height: 389,
          78.  baseCls: '',
          79.  layout: 'absolute',
          80.  defaults: {
          81.  border: false
          82.  },
          83.  // 添加面板里面的物品
          84.  items: [
          85.  {
          86.  // 第一件：標題
          87.  id: 'registerTitleLabel',
          88.  xtype: 'label',
          89.  x: 47,
          90.  y: 50,
          91.  text: '還沒有賬號？',
          92.  }, {
          93.  // 第二件：正文
          94.  id: 'registerContentLabel',
          95.  xtype: 'label',
          96.  x: 47,
          97.  y: 135,
          98.  text: '這是在注冊面板下面的正文內容。里面的內容可以隨便寫，比如當前我們再一個窗口下面建立了兩個面板。而兩個面板的布局是分別用相對布局和絕對布局來實現的。相比較而言，我覺得用絕對布局會簡單粗暴，更直接，更方便。總之，你們自己體會一下吧。',
          99.  }, {
          100.  // 第三件：注冊按鈕
          101.  id: 'registerBtn',
          102.  xtype: 'button',
          103.  x: 47,
          104.  y: 280,
          105.  html: '<button id="btn_register" >馬上注冊</button>'
          106.  }],
          107.  
          108.  });
          109.  
          110.  // 創建窗口，從而讓內容達到居中效果
          111.  var centerWindow = new Ext.Window({
          112.  baseCls: '',
          113.  width: 800,
          114.  height: 480,
          115.  layout: 'absolute',
          116.  closable: false,
          117.  draggable: false,
          118.  resizable: false,
          119.  shadow: false,
          120.  border: false,
          121.  items: [registerPanel, loginPanel],
          122.  });
          123.  
          124.  // 顯示窗口
          125.  centerWindow.show();
          126.  
          127.  // 添加瀏覽器縮放自動居中效果
          128.  Ext.EventManager.onWindowResize(function () {
          129.  centerWindow.center();
          130.  });
          131. });
          這里要說的是：1、注意給屬性加標記，能用id就用id，cls只是一個封裝過的class，和原生的class還是有區別的，比如給一個cls元素的height、padding定義樣式并不起作用。詳見：關于extjs中的cls ≠ class
          2、在ext中建議用絕對定位，由于它底層是一個個的table、div塊，如果用相對定位的話偶爾是有偏差的，所以還是絕對定位方便直接啊。
          3、window自帶居中效果，可以利用這一點讓元素在屏幕中居中。但是當瀏覽器縮放的時候，這個window并不會動，每次都需要重新刷新一下才會改變一下。所以，在以上代碼的最后我們用給這個centerWindow添加了一個窗口自適應居中的效果。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
三上悠亚一区二区观看|
色婷婷AV一区二区三区浪潮|
国产成人精品一区二区三区无码|
亚洲综合av一区二区三区|
美女AV一区二区三区|
亚洲福利电影一区二区?|
日本精品啪啪一区二区三区|
精品国产一区二区三区四区
|
日韩一区二区视频|
中文字幕精品无码一区二区|
福利在线一区二区|
国产福利酱国产一区二区|
精品国产一区二区三区久久久狼|
日韩免费观看一区|
精品一区二区在线观看|
精品国产AⅤ一区二区三区4区|
精品免费AV一区二区三区|
在线日韩麻豆一区|
国产中文字幕一区|
国产天堂在线一区二区三区|
影院成人区精品一区二区婷婷丽春院影视
|
国产伦精品一区二区三区无广告
|
国产一区二区三区久久精品|
精品少妇一区二区三区在线|
一区二区日韩国产精品|
视频一区二区三区在线观看|
福利在线一区二区|
中文字幕一区精品|
中文字幕无码一区二区免费|
国模无码人体一区二区|
成人区精品人妻一区二区不卡|
精品无码人妻一区二区三区不卡|
国产免费伦精品一区二区三区|
丰满人妻一区二区三区免费视频|
综合久久一区二区三区|
亚洲av无码一区二区三区不卡|
国产激情无码一区二区app|
伊人久久精品无码av一区|
无码国产精品一区二区免费16|
麻豆aⅴ精品无码一区二区|
日韩在线一区二区|