تبلیغات
آموزش شبکه - ادامه پیاده سازی یک صفحه وب با 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، 
برچسب ها :
لینک های مرتبط :
شنبه 2 شهریور 1398 08:35 ق.ظ
A skilled mind injury attorney might have the ability to
assist.
جمعه 1 شهریور 1398 03:55 ب.ظ
The brain injury legal representatives at DE CARO & KAPLEN, LLP.
پنجشنبه 31 مرداد 1398 06:08 ق.ظ
A seasoned brain injury lawyer might have the ability
to aid.
چهارشنبه 23 مرداد 1398 03:28 ب.ظ
nami porno porno gratis pollas grandes culos enormes porno conocer gente valencia fotos sexo
maduras peliculas porno retro estrenos porno videos porno lenceria maria
lapiedra videos porno videos porno anales sexo gratis en castellon contactos con chicas por wasap
negros porno videos porno gratis duro sexo en las playas videos porno ruso chat de terra sexo sexo camasutra sexo maduros gay anime hentai porno chicas
buscando sexo gratis chica busca chico en ibiza porno travesti
gratis chicas buscar anuncios mujeres buscan hombres chicas bilbao sexo porno
por detras sexo anal con mujeres contactos sexo cantabria donde puedo conocer gente porno estudiantes
abuelas porno sexo negros chat sexo mallorca mejores escenas sexo sexo telefonico contacto mujeres lleida
travesti sexo fotos porno mujeres sexo lenceria porno
lesvianas gratis pagina para conocer gente gratis porno cratis videos porno gratis japonesas porno ucraniano piratas porno conocer chicas
por whatsapp porno con asiaticas como hacer
sexo oral a una mujer porno naduras consejos para practicar
sexo anal
سه شنبه 22 مرداد 1398 10:04 ب.ظ
aramis fuster porno sexo en lqsa videos de sexo retro sexo hratis anuncios sexo salamanca
madura busca chico en madrid videos porno viudas porno vid trios porno
videos sexo swingers anime porno gay el mejor porno
casero sexo despedidas videos porno gays maduros actrices porno mas famosas porno
shasha grey sexo espanol videos porno sexo gratis porno amateur latino sexo pornografia porno madre e hijo contactos mujeres jaen sexo gerona chat
para sexo ver sexo en directo porno gratis para el movil paginas
de contactos para sexo wepcam porno porno con rubias contactos chicos gays porno paramujeres porno dibujos busco chico para trio porno con peludas sexo lesbiano porno shasha grey sexo anal abuelas videos porno
descargar porno tia sobrino videos pornos gratis para movil porno ebony
videos porno extremos sexo madrid gay porno cono imagenes de sexo anal hacer el sexo
porno duro casero contacto de mujeres en algeciras video porno tetonas videos porno gratis mujeres maduras
juegos de sexo virtual
جمعه 11 مرداد 1398 02:10 ق.ظ
Is the one stop look for all vape products.
سه شنبه 25 تیر 1398 08:18 ق.ظ
2 novembre signe astrologique voyance gratuite signe du zodiaque de novembre voyance gratuite comment trouver son ascendant signe astrologique voyance gratuite signification signe astrologique sagittaire homme voyance gratuite tarot en ligne oui non voyance gratuite astrologie les signes qui s accordent
voyance gratuite signe du zodiaque en anglais prononciation voyance gratuite signe astrologique compatibilite amicale
voyance gratuite 22 janvier signe zodiaque voyance gratuite
10 octobre signe astrologique voyance gratuite compatibilite signes astrologiques chinois gratuit voyance gratuite astrologie chinoise tigre du jour voyance gratuite
astrologie chiron en maison 9 voyance gratuite tarot
gratuit pour l'argent voyance gratuite tirage tarot kabbale
voyance gratuite tarot gratuit serieux amour voyance gratuite tirage tarot avenir divinatoire
voyance gratuite signes astrologiques compatibles sagittaire voyance gratuite 1 fevrier signe astrologique voyance
gratuite 1 janvier signe astrologique voyance gratuite signe astrologique femme
belier homme taureau voyance gratuite signe astrologique du mois d avril voyance gratuite voyance gratuite oui
ou non voyance gratuite astrologie taureau ascendant scorpion voyance
gratuite tarot amour gratuit oracle voyance gratuite astrologique signe
سه شنبه 25 تیر 1398 02:49 ق.ظ
baise mure plan cul saint nazaire site de rencontre asian plan cul
dans la somme partouze dehors plan cul saintes jeux
pour adulte sexe plan cul gay toulon beurette plan cul rumilly histoire de sexe menu plan cul drancy salope en rue plan cul ivry sur seine partouze
belge plan cul sur gap photo sexe de femme plan cul gay
eure sexe sur un bateau plan cul cagnes sur mer levrette cafe bordeaux plan cul gay sexe site de rencontre suisse romande gratuit plan cul hotel pizza sexe recherche plan cul paris beurette tres
chaude plan cul gratuit sans abonnement rencontre
femme trans plan cul miramas sexe video porno plan cul dans le train jouir en levrette
plan cul a amiens site de rencontre 29 plan cul carcassonne baise dans taxi plan cul hard site de rencontre
gratuit belgique site pour trouver plan cul plan sexe cotes d armor sans inscription plan de cul paris rencontre sexe 68 plan cul
gay alsace rencontre beurette mature plan cul com site de rencontre seniors gratuit pour les femmes plan cul portable jeune pute x plan cul sur whatsapp
sexe royan
سه شنبه 25 تیر 1398 12:54 ق.ظ
porno hulk le bon coin plan cul site de rencontre amoureuse totalement gratuit plan cul
paradis site de rencontre dubai plan cul 65 tisha campbell porno gros plan sur son cul levrette bourgeoise plan cul
d un soir gratuit baise endroit insolite plan cul
brive plan cul nice gratuit rencontre plan cul lyon il
baise sa petite voisine plan cul aube porno z plan cul ville photo lingerie porno plan cul yveline aborder
une fille sur site de rencontre plan cul non venal belle mere porno comment demander un plan cul site de rencontre simple
et gratuit sans inscription plan cul a saint etienne porno telechargement gratuit tchat
plan cul jeux tele porno plan cul 53 film porno hot plan cul metisse rencontre coquine quimper plan cul a alger blog site de rencontre gratuit plan cul gay savoie rencontre soiree celibataire
site gratuit de plan cul gens qui baise plan cul plus de 50 ans plan cul
portugaise plan cul 17 ans film amateur beurette
plan cul cinema porno asiat plan cul chaud rencontre sexe lille limoges plan cul beurette en hijab
plan cul histoire site de pute
دوشنبه 13 خرداد 1398 10:48 ق.ظ
The keto diet plan requires you consume a high-fat, low-carb diet regimen.
جمعه 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 تا 30
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :