zoukankan      html  css  js  c++  java
  • .net MVC4一个登陆界面加验证

    Model

      1 using System;
      2 using System.Collections.Generic;
      3 using System.IO;
      4 using System.Linq;
      5 using System.Security.Cryptography;
      6 using System.Text;
      7 using System.Threading.Tasks;
      8 using System.Web;
      9 
     10 namespace VerificationCode.Code
     11 {
     12     public class VerificationCodeAESHelp
     13     {
     14         /// <summary>
     15         /// Key123Ace#321Key
     16         /// </summary>
     17         private static readonly string _AESKEY = "qwertyuiopasdfghjklzxcvbnm123456";
     18 
     19         /// <summary>
     20         /// slide
     21         /// </summary>
     22         public const string _SlideCode = "slidecode.";
     23 
     24         /// <summary>
     25         ///验证码cookie
     26         /// </summary>
     27         public const string _YZM = "_YZM.";
     28 
     29 
     30         private HttpContextBase _httpContextAccessor;
     31 
     32         public VerificationCodeAESHelp(HttpContextBase httpContextAccessor)
     33         {
     34             this._httpContextAccessor = httpContextAccessor;
     35         }
     36 
     37 
     38         /// <summary>
     39         /// AES加密返回base64字符串
     40         /// </summary>
     41         public string AES_Encrypt_Return_Base64String(string str)
     42         {
     43             string base64Str = AESEncrypt(str, _AESKEY);
     44 
     45             return base64Str;
     46         }
     47 
     48 
     49         /// <summary>
     50         /// AES解密返回string
     51         /// </summary>
     52         public string AES_Decrypt_Return_String(string str)
     53         {
     54             return AESDecrypt(str, _AESKEY);
     55         }
     56 
     57 
     58 
     59         #region AES
     60 
     61         private static string SubString(string sourceStr, int startIndex, int length)
     62         {
     63             string str;
     64             if (string.IsNullOrEmpty(sourceStr))
     65             {
     66                 str = "";
     67             }
     68             else
     69             {
     70                 str = (sourceStr.Length < startIndex + length ? sourceStr.Substring(startIndex) : sourceStr.Substring(startIndex, length));
     71             }
     72             return str;
     73         }
     74 
     75 
     76         private static byte[] _aeskeys = new byte[] { 18, 52, 86, 120, 144, 171, 205, 239, 18, 52, 86, 120, 144, 171, 205, 239 };
     77         /// <summary>
     78         /// 加密
     79         /// </summary>
     80         /// <param name="input"></param>
     81         /// <param name="key"></param>
     82         /// <returns></returns>
     83         private static string AESEncrypt(string encryptStr, string encryptKey)
     84         {
     85 
     86             string base64String;
     87             if (!string.IsNullOrWhiteSpace(encryptStr))
     88             {
     89                 encryptKey = SubString(encryptKey, 0, 32);
     90                 encryptKey = encryptKey.PadRight(32, ' ');
     91                 SymmetricAlgorithm bytes = Rijndael.Create();
     92                 byte[] numArray = Encoding.UTF8.GetBytes(encryptStr);
     93                 bytes.Key = Encoding.UTF8.GetBytes(encryptKey);
     94                 bytes.IV = _aeskeys;
     95                 byte[] array = null;
     96                 MemoryStream memoryStream = new MemoryStream();
     97                 try
     98                 {
     99                     CryptoStream cryptoStream = new CryptoStream(memoryStream, bytes.CreateEncryptor(), CryptoStreamMode.Write);
    100                     try
    101                     {
    102                         cryptoStream.Write(numArray, 0, numArray.Length);
    103                         cryptoStream.FlushFinalBlock();
    104                         array = memoryStream.ToArray();
    105                         cryptoStream.Close();
    106                         memoryStream.Close();
    107                     }
    108                     finally
    109                     {
    110                         if (cryptoStream != null)
    111                         {
    112                             ((IDisposable)cryptoStream).Dispose();
    113                         }
    114                     }
    115                 }
    116                 finally
    117                 {
    118                     if (memoryStream != null)
    119                     {
    120                         ((IDisposable)memoryStream).Dispose();
    121                     }
    122                 }
    123                 base64String = Convert.ToBase64String(array);
    124             }
    125             else
    126             {
    127                 base64String = string.Empty;
    128             }
    129             return base64String;
    130 
    131         }
    132 
    133 
    134 
    135         /// <summary>
    136         /// 解密
    137         /// </summary>
    138         /// <param name="input"></param>
    139         /// <param name="key"></param>
    140         /// <returns></returns>
    141         private static string AESDecrypt(string decryptStr, string decryptKey)
    142         {
    143 
    144             string empty;
    145             if (!string.IsNullOrWhiteSpace(decryptStr))
    146             {
    147                 decryptKey = SubString(decryptKey, 0, 32);
    148                 decryptKey = decryptKey.PadRight(32, ' ');
    149                 byte[] numArray = Convert.FromBase64String(decryptStr);
    150                 SymmetricAlgorithm bytes = Rijndael.Create();
    151                 bytes.Key = Encoding.UTF8.GetBytes(decryptKey);
    152                 bytes.IV = _aeskeys;
    153                 byte[] numArray1 = new byte[numArray.Length];
    154                 MemoryStream memoryStream = new MemoryStream(numArray);
    155                 try
    156                 {
    157                     CryptoStream cryptoStream = new CryptoStream(memoryStream, bytes.CreateDecryptor(), CryptoStreamMode.Read);
    158                     try
    159                     {
    160                         cryptoStream.Read(numArray1, 0, numArray1.Length);
    161                         cryptoStream.Close();
    162                         memoryStream.Close();
    163                     }
    164                     finally
    165                     {
    166                         if (cryptoStream != null)
    167                         {
    168                             ((IDisposable)cryptoStream).Dispose();
    169                         }
    170                     }
    171                 }
    172                 finally
    173                 {
    174                     if (memoryStream != null)
    175                     {
    176                         ((IDisposable)memoryStream).Dispose();
    177                     }
    178                 }
    179                 empty = Encoding.UTF8.GetString(numArray1).Replace("", "");
    180             }
    181             else
    182             {
    183                 empty = string.Empty;
    184             }
    185             return empty;
    186 
    187         }
    188 
    189         #endregion
    190 
    191 
    192         #region  Cookie
    193 
    194         /// <summary>
    195         /// 
    196         /// </summary>
    197         /// <param name="key"></param>
    198         /// <param name="value"></param>
    199         /// <param name="minute"></param>
    200         public void SetCookie(HttpContextBase httpContext,string key, string value, int minute)
    201         {
    202 
    203             HttpCookie cookie = new HttpCookie(key);
    204             cookie.Value = value;
    205             cookie.Expires = DateTime.Now.AddDays(minute);
    206             httpContext.Response.Cookies.Add(cookie);
    207         }
    208 
    209 
    210 
    211         /// <summary>
    212         /// 
    213         /// </summary>
    214         /// <param name="key"></param>
    215         /// <returns>string</returns>
    216         public string GetCookie(HttpContextBase httpContext,string key)
    217         {
    218             string _cookie = httpContext.Request.Cookies[key].Value;
    219             return _cookie;
    220         }
    221 
    222 
    223 
    224         #endregion
    225     }
    226 }
    VerificationCodeAESHelp
      1 using System;
      2 using System.Collections.Generic;
      3 using System.Drawing;
      4 using System.Drawing.Imaging;
      5 using System.IO;
      6 using System.Linq;
      7 using System.Threading.Tasks;
      8 
      9 namespace VerificationCode.Code
     10 {
     11     public class VerificationCodeImage
     12     {
     13 
     14         /// <summary>  
     15         /// 随机汉字
     16         /// </summary>  
     17         /// <param name="number"></param>  
     18         /// <returns></returns>  
     19         private static string RandomHanZi(int number)
     20         {
     21             var str = "奉利民邱喜威刘鹏李明洋李国霜";
     22             char[] str_char_arrary = str.ToArray();
     23             Random rand = new Random();
     24             HashSet<string> hs = new HashSet<string>();
     25             bool randomBool = true;
     26             while (randomBool)
     27             {
     28                 if (hs.Count == number)
     29                     break;
     30                 int rand_number = rand.Next(str_char_arrary.Length);
     31                 hs.Add(str_char_arrary[rand_number].ToString());
     32             }
     33             string code = string.Join("", hs);
     34             return code;
     35         }
     36 
     37         /// <summary>  
     38         /// </summary>  
     39         /// <param name="numbers">生成位数(默认5位)</param>  
     40         /// <param name="_height">图片高度</param>  
     41         /// <param name="_width">图片宽度</param>  
     42         public static Task<VerificationCodeModel> CreateHanZi(int numbers = 5, int _height = 200, int _width = 200)
     43         {
     44             var imageModel = new VerificationCodeModel();
     45             if (imageModel.point_X_Y == null)
     46             {
     47                 imageModel.point_X_Y = new List<Point_X_Y>();
     48             }
     49             string code = RandomHanZi(numbers);
     50             Bitmap Img = null;
     51             Graphics g = null;
     52             MemoryStream ms = null;
     53             Random random = new Random();
     54 
     55             Color[] color_Array = { Color.Black, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };
     56             string[] fonts = { "lnk Free", "Segoe Print", "Comic Sans MS", "MV Boli", "华文行楷" };
     57             //string _base = Environment.CurrentDirectory + "\wwwroot\verificationcodeImage\";
     58             string _base = System.Web.HttpContext.Current.Server.MapPath("~/CallWebLog/");
     59             if (!System.IO.Directory.Exists(_base))
     60             {
     61                 System.IO.Directory.CreateDirectory(_base);
     62             }
     63             var _file_List = System.IO.Directory.GetFiles(_base);
     64             int imageCount = _file_List.Length;
     65             if (imageCount == 0)
     66                 throw new Exception("image not Null");
     67 
     68             int imageRandom = random.Next(1, (imageCount + 1));
     69             string _random_file_image = _file_List[imageRandom - 1];
     70             var imageStream = Image.FromFile(_random_file_image);
     71 
     72             Img = new Bitmap(imageStream, _width, _height);
     73             imageStream.Dispose();
     74             g = Graphics.FromImage(Img);
     75             Color[] penColor = { Color.LightGray, Color.Green, Color.Blue };
     76             int code_length = code.Length;
     77             for (int i = 0; i < code_length; i++)
     78             {
     79                 int cindex = random.Next(color_Array.Length);
     80                 int findex = random.Next(fonts.Length);
     81                 Font f = new Font(fonts[findex], 15, FontStyle.Bold);
     82                 Brush b = new SolidBrush(color_Array[cindex]);
     83                 int _y = random.Next(_height);
     84                 if (_y > (_height - 30))
     85                     _y = _y - 60;
     86 
     87                 int _x = _width / (i + 1);
     88                 if ((_width - _x) < 50)
     89                 {
     90                     _x = _width - 60;
     91                 }
     92                 string word = code.Substring(i, 1);
     93                 if (imageModel.point_X_Y.Count < 3)
     94                 {
     95                     imageModel.point_X_Y.Add(new Point_X_Y()
     96                     {
     97                         Word = word,
     98                         _X = _x,
     99                         _Y = _y,
    100                         Sort = i
    101                     });
    102                 }
    103                 g.DrawString(word, f, b, _x, _y);
    104             }
    105             ms = new MemoryStream();
    106             Img.Save(ms, ImageFormat.Jpeg);
    107             g.Dispose();
    108             Img.Dispose();
    109             ms.Dispose();
    110             imageModel.ImageBase64Str = "data:image/jpg;base64," + Convert.ToBase64String(ms.GetBuffer());
    111             return Task.FromResult(imageModel);
    112         }
    113 
    114 
    115 
    116     }
    117 
    118 
    119     public class Point_X_Y
    120     {
    121         public int _X { get; set; }
    122 
    123         public int _Y { get; set; }
    124 
    125         public int Sort { get; set; }
    126 
    127         public string Word { get; set; }
    128 
    129     }
    130 
    131     /// <summary>
    132     /// 滑动校验
    133     /// </summary>
    134     public class SlideVerifyCodeModel
    135     {
    136         public bool SlideCode { get; set; }
    137 
    138         public DateTime timestamp
    139         {
    140             get { return DateTime.Now; }
    141             set
    142             {
    143                
    144             }
    145         }
    146     }
    147 
    148 
    149     public class VerificationCodeModel
    150     {
    151         public string ImageBase64Str { get; set; }
    152 
    153         public List<Point_X_Y> point_X_Y { get; set; }
    154 
    155     }
    156 
    157 }
    VerificationCodeImage

    Controllers

      1 using System;
      2 using System.Collections.Generic;
      3 using System.Diagnostics;
      4 using System.Linq;
      5 using System.Threading.Tasks;
      6 using System.Web;
      7 using System.Web.Mvc;
      8 using VerificationCode.Code;
      9 
     10 namespace Zeujs.Controllers
     11 {
     12     public class DefaultController : Controller
     13     {
     14 
     15         private VerificationCodeAESHelp _verificationCodeAESHelp;
     16 
     17         /// <summary>
     18         /// 构造函数
     19         /// </summary>
     20         public DefaultController()
     21         {
     22             this._verificationCodeAESHelp = new VerificationCodeAESHelp(HttpContext);
     23         }
     24 
     25         public ActionResult GetVerificationCodeImage()
     26         {
     27             var model = VerificationCode.Code.VerificationCodeImage.CreateHanZi();
     28             VerificationCodeAESHelp help = new VerificationCodeAESHelp(HttpContext);
     29             var json_Model = Newtonsoft.Json.JsonConvert.SerializeObject(model.Result.point_X_Y);
     30             string pointBase64str = help.AES_Encrypt_Return_Base64String(json_Model);
     31             help.SetCookie(HttpContext, VerificationCodeAESHelp._YZM, pointBase64str, 5);
     32             string msg = "请根据顺序点击【" + string.Join("", model.Result.point_X_Y.Select(x => x.Word).ToList()) + "";
     33             return Json(new { result = model.Result.ImageBase64Str, msg = msg });
     34         }
     35 
     36         public ActionResult CheckCode(string code)
     37         {
     38             try
     39             {
     40                 if (this._verificationCodeAESHelp == null)
     41                 {
     42                     this._verificationCodeAESHelp = new VerificationCodeAESHelp(HttpContext);
     43                 }
     44                 var pointList = new List<Point_X_Y>();
     45                 try
     46                 {
     47                     pointList = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Point_X_Y>>(code);
     48                 }
     49                 catch (Exception)
     50                 {
     51                     return Json(new { msg = "验证失败!", status = "error" });
     52                 }
     53 
     54                 if (pointList.Count != 3)
     55                     return Json(new { msg = "验证失败!", status = "error" });
     56 
     57                 var _cookie = this._verificationCodeAESHelp.GetCookie(HttpContext, VerificationCodeAESHelp._YZM);
     58 
     59                 if (string.IsNullOrEmpty(_cookie))
     60                     return Json(new { msg = "验证失败!", status = "error" });
     61 
     62                 string _str = this._verificationCodeAESHelp.AES_Decrypt_Return_String(_cookie);
     63 
     64                 var _cookiesPointList = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Point_X_Y>>(_str);
     65                 _cookiesPointList = _cookiesPointList.OrderBy(x => x.Sort).ToList();
     66                 int i = 0;
     67                 foreach (var item in pointList.AsParallel())
     68                 {
     69                     int _x = _cookiesPointList[i]._X - item._X;
     70                     int _y = _cookiesPointList[i]._Y - item._Y;
     71                     _x = Math.Abs(_x);
     72                     _y = Math.Abs(_y);
     73                     if (_x > 25 || _y > 25)
     74                     {
     75                         return Json(new { msg = "验证失败!", status = "error" });
     76                     }
     77                     i++;
     78                 }
     79 
     80                 SlideVerifyCode(true);
     81 
     82             }
     83             catch (Exception)
     84             {
     85                 return Json(new { msg = "验证失败!", status = "error" });
     86             }
     87             return Json(new { msg = "验证通过!", status = "ok" });
     88         }
     89 
     90 
     91 
     92         [HttpPost]
     93         public ActionResult Logins(string userName, string passWord)
     94         {
     95             Tuple<bool, string> tuple = VerifyValiate();
     96             if (!tuple.Item1)
     97             {
     98                 return Json(new { msg = tuple.Item2, status = "error" });
     99             }
    100             if (userName == "admin" && passWord == "admin")
    101             {
    102                 return Json(new { msg = "登陆成功!", status = "ok" });
    103             }
    104             else
    105             {
    106                 return Json(new { msg = "账号密码错误!", status = "error" });
    107             }
    108         }
    109 
    110         public Tuple<bool, string> VerifyValiate()
    111         {
    112             var _cookie = this._verificationCodeAESHelp.GetCookie(HttpContext, VerificationCodeAESHelp._SlideCode);
    113             if (string.IsNullOrEmpty(_cookie))
    114             {
    115                 SlideVerifyCode();
    116                 return new Tuple<bool, string>(false, "请拖动滑块");
    117             }
    118             string _str = this._verificationCodeAESHelp.AES_Decrypt_Return_String(_cookie);
    119             var sildeCodeModel = Newtonsoft.Json.JsonConvert.DeserializeObject<SlideVerifyCodeModel>(_str);
    120             if (!sildeCodeModel.SlideCode)
    121             {
    122                 return new Tuple<bool, string>(false, "请拖动滑块后点击汉字");
    123             }
    124             var _NowTime = DateTime.Now;
    125             var _time = sildeCodeModel.timestamp;
    126             var number = (_NowTime - _time).Minutes;
    127             if (number > 5)
    128             {
    129                 SlideVerifyCode();
    130                 return new Tuple<bool, string>(false, "滑块验证码过期");
    131             }
    132             return new Tuple<bool, string>(true, "成功");
    133         }
    134 
    135 
    136         private void SlideVerifyCode(bool _bool = false)
    137         {
    138             var json = Newtonsoft.Json.JsonConvert.SerializeObject(new SlideVerifyCodeModel() { SlideCode = _bool, timestamp = DateTime.Now });
    139             string base64Str = this._verificationCodeAESHelp.AES_Encrypt_Return_Base64String(json);
    140             this._verificationCodeAESHelp.SetCookie(HttpContext, VerificationCodeAESHelp._SlideCode, base64Str, 10);
    141 
    142         }
    143 
    144 
    145 
    146     }
    147 }
    Home

    View

      1 @{
      2     ViewData["Title"] = "Home Page";
      3     Layout = null;
      4 }
      5 
      6 <!DOCTYPE html>
      7 <html>
      8 <head>
      9     <meta charset="utf-8" />
     10     <title>登录 </title>
     11 
     12     <link href="~/wwwroot/css/style.css" rel="stylesheet" />
     13     <link href="~/wwwroot/css/slide-unlock.css" rel="stylesheet" />
     14 
     15     <style>
     16         body {
     17             height: 100%;
     18             background: #16a085; 
     19             overflow: hidden;
     20         }
     21 
     22         canvas {
     23             z-index: -1;
     24             position: absolute;
     25         }
     26     </style>
     27     <script src="~/wwwroot/js/jquery1.11.1.js"></script>
     28 
     29     <script src="/wwwroot/js/Particleground.js" tppabs="js/Particleground.js"></script>
     30     <script src="~/wwwroot/js/slide.js"></script>
     31 
     32     <script>
     33 
     34         $(document).ready(function () {
     35 
     36             $(".submit_btn").click(function () {
     37                 if ($("#labelTip").html() == "拖动滑块验证")
     38                 {
     39                     alert("请拖动滑块验证!");
     40                     return;
     41                 }
     42                 $.ajax({
     43                     url: "@Url.Action("Logins", "default")",
     44                     type: "post",
     45                     data: {
     46                         "userName": $("#userName").val(),
     47                         "passWord": $("#passWord").val()
     48                     },
     49                     success: function (d) {
     50                         if (d.status != "ok") {
     51                             alert(d.msg);
     52                             Slider_init();
     53                         } else {
     54                             alert(d.msg);
     55                             window.location.href = "@Url.Action("index")";
     56                         }
     57                     }
     58                 })
     59 
     60 
     61             })
     62 
     63 
     64             //粒子背景特效
     65             $('body').particleground({
     66                 dotColor: '#5cbdaa',
     67                 lineColor: '#5cbdaa'
     68             });
     69 
     70             Slider_init();
     71         });
     72 
     73 
     74         function Slider_init() {
     75             var slider = new SliderUnlock("#slider", {
     76                 successLabelTip: "验证成功"
     77             }, function () {
     78 
     79                 huadongCode();
     80             });
     81             slider.init();
     82         }
     83 
     84 
     85 
     86         function huadongCode() {
     87             num = 1;
     88             checkCode = [];
     89             $.ajax({
     90                 type: "Post",
     91                 url: "@Url.Action("GetVerificationCodeImage", "Default")",
     92                 dataType: "json",
     93                 beforeSend: function (XMLHttpRequest) {
     94                     console.log(this);
     95 
     96                 },
     97                 success: function (data) {
     98                     var html = "<div id="imagediv" style='position: absolute;left:10px; top:30px;background: #fff;z-index:300'><img src=" + data.result + " alt="看不清?点击更换" id="image"/></div>";
     99                     html += "<div id='divrefresh' style='20px;height:20px;position:absolute;cursor: pointer;margin-left: 90%;'> <img src="/wwwroot/images/shaxin.jpg" /> </div>";
    100                     $("#huadongImage").css("display", "block").html(html);
    101                     $("#labelTip").html(data.msg);
    102                     imageClick();
    103                     divrefreshClick();
    104 
    105                 }
    106             })
    107 
    108 @*            $.ajax({
    109                 "url": "@Url.Action("GetVerificationCodeImage","Default")",
    110                 "type": "get",
    111                 "success": function (data) {
    112                     var html = "<div id="imagediv" style='position: absolute;left:10px; top:30px;background: #fff;z-index:300'><img src=" + data.result + " alt="看不清?点击更换" id="image"/></div>";
    113                     html += "<div id='divrefresh' style='20px;height:20px;position:absolute;cursor: pointer;margin-left: 90%;'> <img src="/images/shaxin.jpg" /> </div>";
    114                     $("#huadongImage").css("display", "block").html(html);
    115                     $("#labelTip").html(data.msg);
    116                     imageClick();
    117                     divrefreshClick();
    118                 },
    119                 "complete": function (XMLHttpRequest, status) {
    120                     if (status == 'timeout') {
    121 
    122                     }
    123                     alert("1");
    124                 }
    125             })*@
    126         }
    127 
    128 
    129         function divrefreshClick() {
    130             $("#divrefresh").click(function () {
    131                 huadongCode();
    132                 num = 1;
    133                 checkCode = [];
    134             })
    135         }
    136 
    137 
    138         var num = 1;
    139         var checkCode = [];
    140         function createPoint(pos) {
    141             if (num == 3) {
    142                 PostcheckCode();
    143             }
    144 
    145             $("#imagediv").append('<div class="point-area" onclick="pointClick(this)" style="background-color:#539ffe;color:#fff;z-index:9999;25px;height:25px;text-align:center;line-height:25px;border-radius: 20%;position:absolute;border:2px solid white;top:' + parseInt(pos.y - 10) + 'px;left:' + parseInt(pos.x - 10) + 'px;">' + num + '</div>');
    146             ++num;
    147         }
    148 
    149 
    150 
    151         function PostcheckCode() {
    152             $.ajax({
    153                 "url": "/Default/CheckCode",
    154                 "type": "post",
    155                 "data": {
    156                     "code": JSON.stringify(checkCode)
    157                 },
    158                 "success": function (d) {
    159                     if (d.status == "ok") {
    160                         $("#labelTip").html(d.msg);
    161                         $("#huadongImage").hide();
    162                     } else {
    163                         huadongCode();
    164                     }
    165                 },
    166                 "error": function (error) {
    167 
    168                 }
    169             })
    170 
    171         }
    172 
    173 
    174 
    175         function pointClick(obj) {
    176             num = 1;
    177             checkCode = [];
    178             $(obj).parent().find('.point-area').remove();
    179         }
    180 
    181 
    182         function getMousePos(obj, event) {
    183             var e = event || window.event;
    184             var x = e.clientX - ($(obj).offset().left - $(window).scrollLeft());
    185             var y = e.clientY - ($(obj).offset().top - $(window).scrollTop());
    186             checkCode.push({ "_X": parseInt(x), "_Y": parseInt(y) });
    187             return { 'x': parseInt(x), 'y': parseInt(y) };
    188         }
    189 
    190         function imageClick() {
    191             $("#imagediv").click(function () {
    192                 var _this = $(this);
    193                 var pos = getMousePos(_this);
    194                 createPoint(pos);
    195             })
    196 
    197         }
    198     </script>
    199 </head>
    200 <body>
    201         <dl class="admin_login">
    202             <dt>
    203                 <strong>登录</strong>
    204                 <em></em>
    205             </dt>
    206             <dd class="user_icon">
    207                 <input type="text" id="userName" placeholder="账号" class="login_txtbx" name="userName" data-val="true" data-val-required="賬號不能为空" />
    208                 <span class="field-validation-valid" data-valmsg-for="userName" data-valmsg-replace="true" style="color: #ff0000"></span>
    209             </dd>
    210             <dd class="pwd_icon">
    211                 <input type="password" id="passWord" placeholder="密码" class="login_txtbx" />
    212             </dd>
    213             <dd class="val_icon">
    214                 <div id="slider">
    215                     <div id="slider_bg"></div>
    216                     <span id="label">>></span>
    217                     <span id="labelTip">拖动滑块验证</span>
    218                 </div>
    219 
    220                 <div id="huadongImage" style=" 300px; border: 1px solid #ccc; height: 250px; z-index: 200; display: none; position: absolute; background-color: white; top: 40px;">
    221                 </div>
    222             </dd>
    223             <dd>
    224                 <input type="submit" value="立即登陆" class="submit_btn" />
    225             </dd>
    226             <dd></dd>
    227         </dl>
    228 </body>
    229 </html>
    View

    样式请去http://www.bootcss.com/下载

  • 相关阅读:
    使用RF(robotframework)要安装哪些库
    MYSQL题目练习专用
    MySQL字段拼接
    WPF样式
    WPF数据模板
    WPF控件模板
    WPF布局
    面向对象程序设计原则
    设计模式之策略模式
    设计模式之简单工厂模式
  • 原文地址:https://www.cnblogs.com/flms/p/9593372.html
Copyright © 2011-2022 走看看