ఎలా తయారు చేయాలి: CSS స్కిల్స్ తొక్కలు

CSS ద్వారా స్కిల్స్ తొక్కలు ఎలా తయారు చేయాలి నేర్చుకోండి.

నా నెట్‌వర్కింగ్

ఆన్‌లైన్ రిజ్యూమే లో మీ వివిధ రంగాలలో నెట్‌వర్కింగ్ ను ప్రదర్శించడానికి 'స్కిల్స్ తొక్కలు' ఉపయోగిస్తారు:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

亲自试一试

స్కిల్స్ తొక్కలు ఎలా తయారు చేయాలి

మొదటి దశ - హెచ్‌టిఎమ్ఎల్ జోడించండి:

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

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

/* అంతరాంతరాలు ప్రత్యాశించిన విధంగా పనిచేయండి */
* {బాక్స్‌-సైజింగ్: బార్డర్-బాక్స్;}
/* స్కిల్స్ తొక్కల కంటైనర్ */
.container {
  వెడిలో: 100%; /* పూర్తి వెడిలో */
  బ్యాక్‌గ్రౌండ్‌-కలర్: #ddd; /* మాసిన బ్యాక్‌గ్రౌండ్ */
}
.skills {
  టెక్స్ట్-అలైన్: రైట్; /* టెక్స్ట్ కుడి మూలలు పెట్టండి */
  పేడింగ్‌-టాప్: 10 పిక్సెల్స్; /* పైని అంతరాంతరం జోడించండి */
  పేడింగ్‌-బోటమ్: 10 పిక్సెల్స్; /* క్రింది అంతరాంతరం జోడించండి */
  కలర్: వెండి; /* వెండి రంగు టెక్స్ట్ */
}
.html {వెడిలో: 90%; బ్యాక్‌గ్రౌండ్‌-కలర్: #04AA6D;} /* హరిత రంగు */
.css {వెడిలో: 80%; బ్యాక్‌గ్రౌండ్‌-కలర్: #2196F3;} /* నీలి రంగు */
.js {వెడిలో: 65%; బ్యాక్‌గ్రౌండ్‌-కలర్: #f44336;} /* ఎరుపు రంగు */
.php {వెడిలో: 60%; బ్యాక్‌గ్రౌండ్‌-కలర్: #808080;} /* కంకర రంగు */

亲自试一试