干货,分享!蓝色精美简洁MUI后台管理模板!!!

今天把第一套压箱底的精品拿出来分享,值得大伙收藏。

蓝色精美简洁MUI后台管理模板!!!

本资源整理自互联网,仅供学习交流使用,请勿商用,坚持每日分享一套Java学习资源干货,一起提高,一起进步!!!

  资源截图:

局部代码:

 1<!DOCTYPE html>
 2<html lang="zh-cn">
 3<head>
 4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 7    <meta name="renderer" content="webkit">
 8    <title>登录</title>  
 9    <link rel="stylesheet" href="css/pintuer.css">
10    <link rel="stylesheet" href="css/admin.css">
11    <script src="js/jquery.js"></script>
12    <script src="js/pintuer.js"></script>  
13</head>
14<body>
15<div class="bg"></div>
16<div class="container">
17    <div class="line bouncein">
18        <div class="xs6 xm4 xs3-move xm4-move">
19            <div style="height:150px;"></div>
20            <div class="media media-y margin-big-bottom">           
21            </div>         
22            <form action="index.html" method="post">
23            <div class="panel loginbox">
24                <div class="text-center margin-big padding-big-top"><h1>后台管理中心</h1></div>
25                <div class="panel-body" style="padding:30px; padding-bottom:10px; padding-top:10px;">
26                    <div class="form-group">
27                        <div class="field field-icon-right">
28                            <input type="text" class="input input-big" name="name" placeholder="登录账号" data-validate="required:请填写账号" />
29                            <span class="icon icon-user margin-small"></span>
30                        </div>
31                    </div>
32                    <div class="form-group">
33                        <div class="field field-icon-right">
34                            <input type="password" class="input input-big" name="password" placeholder="登录密码" data-validate="required:请填写密码" />
35                            <span class="icon icon-key margin-small"></span>
36                        </div>
37                    </div>
38                    <div class="form-group">
39                        <div class="field">
40                            <input type="text" class="input input-big" name="code" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" />
41                           <img src="images/passcode.jpg" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="this.src=this.src+'?'">  
42
43                        </div>
44                    </div>
45                </div>
46                <div style="padding:30px;"><input type="submit" class="button button-block bg-main text-big input-big" value="登录"></div>
47            </div>
48            </form>          
49        </div>
50    </div>
51</div>
52
53</body>
54</html>
 1<!DOCTYPE html>
 2<html lang="zh-cn">
 3<head>
 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5<meta http-equiv="X-UA-Compatible" content="IE=edge">
 6<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 7<meta name="renderer" content="webkit">
 8<title></title>
 9<link rel="stylesheet" href="css/pintuer.css">
10<link rel="stylesheet" href="css/admin.css">
11<script src="js/jquery.js"></script>
12<script src="js/pintuer.js"></script>
13</head>
14<body>
15<div class="panel admin-panel">
16  <div class="panel-head"><strong><span class="icon-pencil-square-o"></span> 单页信息</strong></div>
17  <div class="body-content">
18    <form method="post" class="form-x" action="">      
19      <div class="form-group">
20        <div class="label">
21          <label>标题:</label>
22        </div>
23        <div class="field">
24          <input type="text" class="input" name="title" value="" />
25          <div class="tips"></div>
26        </div>
27      </div>
28      <div class="form-group">
29        <div class="label">
30          <label>图片:</label>
31        </div>
32        <div class="field">
33          <input type="text" id="url1" name="img" class="input tips" style="width:25%; float:left;"  value=""  data-toggle="hover" data-place="right" data-image="" />
34          <input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传"  style="float:left;">
35          <div class="tipss">图片尺寸:500*200</div>
36        </div>
37      </div>
38      <div class="form-group">
39        <div class="label">
40          <label>内容:</label>
41        </div>
42        <div class="field">
43          <textarea name="content"></textarea>
44          <div class="tips"></div>
45        </div>
46      </div>
47      <div class="form-group">
48        <div class="label">
49          <label></label>
50        </div>
51        <div class="field">
52          <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
53        </div>
54      </div>
55    </form>
56  </div>
57</div>
58</body></html>

因文章有限,完整源码关注微信公众号:java小白逆袭之路  回复 html07  获取

                                                        【java小白逆袭之路】公众号

                               

                                                           (回复  html07  获取)

感谢老铁支持!!!

猜你喜欢

转载自blog.csdn.net/qq_39066501/article/details/107615798