第一章-响应式布局(bootstrap框架)
大家好,由于我现在还在学习,有什么不对,希望大家帮忙指点,能和像我一样的大白共同进步，以下是我在学习中的一些实例项目和
总结。
实现弹性布局方法
一般我们习惯设置宽高,大小用像素(px)来做作为单位,其实还一种单位(百分比),列如:
.box{
width:100%; //常常我们习惯写成 width:960px；
height:50%;
border: 1px solid #000000;
padding:10px;
}
Flex布局
Flex又称弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式及如何处理使用的空间。
.box{
display:flex;
border:1px solid #000000;
padding:10px;
}
aside{
flex:1;
background:red;
padding:10px;
}
article{
flex:1;
margin-left:10px;
background:yellow;
}
弹性盒模型的好处:
1.可以让盒子里面的元素排在一行。
2.盒子里面的元素高度相同。
接下来给大家分享一下用响应式布局做的一个例子:
这是CSS的代码:
<style type="text/css">
当网页屏幕宽度小于800px的时候
*{ margin:0px; padding:0px;}
img{ border:0px;}
#all{ margin:0px auto; width:760px; text-align:center;}
#all h2{ color:#89867e;}
#all #divimg1{ display:none;}
#all #divimg{ float:left; width:120px; height:145px; padding-top:55px; transition:all .6s ease-in-out; }
#all #divimg:hover{-moz-transition:all .4s ease-in-out; height:165px;}
#all #divimg h3{ color:#e4af7e;}
#all .div1{ background:#d06503;}
#all .div2{ background:#e9931a;}
#all .div3{ background:#1691be;}
#all .div4{ background:#166ba2;}
#all .div5{ background:#1b3647;}
#all .div6{ background:#152836;}
#all #divimg img{ border-radius:50%; box-shadow: 0 0 0 30px transition; background:rgba(255,255,255,0.1); transition:all .6s ease-in-out;}
#all #divimg img:hover{ box-shadow:0 0 0 0 rgba(255,255,255,0.2); -moz-transition:all .4s ease-in-out; transform:translate(0px,-5px);}
}
当网页屏幕宽度小于520px的时候
*{ margin:0px; padding:0px;}
img{ border:0px;}
#all{ margin:0px auto; width:500px; text-align:center;}
#all h2{ color:#89867e;}
#all #divimg1{display:none;}
#all #divimg{ float:left; width:250px; height:60px; padding-top:55px; }
#all #divimg h3{ color:#e4af7e;}
#all .div1{ background:#d06503;}
#all .div2{ background:#e9931a;}
#all .div3{ background:#1691be;}
#all .div4{ background:#166ba2;}
#all .div5{ background:#1b3647;}
#all .div6{ background:#152836;}
}
当网页屏幕宽度小于519px的时候
*{ margin:0px; padding:0px;}
img{ border:0px;}
#all{ margin:0px auto; width:500px; height:280px; text-align:center;}
#all h2{ color:#89867e;}
#all #divimg1{ display:block; width:500px; height:50px; cursor:pointer; }
#all #divimg1 img{float:left; }
#all #divimg{ float:left; width:250px; height:60px; padding-top:55px; }
#all #divimg h3{ color:#e4af7e;}
#all .div1{ background:#d06503; display:none;}
#all .div2{ background:#e9931a; display:none;}
#all .div3{ background:#1691be; display:none;}
#all .div4{ background:#166ba2; display:none;}
#all .div5{ background:#1b3647; display:none;}
#all .div6{ background:#152836; display:none;}
}
</style>
这是body里的代码：
<body>
<div id="all">
<h2>响应式滑动菜单</h2>
<div id="divimg1" >
<img src="image/1.png" />
</div>
<div id="divimg" class="div1">
<img src="image/2.png" />
<h3>Home</h3>
</div>
<div id="divimg" class="div2">
<img src="image/3.png" />
<h3>Services</h3>
</div>
<div id="divimg" class="div3">
<img src="image/4.png" />
<h3>Portfolio</h3>
</div>
<div id="divimg" class="div4">
<img src="image/5.png" />
<h3>Blog</h3>
</div>
<div id="divimg" class="div5">
<img src="image/6.png" />
<h3>The team</h3>
</div>
<div id="divimg" class="div6">
<img src="image/7.png" />
<h3>Content</h3>
</div>
</div>
</body>
效果图如下:
当屏幕缩小时的效果图:
这些对于大神没什么用,但可能对于像我还在学习的大白应该有点帮助吧!