मैं नीचे एक सरल लेआउट बनाना चाहता हूं।एचटीएमएल डीवी लेआउट
कोई मुझे बता सकते हैं मैं यह कैसे प्राप्त कर सकते हैं? कृपया "फ्रैंकनेस" को क्षमा करें, मैं सी # पृष्ठभूमि से आया हूं इसलिए एक वेब यूआई विकसित करना मेरे लिए थोड़ा मुश्किल है।
अद्यतन: मैं और सीएसएस के साथ घूम रहा हूं लेकिन जो भी मैं चाहता हूं उसका उत्पादन नहीं कर रहा हूं।
यह आपको मदद मिल सकती है:
<body>
<div style="border: 1px solid; float: right; width: 25%; height: 1000px;" id="1">one</div>
<div style="border: 1px solid; height: 250px; width: 74%;" id="1">two</div>
<div style="border: 1px solid; width: 35%; float: right; height: 750px;" id="1">three</div>
<div style="border: 1px solid; width: 35%; height: 750px;" id="1">four</div>
</body>
Two column div layout with fluid left and fixed right column
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
ये लिंक आपको बता कैसे दो कॉलम लेआउट को संभालने के लिए। सबसे पहले इसे दो कॉलम बाएं और दाएं करने के लिए करें, उसके बाद, इसे बाएं कॉलम के लिए फिर से करें।
960.gs, या Twitter's bootstrap जैसे सीएसएस ग्रिड सिस्टम काम करने के लिए लेआउट प्राप्त करने में बड़े पैमाने पर मदद करेंगे, जैसा कि आप चाहते हैं।
जबकि हम इस लेआउट को लागू करने के लिए आपको आवश्यक सभी कोड लिख सकते हैं, तो यदि आप सीएसएस नहीं जानते हैं तो यह आपके लिए फायदेमंद नहीं होगा। हालांकि हम आपको सही दिशा में इंगित कर सकते हैं।
यह सीएसएस के साथ फ्लोट नियम का उपयोग करके हासिल किया जा सकता है। Here's a link
एचटीएमएल की अच्छी बुनियादी समझ भी इसे अर्थपूर्ण रूप से बिछाने के लिए होनी चाहिए। Codecademy आपको एचटीएमएल और सीएसएस दोनों के माध्यम से ले जाएगा यदि आपको इसके साथ मदद की ज़रूरत है।
<HTML>
<HEAD>
<TITLE>Working with div</TITLE>
<META CHARSET="UTF-8" />
</HEAD>
<BODY>
<link rel=stylesheet href="div.css" type="text/css">
<div class="a2">two</div>
<div class="a1">one</div>
<div class="VerticalSpace"></div>
<div class="a3">three</div>
<div class="HorizontalSpace"></div>
<div class="a4">four</div>
</BODY>
</HTML>
और div.css फ़ाइल की सामग्री
.a1, .a2, .a3, .a4
{
border: 4px solid;
}
.VerticalSpace, .HorizontalSpace
{
border: 0px;
float: left;
}
.a2
{
height: 250px;
float: left;
width: 74%;
}
.a3
{
height: 350px;
float: left;
width: 35%;
}
.a4
{
height: 350px;
float: left;
width: 35%;
}
.a1
{
height: 617px;
width: 23%;
float: right;
}
.VerticalSpace
{
width: 60%;
height: 10px;
}
.HorizontalSpace
{
height: 350px;
width: 4%;
}
क्यों है किसी को दे दी है -1 इस प्रश्न के लिए है? कृपया इसे समझाएं – MikroDel
@ मिक्रोडेल मैंने प्रश्न -1 को दिया क्योंकि यह बहुत व्यापक है और वाउज - शायद आप – Sean
टिप्पणी के लिए थक्स पूछने के बजाय "सीएसएस के साथ कॉलम" सबसे अच्छा गुगल करेंगे) अब वह जानता है कि क्या गलत था – MikroDel