如何设计前台网页

来源：互联网发布：手机音响测试软件编辑：程序博客网时间：2024/04/29 09:25

这里介绍一个网站，bootstrap的UI库，点击打开链接，设计一个简单的登录界面

这里给出源码：这里link的连接bootstrap.css和bootstrap.js都是下载bootstrap这个文件，然后解压到相关目录下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>管理员登录界面</title><link rel="stylesheet" href="../theme/bootstrap/css/bootstrap.css"><script src="../theme/bootstrap/js/bootstrap.js"></script></head><body><div class="container"><div class="row" style="margin-top:200px;"><div class="col-md-3"></div><div class="col-md-6" ">     <div class="panel panel-primary">  <div class="panel-heading">管理员登录</div>  <div class="panel-body">        <form class="form-horizontal"><div class="form-group">    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>    <div class="col-sm-10">      <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">    </div>    </div>    <div class="form-group">    <label for="inputEmail3" class="col-sm-2 control-label">密码</label>    <div class="col-sm-10">      <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">    </div>    </div>    <div class="form-group">    <div class="col-sm-2"></div>    <div class="col-sm-10">      <input type="submit" value="提交登录" class='btn-primary'>    </div>    </div>    </form></div>   <div class="panel-footer text-right">版权所有，盗版必究</div>    </div></div><div class="col-md-3"></div></div></div></body></html>

阅读全文

1 0