تبلیغات
آموزش شبکه - ادامه پیاده سازی یک صفحه وب با HTML5 و CSS 3.0
 
آموزش شبکه
درباره وبلاگ
ادامه مطالب پست قبلی که  به دلیل حجم بالا نشد یکدفعه قرار بدم

استایل دهی Main Content Area و Sidebar:

قالبی که قصد ایجاد آن را داریم یک قالب دو ستونه است که قسمت sidebar در سمت راست صفحه و Content Area در سمت چپ صفحه قرار دارد. در حالت عادی بسیاری از افراد از خصوصیت float استفاده می کنند و ستون های چپ و راست را در دو طرف صفحه به صورت شناور موقعیت دهی می کنند. اما در اینجا قصد دارم از روش دیگری استفاده کنم که شاید پاسخی برای یکی از سوالاتی که زیاد هم پرسیده می شود باشد. اینکه:

 "چطور دو div را در کنار هم به نحوی موقعیت دهی کنیم که با تغییر ارتفاع یکی، ارتفاع دیگری نیز به همان اندازه تغییر کند، همانند رفتاری که table دارد."

 در ادامه روشی که برای ایجاد این طرح دو ستونی گفته می شود، جواب این سوال نیز خواهد بود.

در این روش بدون استفاده از table کاری می کنیم که تگ مورد نظر ما رفتاری همانند table داشته باشد. برای شروع کار دو div به کد های html این دو قسمت اضافه می کنم:

<div id="content">
    <div id="mainContent">
        <section>
            <!-- Blog post -->
        </section>
        <section id="comments">
            <!-- Comments -->
        </section>
        <form>
            <!-- Comment form -->
        </form>
    </div>
    <aside>
        <!-- Sidebar -->
    </aside>
</div>

یک div با آی دی  maincontent که قسمت های پست بلاگ و نظرات را دربر دارد و یک  div با آی دی content که پیرامون کلیه ی این قسمت ها قرار گرفته است. حال فرض کنید اگر div بیرونی معادل یک table و div داخلی و aside معادل یک ساول از جدول می بودند، قاعدتا مشکل ما نیز حل می شد. با این توضیحات خصوصات زیر را به تگ ها نسبت می دهیم:

#content 
{
    display: table;
}
#mainContent 
{
    display: table-cell;
    width: 620px;
    padding-right: 22px;
}
 
aside 
{
    display: table-cell;
    width: 300px;
}

در استایل های بالا دقیقا رفتار table را برای تگ ها شبیه سازی کرده ایم که اینکار با خصوصیت display ممکن می باشد. خصوصیت display دارای چندین پارامتر است که پارامتر table آن باعث می شود مرورگر تگ مورد نظر را همانند یک جدول رندر کند، همینطور قسمت های maincontent و aside که خصوصیت display: table-cell را دارند، معادل سلول های جدول ما خواهند شد و در نهایت طرحی معادل شکل زیر را خواهیم داشت:

html-template07

 

استایل دهی به پست بلاگ:

قصد دارم قسمت پست بلاگ را به صورت چند ستونه (در اینجا دوستون) استایل دهی کنم، یعنی متون در دو ستون و همانند نوشته های روزنامه ای کنار هم قرار گیرند. برای اینکار ابتدا لازم است یک div پیرامون متن های خود قرار دهیم و سپس div را دو ستونه کنیم:

<div>
    <p>پاراگراف 1</p>
        </p>پاراگراف 2</p>
</div>

 و این هم استایل هایی که به div نسبت دادم:

.blogPost div 
{
    column-count: 2;
    column-gap: 22px;
}

همانطور که مشاهده می کنید باز هم با دو خصوصیت جدید از css3 روبرو هستیم، column-count و column-gap.

خصوصیت column-count مشخص می کند که div ما باید شامل دو ستون باشد و خصوصیت column-gap تعیین کننده فاصله بین ستون ها می باشد که در اینجا برابر 22 پیکسل مقدار دهی شده است. خصوصیت column-rule نیز استایل border بین ستون ها را مشخص می کند که پسوند های color، style و width به خوبی گویای وظیفه ی خود هستند و نیاز به توضیح ندارند. خصوصیات دیگری از قبیل column-width، column-height و column-span نیز وجود دارند که برای اطلاع بیشتر می توانید جستجو کنید.

پس از اعمال این استایل ها، همچین شکلی را خواهیم داشت:

html-template08

در ادامه قصد دارم از خصوصیت دیگری در css3 برای استایل دهی به تصویر موجود در متن پست استفاده کنم. این خصوصیت box-shadow است که در آموزش های قبلی نیز مورد بررسی قرار گفت که مجددا برای افرادی که مقاله های قبلی را نخوانده اند توضیح خواهم داد:

