前端随笔之Bootstrap小例

武林半侠

2017-09-18

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,换行和渐变

css