手机页面REM布局? 这种效果如何实现?创建一个长条 覆盖在上边吗
左右两个圆角矩形,中间一左一右两个矩形,利用js改变宽度,保持总宽度不变
实践思路
两种解决方案,简单和繁琐。
一个背景图片,用定位来显示百分比。
左右写两个盒子。
代码思路
第一种:
给父级加个定位position: relative;
在加一个背景颜色。用css3-moz-linear-gradient
样例:background: -moz-linear-gradient(top, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 50%, #ffffff 100%); /* FF3.6-15 */
给每个span都分别定位position: absolute;
定位按照设计图走。
每个span都不要背景颜色。
另外我span的命名都是瞎起的,你运用到自己的项目中,要起含义一致的。
其他的,我觉得就是ajax请求,并把获得的数据覆盖上。
关于百分比的参数,你可以跟后台沟通,可以直接让他把对应的值告诉你,你在把获取的值,拼到样式里。这个就需要你跟后台人员对接了。
<div>
<div>
<span class="floatL">购买支持</span>
<span class="leftNum">60%</span>
<span class="rightNum">40%</span>
<span class="floatR">购买支持</span>
<div class="clear"></div>
</div>
</div>
第二种:
给浮动的两个div分别写一种不同颜色的背景。其他的就没有什么区别了。
<div>
<div>
<div style="float:left;">
<span class="floatL">购买支持</span>
<span class="leftNum">60%</span>
<div>
</div style="float:right;">
<span class="rightNum">40%</span>
<span class="floatR">购买支持</span>
</div>
<div class="clear"></div>
</div>
</div>
左右圆角矩形,中间背景为橙色的长方矩形,红色百分比的长度定位在中间的矩形left,根据数据改变红色百分比长度
赞同楼上说的方法,当支持比例发生变化时,动态数据改变两者长度
两个div分别存放两张背景图,一张放在另一张上面,设置上面 那个div的宽度就好了
突然好奇有个问题,两者的色素不会滚到 两边的 圆角矩形里面吗?比例都是在中间变的?如果不是那我就觉得楼上的布局说法,就不靠谱了。