కోర్సు పరిమితిలు:
ఎలా సృష్టించాలి: పాఠం మూత్రం
AND
రేసప్రివింగ్ పాఠం మూత్రం సృష్టించడానికి ఎలా
మొదటి చర్య - HTML జోడించండి:
<div class="divider">Lorem Ipsum</div>
రెండవ చర్య - CSS జోడించండి: .divider { font-size: 30px; క్లాస్ రూపకల్పన కొన్ని స్టైల్స్ ఉన్నాయి. మీరు ఫాంట్ పైజీన్ని 30 పిక్సెల్స్ పెట్టారు, ఫ్లెక్స్ లేఆట్ ఉపయోగించారు మరియు margin: 5px; display: flex; .divider::before, .divider::after { flex: 1; content: ''; padding: 3px; background-color: red; margin: 5px;
ప్రయత్నించండి
ఉదాహరణ వివరణలు:
ఈ ఉదాహరణ మీరు CSS ద్వారా పాఠం మూత్రం సృష్టించడానికి బోధిస్తుంది. ప్రత్యేకంగా, ఇది HTML మరియు CSS సంయోగానికి ఉపయోగిస్తుంది ఈ ప్రభావం సాధించడానికి.
మొదటిగా, మీరు హ్ట్మ్ఎల్ లో క్లాస్ నామం "divider" ఉన్న ఒక <div> ఎలిమెంట్ను జోడించాలి మరియు అదిలో మీరు ప్రదర్శించదలచుకున్న పాఠం చేర్చారు (ఈ ఉదాహరణలో, పాఠం "Lorem Ipsum" ఉంది). .divider
ఆపై, CSS లో, మీరు క్లాస్ రూపకల్పన కొన్ని స్టైల్స్ ఉన్నాయి. మీరు ఫాంట్ పైజీన్ని 30 పిక్సెల్స్ పెట్టారు, ఫ్లెక్స్ లేఆట్ ఉపయోగించారు మరియు
align-items: center;
ఆపై, ప్రత్యార్థికరణలను ఉపయోగించి పాఠం మూత్రంలో ఉన్నతంగా ముందుకు ఉంచడానికి ::before
మరియు ::after
మూత్రం రెండు పక్కల అలంకరణను జోడించడానికి flex: 1
చేయడానికి కలిగి .divider
ఎలిమెంట్లో పాఠం మినహా అన్ని అంతరాలు. మీరు కూడా అంతరం పాదాన్ని నిర్వచించారు content: ''
ఈ రెండు ప్రత్యార్థికరణలను ఖాళీగా ఉంచడానికి చూసుకోండి, ఏ విషయాన్ని కలిగి లేదు.
ఆపై, అంతరం పాదాన్ని, బ్యాక్గ్రౌండ్ కలర్ మరియు మార్గం నిర్వచించడానికి మూత్రం ప్రక్రియ రూపకల్పన చేయండి. ఈ ఉదాహరణలో, మూత్రం రంగు ఎరుపు ఉంది మరియు కొన్ని అంతరం పాదాన్ని మరియు మార్గం ఉన్నాయి.