د سی ایس ایس ترتیب دا دی چې تاسو د خپلې ویب پاڼې ترتیب ترتیب کړئ، او بیا ټوټې واخلئ او یوځای یې کړئ. د سی ایس ډی سره یو ساده 3-کالم ترتیب جوړول څنګه زده کړئ.
01 د 09
خپل لیږد راواړئ
تاسو کولی شئ خپل ترتیب په کاغذ یا ګرافیک پروګرام کې راولی . که تاسو دمخه د تار فریم لرئ یا په ذهن کې خورا پراخ ډیزاین لرئ، نو هغه اساسي بکسونو ته آسانه کړئ چې دا ځای جوړوي. دا ډیزاین چې د دې مقالې سره ملګري لري د اصلي محتوا په درې برخو کې، او همداراز یو سرونکی او فوټر لري. که تاسو نږدي ګورئ، تاسو لیدلای شئ چې درې ستنې د چوکۍ سره مساوي ندي.
وروسته له دې چې تاسو خپل لیږد چمتو کړئ، تاسو کولی شئ د اړخونو فکر کولو پیل پیل کړئ. د بیلګې په توګه دا ډیزاین د لاندې بنسټیزو اړخونو لپاره وي:
- له 900 څخه زیات پکسلونه پراخ نه دي
- د 20 پی پی ګوتو په ښي خوا
- 10 px د کالونو او قطارونو ترمنځ
- هغه پوستونه چې 250px، 300px او 300px پراخه وي
- لوړ پوست 150px اوږد دی
- ټيټه قطار 100px اوږد دی
02 د 09
اساسي HTML / CSS ولیکئ او د کنټینر عنصر جوړ کړئ
ځکه چې دا پاڼه به یو باوري ایچ ایم ایل سند وي، د خالي HTML کنټرول سره پیل کړئ
<سر> <مېټا http-equiv =" د منځپانګې ډول ډول منځپانګې = "متن / html؛ چارسټ = utf-8" /> <عنوان> نامتو سندونه بدنپه بنسټیز CSS کې شاليدونه د پاڼې حاالتو، سرحدونو، او کدو څخه د صفر لپاره . پداسې حال کې چې د نورو اسنادو لپاره نور معیاري سی ایس ایس شیلیونه شتون لري، دا ډول طرزالعملونه لږ تر لږه اړتیا لري چې پاک پاک ترتیب ترلاسه کړئ. د خپل لاسوند سر ته یې اضافه کړئ:
<طرز ډول = "text / css"> html، بدن {margin: 0px؛ ډډنگ: 0px؛ سرحد: 0px؛ }د ترتیب ترتیبولو لپاره، د کانتینر عنصر کې وساتئ. ځینې وختونه داسې کیږي چې تاسو کولی شئ وروسته کانتینر له ځانه سره وساتئ، مګر د ډیری ثابت کنډک لیستونو لپاره، د کانتینر عنصر لري دا په مختلفو ویب براؤزرونو کې اداره کول اسانه کوي. نو په بدن کې یې دا:
او د سی ایس ایس طرزالعمل کې، لاندې کړئ:
#container {}03 of 09
د کانټینر ډیزاین کړئ
کانټینر دا مشخصوي چې د ویب پاڼې محتوا څومره پراخه وي، او همدارنګه دننه په بهر کې دباندې او کڅوړې هرې حوزې. د دې سند لپاره، کانټینر 870px پراخ دی چې د 20 پکسل ګټر سره په ښي خوا کې. ګټر د اندازې اندازې سره جوړ شوی دی، مګر په کانټینر کې پوښل صفر شوی دی ترڅو د هر ډول عناصرو مخه ونیسي تر څو د کانټینر پراخ وي.
# کنټرینر {چوکۍ: 870px؛ حاصله: 0 0 0 20px؛ / * ښی ښی ښی خوا ته * / padding: 0؛ }که تاسو خپل اسناد وساتئ، دا به ستونزمن وي چې کانتینر وګورئ ځکه چې په دې کې هیڅ شی نلري. که تاسو د مکتوب متن اضافه کړئ نو تاسو به وکولی شئ د کانټینر عنصر په روښانه توګه وګورئ.
04 د 09
د سرلیک لپاره د سرلیک نښه
څنګه چې تاسو د اندازې په اړه پریکړه کوئ د سرلیک قطار په هغه څه پورې اړه لري چې پدې کې دي. که سرلیک قطار یوازې یوازې د لوګو ګرافیک او سرلیک ولري، نو د سرلیک ټګ په کارولو سره (
) د استعمال په پرتله ډیر احساس لري. تاسو کولی شئ سرلیک په ورته طریقه چې تاسو یې د ډیل ډوله بڼه غوره کړئ، او تاسو د غیرقانوني ټګیو څخه ډډه وکړئ.
HTML د سرې قطار لپاره د کانتینر په پورته برخه کې ځي او داسې ښکاري:
زما سرپرست صف
وروسته بیا، د هغې شیلیفونو د ټاکلو لپاره، په سور کې یو سور سرحد اضافه شو، نو تاسو کولی شئ وګورئ چې چیرې چې دا پای ته رسیږي، ګنډې او پاڼي صفر شوي، چوکۍ 100٪ او لوړ قد 150px ته:
# کنټرین H1 {margin: 0؛ ډډنگ: 0؛ چوکۍ: 100٪؛ لوړوالی: 150px؛ لوټ سرحد - لاندې: # c00 solid 3px؛ }د فټ سره د دې عنصر په باره کې مه کوه ملکیت. د سي ایس ایس لیټونو لیکلو کلید هرڅه د خټکولو لپاره دي - حتی هغه شیان چې یو کانټینر یې ورته چوک دی. په دې لاره، تاسو تل پوهیږئ چې عناصر په پاڼه کې دروغ دي.
د ایس ایس ایس زوړ ټاکونکی یوازې د H1 عنصرونو لپاره شیلونه کارولي چې د # کنټینر عنصر دننه دي.
05 د 09
د درې کالمونو د ترلاسه کولو لپاره، د دوو کالمونو په جوړولو پیل وکړئ
کله چې تاسو د سی ایس ډی سره درې درې کالم ترتیب ترتیب کړئ نو تاسو باید خپل لیډی د دوو ډلو ګروپونو ته ویشئ. نو د دې درې-کالم ترتیب ترتیب کړئ، منځنۍ او ښې ستنې لپاره او ګروپ یې کړئ او د دوه-کالم ترتیب کې چیرې د کاڼ کالمه 250px پراخه وي، او ښی کالم 610px پراخه (د هر دوه ډلو لپاره 300 ، 10px په منځ کې د ګوتو لپاره).
ایچ ٹی ایم ایل داسې ښکاري:
د پخوانیو پخوانیو پخوانیو انتخاباتو پایله. د ویټیټ سلیمان ډلویزیون د کمینټ ویامیم، لیمیم پوتین ډراور ډیری سایټ دی. په دقیق ډول د نوسترود تمرین کولو په اړه د بیرته ستنیدلو په اړه.
د امینت کمینټ ویش، چې د هر کال لپاره یې د کارمندانو کارمندانو څخه کار اخیستی دی. د لابراتوار او ډیزاین مقناطیسه. د ویلیټ سکسیوم دوری او فیوټیا نوال پیراټور.
د کالمونو کې د هارډلر متن د آزموینې پرمهال دوی نور لیدل کیږي. سی ایس ایس داسې ښکاري:
# کنټرین # کال 1 {چوکۍ: 250px؛ لوټ } #container # col2outer {چوکۍ: 610px؛ فلوټ: حق؛ حاصله: 0؛ ډډنگ: 0؛ }د ښي خوا ستنې ښي خوا ته ځي، په داسې حال کې چې بل یې ښي خوا ته روان دی. ځکه چې د دواړو کالمونو ټول چوکۍ 860px دی، د دوی تر مینځ 10px ګټر شتون لري.
06 د 09
د دوهم کالمونه په پراخو دوهم کالم کې شامل کړئ
د درې کالمونو د جوړولو لپاره، دوه وېش د پراخې دوهم کالم دننه اضاف کړئ، لکه څنګه چې تاسو په دوهمه مرحله کې د کانټینر کالم دننه دننه شامل کړئ. ایچ ٹی ایم ایل داسې ښکاري:
د امینټ کمینټ ویټامیم، چې په دې کې د کار کولو وخت نه دی بلکې د کارمند کارګران دي. د لابراتوار او ډیزاین مقناطیسه. د ویټیټ سلیمان ډلیور فوګیتالیا پوټریور.
د آزادۍ آزموینه، د دې لپاره چې موږ یې په ډاګه وکړو. د متحده ایاالتو شرکتونو کارپوهانو، د متحده ایالاتو د بهرنیو چارو وزارت په وینا. د عضوی قواعدو رڼا د سټیټی ډیکیوس، د لابراتوار او د ډورلو په وخت کی د محاسبه کیدو وړ نه دی.
او سی ایس ایس داسې ښکاري:
# col2outer # col2mid {چوکۍ: 300px؛ لوټ } # col2outer # col2side {چوکۍ: 300px؛ فلوټ: حق؛ }ځکه چې دا دوه 300px پراخه صندوقونه په 610px پراخ صندوق کې دي، بیا به بیا د دوی تر مینځ 10px ګټر وي.
07 د 09
په فوټر کې اضافه کړئ
اوس چې د پاڼې نورې بڼه غوره شوې، تاسو کولی شئ په فوټر کې اضافه کړئ. د وروستی ډې څخه د "فوټر" id سره کار واخلئ، او د منځپانګې اضافه کړئ ترڅو تاسو وګورئ. تاسو کولی شئ په پورتنۍ برخه کې سرحدی اضافه کړئ، نو تاسو به پوه شئ چې دا چیرته چېرته پیل کیږي.
ایچ ٹی ایم ایل: