欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

响应式网页开发登陆界面

程序员文章站 2024-03-22 23:05:10
...
<head>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script language="JavaScript" src="js/bootstrap.min.js"></script>

	<style>
		/* 大屏幕 */
		@media (min-width: 1200px) { ... }
		 
		/* 平板电脑和小屏电脑之间的分辨率 */
		@media (min-width: 768px) and (max-width: 979px) { ... }
		 
		/* 横向放置的手机和竖向放置的平板之间的分辨率 */
		@media (max-width: 767px) { ... }
		 
		/* 横向放置的手机及分辨率更小的设备 */
		@media (max-width: 480px) { ... }
		
		body {
        /*background: rgb(185, 246, 246);*//*设置颜色背景*/
        
        background-image: url(img/a.jpg)/*设置背景图片*/
        background-repeat:no-repeat;/*图片适应窗口大小，这里设置的是不进行平铺*/
        background-attachment: fixed;/*图片相对于浏览器固定,这里设置背景图片固定，不随内容滚动*/
        background-origin: border-box;/*从边框区域显示*/
        background-size:cover;/*指定图片大小，此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小*/

    }
		</style>
	
</head>
<body>
	<div class="container" align="center">
		<body background="img/a.jpg">
	<form class="form-inline"> 
		
		<div class="hero-unit">
		  <h1>Wine taster</h1>
		  <p>You must be at least 18 to enter this site</p>
		</div>
		
		<div class="input-group">
		<ul class="nav nav-tabs nav-justified">
  <input type="text" class="form-control" id="exampleInputAmount" placeholder="YYYY">
  <input type="text" class="form-control" id="exampleInputAmount" placeholder="434">
  <input type="text" class="form-control" id="exampleInputAmount" placeholder="QKQ">
</ul>
	</div>
	<br />
	
	<div class="page-header">
	  <select>
	  	
	  <p>language<small>english</small></p>
	  <option><p>language<small>english</small></p></option>
	  <option><p>language<small>english</small></p></option>
	  <option><h1>language<small>english</small></h1></option>
	  <option><h1>language<small>english</small></h1></option>
	</select>
	  <ul class="dropdown-menu">
	    <!-- dropdown menu links -->
	  </ul>
	</div>
	
	<br />
	<div class="form-inline">
<div class="controls">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  
</div>
<br />
<p class="lead text-center">
	<p>
		The time that my journey takes is long and the way of it long.I came out on the chariot of the first gleam of light, and pursued my voyage through the wildernesses of worlds leaving my track on many a star and planet.
				</p>			


<a class="btn btn-primary btn-large">
  enter
</a>


	</form>		
	</div>		
</body>

浏览器全屏下效果图
响应式网页开发登陆界面
移动端效果图
响应式网页开发登陆界面

相关标签： css3 前端 html html5 bootstrap

上一篇： JAVA登录界面的实现（二）

下一篇： 再说Swing系列之登录界面的基本实现

推荐阅读