アイテムの数とCSSのショッピングカートのアイコン.
3017 ワード
導入
すべてのeコマースのウェブサイトは、顧客がショッピングカートに入れている項目の数を表示する必要があります.HTMLとCSSのビットを使用してこれを表示する方法を簡単に教えてください.
ステップ1は、フォント素晴らしいスタイルシート
我々は、ショッピングカートのための素晴らしいフォントイメージを得るためにこれを必要とする.HTMLページの
<HEAD>節でこれを含めてください.<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
Step 2 CSSを使用してバッジのスタイルを記述します
バッジは、顧客がこれまでのショッピングカートに追加したアイテムの数と丸円です.
.badge:after{
content:attr(value);
font-size:12px;
color: #fff;
background: red;
border-radius:50%;
padding: 0 5px;
position:relative;
left:-8px;
top:-10px;
opacity:0.9;
}
バッジに渡される値を表示します.ここで値はカート内の項目数です.我々は、赤の背景と白いフォントの色を使用しています.我々は使用している:我々はバッジをカートのアイコンを表示した後に表示することを示している後.
HTML 3部分を書く
<i class="fa badge fa-lg" value=5></i>
<i class="fa badge fa-lg" value=8></i>
カートを表示するにはHTMLリスト項目Iを使用します.私達は24 pxのフォントサイズでカートのアイコンを表示している.
ショッピングカートに追加済み
ショッピングカートに追加
You can find more free font awesome codes by clicking this link
私は、コード全体をここに含めました
<html>
<head>
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
</head>
<body>
<style>
.badge:after{
content:attr(value);
font-size:12px;
color: #fff;
background: red;
border-radius:50%;
padding: 0 5px;
position:relative;
left:-8px;
top:-10px;
opacity:0.9;
}
</style>
<body>
<i class="fa badge fa-lg" value=5></i>
<i class="fa badge fa-lg" value=8></i>
</body>
</html>
結論
シンプルなHTMLとCSSで、我々はそれの項目でショッピングカートのアイコンの素晴らしいディスプレイを構築することができます.注意: PHPかPHPを使用する必要があります.実際のシナリオでは、上記の例に示すように、それらが静的であるとは限りません.
Reference
この問題について(アイテムの数とCSSのショッピングカートのアイコン.), 我々は、より多くの情報をここで見つけました https://dev.to/vinodsys/css-shopping-cart-icon-with-number-of-items-52a0テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol