آموزش مقدماتی HTML و CSS (جلسه ۱۶: ایجاد لیست‌ها – بخش ۲)
1398/03/19 15:24 , میلاد صاحب نظر

آموزش مقدماتی HTML و CSS (جلسه ۱۶: ایجاد لیست‌ها – بخش ۲)

در جلسه قبل به تعریف و معرفی لیست‌ها در HTML پرداختیم و با استفاده از CSS برای آن‌ها استایل ایجاد کردیم. فهمیدیم که سه نوع لیست در HTML وجود دارند که عبارت‌اند از نامنظم، منظم و توصیفی. هر کدام را همراه با مثال و معرفی ویژگی‌ها و کاربردهای آن‌ها توضیح دادیم.

در این جلسه به توضیح نمایش افقی لیست و مباحث مرتبط با آن خواهیم پرداخت. با ما همراه باشید!

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد 
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

نمایش افقی لیست

گاهی ممکن است بخواهیم لیست‌ها را به جای اینکه عمودی نمایش داده شوند، به صورت افقی نمایش دهیم. شاید بخواهیم یک لیست را به چندین ستون تقسیم کنیم، یک لیست جهت‌یابی ایجاد کنیم یا چند آیتم لیست را در یک ردیف قرار دهیم.

بسته به محتوا و ظاهر مطلوب چند روش مختلف برای نمایش لیست‌ها به صورت تک خطی (مثل زمانی که مقدار ویژگی display از عنصرهای <li> را به inline یا inline-block تبدیل می‌کنیم یا آن‌ها را float می‌کنیم) وجود دارند.

نمایش لیست

سریع‌ترین روش برای نمایش یک لیست در یک خط، این است که به ویژگی display در عنصرهای <li> مقدار inline یا inline-block بدهیم. با این کار، تمام عنصرهای <li> درون یک خط قرار می‌گیرند و بین هر آیتم لیست هم یک space یا فضا قرار می‌گیرد.

اگر فضاهای بین هر عنصر <li> مشکل ایجاد می‌کنند، می‌توانید با استفاده از چند تکنیک که در جلسات نهم و دهم بیان کردیم، آن‌ها را حذف کنید.

اکثر مواقع، به جای مقدار inline، از مقدار inline-block استفاده می‌کنیم. مقدار inline-block به ما امکان می‌دهد تا خیلی آسان حاشیه‌های عمودی و فضا دهی‌های دیگری به عنصرهای <li> اضافه کنیم، در حالی که مقدار inline چنین امکاناتی به ما نمی‌دهد.

وقتی مقدار ویژگی display به inline یا inline-block تغییر می‌کند، marker آیتم لیست (خواه یک فلش، شماره یا اشکال دیگر باشد) حذف می‌شود.

HTML

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

CSS

li {
  display: inline-block;
  margin: 0 10px;
}

float کردن لیست

تغییر دادن مقدار ویژگی display به inline یا inline-block روش سریعی است. به هر حال، این روش باعث حذف شدن marker آیتم لیست می‌شود. اگر marker آیتم لیست مورد نیاز باشد، float کردن هر عنصر <li> روش بهتری نسبت به تغییر دادن ویژگی display است.

تنظیم تمام ویژگی‌های float در عنصرهای <li> روی left باعث می‌شود تمام عنصرهای <li> مستقیماً در کنار همدیگر و بدون  وجود هیچ فاصله یا space در بین آن‌ها قرار گیرند. وقتی هر عنصر <li> را float می‌کنیم، marker آیتم لیست به صورت پیش‌فرض نمایش داده می‌شود و در واقع در بالای عنصر <li> که در کنار آن قرار دارد، قرار می‌گیرد.

برای جلوگیری از اینکه marker آیتم لیست در بالای عنصرهای <li> دیگر قرار گیرد، یک margin یا  padding افقی باید اضافه شود.

HTML

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

CSS

li {
  float: left;
  margin: 0 20px;
}

همانند هر عنصر دیگری که float می‌شود، در این float نیز جریان صفحه به هم می‌خورد. باید فراموش نکنیم که floatهایمان را clear یا تمیز کنیم (که بیشتر به عنوان تکنیک clearfix شناخته می‌شود) و صفحه را به جریان نرمالش بازگردانیم.

مثال لیست جهت‌یابی

گاهی با استفاده از لیست‌های نامنظم می‌توانیم منوهای جهت‌یابی را ایجاد کرده یا بیابیم. این لیست‌ها معمولاً با استفاده از یکی از دو تکنیکی که در قسمت‌های قبل گفتیم، به شکل لیست‌های افقی ظاهر می‌شوند.

در اینجا مثالی از یک منوی جهت‌یابی افقی مشاهده می‌کنید که با استفاده از یک لیست نامنظم با عنصرهای <li> و استفاده از مقدار inline-block در ویژگی display آن‌ها ایجاد شده است.

HTML

<nav class="navigation">
  <ul>
    <li><a href="#">Profile</a></li><!--
    --><li><a href="#">Settings</a></li><!--
    --><li><a href="#">Notifications</a></li><!--
    --><li><a href="#">Logout</a></li>
  </ul>
</nav>

CSS

.navigation ul {
  font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.navigation li {
  display: inline-block;
}
.navigation a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
}
.navigation a:hover {
  background: #314b60;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
  border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
  border-right: 0;
  border-radius: 0 4px 4px 0;
}

تمرین

حالا که می‌دانیم چطور باید لیست‌ها را درون HTML و CSS بسازیم، اجازه دهید برگردیم به سراغ وبسایت Styles Conference خودمان و ببینیم در کجا می‌توانیم از لیست‌ها استفاده کنیم.

  1. در حال حاضر منوهای جهت‌یابی درون عنصرهای <header> و <footer> در صفحات ما شامل چند عنصر anchor هستند. این عنصرهای anchor باید در یک لیست نامنظم، به صورت بهتری سازماندهی شوند.

    استفاده از یک لیست نامنظم (از طریق عنصر <ul>) و آیتم‌های لیست (از طریق عنصر <li>) برای ما ساختار لازم برای منوهای جهت یابیمان را فراهم می‌کند. به هر حال، این عنصرهای جدید منوهای جهت‌یابی ما را به صورت عمودی نمایش می‌دهند.

    ما می‌خواهیم مقدار ویژگی display از عنصرهای <li> را به inline-block تغییر دهیم تا تمام آن‌ها را در یک ردیف افقی مرتب کنیم. وقتی این کار را انجام دادیم، همچنین باید فضای خالی باقی‌مانده بین هر عنصر <li> را نیز در نظر بگیریم.

    جلسات نهم و دهم را به یاد آورید، ما می‌دانیم که باز کردن یک کامنت HTML در پایان یک عنصر <li> و بستن آن کامنت در ابتدای یک عنصر <li> دیگر باعث از بین رفتن این فضا می‌شود.

    با به خاطر سپردن این موضوع، کد منوی جهت‌یابی ما که باید درون عنصر <header> قرار گیرد به این شکل خواهد شد:
    <nav class="nav primary-nav">
      <ul>
        <li><a href="index.html">Home</a></li><!--
        --><li><a href="speakers.html">Speakers</a></li><!--
        --><li><a href="schedule.html">Schedule</a></li><!--
        --><li><a href="venue.html">Venue</a></li><!--
        --><li><a href="register.html">Register</a></li>
      </ul>
    </nav>
    ​

    به طور مشابه، کد‌های منوی جهت‌یابی درون عنصر <footer> نیز به شکل زیر خواهد بود:
    <nav class="nav">
      <ul>
        <li><a href="index.html">Home</a></li><!--
        --><li><a href="speakers.html">Speakers</a></li><!--
        --><li><a href="schedule.html">Schedule</a></li><!--
        --><li><a href="venue.html">Venue</a></li><!--
        --><li><a href="register.html">Register</a></li>
      </ul>
    </nav>
    ​

    فراموش نکنید که این تغییرات را حتماً در تمام صفحات HTML اعمال کنید.

  2. حالا که لیست نامنظم در جایش قرار گرفت، اجازه دهید اطمینان حاصل کنیم که آیتم‌های لیست به صورت افقی قرار بگیرند و سپس اجازه دهید کمی استایل‌های آن‌ها را مرتب و تمیز کنیم. برای این منظور، از کلاس nav که از قبل موجود است استفاده می‌کنیم تا به هدف قرار دادن استایل‌های جدیدمان کمک کند.

    کار را با تنظیم مقدار ویژگی display تمام عنصرهای <li> (که درون عنصرهای دارای مقدار اتریبیوت class در کلاس navقرار دارند) روی inline-block شروع می‌کنیم تا مقداری حاشیه افقی درج کنیم و آیتم‌ها به صورت عمودی نسبت به بالای عنصر قرار گیرند.

    علاوه بر این، از Selector یا انتخاب‌گر pseudo-class یا کلاس سودوی last-child: برای شناسایی آخرین عنصر <li> و ریست کردن margin سمت راست آن به 0 استفاده خواهیم کرد. انجام این کار به ما اطمینان می‌دهد که هر فضای افقی بین عنصر <li> و لبه عنصر والدش حذف بشود.

    درون فایل css، در زیر استایل‌های جهت‌یابی مجودمان، اجازه دهید کد CSS زیر را اضافه کنیم:
    .nav li {
      display: inline-block;
      margin: 0 10px;
      vertical-align: top;
    }
    .nav li:last-child {
      margin-right: 0;
    }
    ​

    ممکن است تعجب کنید که چرا لیست نامنظم ما شامل هیچ marker آیتم لیست یا استایل‌های پیش‌فرض نبود. این استایل‌ها به واسطه reset قرار گرفته در بالای صفحه استایل ما حذف شده‌اند.

    اگر به Reset نگاه کنیم، مشاهده می‌کنیم که عنصرهای <ul>، <ol> و <li> همه شامل یک margin و padding با مقدار 0، و عنصرهای <ol> و <ul> دارای ویژگی list-style با مقدار none هستند.

  3. منوهای جهت‌یابی ما تنها جاهایی نیستند که در آن‌ها از لیست‌ها استفاده می‌کنیم. همچنین از آن‌ها در بعضی از صفحات داخلی نیز استفاده می‌کنیم، از جمله برای صفحه Speakers. بیایید چند سخنگو به کنفرانسمان اضافه کنیم.

    درون فایل html درست در زیر بخش lead یا سرنخمان، اجازه دهید یک بخش جدید ایجاد کنیم تا در آن تمام سخنگویانمان را ارائه دهیم.

    مجدد از چند استایل موجود استفاده می‌کنیم و همچنین از عنصر <section> با مقدار اتریبیوت کلاس row استفاده می‌کنیم تا تمام سخنگویانمان را کنار هم قرار دهیم و یک پشت زمینه سفید و padding به پشت‌ آن‌ها اضافه کنیم.

    درون عنصر <section>، یک عنصر <div> با مقدار اتریبیوت کلاس grid اضافه می‌کنیم تا سخنگویانمان را در مرکز صفحه قرار دهیم و این امر به ما امکان می‌دهد تا از چندین ستون برای این کار استفاده کنیم.

    تا اینجا کد HTML ما در زیر بخش lead به این شکل است:
    <section class="row">
      <div class="grid">
    
      </div>
    </section>
    ​
  4. درون grid، هر سخنگو با عنصر <section> مخصوص به خودش علامت‌گذاری می‌شود، که شامل دو ستون است. اولین ستون به اندازه دو سوم طول عنصر <section> کشیده می‌شود و با استفاده از یک عنصر <div> علامت‌گذاری می‌شود.

    دومین ستون به اندازه بقیه یک سوم طول عنصر <section> کشیده شده و با استفاده از یک عنصر <aside> علامت‌گذاری می‌شود، چون محتوای آن برای سخنگو و سخنرانی او اولویت ثانویه دارد.

    با استفاده از کلاس‌های موجود col-2-3 و col-1-3، کد نهایی برای بخش یک سخنگو به این شکل خواهد بود:
    <section id="shay-howe">
    
      <div class="col-2-3">
        ...
      </div><!--
    
      --><aside class="col-1-3">
        ...
      </aside>
    
    </section>
    ​

    در اینجا چند آیتم قرار دارند که باید به آن‌ها توجه کنید. اول، هر عنصر <section> برای هر سخنگو شامل یک اتریبیوت ID همراه با نام سخنگو به عنوان مقدار اتریبیوت می‌باشد.

    سپس، وقتی زمان‌بندی را برای کنفرانسمان ایجاد می‌کنیم، این اتریبیوت‌های ID به عنوان anchor عمل می‌کنند و به ما امکان می‌دهند تا از زمان‌بندی به پروفایل سخنگو لینک بزنیم.

    علاوه بر این، تگ خاتمه دهنده عنصر <div> با یک علامت باز کننده کامنت HTML ادامه می‌یابد و تگ باز کننده عنصر <aside> با بسته شدن کامنت HTML ادامه می‌یابد.

    چون کلاس‌های ستون محور این عنصرها را به عنوان عنصرهای inline-block نمایش می‌دهند، پس فضای خالی که بین آن‌ها به وجود می‌آید را حذف می‌کنیم.

  5. درون ستون دو سوم، که با عنصر <div> علامت‌گذاری شده است از چند هدینگ و پاراگراف برای نشان دادن نام سخنگو، عنوان و چکیده سخنرانی وی و یک بیوگرافی کوچک استفاده می‌کنیم.

    با درج این محتوا، بخش یک سخنگو به این شکل خواهد بود:
    <section id="shay-howe">
    
      <div class="col-2-3">
    
        <h2>Shay Howe</h2>
        <h5>Less Is More: How Constraints Cultivate Growth</h5>
        
        <p>By setting constraints, we force ourselves...</p>
        
        <h5>About Shay</h5>
    
        <p>As a designer and front-end developer, Shay...</p>
      
      </div><!--
      --><aside class="col-1-3">
        ...
      </aside>
    </section>​
  6. درون ستون یک سوم، که با عنصر <aside> علامت‌گذاری شده است، یک عنصر <div> با مقدار اتریبیوت کلاس speaker-info اضافه می‌کنیم. از یک عنصر <div> استفاده می‌کنیم چون قصد داریم به زودی به این عنصر استایل اضافه کنیم.

    پیش از این که به سراغ استایل‌ها برویم، اجازه دهید یک لیست نامنظم به داخل عنصر <div> اضافه کنیم که در آن چند لینک مرتبط برای سخنگو به عنوان آیتم لیست قرار گیرند.

    حالا کد HTML ما برای یک سخنگو به این شکل است:
    <section id="shay-howe">
    
      <div class="col-2-3">
    
        <h2>Shay Howe</h2>
        <h5>Less Is More: How Constraints Cultivate Growth</h5>
    
        <p>By setting constraints, we force ourselves...</p>
    
        <h5>About Shay</h5>
    
        <p>As a designer and front-end developer, Shay...</p>
    
      </div><!--
    
      --><aside class="col-1-3">
        <div class="speaker-info">
    
          <ul>
            <li><a href="https://twitter.com/shayhowe">@shayhowe</a></li>
            <li><a href="http://learn.shayhowe.com/">learn.shayhowe.com</a></li>
          </ul>
        </div>
      </aside>
    </section>
    ​
  7. حالا که عنصر <div> دارای مقدار اتریبیوت کلاس speaker-info می‌باشد، می‌توانیم چند استایل به آن اضافه کنیم.

    کارمان را با اضافه کردن یک بخش جدید به داخل فایل css برای استایل‌های صفحه سخنگو شروع می‌کنیم. از این جا، اجازه دهید یک border خاکستری صاف 1 پیکسلی با شعاع 5 پیکسل در اطراف هر عنصری که شامل مقدار اتریبیوت کلاس speaker-info است، اضافه کنیم.

    سپس، اجازه دهید یک margin بالایی 88 پیکسلی برای قرار دادن عنصر در یک خط عمودی مشترک به عنوان اولین پاراگراف توضیح سخنرانی اضافه کنیم و همچنین اجازه دهید padding عمودی ۲۲ پیکسلی هم به داخل عنصر اضافه کنیم تا برای لیست نامنظم تو در تو فضا فراهم کند.

    در آخر، تمام متن داخل عنصر را در مرکز قرار می‌دهیم.

    به طور کلی، کد CSS برای مجموعه قوانین کلاس speaker-info ما چیزی شبیه به کد زیر است:
    /*
      ========================================
      Speakers
      ========================================
    */
      
    .speaker-info {
      border: 1px solid #dfe2e5;
      border-radius: 5px;
      margin-top: 88px;
      padding: 22px 0;
      text-align: center;
    }​

    اجازه دهید برای بررسی اینکه چرا در اینجا از عنصر <div> و استایل‌های مرتبط با آن‌ استفاده می‌کنیم، یک دقیقه زمان صرف کنیم.

    ما یک عنصر <div> را درون عنصر <aside> که دارای مقدار اتریبیوت کلاس col-1-3 هست قرار می‌دهیم، چون می‌خواهیم padding ارث‌بری شده از کلاس col-1-3 در خارج از border موجود در عنصر <div> قرار بگیرد.

    زیاد طول نمی‌کشد که یک تصویر هم درون عنصر <div> در کنار لیست نامنظم قرار می‌دهیم. در نتیجه، به جای اینکه این استایل‌ها را مستقیماً در عنصر <ul> اعمال کنیم، یک عنصر <div> ایجاد کردیم.

  8. همینطور که سخنگویان بیشتری به صفحه اضافه می‌کنیم، می‌خواهیم اطمینان حاصل کنیم که آن‌ها از نظر عمودی در فاصله برابری از هم قرار بگیرند. برای این منظور، یک مجموعه قانون کلاس speaker ایجاد می‌کنیم که شامل یک margin پایین 44 پیکسلی است، مانند کد زیر:
    .speaker {
      margin-bottom: 44px;
    }
    ​

    سپس می‌توانیم این کلاس را در عنصر <section> برای هر سخنگو اعمال کنیم (به این شرط که آن سخنگو، آخرین سخنگو نباشد). این کلاس را در آخرین سخنگو حذف می‌کنیم، چون نمی‌خواهیم هیچ حاشیه غیر ضروری قبل از عنصر <footer> ایجاد کنیم. با داشتن بیش از یک سخنگو، طراحی ما به این شکل خواهد بود:
    <section class="row">
      <div class="grid">
    
        <section class="speaker" id="chris-mills">
    
          <div class="col-2-3">
            ...
          </div><!--
    
          --><aside class="col-1-3">
            ...
          </aside>
    
        </section>
        
        <section id="shay-howe">
        
          <div class="col-2-3">
            ...
          </div><!--
        
          --><aside class="col-1-3">
            ...
          </aside>
        
        </section>
        
      </div>
    </section>
    ​

    توجه کنید که عنصر <section> اولین سخنگو، برای کریس میلز، شامل مقدار اتریبیوت کلاس speaker است، که به طور عمودی آن را از عنصر <section> سخنگو با نام خودم، Shay Howe، جدا کرده است.

    آخرین عنصر <section> سخنگو، که دوباره نام خود است، شامل مقدار اتریبیوت کلاس speaker نیست، دلیل این است که بتوانیم آن را در فاصله مناسبی از عنصر <footer> قرار دهیم.

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

صفحه سخنگویان پس از به روز رسانی منوهای جهت‌یابی و اضافه کردن سخنگوها

تصویر ۱۶.۱. صفحه سخنگویان پس از به روز رسانی منوهای جهت‌یابی و اضافه کردن سخنگوها

دمو و کد منبع

در زیر می‌توانید وبسایت Styles Conference را در حالت فعلی‌اش مشاهده کنید، همچنین می‌توانید کد منبع برای وضعیت فعلی وبسایت را نیز دانلود کنید.

مشاهده سایت Styles Conference             دانلود کد منبع سایت Styles Conference

خلاصه

لیست‌ها معمولاً به صورت مرتب  در HTML استفاده می‌شوند، گاهی حتی در جاهایی که ممکن است واضح یا مشخص نباشند. کلید کار این است که از آن‌ها در جایی که واقعاً مورد نیاز هستند و به آن‌ها نیاز است، استفاده کنید.

اجازه دهید یک دوره روی مباحث این دو جلسه داشته باشیم. در این دو جلسه در مورد مبحث ایجاد لیست‌ها مباحث زیر پوشش داده شدند:

  • چگونه لیست‌های نامنظم، منظم و توضیحی ایجاد کنیم

  • چگونه به صورت مناسب لیست‌های تو در تو درون لیست‌های دیگر ایجاد کنیم

  • چگونه استایل marker آیتم لیست و موقعیت آن را تغییر دهیم

  • چگونه از یک تصویر پشت زمینه به جای marker آیتم لیست استفاده کنیم

  • چگونه لیست‌ها را به صورت افقی یا float نمایش دهیم

حالا که می‌دانیم چطور باید لیست‌ها را به صفحاتمان اضافه کنیم، اجازه دهید رسانه نیز به صفحاتمان اضافه کنیم. در جلسات آینده به سراغ مبحث ادغام رسانه‌هایی مانند تصاویر، صوت و ویدئو خواهیم رفت.

با Mug همراه باشید!

منبع: learn.shayhowe

جلسه بعد                                                      جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
۵ قالب رایگان HTML برای ایجاد سریع و آسان‌ وبسایت‌ها!
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات