星巴克网站复刻之问题总结(粘滞定位+图片和行内元素对齐)

星巴克网站首页复刻（HTML+CSS）

gitee地址：https://gitee.com/jia-shuting...

1. 粘滞定位使用

如下图所示，图中红色方框圈起来的地方使用粘滞定位，使其固定不动。右侧可以随意滚动。

position: fixed;

2. vertical-align使用

HTML代码：
<div class="denglu">
     <img src="..." alt="">
     <span>登录</span> 
</div>

CSS代码：
.left> .left_body .button> .denglu> img{
    vertical-align: middle;
}

3.图片的垂直居中

*图片要放在一个有高度的div块中

html代码：
<div class="right">
  <div class="tu">
    <img src="https:..." alt="">
  </div>
</div>
css代码：
.body> .right> .div2> .wrapper> .right{
    float: right;
}
.body> .right> .div2> .wrapper> .right  .tu{
    height: 236px;
    display: table-cell;
    vertical-align: middle;
}