Home > Article > Web Front-end > 购物车案例--麻雀虽小五脏俱全（小标签 浮动 定位……）_html/css_WEB-ITnose
购物车案例--麻雀虽小五脏俱全（小标签 浮动 定位……）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:29:151194browse
电商时代的到来，许多网页从此便有了购物车图标，虽说不是难点，但是菜鸟的学习总归是要日积月累的，也希望大家多多指教
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin: 0;padding: 0} 8 a{ 9 text-decoration: none;10 }11 .cart {12 width: 100px;13 height: 35px;14 float: right;15 line-height: 35px;16 border: 1px solid #DFDFDF;17 margin: 25px 65px 0 0;18 padding-left: 45px;19 position: relative;20 }21 .cart i {22 position: absolute;23 }24 .icon1 {25 top: 8px;26 left: 12px;27 width: 20px;28 height: 15px;29 background: url(tel.png) no-repeat 0 -90px;30 }31 .icon2 {32 top: 10px;33 right: 10px;34 font: 400 13px/13px "simsun";35 color: #999;36 }37 .icon3 {38 top: -5px;39 width: 16px;40 height: 14px;41 line-height: 14px;42 right: -3px;43 text-align: center;44 color: #fff;45 background-color: #C81623;46 border-radius: 7px 7px 7px 0;47 }48 </style>49 </head>50 <body>51 <div class="cart">52 <a href="#">我的购物车</a>53 <i class="icon1"></i>54 <i class="icon2">></i>55 <i class="icon3">0</i>56 </div>57 </body>58 </html> 案例效果：
总结：
三角是用大于号做的，购物车是精灵图定位，数量图标是用背景颜色，圆角矩形
1、29行的背景图不会撑开盒子。 2、图片和文字会撑开盒子。（文字比较特殊） 3、在小标签（行内标签）的情况下：
定位之后，不写left属性，默认的地方会出现的padding和a链接中的文字之后。
圆角矩形：四种写法1、border-radius: 1em;
2、border-radius: 50%;
3、border-radius: px；
4、border-radius: 左上角 右上角 右下角 左下角;
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css怎么做下拉菜单?_html/css_WEB-ITnoseNext article：下拉菜单总是出不来asp_html/css_WEB-ITnose