ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

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

توسط 17 تیر, 1394 7354 0

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

طراحی قالب واکنش گرا بسیار کار مشکلی می باشد زیرا اگر دقت لازم در نوشتن کدها انجام نشود ممکن است با کم شدن رزولوشن صفحه ، قالب به درستی در صفحه نمایش ، توسط کاربران مشاهده نشود . به همین دلیل 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>

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

این مورد را ارزیابی کنید
(1 رای)
آخرین ویرایش در شنبه, 19 دی 1394 ساعت 21:38
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا