Bootstrap响应式布局简例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自适应</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./job.css">
</head>
<body>
<div class="main">
<div class="inset">
<!--<div class="social-icons">-->
<div class="span">
<a href="#"><i>用户登录</i>
</a></div>
<!--<div class="clear"></div>-->
<div class="span1">
<a href="#"><i>用户注册</i>
</a></div>
<!--<div class="clear"></div>-->
<!--</div>-->
</div>
</div>
</body>
</html>/*body{background-color: #fff;}*/
/*body{background-color: #2d2d2d}*/
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;}
.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%;
}
.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.99%;
}
.clear{clear:both;}
.inset{
overflow: hidden;
text-align: center;
width: 100%;
margin: auto;
}
/*----自适应-----*/
@media (max-width:1200px){
.main {
width:60%;
margin: 7em auto 0;
}
}
@media (max-width:992px){
.main{
width: 70%;
margin: 9em auto 0;
}
}
@media (max-width:768px){
.main{
width:80%;
margin: 6em auto 0;
}
.span,.span1 {
margin:0 auto;
text-align:center;
width: 100%;
margin-bottom: 15px;
}
}换行
相关推荐
乔乔 2020-01-06
niepxiya 2019-12-08
TemplarAssassin 2017-09-16
bingkingboy 2016-03-24
jingtianyiyi 2017-09-18
乔乔 2016-11-03
乔乔 2015-06-13
相信未来 2017-03-09
Chinahdy 2016-05-23
乔乔 2014-05-03
niepxiya 2019-06-21
zh000 2017-05-04
iChangebaobao 2019-05-09
zh000 2016-12-01
相信未来 2016-11-25
乔乔 2016-06-13
相信未来 2016-06-13
hllinc 2016-05-27