در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها

با استفاده از Float ها می توانیم وبسایت هایی به این شکل درست کنیم: سپس به هر کدام Width و Border و Margin می دهم. توجه داشته باشید که با گذاشتن , می توانیم دو المان را با هم Select کنیم.(در بین دو Selector "," قرار می دهیم.) من به این دلیل Aside و Section را جدا Style دادم چون می خواهم آن ها را در کنار هم قرار دهم و نباید به اندازه ی بقیه عرض داشته باشند(باید روی هم به اندازه ی بقیه عرض صفحه را بگیرند.) بنابر این من width آن ها را نصف بقیه قرار دادم. خروجی: خب حالا می خواهیم آن ها را در کنار هم قرار دهیم. برای این کار ما از Css استفاده می کنیم: برای چیدن باید از Float استفاده کنیم. در نظر داشته باشید که Float المان ها را به یک طرف می برد و در انتظار المان بعدی می گذارد تا به کنار آن بیاید. به بیان دیگر ما وقتی به یک المان Float مثلا راست می دهیم ، المان به سمت راست صفحه می چسبد و وقتی به المان بعدی آن نیز Float از نوع راست می دهیم المان بعدی نیز به راست ترین جای ممکن یعنی المان قبل می چسبد.(اگر متوجه نشدید نگران نباشید به مرور این مطلب جا می افتد.) خروجی: در خروجی دیدیم که المان های ما به هم ریختند. اولین بار Float برای چیدن عکس ها بوجود آمد اما با منسوخ شدن استفاده از جداول برای چیدن المان ها طراحان وب به Float ها روی آوردند. اما این کار مشکلاتی نیز دارد که یکی از آن ها به هم ریختن المان ها در زمان های خاصی است که یکی از دلایل آن نداشتن Clear است . وقتی ما تگ ها را با استفاده از Float در کنار هم قرار می دهیم تگ آخر که دیگر المانی به آن نمی چسبد در انتظار یک تگ باقی می ماند که باعث بروز مشکلاتی در چیدمان صفحه می شود. برای جلوگیری از این کار ما باید به المان آخر بفهمانیم که دیگر تگی Float نخواهد داشت که در کنار المان قرار گیرد. برای این کار ما باید یک Div با Style زیر درست بعد از المان آخر بگذاریم. اما برای این که ما چندین بار این Div ها را Select کنیم ، کلاسی به نام Clear-fix تعریف می کنیم و در پایان هر کدام از Float های صفحه یک Div با کلاس Clear-fix قرار می دهیم. خروجی کد بالایی: دیدیم که باز هم المان ها در کنار هم قرار نگرفتند. اگر یادتان باشد در جلسه ی قبل گفتیم که Marginو Padding و Border در تعیین عرض المان نقش دارند. اگر به کد دقت کنید ما دو المان با عرض 45% داریم که روی هم می شوند 90%. علاوه بر آن هر کدام از آنها 5% Margin در سمت راست دارند که با آن 90% می شود 100% . و در نهایت هر کدام Border هایی از سمت چپ و راست دارند که 1px عرض دارند یعنی در کل 4px. از این محاسبه می شود نتیجه گرفت که ما بیش از اندازه ی عرض صفحه به المان ها Width , Borderو Margin دادیم بنابر این المان ها فضایی برای این که در کنار هم قرار بگیرند ندارند و یکی از آن ها به پایین منتقل می شود. برای جلوگیری از این کار من Margin سمت راست المان ها را نصف می کنم : دیدیم که رد کد بالا من Mergin راست را که 5% بود به 2.5% کاهش دادم. خروجی: ممنون از همراهی شما ITPRO باشید محمد پارسا صفوی انجمن تخصصی فناوری اطلاعات ایران
#آموزش_css #طراحی_صفحات_وب #آموزش_طراحی_صفحات_وب_با_css #آموزش_طراحی_صفحات_وب_با_html #آموزش_html_و_css #آموزش_طراحی_وبسایت #آموزش_طراحی_وبسایت_با_html
عنوان
1 آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه رایگان
2 آموزش طراحی سایت با HTML و CSS قسمت 2 : Style ها و متن ها رایگان
3 آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property رایگان
4 آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector رایگان
5 آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model رایگان
6 آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها رایگان
7 آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها رایگان
8 آموزش طراحی سایت با HTML و CSS قسمت 8 : لیست ، Background و عکس رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی رایگان
11 آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها رایگان
12 آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....