前端随笔之Bootstrap小例
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,换行和渐变