• آموزش html
  • تهران کد

صفحه چینی در html

اکتبر 16, 2017adminskآموزش htmlبدون دیدگاه

صفحه بندی در صفحات وب بسیار حائز اهمیت هستند و متناسب با نوع وب سایتی که طراحی می نماییم صفحه چینی باید به نحوی باشد که علاوه بر زیبایی بتواند کارایی و دسترسی سریع را به کاربران بدهد.

از تگ های div و table در قدیم برای صفحه بندی استفاده می شد که امروزه html5 تگ های زیر را برای صفحه بندی عرضه نموده:

صفحه بندی html5

 

به طور کلی ۴ تکنیک برای صفحه چینی به کار می رود:

استفاده از جداول، CSS float property ، CSS framework ، CSS flexbox

استفاده از جداول <table>

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

CSS framework

استفاده از CSS framework ها امروزه بسیار شایع شده و محبوب ترین انها بوتستراپ می‌باشد.

CSS Floats

یاد گیری این متد آسان بوده و به کمک آن می توان صفحه بندی مناسبی را ایجاد نمود به قطعه کد زیر که به صفحه بندی با این متد می پردازد توجه فرمایید:

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
 width: 100%;
 border: 1px solid gray; }
header, footer {
 padding: 1em;
 color: white;
 background-color: black;
 clear: left;
 text-align: center; }
nav {
 float: left;
 max-width: 160px;
 margin: 0;
 padding: 1em; }
nav ul {
 list-style-type: none;
 padding: 0; }
nav ul a {
 text-decoration: none; }
article {
 margin-left: 170px;
 border-left: 1px solid gray;
 padding: 1em;
 overflow: hidden; }
</style>
</head>
<body>
<div class="container">
<header>
 <h1>City Gallery</h1>
</header>
<nav>
 <ul>
 <li><a href="#">London</a></li>
 <li><a href="#">Paris</a></li>
 <li><a href="#">Tokyo</a></li>
 </ul>
</nav>
<article>
 <h1>London</h1>
 <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
 <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
<footer>Copyright &copy; tehrancode.com</footer>
</div>
</body>
</html>

مشاهده خروجی و ویرایش آنلاین

CSS Flexbox

این نتد یکی از متد های جدید css3 بوده و به کمک آن می توان لایه هایی متفاوت متناسب با عرض نمایشگر ایجاد نمود.

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
 display: -webkit-flex;
 display: flex; 
 -webkit-flex-flow: row wrap;
 flex-flow: row wrap;
 text-align: center; }
.flex-container > * {
 padding: 15px;
 -webkit-flex: 1 100%;
 flex: 1 100%; }
.article {
 text-align: left; }
header {background: black;color:white;}
footer {background: #aaa;color:white;}
.nav {background:#eee;}
.nav ul {
 list-style-type: none;
 padding: 0; }
.nav ul a {
 text-decoration: none; }
@media all and (min-width: 768px) {
 .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
 .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
 footer {-webkit-order:3;order:3;} }
</style>
</head>
<body>
<div class="flex-container">
<header>
 <h1>City Gallery</h1>
</header>
<nav class="nav">
<ul>
 <li><a href="#">London</a></li>
 <li><a href="#">Paris</a></li>
 <li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article class="article">
 <h1>London</h1>
 <p>London is the capital city of England. It is the most populous city in the United Kingdom,
 with a metropolitan area of over 13 million inhabitants.</p>
 <p>Standing on the River Thames, London has been a major settlement for two millennia,
 its history going back to its founding by the Romans, who named it Londinium.</p>
 <p><strong>Resize this page to see that what happens!</strong></p>
</article>
<footer>Copyright &copy; tehrancode.com</footer>
</div>
</body>
</html>

مشاهده خروجی و ویرایش آنلاین

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بخش بندی آموزش HTML

  • آموزش html مقدمه
  • شروع کار با HTML در رایانه شخصی
  • مفاهیم پایه‌ای HTML
  • المان های HTML
  • صفت یا اتریبیوت ها در HTML
  • تگ های عنوان در HTML
  • پاراگراف ها در HTML
  • استایل دهی مستقیم به تگ ها
  • فرمت دهی به متن در HTML
  • نقل قول و عناصر استنادی در HTML
  • رنگ ها در html
  • css در HTML
  • لینک ها در HTML
  • عکس ها در HTML
  • جدول ها در HTML
  • لیست ها در html
  • المان های block و inline
  • تگ iframe در html
  • تگ script در HTML
  • تگ head در html
  • صفحه چینی در html
  • HTML واکنشگرا
  • کاراکتر های رزرو شده
  • فرم ها در HTML
  • سایر تگ ها در فرم
  • input type های مختلف در فرم
  • اتریبیوت های فرم
  • ویدیو در HTML
  • پخش صدا در html