“జట్టు పరిచయం” పేజీని ఎలా తయారు చేస్తారు:

“జట్టు పరిచయం” పేజీని ఎలా తయారు చేస్తారు

మొదటి అడుగు - హెచ్చింగ్ హెచ్ఎంఎల్:

<div class="row">
  <div class="column">
    <div class="card">
      <img src="img1.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Bill Gates</h2>
        <p class="title">CEO & Founder</p>
        <p>నా గురించి చెప్పే టెక్స్ట్ లోమె ఇస్పుమ్ ఇస్పుమ్ లోమె.</p>
        <p>[email protected]</p>
        <p><button class="button">పరిచయం</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img2.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>ఎలాన్ మాక్స్</h2>
        <p class="title">ఆర్ట్ డైరెక్టర్</p>
        <p>నా గురించి చెప్పే టెక్స్ట్ లోమె ఇస్పుమ్ ఇస్పుమ్ లోమె.</p>
        <p>[email protected]</p>
        <p><button class="button">పరిచయం</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="John" style="వీడియు:100%">
      <div class="container">
        <h2>స్టీవ్ జాబ్స్</h2>
        <p class="title">డిజైనర్</p>
        <p>నా గురించి చెప్పే టెక్స్ట్ లోమె ఇస్పుమ్ ఇస్పుమ్ లోమె.</p>
        <p>[email protected]</p>
        <p><button class="button">పరిచయం</button></p>
      </div>
    </div>
  </div>
</div>

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

/* మూడు పక్కా కలన్లు */
.column {
  ఫ్లోట్: లైట్;
  వీడియు: 33.3%;
  మార్గంబానికి: 16పిక్సెల్స్;
  ప్యాడింగ్: 0 8పిక్సెల్స్;
}
/* చిన్న స్క్రీన్లో కలన్లను పరస్పరం ప్రదర్శించడానికి బదులుగా ఉపరితలంలో ప్రదర్శించండి */
@media screen and (max-width: 650px) {
  .column {
    వీడియు: 100%;
    డిస్ప్లే: బ్లాక్;
  }
}
/* కార్డ్ ప్రభావాన్ని సృష్టించడానికి కొన్ని శాడోస్ జోడించండి */
.card {
  బాక్స్-శాడో: 0 4పిక్సెల్స్ 8పిక్సెల్స్ 0 ఆర్గా(0, 0, 0, 0.2);
}
/* కంటైనర్ లోపల కొన్ని ఎండ్ ప్యాడింగ్స్ */
.container {
  ప్యాడింగ్: 0 16పిక్సెల్స్;
}
/* ఫ్లాట్స్ ని శుభ్రం చేయండి */
.container::after, .row::after {
  కంటెంట్: "";
  క్లియర్: బోధ్;
  డిస్ప్లే: టేబుల్;
}
.title {
  కలర్: గ్రే;
}
.button {
  బార్డర్: నాన్;
  ఆఉట్లైన్: 0;
  డిస్ప్లే: ఇన్లైన్-బ్లాక్;
  ప్యాడింగ్: 8పిక్సెల్స్;
  కలర్: వెండి;
  బ్యాక్గ్రౌండ్-కలర్: #000;
  టెక్స్ట్-అలాయిన్: సెంటర్;
  కర్సర్: పాయింటర్;
  వీడియు: 100%;
}
.button:hover {
  background-color: #555;
}

亲自试一试