Box-shadow یکی دیگر از خصوصیات جدید css است که برای ایجاد سایه در المان ها کاربر دارد. این خصوصیت چهار پارامتر دریافت می کند که به صورت می باشند:

 box-shadow: x-offset  y-offset  blur-radius  color

  x-offset: این پارامتر میزان انحراف سایه را در راستای افقی بر اساس پیکسل مشخص می کند.

 y-offset: این پارامتر میزان انحراف سایه را در راستای عمودی بر اساس پیکسل مشخص می کند.

 blur-radius: این پارامتر میزان محو شدگی از لبه های سایه را تعیین می کند.

 color: این گزینه هم برای تعیین رنگ سایه به کار می رود.

نمونه ای از ایجاد سایه توسط این خاصیت را در تصویر زیر مشاهده می کنید:

gallery04

حال این خصوصایت به به تصویر مجود نسبت دهید:

.blogPost img 
{
    margin: 22px 0;
    box-shadow: 3px 3px 7px #777;
}

استایل دهی بخش یادداشت ها به صورت Zebra-striping:

این قسمت آخرین قسمتی است که در این مقاله قصد استایل دهی آن را دارم و سایر قسمت ها از قبیل خود فرم نظرات،  فوتر و sidebar به دلیل اینکه نکات جدیدی در بر نداشتند، در فایل ضمیمه استایل دهی شده و قابل دانلود هستند.

اما Zebra-striping چیست؟

Zebra-striping به highlight کردن یکی در میان المان هایی که در یک مجموعه قرار دارند گفته می شوند، مثلا highlight کردن سطر های جدول به صورت یکی در میان یا highlight کردن هر یادداشت که در بخش نظرات این سایت هم قابل مشاهده است. در دوران قبل از css 3.0 برای این کار از روش های گوناگونی استفاده می شد، به طور مثال بعضی از افراد یک کلاس css جدا ایجاد می کردند و بعد از تعیین رنگ زمینه ی دلخواه، آن را به کمک جاواسکریپت یا زبان server side ئی که از آن استفاده می کردند، به صورت یکی در میان به المان های مورد نظر نسبت می دادند. اما css 3 کلاس کاذب جدیدی را مطرح کرد که اینکار را بسیار آسان می کند. استایل های زیر را برای بخش یادداشت ها در نظر بگیرید:

#comments article:nth-child(2n+1) {
    padding: 21px;
    background: #E3E3E3;
    border: 1px solid #d7d7d7;
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
}

کلاس کاذبی که در اینجا استفاده شده است، کلاس nth-child می باشد. nth-child مشخص می کند که n امین المان از المان های عنصر والد باید انتخاب شود. به عنوان مثال در کد بالا article هایی که در موقعیت های فرد (2n+1) قرار دارند و فرزند #comment هستند باید انتخاب شوند. این کلاس کاذب سه نوع پارامتر دریافت می کند:

* مقدار به صورت عددی: مثلا article:nth-child(3) که سومین عنصر را انتخاب می کند.
 
* مقدار به صورت keyword: در این حالت می توان از دو keyword استفاده کرد. odd برای انتخاب عناصر فرد و even برای انتخاب عناصر زوج.

* مقدار به صورت عبارت: در این حالت عبارت می تواند به صورت an+b باشد که مقدار های a و b تعیین کننده عناصری هستند که انتخاب می شوند. مثلا 3n+1، 3 تا در میان عناصر را انتخاب می کند.
 
کلاس های کاذب دیگری از قبیل nth-last-child، nth-of-type و nth-last-of-type وجود دارند که برای اطلاع بیشتر می توانید در مورد آن ها جستجو کنید.
 
خوب خسته نباشید، با اتمام این قسمت مقاله ی ما نیز به پایان رسیده است. نمونه ی پایانی طرحی که ایجاد کردیم از این قسمت قابل مشاهده است، کد html و css مقاله را نیز می توانید دانلود کنید:

 download دانلود: کد های HTML+ CSS

source منبع: قالب آموزش داده شده برگرفته از سایت tutsplus می باشد که قسمت هایی از آن را فارسی کردم.





نوع مطلب : اخبارIT، تازه های شبکه، آموزش، اخبار Ict، 
برچسب ها :
لینک های مرتبط :
جمعه 19 مرداد 1397 04:06 ق.ظ
Unquestionably believe that which you stated.
Your favorite reason appeared to be on the net the easiest thing to be aware of.

