Heim > Artikel > Web-Frontend > 购物车案例--麻雀虽小五脏俱全（小标签 浮动 定位……）_html/css_WEB-ITnose
购物车案例--麻雀虽小五脏俱全（小标签 浮动 定位……）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:29:151171Durchsuche
电商时代的到来，许多网页从此便有了购物车图标，虽说不是难点，但是菜鸟的学习总归是要日积月累的，也希望大家多多指教
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: 左上角 右上角 右下角 左下角;
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css怎么做下拉菜单?_html/css_WEB-ITnoseNächster Artikel：下拉菜单总是出不来asp_html/css_WEB-ITnose