1. bootstrap的布局是如何實現(xiàn)的?電腦端與手機端如何實現(xiàn)自適應柔逼?
<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實現(xiàn)以下布局享钞,確保自適應
利用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實現(xiàn)一個單詞數(shù)組(以單個字符存儲)揍诽,將其單詞倒敘排列
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;
????????}
????}
}