ఎలా సృష్టించాలి: ఉత్పత్తి కార్డ్

ఉత్పత్తి కార్డ్ సృష్టించడానికి ఎలా

మొదటి చర్య - హెచ్ఎంఎల్ జోడించండి：

<div class="card">
  <img src="jeans3.jpg" alt="Jeans" style="వెడిథ్:100%">
  <h1>మాదిరి జీన్స్</h1>
  <p class="price">$19.99</p>
  <p>జీన్స్ గురించి కొన్ని పదాలు...</p>
  <p><button>కార్ట్ కార్ట్ చేయండి</button></p>
</div>

రెండవ చర్య - సిఎస్ఎస్ జోడించండి：

.కార్డ్ {
  బాక్స్-శాడో: 0 4పిక్సెల్ 8పిక్సెల్ 0 ఆర్గా(0, 0, 0, 0.2);
  మాక్స్-వెడిథ్: 300పిక్సెల్;
  మార్గిన్: ఆటో;
  టెక్స్ట్-అలయిన్: సెంటర్;
  ఫాంట్-ఫ్యామిలీ: arial;
}
.ప్రైస్ {
  కలర్: గ్రే;
  ఫాంట్-సైజ్: 22పిక్సెల్;
}
.కార్డ్ బటన్ {
  బోర్డర్: నాన్;
  ఆఉట్లైన్: 0;
  ప్యాడింగ్: 12పిక్సెల్;
  కలర్: వెండి;
  బ్యాక్గ్రౌండ్-కలర్: #000;
  టెక్స్ట్-అలయిన్: సెంటర్;
  కర్సర్: పాయింటర్;
  వెడిథ్: 100%;
  ఫాంట్-సైజ్: 18పిక్సెల్;
}
.కార్డ్ బటన్:hover {
  opacity: 0.7;
}

亲自试一试