I say to you, I certainly get annoyed while people think about worries that they just do not know about.
You managed to hit the nail upon the top and defined out the
whole thing without having side-effects , people could take a signal.
Will likely be back to get more. Thanks
چهارشنبه 17 مرداد 1397 01:18 ق.ظ
Very good post. I will be experiencing some of these issues as well..
سه شنبه 16 مرداد 1397 08:23 ب.ظ
Hi there, after reading this amazing piece of writing i am as well happy to share my knowledge here with mates.
شنبه 22 اردیبهشت 1397 03:04 ق.ظ
кредити онлайн цілодобово
онлайн позика на карту
круглосуточные кредиты
онлайн кредиты без отказа на карту
деньги на карту срочно украина
кредиты онлайн на карту без звонков
онлайн кредит без справок на карту
سه شنبه 11 اردیبهشت 1397 05:46 ب.ظ
фітнес резінка boobonds
купить резинку еспандер
фітнес резинки україна
фітнес резинки ціна
esonstyle фитнес резинки
دوشنبه 10 اردیبهشت 1397 02:37 ب.ظ
DTX-3 - ВЫВОДИТ ПАРАЗИТОВ И ЗАЩИЩАЕТ
ОТ ПОВТОРНОГО ЗАРАЖЕНИЯ
ЗА ОДИН КУРС!
پنجشنبه 16 فروردین 1397 05:12 ق.ظ
First, paddle back clip on earrings are straightforward to
adjust. Use either a pair of tweezers or needle-nosed pliers.
سه شنبه 14 فروردین 1397 02:05 ب.ظ
It was made by royal jewellers Garrard for Queen Mary in 1914, utilizing pearls and
diamonds from her household's private collection.
سه شنبه 14 فروردین 1397 01:51 ب.ظ
Because you like to do some fast research on the web to check costs
maybe or to simply examine your choices out there in the
product jungle.
سه شنبه 14 فروردین 1397 01:35 ب.ظ
The crystal structure development of the amethyst is stratified and as a consequence of this, you will discover sure lamellae and areas having various coloration depth.
سه شنبه 14 فروردین 1397 11:54 ق.ظ
 After every sporting, gently wipe every bit of jewellery clear of
make up and skin oils with a one hundred% cotton material.
سه شنبه 14 فروردین 1397 05:24 ق.ظ
I agree.
سه شنبه 14 فروردین 1397 03:08 ق.ظ
Have actually been taking little over a month.
سه شنبه 14 فروردین 1397 02:42 ق.ظ
I enjoy my work, my supervisors, my co-workers, and I also love Cracker Barrel.
سه شنبه 14 فروردین 1397 02:12 ق.ظ
Colorful, collectible Laftovers food magnets are lowpriced
sufficient for kids to provide Mom or Grandma any time, especially on moms Day.
دوشنبه 13 فروردین 1397 11:35 ب.ظ
Gaining new customers is challenging many small
attorneys face.
دوشنبه 13 فروردین 1397 07:35 ق.ظ
Have been taking little over a month.
یکشنبه 12 فروردین 1397 10:06 ب.ظ
Have actually been taking little over a month.
یکشنبه 12 فروردین 1397 05:30 ب.ظ
Three others watched the premises in Green Road from 5pm
the day gone by, whereas police believe another two additionally acted
as lookouts.
یکشنبه 12 فروردین 1397 12:14 ب.ظ
Have actually been taking little over a month.
شنبه 1 مهر 1396 02:17 ب.ظ
Quality articles or reviews is the secret to invite the people to pay a
quick visit the web site, that's what this website is providing.
یکشنبه 26 شهریور 1396 08:08 ب.ظ
Simply want to say your article is as amazing.
The clarity in your post is simply spectacular and i can assume you are an expert
on this subject. Well with your permission let me to grab your RSS feed to keep
updated with forthcoming post. Thanks a million and please carry on the rewarding work.
دوشنبه 16 مرداد 1396 01:41 ب.ظ
I am curious to find out what blog platform you are working with?
I'm experiencing some minor security problems with my latest site and I'd like
to find something more risk-free. Do you have any recommendations?
سه شنبه 6 تیر 1396 06:13 ب.ظ
Great blog here! Also your web site loads up very fast!

What web host are you using? Can I get your affiliate link
to your host? I wish my web site loaded up as fast as yours lol
پنجشنبه 31 فروردین 1396 12:43 ق.ظ
Hi! Do you know if they make any plugins to assist with SEO?
I'm trying to get my blog to rank for some targeted keywords but
I'm not seeing very good success. If you know of any please share.
Cheers!
یکشنبه 20 فروردین 1396 01:24 ق.ظ
Ahaa, its fastidious dialogue regarding this article at this place at this webpage, I have read
all that, so now me also commenting here.
شنبه 12 فروردین 1396 05:05 ق.ظ
Hi! I understand this is kind of off-topic however I needed to ask.
Does operating a well-established blog like yours take a massive amount work?

I am completely new to writing a blog but I do write in my
diary every day. I'd like to start a blog so I can easily
share my experience and thoughts online. Please let me know if you have any kind of ideas or
tips for new aspiring blog owners. Thankyou!
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر


آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :