bootstartp 简单登陆页面（另成一个html就可以看到效果）
2014-03-20 11:18
746 查看
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap In Practice - Landing Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet" />
<style>
/* http://css-tricks.com/perfect-full-page-background-image/ */
html {
background: url(img/6133364748_89f2365922_o.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
padding-top: 20px;
font-size: 16px;
font-family: "Open Sans",serif;
background: transparent;
}
h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 40px;
}
/* Override B3 .panel adding a subtly transparent background */
.panel {
background-color: rgba(255, 255, 255, 0.9);
}
.margin-base-vertical {
margin: 40px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 panel panel-default">
<h1 class="margin-base-vertical">Have you ever seen the rain?</h1>
<p>
Someone told me long ago there's a calm before the storm. I know, It's been comin for some time.
</p>
<form class="margin-base-vertical">
<p class="input-group">
<span class="input-group-addon"><span class="icon-envelope"></span></span>
<input type="text" class="form-control input-lg" name="email" placeholder="jonsnow@knowsnothi.ng" />
</p>
<p class="input-group">
<span class="input-group-addon"><span class="icon-envelope"></span></span>
<input type="text" class="form-control input-lg" name="email" placeholder="jonsnow@knowsnothi.ng" />
</p>
<p class="help-block text-center"><small>We won't send you spam. Unsubscribe at any time.</small></p>
<p class="text-center">
<button type="submit" class="btn btn-success btn-lg">Keep me posted</button>
</p>
</span>
</form>
<div class="margin-base-vertical">
<small class="text-muted"><a href="http://www.flickr.com/photos/erwlas/6133364748/">Background picture by erwlas @flickr</a>. Used under <a href="http://creativecommons.org/licenses/by/2.0/deed.en">Creative Commons - Attribution</a>.</small>
</div>
</div><!-- //main content -->
</div><!-- //row -->
</div> <!-- //container -->
</body>
</html>
<html>
<head>
<title>Bootstrap In Practice - Landing Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet" />
<style>
/* http://css-tricks.com/perfect-full-page-background-image/ */
html {
background: url(img/6133364748_89f2365922_o.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
padding-top: 20px;
font-size: 16px;
font-family: "Open Sans",serif;
background: transparent;
}
h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 40px;
}
/* Override B3 .panel adding a subtly transparent background */
.panel {
background-color: rgba(255, 255, 255, 0.9);
}
.margin-base-vertical {
margin: 40px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 panel panel-default">
<h1 class="margin-base-vertical">Have you ever seen the rain?</h1>
<p>
Someone told me long ago there's a calm before the storm. I know, It's been comin for some time.
</p>
<form class="margin-base-vertical">
<p class="input-group">
<span class="input-group-addon"><span class="icon-envelope"></span></span>
<input type="text" class="form-control input-lg" name="email" placeholder="jonsnow@knowsnothi.ng" />
</p>
<p class="input-group">
<span class="input-group-addon"><span class="icon-envelope"></span></span>
<input type="text" class="form-control input-lg" name="email" placeholder="jonsnow@knowsnothi.ng" />
</p>
<p class="help-block text-center"><small>We won't send you spam. Unsubscribe at any time.</small></p>
<p class="text-center">
<button type="submit" class="btn btn-success btn-lg">Keep me posted</button>
</p>
</span>
</form>
<div class="margin-base-vertical">
<small class="text-muted"><a href="http://www.flickr.com/photos/erwlas/6133364748/">Background picture by erwlas @flickr</a>. Used under <a href="http://creativecommons.org/licenses/by/2.0/deed.en">Creative Commons - Attribution</a>.</small>
</div>
</div><!-- //main content -->
</div><!-- //row -->
</div> <!-- //container -->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个小型的网站，比如个人网站，可以使用最简单的html静态页面就实现了，配合一些图片达到美化效果，所有的页面均存放在一个目录下，这样的网站对系统架构、性能的要求都很简单，随着互联网业务的不断丰富，网站
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 在页面中，我们经常看到，一个button按钮，如果属标点击，就会触发一个窗口的显示，如果二次点击并可以隐藏，那么如何通过JAVA配合html来实现这一功能呢？
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 三种简单的html网页自动跳转方法，可以让你在打开一个html网页时自动跳转到其它的页面
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 本来从动态壁纸预览页面设置一个动态壁纸回到桌面便可以看到桌面动态壁纸，可以观察得到自己的动态壁纸是否设置成功了（必须知道设置是否成功的结构，因为还有一些操作需要完成）！ 但是现在是要在自己的应用中进入
- Spring boot项目中展示HTML页面效果
- 编辑器使用方法 1. 下载编辑器 下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。 下载页面: http://www.kindsoft.
- HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
- 简单的投票页面，只有一个html页面