طراحی یک قالب واکنش گرا ساده (تمرین اول)

ویژه طراحی یک قالب واکنش گرا ساده (تمرین اول)

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

طراحی قالب واکنش گرا بسیار کار مشکلی می باشد زیرا اگر دقت لازم در نوشتن کدها انجام نشود ممکن است با کم شدن رزولوشن صفحه ، قالب به درستی در صفحه نمایش ، توسط کاربران مشاهده نشود . به همین دلیل 3 تمرین مقدماتی برای درک بهتر کاربران از سایت w3schools کپی کرده م و در ادامه جهت استفاده قرار میدهم . 

1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .
با تگهای HTML آشنایی دارید ؟ اگر با Html کار نکرده اید بهتر است بر روی لینک مورد نظر کلیک کرده و کمی با تگها آشنا شوید. زیرا ممکن است در ادامه سوالهای زیادی برای شما بوجود بیاید .

<!DOCTYPE html>
<html>
   <head>
   </head>
              <body>
              </body>
</html>

2. در مرحله بعدی یک تگ <style> بین تگ head ایجاد کرده و کدهای زیر را درون آن کپی کنید . من برای اینکه برای کاربران مبتدی این قسمت مبهم نباشد کل کد را تایپ می کنم .

<style>
.city {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
</style>

کد بالا مشخص می کنید که کادرها از سمت چپ ، با فاصله 5 پیکسل ، عرض و ارتفاع 300 پیکسلی همراه با یک خط 1 پیکسلی باید ایجاد شود .

3. حالا باید در بین تگ Body چهار کلاس برای کادرها ایجاد کنیم . به شکل کلی کد دقت کنید .

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
</style>
</head>
<body>
<h1>بخش آموزش سایت آسارایان</h1>
<h2>تغییر سایز صفحه و حرکت عناصر </h2>
<div class="city">
  <h2>مشهد</h2>
  <p>صفحه مربوط به مشهر مقدس </p>
  <p>کد بالا مشخص می کنید که کادرها از سمت چپ ، با فاصله 5 سانتیمتری ، عرض و ارتفاع 300 پیکسلی همراه با یک خط 1 پیکسلی باید ایجاد شود . </p>
</div>
<div class="city">
  <h2>اصفهان</h2>
  <p>این صفحه مربوط به بخش های مختلف و گردشگری اصفهان می شود .</p>
</div>
<div class="city">
  <h2>تبریز </h2>
  <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>

مشاهده دمو در مرورگر (برای درک بهتر واکنشگرایی ابعاد صفحه را تغییر بدهید)

آخرین بروز رسانیشنبه, 19 دی 1394 21:38

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #2 سعید صبح خیز 1394-10-19 21:38
به نقل از Guest:
لطفاً متن " 5 سانتیمتر" را به "5 پیکسل " اصلاح فرمایید

ممنونم از دقت بالای شما . اصلاح شد
نقل قول کردن
0 #1 Guest 1394-10-19 19:58
لطفاً متن " 5 سانتیمتر" را به "5 پیکسل " اصلاح فرمایید
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا