html 图层 响应放大,HTML实现图层的自适应变化

这次练习是在HTml中引入了

,

，主要是标签的使用，相关知识我整理成了思维导图附下：

实现图层自适应的方法有许多，见仁见智。我的思路是设置三个

图层并且不同的颜色，左右两边的位置固定住。中间图片设为自适应，就可达到不论怎么滑动屏幕，两边的颜色大小不变，而中间的元素随着移动自适应的效果。代码附下，欢迎大家交流指正。界面自适应

#left {

float: left;

height: 200px;

width: 200px;

background-color: coral;

}

#right {

right: 0;

width: 100px;

height: 200px;

background-color: chocolate;

position: absolute;

}

#center {

margin: 0 auto;

height: 200px;

background-color: cornflowerblue;

}

效果如下：