城市合伙人官网和手机版页面总结

底层图，浮在背景图上的图片和图片上的文本：三层
**方法一：将图片上的文本放入图片的div里面，然后定位。调bottom++。
方法二：将图片上的文本单独放一个div。然后使用top的负值将其浮在图片上。
下列使用方法一：

<div class="text-center banner_top">/*底层图：css引入的背景图 */
   <div class="banner_join">
    <img src="images/1-1.jpg" alt="topbanner">   /*浮在背景图上的图片：*/
      <img src="images/1-2.png" class="join_button">/*图片上的文字*/
      <a href="https://form.mikecrm.com/NraHsw"></a>
    </div>
  </div>

css:

.banner_top {
  background:url(../images/1.jpg) no-repeat center center;
  width: 100%;
  text-align: center;
  /*background-size: 100% 100%;这里的百分比是针对设置的宽高*/
  background-size: cover;
}
.banner_join {
  position: relative;
  width: 960px;
  margin: 0 auto;
}

.join_button,.banner_join a {
  width: 148px;
  height: 58px;
  margin: 0 auto;
  position: absolute;
  left: 33%;
  bottom: 28%;
}

给图片上的文本定位：
1.用div嵌套该文本；
2.给div 绝对定位，给文本(例子中是images/1-2.png)相对定位。
3.在文本中使用left.top等给它具体定位。

css中引入背景图，如果给它高度，然后size是100%，那这个百分比是根据这个高度来的。

.future {
  background: url(../images/8.jpg) no-repeat center center;
  width: 100%;
  height:300px;
  text-align: center;
 background-size: 100% 100%; /*这里的百分比是针对设置的宽高*/
}

针对图片布局：外层div给它一个大小，然后图片给它100%即可

.text-center{
  text-align: center;
  width: 960px;/*手机最小屏幕宽度*/
}
.text-center img{
  width: 100%;
  display:block;/*消除图片之间的空隙*/
  margin: 0 auto;
}