Problems:
We want to display something like this.
The container has images on the left and right, with absolute position. The contents text is in the middle.
Solution:
We have an <a> as the container. A <span>for the shopping
chart image and <b> for the arrow right. The html code would be:
<a href="#">
<span class="chart-img"></span>
购物车<span class="chart-item-num">0</span>件
<b></b>
</a>
/*leave padding on left and right for the two images. Need to set position to relative */
a {
background: none repeat scroll 0 0 white;
border: 1px solid #D8D8D8;
height: 18px;
line-height: 17px;
width: 66px;
padding: 0 16px 0 25px;/*WITH THE PADDING TO DISPLAY IMAGES*/
position: relative;/*WITH THIS, THE CONTAINED IMAGE CAN USE ABSOLUTE POSITION*/
bottom: 2px;
}
/*Use position:absolute. Display the shopping chart at (6,3) of the parent relative positioned a*/
.chart-img {
position: absolute;
left: 6px;
top: 3px;
width: 14px;
height: 11px;
background: url(../images/T1CCRNXmRFXXXXXXXX.png) no-repeat -100px -21px;
}
/*A tricky method to display the arrow. Can use image too.*/
a b {
border-color: #666666 #FFFFFF #FFFFFF;
right:6px;
}
Related Patterns:
- 大小: 794 Bytes
分享到:
相关推荐
position:absolute;left:20px;bottom:20px;} .bg p{display:none;width:226px;height:226px;padding:6px;background:#fff url(images/logo.gif)no-repeat 10px 10px;border:1px solid #6E939C;position:absolute;...
position:absolute;top:0px;left:0px} .btn_change{width:40px;height:60px;position:absolute;text-indent:-9999px;cursor:pointer} .left_btn{background:url(../images/leftstop.jpg) no-repeat;top:85px;left:8...
#dv_scroll{position:absolute;height:310px;overflow:hidden;width:570px; top:15px;} .Scroller-Container{width:100%;} #dv_scroll_bar{position:absolute;right:0;top:10px;width:14px;height:310px;border-left...
position:absolute; top:0px; right:0px; z-index:200; } .special_icon{ position:absolute; top:0px; _top:6px; right:2px; z-index:250; } img.thumb{ padding:10px 0 0 0; } .new_products{ clear:both; padding...
动态爱心表白代码 html js网页源代码 情人节送女友礼物浪漫编程,七夕程序员表白Html代码表白的套路很多,但都少不了送花送礼物,作为一个程序员,搞不懂现在流行的泡泡机、小猪、重力感应车等玩具,也不想去让朋友...
position:absolute;top:24px;width:100%}#gbi,#gbs{background:#fff;left:0;position:absolute;top:24px;visibility:hidden;z-index:1000}#gbi{border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;z-index:...
#slideshow .img{position: absolute;width: 930px;height: 300px;overflow: hidden} #slideshow .img span{position: absolute;width: 19999px;display: block} #slideshow .btns{z-index: 10;position: absolute;...
Fixed : Issue with absolute opacity in TTMSFMXBitmap Fixed : Issue with editing cell functionality while selecting all cells in TTMSFMXGrid v1.8.0.2 Fixed : Issue with peristing column states ...
JavaScript实现跟随广告的示例代码 浮动广告是目前网站很常见的一种广告形式... } img { position: absolute; left: 0; } p { text-align: center; line-height: 40px; } <img src="images/left_ad.png" a
.menu{position:absolute;background:#ffffff;border:1px solid #d5e6ed;} .menu a{display:block;padding:4px 8px;} /*下拉框*/ .menu-post{border:1px solid #bdcfdd;} .menu-post .menu-b{background:#ffffff;...
.pos-absolute{position:absolute;}/* Position Absolute */ .vertical-base{ vertical-align:baseline;}/* vertical align baseline */ .vertical-top{ vertical-align:top;}/* vertical align top */ .underline{ ...
.tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;cursor:pointer;background:url(images/seltab.gif) no-repeat;}.splitx{overflow:...
#adsie {position:absolute; bottom:0;} /* ================================================================ This copyright notice must be untouched at all times. The original version of this ...
好嘞!废话不多说!Code贴上!哪位高手有更好的方式可以多多指点! CSS Code 代码如下: /* * images player * author:mr·zhong * date:2010-04-19 */ #... position:absolute; } #playerImage ul li{ padding:0px; mar
div.style.position="absolute"; div.style.backgroundColor="black"; div.style.left="0px"; div.style.top="0px"; div.style.filter="alpha(opacity=80)"; div.style.opacity="0.8"; iframe.id = ...
上图片素材先: 背景图片:浮云图片: ←——————————这里是有图片D~ 全选就能看见了(因为背景是白的,云也是白的嘛~)…… CSS代码: 代码如下: <style type=”text/css”>... position: absolute; }
position:absolute; top:0; left:105px; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover...
" class="title">这是标题三</h2></div><div style="position:absolute;right:10px;bottom:5px; z-index:100" class="KinSlideshow_btnBox">;padding:0; overflow:hidden" id="btnlistID">; float: left; width: 18...
iphone手机桌面效果,因为用了css3样式,只测试了谷歌浏览器。 iphone手机桌面效果 body,div,ul,li{padding: 0; margin: 0; } li{list-style: none;... position: absolute; top: 50%; left: 5
.s_box{position:absolute;z-index:9999px; width:38px;height:38px;border:1px #000 solid;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);} .s_box span{display:block;width:36px;height:36px;margin:1...