نحوه ساخت یک چیدمان 3 ستون در CSS

طرح بندی CSS مستلزم آن است که شما به طور کلی از طرح وب سایت خود فکر می کنید و سپس قطعات را با هم جمع کنید. یاد بگیرید چگونه یک طرح سه ستون ساده با CSS ایجاد کنید.

01 از 09

طرح بندی خود را قرعه کشی کنید

J Kyrnin

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

پس از اینکه طرح خود را کشف کردید، می توانید از ابعاد فکر کنید. این طرح به شرح زیر می آید:

02 از 09

نوشتن HTML / CSS عمومی و ایجاد یک عنصر کانتینر

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

مستندات بدون عنوان </ title> </ head> <body> </ body> </ html> <p style=";text-align:right;direction:rtl"> در سبک های CSS اصلی به <a href="https://fa.eyewated.com/%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-css-%D8%A8%D9%87-%D8%B5%D9%81%D8%B1-%D8%AE%D8%A7%D8%B1%D8%AC-%D8%A7%D8%B2-%D8%AD%D8%A7%D8%B4%DB%8C%D9%87-%D9%88/">صفر کردن حاشیه ها، حاشیه ها و سطوح صفحه اضافه کنید</a> . در حالی که دیگر <a href="https://fa.eyewated.com/%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%A7%DB%8C%D9%86-cheat-sheet-css%D8%8C-%D9%85%DB%8C-%D8%AA%D9%88%D8%A7%D9%86%DB%8C%D8%AF-%D8%B3%D8%A8%DA%A9-%D9%87%D8%A7%DB%8C/">سبک های CSS استاندارد</a> برای اسناد جدید وجود دارد، این سبک ها حداقل شما نیاز به یک طرح تمیز. آنها را به سر سند خود اضافه کنید: </p> <style type = "text / css"> html، body {margin: 0px؛ padding: 0px؛ مرز: 0px؛ } </ style> <p style=";text-align:right;direction:rtl"> برای شروع ساختن طرح، یک عنصر ظرف قرار دهید. گاهی اوقات اتفاق می افتد که بعدا می توانید ظرف را از شر آن خلاص کنید، اما برای اکثر طرح بندی های ثابت، داشتن عنصر ظروف باعث مدیریت آن در بین مرورگرهای مختلف وب می شود. بنابراین در بدن قرار داده شده این: </p> <div id = "container"> </ div> <p style=";text-align:right;direction:rtl"> و در CSS style sheet، قرار دهید: </p> #container {} <p style=";text-align:right;direction:rtl"> <strong>03 از 09</strong> </p> <h3 style=";text-align:right;direction:rtl"> سبک کانتینر </h3><p style=";text-align:right;direction:rtl"> ظرف مشخص می کند که محتوای صفحه وب چقدر گسترده است، و همچنین حاشیه های اطراف آن و ظاهر داخلی آن. برای این سند، ظرف 870 پیکسل عرض با یک پشته 20 پیکسل در سمت چپ است. دروازه با یک حاشیه راه اندازی شده است، اما پدینگ روی کانتینر روی صفر قرار دارد تا از هر عنصر به اندازه کانتینر جلوگیری شود. </p> #container {width: 870px؛ حاشیه: 0 0 0 20px؛ / * بالا سمت چپ پایین سمت چپ * / padding: 0؛ } <p style=";text-align:right;direction:rtl"> اگر سند خود را در حال حاضر ذخیره کنید، ظاهر آن مشکل خواهد بود زیرا هیچ چیزی در آن وجود ندارد. اگر متن متنی را اضافه کنید، می توانید عنصر ظرف را به وضوح ببینید. </p> <p style=";text-align:right;direction:rtl"> <strong>04 از 09</strong> </p> <h3 style=";text-align:right;direction:rtl"> از Header Tag برای Header استفاده کنید </h3><p style=";text-align:right;direction:rtl"> چطوری تصمیم می گیرید که ردیف سرصفحه را سبک کنید بسیار بستگی دارد به آنچه که در آن است. اگر ردیف سرصفحه فقط یک لوگوی گرافیکی و سرصفحه داشته باشد، استفاده از برچسب تگ (<h1>) بیشتر از استفاده از <div> بهتر است. شما می توانید عنوان را به همان شیوه ای که تقسیم می کنید را سبک کنید و از علامت های غیر عادی اجتناب کنید. </p> <p style=";text-align:right;direction:rtl"> HTML برای ردیف هدر در بالای ظرف قرار می گیرد و به نظر می رسد این است: </p> <h1> ردیف سرصفحه من </ h1> <p style=";text-align:right;direction:rtl"> سپس، برای تنظیم سبک در آن، مرز قرمز در پایین اضافه شد، بنابراین شما می توانید ببینید که در آن آن را به پایان می رسد، حاشیه ها و پلاگین صفر شده، عرض تعیین شده به 100٪ و ارتفاع به 150px: </p> #container h1 {حاشیه: 0؛ padding: 0؛ عرض: 100٪؛ ارتفاع: 150 پیکسل؛ شناور به سمت چپ؛ border-bottom: # c00 solid 3px؛ } <p style=";text-align:right;direction:rtl"> فراموش نکنید که این عنصر را با شناور شناور کنید: سمت چپ؛ ویژگی. کلید نوشتن طرح بندی CSS این است که همه چیز را شناور کند - حتی چیزهایی که عرض همان ظرف هستند. به این ترتیب، همیشه می توانید بدانید که عناصر روی صفحه دروغ می گویند. </p> <p style=";text-align:right;direction:rtl"> <a href="https://fa.eyewated.com/%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8%DA%AF%D8%B1-%D9%BE%D8%B3%D8%B2%D9%85%DB%8C%D9%86%D9%87-css-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/">انتخاب نسل CSS</a> فقط سبک های H1 را در عنصر #container اعمال می کند. </p> <p style=";text-align:right;direction:rtl"> <strong>05 از 09</strong> </p> <h3 style=";text-align:right;direction:rtl"> برای گرفتن سه ستون، با ساخت دو ستون شروع کنید </h3><p style=";text-align:right;direction:rtl"> هنگامی که شما یک طرح سه ستون با CSS ایجاد می کنید، باید طرح خود را به دو گروه تقسیم کنید. بنابراین برای این ستون سه ستون، ستون وسط و راست و در کنار ستون سمت چپ در ستون دو ستون که ستون سمت چپ آن 250 پیکسل عرض است و ستون سمت راست 610 پیکسل عرض (300 هر برای دو ستون) ، به علاوه 10px برای بینابینی میان آنها). </p> <p style=";text-align:right;direction:rtl"> HTML به نظر می رسد این است: </p> <div id = "col1"> <p> از بین بردن عواقب احتمالی. Velit esse cillum dolore ut enim ad min veniam، lorem ipsum dolor sit amet. در تمرینات تنفس و تنفس تمرین کنید. eu fugiat nulla pariatur. </ p> </ div> <div id = "col2outer"> <p> بیشترین حد ممکن درمورد مواردی که در این زمینه وجود دارد را در اختیار شما قرار می دهم. Ut labore et dolore magna aliqua. </ p> </ div> <p style=";text-align:right;direction:rtl"> متن حفره یا سوراخ در ستون باعث می شود که آنها هنگام تست، بیشتر قابل مشاهده باشند. CSS به نظر می رسد این است: </p> #container # col1 {width: 250px؛ شناور به سمت چپ؛ } #container # col2outer {width: 610px؛ شناور: راست؛ حاشیه: 0؛ padding: 0؛ } <p style=";text-align:right;direction:rtl"> ستون در سمت چپ به سمت چپ شناور است، در حالی که دیگر به سمت راست شناور است. از آنجا که عرض کل هر دو ستون 860 پیکسل است، بین آنها 10 قطعه قطعه وجود دارد. </p> <p style=";text-align:right;direction:rtl"> <strong>06 از 09</strong> </p> <h3 style=";text-align:right;direction:rtl"> دو ستون را داخل ستون دوم قرار دهید </h3><p style=";text-align:right;direction:rtl"> برای ایجاد سه ستون، دو عدد در داخل ستون عریض دوم اضافه کنید، همانطور که 2 مرحله اضافه در ستون ظرف در آخرین مرحله اضافه کردید. HTML به نظر می رسد این است: </p> <div id = "col2outer"> <div id = "col2mid"> <p> بیشترین مقدار ممکن است، sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. </ p> </ div> <div id = "col2side"> <p> نام Libero tempore، quia voluptas نشستن aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam، magnam aliquam quaerat voluptatem. </ p> </ div> </ div> </ div> </ div> </ div> <div id = <p style=";text-align:right;direction:rtl"> و CSS به نظر می رسد این است: </p> # col2outer # col2mid {width: 300px؛ شناور به سمت چپ؛ } # col2outer # col2side {width: 300px؛ شناور: راست؛ } <p style=";text-align:right;direction:rtl"> از آنجا که این دو جعبه گسترده 300px در داخل جعبه گسترده ای 610px هستند، دوباره بین آنها بین 10px قلم می شود. </p> <p style=";text-align:right;direction:rtl"> <strong>07 از 09</strong> </p> <h3 style=";text-align:right;direction:rtl"> اضافه کردن در پاورقی </h3><p style=";text-align:right;direction:rtl"> حالا که بقیه صفحه قالب است، شما می توانید در پایین صفحه اضافه کنید. با استفاده از یک شناسه "footer" از آخرین دیلت استفاده کنید و محتوای را اضافه کنید تا بتوانید آن را ببینید. شما همچنین می توانید مرز را در بالای صفحه اضافه کنید، بنابراین شما می دانید که از آن شروع می شود. </p> <p style=";text-align:right;direction:rtl"> HTML: </p> <div id = "footer"> <p> کپی رایت © 2017 </ p> </ div> <p style=";text-align:right;direction:rtl"> CSS: </p> #container #footer {شناور: چپ؛ عرض: 870 پیکسل؛ border-top: # c00 solid 3px؛ } <p style=";text-align:right;direction:rtl"> <strong>08 از 09</strong> </p> <h3 style=";text-align:right;direction:rtl"> در سبک های شخصی و محتویات خود اضافه کنید </h3><p style=";text-align:right;direction:rtl"> اکنون که طرح شما به پایان رسیده است، می توانید شروع به اضافه کردن سبک های شخصی و محتوای خود کنید. به خاطر داشته باشید که مرزهای سرصفحه و پاورپوینت برای نمایش بخشهای طرح، بخصوص برای طراحی اضافه شده است. </p> <p style=";text-align:right;direction:rtl"> <strong>09 از 09</strong> </p> <h3 style=";text-align:right;direction:rtl"> نهایی HTML / CSS </h3><p style=";text-align:right;direction:rtl"> در اینجا کل سند، HTML و CSS است: </p> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" محتوای محتوا "content =" text / html؛ charset = utf-8 "/> <title> مستندات بدون عنوان </ title> <style type = "text / css"> html، body {margin: 0px؛ padding: 0px؛ مرز: 0px؛ } #container {width: 870px؛ حاشیه: 0 0 0 20px؛ / * بالا سمت چپ پایین سمت چپ * / padding: 0؛ رنگ پس زمینه: #fff؛ } #container h1 {حاشیه: 0؛ padding: 0؛ عرض: 100٪؛ ارتفاع: 150 پیکسل؛ شناور به سمت چپ؛ border-bottom: # c00 solid 3px؛ } #container # col1 {width: 250px؛ شناور به سمت چپ؛ } #container # col2outer {width: 610px؛ شناور: راست؛ حاشیه: 0؛ padding: 0؛ } # col2outer # col2mid {width: 300px؛ شناور به سمت چپ؛ } # col2outer # col2side {width: 300px؛ شناور: راست؛ } #container #footer {شناور: چپ؛ عرض: 870 پیکسل؛ border-top: # c00 solid 3px؛ } </ style> </ head> <body> <div id = "container"> <h1> ردیف سرصفحه من </ h1> <div id = "col1"> <p> <p> <div> <div id = "col2outer"> <div id = "col2mid"> <p> </ p> </ div> <div id = "col2side"> <p> Nam libero tempore. </ p> </ div> </ div> <div id = "footer"> <p> Copyright © 2008 </ p> </ div> </ div> </ body> </ html> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D8%A7%D8%AC%D9%85%D8%A7%D9%84%DB%8C-css-padding/"> <amp-img src="https://exse.eyewated.com/pict/e67f81ced2b92faa-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D8%A7%D8%AC%D9%85%D8%A7%D9%84%DB%8C-css-padding/">بررسی اجمالی CSS Padding</a></h3> <div class="amp-related-meta"> طراحی و توسعه وب </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%A7%D8%AC%D8%AA%D9%86%D8%A7%D8%A8-%D8%A7%D8%B2-%D8%B3%D8%A8%DA%A9-%D9%87%D8%A7%DB%8C-%D8%AF%D8%B1%D9%88%D9%86%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-css/">اجتناب از سبک های درونی برای CSS</a></h3> <div class="amp-related-meta"> طراحی و توسعه وب </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%AE%D8%A7%D9%86%D9%88%D8%A7%D8%AF%D9%87-%D9%87%D8%A7%DB%8C-%D9%81%D9%88%D9%86%D8%AA-%D9%87%D8%A7%DB%8C-%D8%B9%D9%85%D9%88%D9%85%DB%8C-%D8%AF%D8%B1-css-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/"> <amp-img src="https://exse.eyewated.com/pict/a7fe27e18190322c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%AE%D8%A7%D9%86%D9%88%D8%A7%D8%AF%D9%87-%D9%87%D8%A7%DB%8C-%D9%81%D9%88%D9%86%D8%AA-%D9%87%D8%A7%DB%8C-%D8%B9%D9%85%D9%88%D9%85%DB%8C-%D8%AF%D8%B1-css-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/">خانواده های فونت های عمومی در CSS چیست؟</a></h3> <div class="amp-related-meta"> طراحی و توسعه وب </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D9%85%D8%B7%D9%84%D9%82-%D8%AF%D8%B1-%D9%85%D9%82%D8%A7%D8%A8%D9%84-%D9%86%D8%B3%D8%A8%DB%8C-%D8%AA%D9%88%D8%B6%DB%8C%D8%AD-%D9%85%D9%88%D9%82%D8%B9%DB%8C%D8%AA-css/"> <amp-img src="https://exse.eyewated.com/pict/fefb982d13993023-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D9%85%D8%B7%D9%84%D9%82-%D8%AF%D8%B1-%D9%85%D9%82%D8%A7%D8%A8%D9%84-%D9%86%D8%B3%D8%A8%DB%8C-%D8%AA%D9%88%D8%B6%DB%8C%D8%AD-%D9%85%D9%88%D9%82%D8%B9%DB%8C%D8%AA-css/">مطلق در مقابل نسبی - توضیح موقعیت CSS</a></h3> <div class="amp-related-meta"> طراحی و توسعه وب </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%D8%A8%DB%8C%D9%86import-%D9%88-%D9%84%DB%8C%D9%86%DA%A9-%D8%A8%D8%B1%D8%A7%DB%8C-css-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/"> <amp-img src="https://exse.eyewated.com/pict/e1ef7baeb7f72ff1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%D8%A8%DB%8C%D9%86import-%D9%88-%D9%84%DB%8C%D9%86%DA%A9-%D8%A8%D8%B1%D8%A7%DB%8C-css-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/">تفاوت بینimport و لینک برای CSS چیست؟</a></h3> <div class="amp-related-meta"> طراحی و توسعه وب </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D9%87-%D8%B3%D8%A8%DA%A9-%D9%84%DB%8C%D9%86%DA%A9-%D8%A8%D8%A7-css/"> <amp-img src="https://exse.eyewated.com/pict/b692757fd2c52f2c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D9%87-%D8%B3%D8%A8%DA%A9-%D9%84%DB%8C%D9%86%DA%A9-%D8%A8%D8%A7-css/">چگونه به سبک لینک با CSS</a></h3> <div class="amp-related-meta"> طراحی و توسعه وب </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/css-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%D8%A7%D8%B2-%DA%A9%D8%AC%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D9%85%DB%8C-%D8%B4%D9%88%D8%AF%D8%9F/"> <amp-img src="https://exse.eyewated.com/pict/4494c19ed3012f92-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/css-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%D8%A7%D8%B2-%DA%A9%D8%AC%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D9%85%DB%8C-%D8%B4%D9%88%D8%AF%D8%9F/">CSS چیست و از کجا استفاده می شود؟</a></h3> <div class="amp-related-meta"> طراحی و توسعه وب </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%DB%8C%DA%A9-%D8%B1%D8%A7%D9%87-%D8%B3%D8%A7%D8%AF%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%DB%8C%DA%A9-%D8%AC%D8%AF%D9%88%D9%84-%D8%A8%D8%A7/"> <amp-img src="https://exse.eyewated.com/pict/e7f8d4ffa9972f21-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%DB%8C%DA%A9-%D8%B1%D8%A7%D9%87-%D8%B3%D8%A7%D8%AF%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%DB%8C%DA%A9-%D8%AC%D8%AF%D9%88%D9%84-%D8%A8%D8%A7/">یک راه ساده برای ایجاد یک جدول با استفاده از CSS</a></h3> <div class="amp-related-meta"> طراحی و توسعه وب </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8%B1%D9%88%D9%86%D8%AF%D9%87-%D8%AF%D8%B1-html5-%D9%88-css3-%D8%A8%D8%AF%D9%88%D9%86-marquee/"> <amp-img src="https://exse.eyewated.com/pict/049d95d89eac3a60-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8%B1%D9%88%D9%86%D8%AF%D9%87-%D8%AF%D8%B1-html5-%D9%88-css3-%D8%A8%D8%AF%D9%88%D9%86-marquee/">ایجاد محتوای رونده در HTML5 و CSS3 بدون MARQUEE</a></h3> <div class="amp-related-meta"> طراحی و توسعه وب </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>See Newest</h2> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B1%D9%81%D8%B9-%D8%A7%D8%B4%DA%A9%D8%A7%D9%84-stop-0x00000078/">چگونه برای رفع اشکال STOP 0x00000078</a></h3> <div class="amp-related-meta"> پنجره ها </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%A7%D9%86%DB%8C%D9%85%DB%8C%D8%B4%D9%86-%D8%B3%D9%87-%D8%A8%D8%B9%D8%AF%DB%8C-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/"> <amp-img src="https://exse.eyewated.com/pict/51e0464eb9753324-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%A7%D9%86%DB%8C%D9%85%DB%8C%D8%B4%D9%86-%D8%B3%D9%87-%D8%A8%D8%B9%D8%AF%DB%8C-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/">انیمیشن سه بعدی چیست؟</a></h3> <div class="amp-related-meta"> جدید و بعدی </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/6-%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86-%D9%84%D9%BE-%D8%AA%D8%A7%D9%BE-%D9%87%D8%A7%DB%8C-%DA%A9%D8%B3%D8%A8-%D9%88-%DA%A9%D8%A7%D8%B1-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AE%D8%B1%DB%8C%D8%AF-%D8%AF%D8%B1/">6 بهترین لپ تاپ های کسب و کار برای خرید در سال 2018</a></h3> <div class="amp-related-meta"> راهنماهای خرید </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%A2%D9%86%DA%86%D9%87-%D8%B4%D9%85%D8%A7-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%AF%D8%A7%D9%86%DB%8C%D8%AF-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%87%D9%85%DA%AF%D8%A7%D9%85-%D8%B3%D8%A7%D8%B2%DB%8C-iphone/"> <amp-img src="https://exse.eyewated.com/pict/2abb6b0ab2bb3466-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%A2%D9%86%DA%86%D9%87-%D8%B4%D9%85%D8%A7-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%AF%D8%A7%D9%86%DB%8C%D8%AF-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%87%D9%85%DA%AF%D8%A7%D9%85-%D8%B3%D8%A7%D8%B2%DB%8C-iphone/">آنچه شما باید بدانید برای همگام سازی iPhone به iPad</a></h3> <div class="amp-related-meta"> آی فون و آی پاد </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B0%D9%81-instagram-photos-and-videos/"> <amp-img src="https://exse.eyewated.com/pict/d49999720d67337d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B0%D9%81-instagram-photos-and-videos/">چگونه برای حذف Instagram Photos and Videos</a></h3> <div class="amp-related-meta"> رسانه های اجتماعی </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/coworking-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/"> <amp-img src="https://exse.eyewated.com/pict/21cdc75e848b349c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/coworking-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/">Coworking چیست؟</a></h3> <div class="amp-related-meta"> جستجوی وب </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D9%86%D8%AD%D9%88%D9%87-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%A7%DB%8C%D9%86%D8%B3%D8%AA%D8%A7%DA%AF%D8%B1%D8%A7%D9%85/"> <amp-img src="https://exse.eyewated.com/pict/00220015e93c30fe-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D9%86%D8%AD%D9%88%D9%87-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%A7%DB%8C%D9%86%D8%B3%D8%AA%D8%A7%DA%AF%D8%B1%D8%A7%D9%85/">نحوه استفاده از اینستاگرام</a></h3> <div class="amp-related-meta"> رسانه های اجتماعی </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%D8%AE%D8%B1%DB%8C%D8%AF-%D8%AA%D8%A8%D9%84%D8%AA/"> <amp-img src="https://exse.eyewated.com/pict/5dec670b19b930ef-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%D8%AE%D8%B1%DB%8C%D8%AF-%D8%AA%D8%A8%D9%84%D8%AA/">راهنمای خرید تبلت</a></h3> <div class="amp-related-meta"> راهنماهای خرید </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/3-%D9%85%D9%88%D8%B1%D8%AF-%D9%87%D8%B1-%D8%A8%D8%A7%D8%B2%DB%8C-%DA%86%D9%86%D8%AF-%D9%86%D9%81%D8%B1%D9%87-%DA%86%D9%86%D8%AF-%D9%85%D9%86%D8%B8%D9%88%D8%B1%D9%87-%D9%86%DB%8C%D8%A7%D8%B2/"> <amp-img src="https://exse.eyewated.com/pict/817f98c4d417347e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/3-%D9%85%D9%88%D8%B1%D8%AF-%D9%87%D8%B1-%D8%A8%D8%A7%D8%B2%DB%8C-%DA%86%D9%86%D8%AF-%D9%86%D9%81%D8%B1%D9%87-%DA%86%D9%86%D8%AF-%D9%85%D9%86%D8%B8%D9%88%D8%B1%D9%87-%D9%86%DB%8C%D8%A7%D8%B2/">3 مورد هر بازی چند نفره چند منظوره نیاز دارد</a></h3> <div class="amp-related-meta"> بازی </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%A7%D8%AC%D8%AA%D9%86%D8%A7%D8%A8-%D8%A7%D8%B2-%D9%87%D8%B1%D8%B2%D9%86%D8%A7%D9%85%D9%87-%D9%87%D8%A7%DB%8C-%D8%A2%D9%86%D8%AF%D8%B1%D9%88%DB%8C%D8%AF/"> <amp-img src="https://exse.eyewated.com/pict/2f3ce55be96c3896-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%A7%D8%AC%D8%AA%D9%86%D8%A7%D8%A8-%D8%A7%D8%B2-%D9%87%D8%B1%D8%B2%D9%86%D8%A7%D9%85%D9%87-%D9%87%D8%A7%DB%8C-%D8%A2%D9%86%D8%AF%D8%B1%D9%88%DB%8C%D8%AF/">اجتناب از هرزنامه های آندروید</a></h3> <div class="amp-related-meta"> اندروید </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%87%D8%A7%DB%8C-%D8%AF%D8%A7%D8%AF%D9%87-at-t-%D8%AA%D9%85%D8%A7%D9%85-%D8%AC%D8%B2%D8%A6%DB%8C%D8%A7%D8%AA/"> <amp-img src="https://exse.eyewated.com/pict/8f5b889376573cdf-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%87%D8%A7%DB%8C-%D8%AF%D8%A7%D8%AF%D9%87-at-t-%D8%AA%D9%85%D8%A7%D9%85-%D8%AC%D8%B2%D8%A6%DB%8C%D8%A7%D8%AA/">برنامه های داده AT & T: تمام جزئیات</a></h3> <div class="amp-related-meta"> راهنماهای خرید </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/8-%D9%86%D9%88%D8%B9-%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D9%88%DB%8C%D8%AF%D8%A6%D9%88-%D9%85%D8%AD%D8%A8%D9%88%D8%A8-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AA%D9%85%D8%A7%D8%B4%D8%A7%DB%8C/"> <amp-img src="https://exse.eyewated.com/pict/37900a9e6a4834ed-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/8-%D9%86%D9%88%D8%B9-%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D9%88%DB%8C%D8%AF%D8%A6%D9%88-%D9%85%D8%AD%D8%A8%D9%88%D8%A8-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AA%D9%85%D8%A7%D8%B4%D8%A7%DB%8C/">8 نوع محتوای ویدئو محبوب برای تماشای آنلاین (و از کجا)</a></h3> <div class="amp-related-meta"> نرم افزار و نرم افزار </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%A7%D9%86%DA%A9%D8%A7%D8%B1-%D8%B3%D8%B1%D9%88%DB%8C%D8%B3-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/"> <amp-img src="https://exse.eyewated.com/pict/af2a7fd87bd6348d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%A7%D9%86%DA%A9%D8%A7%D8%B1-%D8%B3%D8%B1%D9%88%DB%8C%D8%B3-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/">انکار سرویس چیست؟</a></h3> <div class="amp-related-meta"> اینترنت و شبکه </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%DA%AF%D8%B1%D9%81%D8%AA%D9%86-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%A7%D8%B2-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D9%81%D8%B1%D8%AF%DB%8C-%D8%AF%D8%B1-%D9%85%DA%A9-%D8%B4%D9%85%D8%A7/"> <amp-img src="https://exse.eyewated.com/pict/0c1d5cbc5aa13826-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%DA%AF%D8%B1%D9%81%D8%AA%D9%86-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%A7%D8%B2-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D9%81%D8%B1%D8%AF%DB%8C-%D8%AF%D8%B1-%D9%85%DA%A9-%D8%B4%D9%85%D8%A7/">گرفتن تصاویر از عناصر فردی در مک شما</a></h3> <div class="amp-related-meta"> مکینتاش </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%A7%D8%B2-%DA%A9%D8%AC%D8%A7-%D8%A8%D9%87-%D8%AF%D9%86%D8%A8%D8%A7%D9%84-%D8%A2%D9%86%D9%84%D8%A7%DB%8C%D9%86-%D8%A8%D8%B1%D8%A7%DB%8C-%DA%86%D9%87-%DA%86%DB%8C%D8%B2%DB%8C-%D8%AF%D8%B1-netflix/"> <amp-img src="https://exse.eyewated.com/pict/75aa5476a9c73c2c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%A7%D8%B2-%DA%A9%D8%AC%D8%A7-%D8%A8%D9%87-%D8%AF%D9%86%D8%A8%D8%A7%D9%84-%D8%A2%D9%86%D9%84%D8%A7%DB%8C%D9%86-%D8%A8%D8%B1%D8%A7%DB%8C-%DA%86%D9%87-%DA%86%DB%8C%D8%B2%DB%8C-%D8%AF%D8%B1-netflix/">از کجا به دنبال آنلاین برای چه چیزی در Netflix جدید است</a></h3> <div class="amp-related-meta"> سینمای خانگی </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%AF%DB%8C%D9%88%D8%A7%D9%86%D9%87-%D9%BE%D8%A7%D8%AF%D8%B4%D8%A7%D9%87%DB%8C-%D8%B3%D8%AD%D8%B1-%D9%88-%D8%AC%D8%A7%D8%AF%D9%88-%D9%86%D9%82%D8%AF-%D9%88-%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C/"> <amp-img src="https://exse.eyewated.com/pict/861e0f61f5ce2f9f-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%AF%DB%8C%D9%88%D8%A7%D9%86%D9%87-%D9%BE%D8%A7%D8%AF%D8%B4%D8%A7%D9%87%DB%8C-%D8%B3%D8%AD%D8%B1-%D9%88-%D8%AC%D8%A7%D8%AF%D9%88-%D9%86%D9%82%D8%AF-%D9%88-%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C/">دیوانه پادشاهی سحر و جادو نقد و بررسی</a></h3> <div class="amp-related-meta"> بررسی محصولات </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87-%DA%AF%DB%8C%D8%B1%DB%8C-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A8%D9%87/"> <amp-img src="https://exse.eyewated.com/pict/ddaf8269a7d23378-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87-%DA%AF%DB%8C%D8%B1%DB%8C-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A8%D9%87/">راهنما برای اندازه گیری تصاویر برای به اشتراک گذاری آنلاین</a></h3> <div class="amp-related-meta"> نرم افزار </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%AF%D8%B3%D8%AA%D9%88%D8%B1-chmod-%D8%AF%D8%B1-%D9%84%DB%8C%D9%86%D9%88%DA%A9%D8%B3/"> <amp-img src="https://exse.eyewated.com/pict/fbed95f2cbbb2fd1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%AF%D8%B3%D8%AA%D9%88%D8%B1-chmod-%D8%AF%D8%B1-%D9%84%DB%8C%D9%86%D9%88%DA%A9%D8%B3/">دستور chmod در لینوکس</a></h3> <div class="amp-related-meta"> لینوکس </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%DB%8C%DA%A9-%D8%AA%D9%85%D8%A7%D8%B3-%D9%BE%D8%A7%D9%88%D8%B1%D9%BE%D9%88%DB%8C%D9%86%D8%AA-%D8%A8%D9%87-%DB%8C%DA%A9/"> <amp-img src="https://exse.eyewated.com/pict/f58286e05aff3668-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%DB%8C%DA%A9-%D8%AA%D9%85%D8%A7%D8%B3-%D9%BE%D8%A7%D9%88%D8%B1%D9%BE%D9%88%DB%8C%D9%86%D8%AA-%D8%A8%D9%87-%DB%8C%DA%A9/">اضافه کردن یک تماس پاورپوینت به یک اسلاید</a></h3> <div class="amp-related-meta"> نرم افزار </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/5-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-gps-%D8%A8%D8%B2%D8%B1%DA%AF-%D8%AF%D9%88%DA%86%D8%B1%D8%AE%D9%87-%D8%B3%D9%88%D8%A7%D8%B1%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A2%DB%8C-%D9%81%D9%88%D9%86/"> <amp-img src="https://exse.eyewated.com/pict/748cc65f68133293-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/5-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-gps-%D8%A8%D8%B2%D8%B1%DA%AF-%D8%AF%D9%88%DA%86%D8%B1%D8%AE%D9%87-%D8%B3%D9%88%D8%A7%D8%B1%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A2%DB%8C-%D9%81%D9%88%D9%86/">5 برنامه GPS بزرگ دوچرخه سواری برای آی فون</a></h3> <div class="amp-related-meta"> نرم افزار و نرم افزار </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%D9%86%D8%AD%D9%88%D9%87-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-command-prompt-%D8%AF%D8%B1-%D9%88%DB%8C%D9%86%D8%AF%D9%88%D8%B2/"> <amp-img src="https://exse.eyewated.com/pict/76f101c1ef6f360d-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%D9%86%D8%AD%D9%88%D9%87-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-command-prompt-%D8%AF%D8%B1-%D9%88%DB%8C%D9%86%D8%AF%D9%88%D8%B2/">نحوه استفاده از Command Prompt در ویندوز</a></h3> <div class="amp-related-meta"> پنجره ها </div> </div> </div> <div class="amp-related-content"> <a href="https://fa.eyewated.com/%DA%86%DA%AF%D9%88%D9%86%D9%87-%DB%8C%DA%A9-%D8%AA%D9%82%D9%88%DB%8C%D9%85-%D8%B1%D8%A7-%D8%AF%D8%B1-%D8%AA%D9%82%D9%88%DB%8C%D9%85-google-%D8%A8%D9%87-%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%DA%A9/"> <amp-img src="https://exse.eyewated.com/pict/e6682750dbd63532-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://fa.eyewated.com/%DA%86%DA%AF%D9%88%D9%86%D9%87-%DB%8C%DA%A9-%D8%AA%D9%82%D9%88%DB%8C%D9%85-%D8%B1%D8%A7-%D8%AF%D8%B1-%D8%AA%D9%82%D9%88%DB%8C%D9%85-google-%D8%A8%D9%87-%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%DA%A9/">چگونه یک تقویم را در تقویم Google به اشتراک بگذارید</a></h3> <div class="amp-related-meta"> ایمیل و پیام </div> </div> </div> </div></article> <footer class="amp-wp-footer"> <div class="amp-wp-footer-inner"> <a href="#" class="back-to-top">Back to top</a> <p class="copyright"> © 2024 fa.eyewated.com </p> <div class="amp-wp-social-footer"> <a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a> </div> </div> </footer> <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/"> </amp-pixel> </div> </body> </html> <!-- Dynamic page generated in 1.281 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-03 22:01:08 --> <!-- 0.001 -->