html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="../../myproject/imgs/title.png">
<title>登录</title>
<link href="../css/style.css" rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="main">
<div class="inset">
<div class="social-icons">
<div class="span"><a href="../../myproject/view/signin.html"><span
style="color: rgb(127, 182, 60);line-height: 26px;font-size: 16px;" class="glyphicon glyphicon-user"> SignIn</span><i>用户登录</i>
<div class="clear"></div>
</a></div>
<div class="span1"><a href="../../myproject/view/signup.html"><span style="font-size: 16px;color: rgb(255, 140, 60);line-height: 26px;"
class="glyphicon glyphicon-user"> SignUp</span><i>用户注册</i>
<div class="clear"></div>
</a></div>
<div class="clear"></div>
</div>
</div>
<form>
<div class="lable">
<input type="text" class="text" placeholder="请输入用户名" id="active">
</div>
<div class="clear"></div>
<div class="lable-2">
<input type="password" class="text" placeholder="请输入密码">
</div>
<div class="clear"></div>
<div class="submit">
<input type="submit" onclick="" value="登录">
</div>
<div class="clear"></div>
</form>
</div>
</body>
</html>
/* 重置 */
html,body,div,span,h2,p,a,img,sub,u,i,menu,form
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/*font:inherit继承*/
/*vertical-align:baseline;设置元素内容的垂直对齐方式*/
/* 初始化 */
a{text-decoration:none;}
.txt-rt{text-align:right;}
.txt-lt{text-align:left;}
.txt-center{text-align:center;}
.float-rt{float:right;}
.float-lt{float:left;}
.clear{clear:both;}
.pos-relative{position:relative;}
.pos-absolute{position:absolute;}
.vertical-base{ vertical-align:baseline;}
.vertical-top{ vertical-align:top;}
nav.vertical ul li{ display:block;}
nav.horizontal ul li{ display: inline-block;}
img{max-width:100%;}
body{
background:url(../imgs/back.jpeg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-size: 100% 100%;/*规定背景图像的尺寸*/
}
body,.main h2,.main h3,span,
.span i,.span1,.lable input[type="text"],.span1 i,
.copy-right p a,input[type=submit],.lable-2 input[type="Password"]{
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.main{
margin:7em auto 0;
width:44%;
}
.inset {
text-align: center;
width: 100%;
}
.main h2,.main h3{
font-size: 1em;
text-align: center;
color:#fff;
padding:1em 0;
}
.main h3{
font-size: 1em;
text-align:left;
}
.main h3 span a{
color:#1888A8;
font-weight: bold;
}
.span {
float:left;
display: block;
background:#3B5998;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
border:1px solid #3B5998;
outline:none;
width: 49.99%;
}
a span {
padding:11px 12px;
float: left;
}
.span:hover{
background:#5D7BBA;
color:#fff;
}
.span i {
color: #fff;
padding: 14px 14px;
float: left;
font-size: 18px;
}
.span1 {
float:right;
transition: all 0.5s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
background: #55ACEE;
outline:none;
width: 49.7%;
}
.span1 i {
color: #fff;
padding: 15px 14px;
float: left;
font-size: 18px;
}
.span1:hover{
background:#71B8ED;
color:#fff;
}
.lable input[type="text"] {
padding: 14px;
width: 100%;
font-size: 1em;
margin: 18px 0px;
border: none;
color: #666666;
cursor: pointer;
background: none;
float: left;
outline: none;
font-weight: 700;
background: #ffffff;
}
.lable input[type="text"]:hover,.lable-2 input[type="text"]:hover,.lable-2 input[type="Password"]:hover{
color: black;
/*border-left:6px solid#7fe2fd;!* 左边框样式 *!*/
}
.lable-2 input[type="Password"] {
padding: 14px;
width: 100%;
font-size: 1em;
margin: 18px 0;
border:none;
color: #666666;
cursor: pointer;/* 手状 */
background: none;
float: left;
outline: none;
font-weight: 700;
background: #ffffff;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
border-left: 6px solid #fff;
border-bottom: none;
border-right: none;
border-top: none;
}
.submit{
overflow: hidden;
padding: 5px 118px;
text-align: center;
/*border-radius: 6px;*/
}
input[type=submit] {
border-radius: 16px;
padding: 17px 30px;
color: #fff;
float: right;
background: #55ACEE;
border: 1px solid #40A46F;
cursor: pointer;
font-size: 18px;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
outline:none;
width: 100%;
}
.submit input[type=submit]:hover {
background:#3B5998;;
border:1px solid white;
}
/*----自适应-----*/
@media (max-width:1440px){
.main {
width:46%;
margin: 7em auto 0;
}
}
@media (max-width:1366px){
.main{
width: 48%;
}
.span1 {
width: 48.69%;
}
}
@media (max-width:1280px){
.main{
width:53%;
}
}
@media (max-width:1024px){
.main{
width: 66%;
margin: 9em auto 0;
}
}
@media (max-width:768px){
.main {
width:91%;
margin: 6em auto 0;
}
}
@media (max-width:640px){
.main{
width:90%;
margin: 6em auto 0;
}
.span,.span1 {
margin:0 auto;
text-align:center;
width: 100%;
margin-bottom: 15px;
}
.main h2, .main h3 {
padding: 0.5em 0;
font-size: 1em;
}
.lable input[type="text"]{
width: 94%;
}
.lable input[type="text"]{
width: 100%;
font-size: 1em;
text-align: left;
margin: 10px 0px;
margin-left:0;
}
.lable-2 input[type="text"], .lable-2 input[type="text"],input[type="Password"] {
width: 94%;
font-size: 1em;
margin: 10px 0px;
text-align: left;
}
input[type=submit] {
padding: 15px 15px;
font-size: 1em;
color: #fff;
text-align:center;
width: 100%;
}
.main h3 {
text-align: center;
}
}
@media (max-width:480px){
.main{
width:90%;
margin: 6em auto 0;
}
.lable input[type="text"]{
width: 100%;
}
@media (max-width:320px){
.main {
width: 90%;
margin: 3em auto 0;
}
.span i {
font-size: 16px;
}
.span1 i {
padding: 15px 0px;
font-size: 16px;
}
.lable input[type="text"]:first-child {
width: 90%;
padding: 13px 10px;
}
.lable input[type="text"], .lable input[type="text"], .lable-2 input[type="text"], .lable-2 input[type="text"] {
width: 90%;
font-size: 16px;
padding: 13px 10px;
}
input[type="Password"] {
font-size: 16px;
padding: 13px 10px;
width: 90%;
}
.main h3 {
line-height: 28px;
}
}
}
css,换行和渐变
相关推荐
【Bootstrap框架】是Web前端开发中的一个重要工具，它是由Twitter推出的开源框架，旨在提供一套简洁、灵活且响应式的UI（用户界面）组件和交互设计。Bootstrap基于HTML、CSS和JavaScript，能够快速构建出美观且适应...
【前端项目-bootstrap-drawer.zip】是一个前端开发资源包，主要关注的是使用Bootstrap框架来实现抽屉式导航的设计。Bootstrap是一款广泛使用的开源HTML、CSS和JS框架，它为开发者提供了丰富的预定义组件，使得构建...
前端教程之bootstrap样式库使用教程合集(4本).zip
Bootstrap可制作美观的前端页面，拥有丰富的组件及外部插件，更适用于前端的开发
前端Bootstrap+Es6+vue学习笔记 Bootstrap 框架是一种基于 HTML/CSS/JS 的开源框架，由 Twitter 公司的两名技术工程师研发。其主要特点包括： 1. 跨设备跨浏览器：Bootstrap 支持多种设备和浏览器，可以在不同的...
前端BUI-Bootstrap是一款专为前端开发者设计的基于Bootstrap框架的增强型库，它结合了BUI（Business UI）的设计理念和技术优势，旨在提供一个更具有技术含量、适用于企业级应用的前端解决方案。BUI-Bootstrap的出现...
Bootstrap是世界上最流行的开源前端开发框架，它为开发者提供了丰富的组件、样式和布局系统，使得创建响应式、移动优先的网站变得简单易行。"前端标签模板bootstrap"指的是使用Bootstrap框架来设计和构建网页中的...
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的... [2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。 [3]
在前端开发领域，Bootstrap是一个广泛使用的开源框架，它极大地简化了网页设计和开发流程。而“前端项目-bootstrap.native.zip”则包含了一个特别的版本——Bootstrap Native，这是一个专注于使用原生JavaScript实现...
【前端项目】Bootstrap Horizon Bootstrap Horizon 是一个基于流行的前端框架Bootstrap构建的项目，它专注于提供一种创新的布局方式，即3行水平滚动列。这个项目旨在优化用户界面，特别是对于那些需要展示大量横向...
在本“WEB前端框架应用（Bootstrap）课程设计”中，我们将深入探讨如何使用Bootstrap这一流行的前端框架来构建高效、响应式且美观的网页。Bootstrap是由Twitter开发并开源的一款框架，它为开发者提供了丰富的预设...
Bootstrap-Table是一款强大的前端表格插件，它充分利用了Twitter Bootstrap的样式和组件，为开发者提供了在Web应用中实现美观、可交互的表格功能。这款框架不仅支持基本的表格展示，还具备分页、排序以及丰富的数据...
Bootstrap 3是最流行和广泛使用的HTML、CSS和JS框架之一，它提供了丰富的预定义组件，如网格系统、按钮、表单、导航、模态框等，大大简化了前端开发流程。而Bootstrap Sidebar插件则是为了补充和增强这些功能，它为...
《前端开发框架bootstrap3教程》将介绍Bootstrap3的基本概念和使用方法，包括网格系统、表单、导航、按钮、图标等常用组件的使用。通过学习本教程，您将能够掌握Bootstrap3的核心技术，为您的Web开发工作提供便利和...
"基于bootstrap+jQuery的前端分页"是一个利用这两种流行的技术实现的分页解决方案。Bootstrap是Twitter推出的一个用于前端开发的开源工具包，它提供了一套响应式布局、移动设备优先的WEB设计框架，使得开发者能够...
本教程将深入探讨如何使用Bootstrap来创建美观的前端界面。 首先，理解Bootstrap的基础架构至关重要。它基于一个12列的栅格系统，允许开发者灵活地布局内容，确保页面在各种屏幕尺寸下都能自适应。在创建页面布局时...
前端项目-bootstrap-confirmation,Confirmation plugin compatible with Twitter Bootstrap 3 extending Popover
【前端项目-bootstrap-maxlength.zip】是一个前端开发相关的项目，它主要关注的是在用户输入时提供一个视觉反馈，提示用户已输入字符的数量与最大允许输入的字符数的关系。这个项目是基于Bootstrap框架构建的，...
Bootstrap 框架是目前最流行的前端框架之一，广泛应用于构建响应式、移动优先的WEB应用程序。下面是 Bootstrap 框架的基础知识点： 一、关于 Bootstrap Bootstrap 是一个基于 HTML、CSS 和 JavaScript 的开源前端...
Bootstrap前端模板是基于Twitter开发的开源前端框架，它极大地简化了网页设计和开发流程，尤其在构建响应式、移动优先的项目中表现出色。这款后台管理前端模板利用Bootstrap的强大功能，为开发者提供了一套完整的、...