当前位置:Gxlcms > html代码 > 购物车案例--麻雀虽小五脏俱全(小标签浮动定位……)_html/css_WEB-ITnose

购物车案例--麻雀虽小五脏俱全(小标签浮动定位……)_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:38人阅读

电商时代的到来,许多网页从此便有了购物车图标,虽说不是难点,但是菜鸟的学习总归是要日积月累的,也希望大家多多指教

 1  2  3  4      5     Document 6     49 50 51         
52 我的购物车53 54 >55 056
57 58

案例效果:

总结:

三角是用大于号做的,购物车是精灵图定位,数量图标是用背景颜色,圆角矩形

1、29行的背景图不会撑开盒子。 2、图片和文字会撑开盒子。(文字比较特殊) 3、在小标签(行内标签)的情况下:

定位之后,不写left属性,默认的地方会出现的padding和a链接中的文字之后。

圆角矩形:四种写法1、border-radius: 1em;

2、border-radius: 50%;

3、border-radius: px;

4、border-radius: 左上角 右上角 右下角 左下角;

人气教程排行