如何设计前台网页


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

,

这里给出源码:

<!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>


智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告