1. bootstrap的布局是如何实现的?电脑端与手机端如何实现自适应?
<div class="container">
<div class="row">
<div class="col-md-12'></div>
</div>
</div>
container类为相应式宽度提供宽度约束,且拥有15px padding(左右)值的留白
@media (min-width:768px){
.container{ width:750px }
}
@media (min-width:992px){
.container{ width:970px}
}
@media (min-width:1200px){
.container{ width:1170px}
}
2. 用css实现以下布局,确保自适应
利用bootstrap布局:
<div class="container">
<div class="row" >
<div class="col-md-4 col-sm-12 con" >
<img src="/wp-content/uploads/2014/06/download.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4 col-sm-12 con" >
<img src="/wp-content/uploads/2014/06/download.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-4 col-sm-12 con" >
<img src="/wp-content/uploads/2014/06/download.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
样式补充:
.con{border:1px solid red;padding:0;height:150px;position:relative;}
.con img{border:1px solid blue;width:100%;height:100%;}
.con p{height:100px;margin-top:-100px;color:red;text-align:center;}
3.用js实现一个单词数组(以单个字符存储),将其单词倒叙排列
let arr=[I, ,a, m, , a, ,s,t,u,d,e,n,t]
function change(arr,index1,index2){
var temp;
temp=arr[index1];
arr[index1]=arr[index2];
arr[index2]=temp;
}
function mySort(arr){
for(var i=0;i<arr.length/2;i++){
change(arr,i,arr.length-i-1);
}
for(var j=0;j<arr.length;j++){
var k=0;
if(arr[j]==' '){
for(let i=k;i<j/2;i++){
change(arr,i,j-1-i);
}
k=j+1;
}
}
}