كيفية بناء تخطيط 3-عمود في المغلق

يتطلب تخطيط CSS أن تفكر في تصميم موقعك ككل ، ثم تأخذ القطع وتجمعها معًا. تعرّف على كيفية إنشاء تخطيط بسيط مكون من 3 أعمدة باستخدام CSS.

01 من 09

ارسم تخطيطك

ي كيرنين

يمكنك رسم تخطيطك على الورق أو في برنامج رسومات . إذا كان لديك بالفعل إطار سلكي أو تصميم أكثر شمولاً في الاعتبار ، فقم بتبسيطه إلى المربعات الأساسية التي تشكل الموقع. يحتوي هذا التصميم المصاحب لهذه المقالة على ثلاثة أعمدة في منطقة المحتوى الرئيسية ، بالإضافة إلى رأس وتذييل. إذا نظرت عن كثب ، يمكنك أن ترى أن الأعمدة الثلاثة ليست متساوية في العرض.

بعد رسم تخطيطك ، يمكنك البدء في التفكير في الأبعاد. هذا التصميم المثال سيكون له الأبعاد الأساسية التالية:

02 من 09

اكتب HTML / CSS أساسيًا وقم بإنشاء عنصر حاوية

نظرًا لأن هذه الصفحة ستكون مستند HTML صالح ، فابدأ باستخدام حاوية HTML فارغة

Untitled Document </ title> </ head> <body> </ body> </ html> <p style=";text-align:right;direction:rtl"> أضف في أنماط CSS الأساسية إلى <a href="https://ar.eyewated.com/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-css-%D8%A5%D9%84%D9%89-zero-%D8%AE%D8%A7%D8%B1%D8%AC-%D8%A7%D9%84%D9%87%D9%88%D8%A7%D9%85%D8%B4-%D9%88%D8%A7%D9%84%D8%AD%D8%AF%D9%88%D8%AF/">صفر خارج حدود الصفحة والحدود وحزم paddings</a> . في حين أن هناك <a href="https://ar.eyewated.com/%D8%AA%D8%B9%D8%B1%D9%81-%D8%B9%D9%84%D9%89-%D8%A3%D9%88%D8%B1%D8%A7%D9%82-%D8%A7%D9%84%D8%A3%D9%86%D9%85%D8%A7%D8%B7-%D8%A7%D9%84%D9%85%D8%AA%D8%AA%D8%A7%D9%84%D9%8A%D8%A9-%D9%85%D9%86/">أنماط CSS قياسية</a> أخرى للمستندات الجديدة ، فإن هذه الأنماط هي الحد الأدنى الذي تحتاج إليه للحصول على تخطيط نظيف. إضافتها إلى رأس المستند الخاص بك: </p> <style type = "text / css"> html، body {margin: 0px؛ الحشو: 0px؛ الحد: 0 بكسل ؛ } </ style> <p style=";text-align:right;direction:rtl"> لبدء بناء التخطيط ، ضع عنصر حاوية. يحدث أحيانًا أنه يمكنك التخلص من الحاوية لاحقًا ، ولكن بالنسبة إلى معظم التخطيطات ذات العرض الثابت ، فإن جعل عنصر الحاوية يسهل عملية الإدارة عبر متصفحات الويب المختلفة. لذلك في الجسم ضع هذا: </p> <div id = "container"> </ div> <p style=";text-align:right;direction:rtl"> وفي ورقة أنماط CSS ، ضع: </p> #حاوية { } <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؛ / * أعلى اليمين السفلي الأيسر * / الحشو: 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"> استخدم علامة Headline للعنوان </h3><p style=";text-align:right;direction:rtl"> تعتمد كيفية تحديد نمط صف الرأس كثيرًا على ما هو فيه. إذا كان صف الرأس سيكون مجرد رسم شعار وعنوان ، فإن استخدام علامة عنوان (<h1>) يكون أكثر منطقية من استخدام <div>. يمكنك تصميم العنوان بنفس طريقة تصميم div ، وتجنب العلامات الدخيلة. </p> <p style=";text-align:right;direction:rtl"> ينتقل HTML لصف الرأس إلى أعلى الحاوية ويظهر على النحو التالي: </p> <h1> صف الرأس الخاص بي </ h1> <p style=";text-align:right;direction:rtl"> بعد ذلك ، لتعيين الأنماط عليه ، تمت إضافة حد أحمر على الجزء السفلي حتى تتمكن من رؤية مكانه ، وتم تحديد الهوامش والحشو من الصفر ، والعرض تم ضبطه على 100٪ والارتفاع إلى 150 بكسل: </p> #container h1 {margin: 0؛ الحشو: 0؛ العرض: 100 ٪. الارتفاع: 150 بكسل ؛ تعويم: اليسار؛ الحد السفلي: # c00 solid 3px؛ } <p style=";text-align:right;direction:rtl"> لا تنس أن تطفو هذا العنصر مع التعويم: left؛ خاصية. المفتاح لكتابة تخطيطات CSS هو تعويم كل شيء - حتى الأشياء التي تكون بنفس عرض الحاوية. بهذه الطريقة ، ستعرف دائماً أين ستقع العناصر على الصفحة. </p> <p style=";text-align:right;direction:rtl"> قام <a href="https://ar.eyewated.com/%D9%85%D8%A7-%D9%87%D9%88-%D9%85%D8%AD%D8%AF%D8%AF-%D8%A7%D9%84%D8%B3%D9%84%D9%8A%D9%84-css%D8%9F/">محدد</a> منحدرات <a href="https://ar.eyewated.com/%D9%85%D8%A7-%D9%87%D9%88-%D9%85%D8%AD%D8%AF%D8%AF-%D8%A7%D9%84%D8%B3%D9%84%D9%8A%D9%84-css%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 minim veniam، lorem ipsum dolor sit amet. في reprehenderit في volumptate quis nostrud exercitation eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. </ p> </ div> <div id = "col2outer"> <p> Ut enim ad minim veniam، sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. </ p> </ div> <p style=";text-align:right;direction:rtl"> نص العنصر النائب في الأعمدة يجعلها أكثر وضوحًا عند الاختبار. يشبه CSS هذا: </p> #container # col1 {width: 250px؛ تعويم: اليسار؛ } #container # col2outer {width: 610px؛ تعويم: يمين الهامش: 0؛ الحشو: 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 divs داخل عمود الحاوية في الخطوة الأخيرة. يبدو HTML كما يلي: </p> <div id = "col2outer"> <div id = "col2mid"> <p> Ut enim ad minim veniam، sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. </ p> </ div> <div id = "col2side"> <p> Nam libero tempore، quia voluptas sit aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam، magnam aliquam quaerat voluptatem. Itaque earum ricum hic tenetur a sapiente delectus، sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore. </ p> </ div> </ div> <p style=";text-align:right;direction:rtl"> وتبدو CSS كما يلي: </p> # col2outer # col2mid {width: 300px؛ تعويم: اليسار؛ } # col2outer # col2side {width: 300px؛ تعويم: يمين } <p style=";text-align:right;direction:rtl"> نظرًا لأن العلبتين العريضتين بحجم 300 بكسل داخل مربع عريض 610 بكسل ، سيكون هناك مجددًا ميزاب 10 بكسل بينهما. </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"> والآن بعد أن تم تصميم بقية الصفحة ، يمكنك إضافتها في التذييل. استخدم div آخر بمعرف "تذييل" ، وأضف محتوى حتى تتمكن من رؤيته. يمكنك أيضًا إضافة حد في الجزء العلوي ، حتى تعرف مكانه. </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 {float: left؛ العرض: 870 بكسل ؛ الحد الأعلى: # 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-Type "content =" text / html؛ charset = utf-8 "/> <title> Untitled Document </ title> <style type = "text / css"> html، body {margin: 0px؛ الحشو: 0px؛ الحد: 0 بكسل ؛ } #container {width: 870px؛ الهامش: 0 0 0 20px؛ / * أعلى اليمين السفلي الأيسر * / الحشو: 0؛ لون الخلفية: #fff؛ } #container h1 {margin: 0؛ الحشو: 0؛ العرض: 100 ٪. الارتفاع: 150 بكسل ؛ تعويم: اليسار؛ الحد السفلي: # c00 solid 3px؛ } #container # col1 {width: 250px؛ تعويم: اليسار؛ } #container # col2outer {width: 610px؛ تعويم: يمين الهامش: 0؛ الحشو: 0؛ } # col2outer # col2mid {width: 300px؛ تعويم: اليسار؛ } # col2outer # col2side {width: 300px؛ تعويم: يمين } #container #footer {float: left؛ العرض: 870 بكسل ؛ الحد الأعلى: # c00 solid 3px؛ } </ style> </ head> <body> <div id = "container"> <h1> صف الرأس الخاص بي </ h1> <div id = "col1"> <p> ضع علامة تبويب على السلعة التالية. </ p> </ div> <div id = "col2outer"> <div id = "col2mid"> <p> Ut enim ad minim veniam. </ p> </ div> <div id = "col2side"> <p> Nam libero tempore. </ p> </ div> </ div> <div id = "footer"> <p> حقوق الطبع والنشر © 2008 </ p> </ div> </ div> </ body> </ html> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%81%D9%87%D9%85-%D8%AE%D8%A7%D8%B5%D9%8A%D8%A9-%D9%85%D8%B3%D8%AD-css/"> <amp-img src="https://exse.eyewated.com/pict/61ccce8c56663422-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%81%D9%87%D9%85-%D8%AE%D8%A7%D8%B5%D9%8A%D8%A9-%D9%85%D8%B3%D8%AD-css/">فهم خاصية مسح CSS</a></h3> <div class="amp-related-meta"> تصميم مواقع الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A8%D9%86%D8%A7%D8%A1-%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7-3-%D8%B9%D9%85%D9%88%D8%AF-%D9%81%D9%8A-%D8%A7%D9%84%D9%85%D8%BA%D9%84%D9%82/"> <amp-img src="https://exse.eyewated.com/pict/4b2ea51168c33485-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A8%D9%86%D8%A7%D8%A1-%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7-3-%D8%B9%D9%85%D9%88%D8%AF-%D9%81%D9%8A-%D8%A7%D9%84%D9%85%D8%BA%D9%84%D9%82/">كيفية بناء تخطيط 3-عمود في المغلق</a></h3> <div class="amp-related-meta"> تصميم مواقع الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81-%D8%AA%D8%B5%D9%85%D9%85-%D8%A7%D9%84%D8%B1%D9%88%D8%A7%D8%A8%D8%B7-%D9%85%D8%B9-%D8%A7%D9%84%D9%85%D8%BA%D9%84%D9%82/"> <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://ar.eyewated.com/%D9%83%D9%8A%D9%81-%D8%AA%D8%B5%D9%85%D9%85-%D8%A7%D9%84%D8%B1%D9%88%D8%A7%D8%A8%D8%B7-%D9%85%D8%B9-%D8%A7%D9%84%D9%85%D8%BA%D9%84%D9%82/">كيف تصمم الروابط مع المغلق</a></h3> <div class="amp-related-meta"> تصميم مواقع الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D8%A3%D8%B4%D9%83%D8%A7%D9%84-%D9%86%D9%85%D8%B7-%D9%85%D8%B9-%D8%A7%D9%84%D9%85%D8%BA%D9%84%D9%82/"> <amp-img src="https://exse.eyewated.com/pict/0320e721afe934a1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%A3%D8%B4%D9%83%D8%A7%D9%84-%D9%86%D9%85%D8%B7-%D9%85%D8%B9-%D8%A7%D9%84%D9%85%D8%BA%D9%84%D9%82/">أشكال نمط مع المغلق</a></h3> <div class="amp-related-meta"> تصميم مواقع الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%85%D8%A7-%D9%87%D9%8A-%D8%A7%D9%84%D9%81%D8%A7%D8%B5%D9%84%D8%A9-%D9%81%D9%8A-%D9%85%D8%AD%D8%AF%D8%AF%D8%A7%D8%AA-css%D8%9F/"> <amp-img src="https://exse.eyewated.com/pict/2fec7cdccd2f38f7-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%85%D8%A7-%D9%87%D9%8A-%D8%A7%D9%84%D9%81%D8%A7%D8%B5%D9%84%D8%A9-%D9%81%D9%8A-%D9%85%D8%AD%D8%AF%D8%AF%D8%A7%D8%AA-css%D8%9F/">ما هي الفاصلة في محددات CSS؟</a></h3> <div class="amp-related-meta"> تصميم مواقع الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%81%D9%87%D9%85-css-float/"> <amp-img src="https://exse.eyewated.com/pict/26ae6d06d2733294-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%81%D9%87%D9%85-css-float/">فهم CSS Float</a></h3> <div class="amp-related-meta"> تصميم مواقع الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/css-%D8%A3%D9%86%D9%85%D8%A7%D8%B7-%D8%A7%D9%84%D9%85%D8%AE%D8%B7%D8%B7-%D8%A7%D9%84%D8%AA%D9%81%D8%B5%D9%8A%D9%84%D9%8A/"> <amp-img src="https://exse.eyewated.com/pict/b99552b45c483465-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/css-%D8%A3%D9%86%D9%85%D8%A7%D8%B7-%D8%A7%D9%84%D9%85%D8%AE%D8%B7%D8%B7-%D8%A7%D9%84%D8%AA%D9%81%D8%B5%D9%8A%D9%84%D9%8A/">CSS أنماط المخطط التفصيلي</a></h3> <div class="amp-related-meta"> تصميم مواقع الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%B5%D9%81%D8%AD%D8%A9-%D9%88%D9%8A%D8%A8-%D8%A7%D9%84%D9%85%D9%81%D9%83%D8%B1%D8%A9-%D8%A7%D9%84%D8%AA%D9%8A-%D8%AA%D9%85-%D8%A5%D9%86%D8%B4%D8%A7%D8%A4%D9%87%D8%A7/"> <amp-img src="https://exse.eyewated.com/pict/4b7ab57836bf3365-120x86.gif" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%B5%D9%81%D8%AD%D8%A9-%D9%88%D9%8A%D8%A8-%D8%A7%D9%84%D9%85%D9%81%D9%83%D8%B1%D8%A9-%D8%A7%D9%84%D8%AA%D9%8A-%D8%AA%D9%85-%D8%A5%D9%86%D8%B4%D8%A7%D8%A4%D9%87%D8%A7/">تصميم صفحة ويب المفكرة التي تم إنشاؤها باستخدام CSS</a></h3> <div class="amp-related-meta"> تصميم مواقع الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D8%AF%D8%B1%D8%A7%D8%AC-%D8%AA%D8%B9%D9%84%D9%8A%D9%82-css/"> <amp-img src="https://exse.eyewated.com/pict/eb475c938ddb317f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D8%AF%D8%B1%D8%A7%D8%AC-%D8%AA%D8%B9%D9%84%D9%8A%D9%82-css/">كيفية إدراج تعليق CSS</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"> <a href="https://ar.eyewated.com/%D8%A7%D9%84%D8%AA%D8%BA%D8%B1%D9%8A%D8%AF-%D8%A7%D9%84%D8%AC%D8%AF%D9%88%D9%84-%D8%A7%D9%84%D8%B2%D9%85%D9%86%D9%8A-%D8%AA%D8%B9%D9%84%D9%8A%D9%85%D9%8A/"> <amp-img src="https://exse.eyewated.com/pict/342b63dfce6230f7-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%A7%D9%84%D8%AA%D8%BA%D8%B1%D9%8A%D8%AF-%D8%A7%D9%84%D8%AC%D8%AF%D9%88%D9%84-%D8%A7%D9%84%D8%B2%D9%85%D9%86%D9%8A-%D8%AA%D8%B9%D9%84%D9%8A%D9%85%D9%8A/">التغريد الجدول الزمني تعليمي</a></h3> <div class="amp-related-meta"> وسائل الاعلام الاجتماعية </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D8%AC%D8%B1%D8%A7%D9%86%D8%AF-%D8%AB%D9%8A%D9%81%D8%AA-%D8%A3%D9%88%D8%AA%D9%88-%D9%84%D8%B9%D8%A8%D8%A9-%D9%83%D9%85%D8%A8%D9%8A%D9%88%D8%AA%D8%B1-%D8%A7%D9%84%D8%AD%D8%B1%D8%A9/"> <amp-img src="https://exse.eyewated.com/pict/aea9bff50c002ff2-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%AC%D8%B1%D8%A7%D9%86%D8%AF-%D8%AB%D9%8A%D9%81%D8%AA-%D8%A3%D9%88%D8%AA%D9%88-%D9%84%D8%B9%D8%A8%D8%A9-%D9%83%D9%85%D8%A8%D9%8A%D9%88%D8%AA%D8%B1-%D8%A7%D9%84%D8%AD%D8%B1%D8%A9/">جراند ثيفت أوتو - لعبة كمبيوتر الحرة</a></h3> <div class="amp-related-meta"> الألعاب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-%D8%B9%D9%86-%D9%85%D9%81%D8%A7%D8%AA%D9%8A%D8%AD-%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-microsoft-office/"> <amp-img src="https://exse.eyewated.com/pict/23dc789512b03150-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-%D8%B9%D9%86-%D9%85%D9%81%D8%A7%D8%AA%D9%8A%D8%AD-%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-microsoft-office/">كيفية البحث عن مفاتيح منتجات Microsoft Office</a></h3> <div class="amp-related-meta"> شبابيك </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%82%D8%A7%D8%B1%D8%A6-%D8%A7%D9%84%D9%83%D8%AA%D8%A7%D8%A8-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-%D9%85%D9%86-google-%D9%84%D9%86%D8%B8%D8%A7%D9%85-android/"> <amp-img src="https://exse.eyewated.com/pict/5e9b599c771f33b4-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%82%D8%A7%D8%B1%D8%A6-%D8%A7%D9%84%D9%83%D8%AA%D8%A7%D8%A8-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-%D9%85%D9%86-google-%D9%84%D9%86%D8%B8%D8%A7%D9%85-android/">قارئ الكتاب الإلكتروني من Google لنظام Android</a></h3> <div class="amp-related-meta"> البرامج والتطبيقات </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D9%82%D9%86%D8%A7%D8%B9-%D9%86%D8%B5-%D9%81%D9%8A-adobe-illustrator-cc/"> <amp-img src="https://exse.eyewated.com/pict/53583d2292052fc4-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D9%82%D9%86%D8%A7%D8%B9-%D9%86%D8%B5-%D9%81%D9%8A-adobe-illustrator-cc/">كيفية إنشاء قناع نص في Adobe Illustrator CC</a></h3> <div class="amp-related-meta"> البرمجيات </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%81%D9%87%D9%85-%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%AA%D8%B9%D9%8A%D9%8A%D9%86-%D9%85%D8%AD%D8%B1%D9%83-%D8%A3%D9%82%D8%B1%D8%A7%D8%B5-%D8%B4%D8%A8%D9%83%D8%A9-%D9%81%D9%8A-%D9%86%D8%B8%D8%A7%D9%85/"> <amp-img src="https://exse.eyewated.com/pict/4c2f84d99b41380c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%81%D9%87%D9%85-%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%AA%D8%B9%D9%8A%D9%8A%D9%86-%D9%85%D8%AD%D8%B1%D9%83-%D8%A3%D9%82%D8%B1%D8%A7%D8%B5-%D8%B4%D8%A8%D9%83%D8%A9-%D9%81%D9%8A-%D9%86%D8%B8%D8%A7%D9%85/">فهم كيفية تعيين محرك أقراص شبكة في نظام التشغيل Windows XP</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://ar.eyewated.com/%D8%A3%D9%81%D8%B6%D9%84-%D8%A3%D9%84%D8%B9%D8%A7%D8%A8-sim-%D9%85%D8%AC%D8%A7%D9%86%D9%8A%D8%A9-%D9%8A%D9%85%D9%83%D9%86%D9%83-%D8%AA%D9%86%D8%B2%D9%8A%D9%84%D9%87%D8%A7/"> <amp-img src="https://exse.eyewated.com/pict/45c77d8d83be3a4e-120x86.gif" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%A3%D9%81%D8%B6%D9%84-%D8%A3%D9%84%D8%B9%D8%A7%D8%A8-sim-%D9%85%D8%AC%D8%A7%D9%86%D9%8A%D8%A9-%D9%8A%D9%85%D9%83%D9%86%D9%83-%D8%AA%D9%86%D8%B2%D9%8A%D9%84%D9%87%D8%A7/">أفضل ألعاب Sim مجانية يمكنك تنزيلها</a></h3> <div class="amp-related-meta"> الألعاب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%84%D8%AC%D9%86%D8%A9-%D8%AA%D9%82%D8%B5%D9%8A-%D8%A7%D9%84%D8%AD%D9%82%D8%A7%D8%A6%D9%82-%D8%AD%D9%88%D9%84-%D8%AA%D9%84%D9%81%D8%B2%D9%8A%D9%88%D9%86%D8%A7%D8%AA-led-%D8%AA%D8%B3%D9%85%D9%89/"> <amp-img src="https://exse.eyewated.com/pict/c1062f9f5b88390f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%84%D8%AC%D9%86%D8%A9-%D8%AA%D9%82%D8%B5%D9%8A-%D8%A7%D9%84%D8%AD%D9%82%D8%A7%D8%A6%D9%82-%D8%AD%D9%88%D9%84-%D8%AA%D9%84%D9%81%D8%B2%D9%8A%D9%88%D9%86%D8%A7%D8%AA-led-%D8%AA%D8%B3%D9%85%D9%89/">لجنة تقصي الحقائق حول تلفزيونات LED تسمى</a></h3> <div class="amp-related-meta"> مسرح منزلي </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D8%A3%D9%8A%D9%87%D9%85%D8%A7-%D8%A3%D9%81%D8%B6%D9%84-%D9%81%D9%84%D8%A7%D8%B4-%D8%A3%D9%88-%D8%B5%D9%88%D8%B1-gif-%D9%85%D8%AA%D8%AD%D8%B1%D9%83%D8%A9%D8%9F/"> <amp-img src="https://exse.eyewated.com/pict/1bd64de62ff93513-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%A3%D9%8A%D9%87%D9%85%D8%A7-%D8%A3%D9%81%D8%B6%D9%84-%D9%81%D9%84%D8%A7%D8%B4-%D8%A3%D9%88-%D8%B5%D9%88%D8%B1-gif-%D9%85%D8%AA%D8%AD%D8%B1%D9%83%D8%A9%D8%9F/">أيهما أفضل: فلاش أو صور GIF متحركة؟</a></h3> <div class="amp-related-meta"> البرمجيات </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D8%A8%D9%86%D8%A7%D8%A1-%D9%82%D9%88%D8%A7%D8%B9%D8%AF-%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA-%D9%84%D9%85%D8%AA%D8%A7%D8%AC%D8%B1-%D8%A7%D9%84%D8%AA%D8%AC%D8%B2%D8%A6%D8%A9/"> <amp-img src="https://exse.eyewated.com/pict/696913468f3d41e2-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%A8%D9%86%D8%A7%D8%A1-%D9%82%D9%88%D8%A7%D8%B9%D8%AF-%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA-%D9%84%D9%85%D8%AA%D8%A7%D8%AC%D8%B1-%D8%A7%D9%84%D8%AA%D8%AC%D8%B2%D8%A6%D8%A9/">بناء قواعد بيانات لمتاجر التجزئة</a></h3> <div class="amp-related-meta"> البرمجيات </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/the-sims-3-cheats-pc/"> <amp-img src="https://exse.eyewated.com/pict/4c7c8c4a7abb3223-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/the-sims-3-cheats-pc/">The Sims 3 Cheats (PC)</a></h3> <div class="amp-related-meta"> الألعاب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%85%D8%A7-%D9%87%D9%88-%D9%85%D9%84%D9%81-dat%D8%9F/"> <amp-img src="https://exse.eyewated.com/pict/4a31f63b478031cf-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%85%D8%A7-%D9%87%D9%88-%D9%85%D9%84%D9%81-dat%D8%9F/">ما هو ملف DAT؟</a></h3> <div class="amp-related-meta"> شبابيك </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%85%D8%A7-%D9%87%D9%88-%D9%85%D9%84%D9%81-fat%D8%9F/"> <amp-img src="https://exse.eyewated.com/pict/36e228432dc430ea-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%85%D8%A7-%D9%87%D9%88-%D9%85%D9%84%D9%81-fat%D8%9F/">ما هو ملف FAT؟</a></h3> <div class="amp-related-meta"> شبابيك </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%B6%D8%B9-ipod-disk-%D9%84%D8%AA%D8%AE%D8%B2%D9%8A%D9%86-%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA-%D9%88%D8%A7%D9%84%D9%86%D8%B3%D8%AE/"> <amp-img src="https://exse.eyewated.com/pict/81dc5fd958fa340b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%B6%D8%B9-ipod-disk-%D9%84%D8%AA%D8%AE%D8%B2%D9%8A%D9%86-%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA-%D9%88%D8%A7%D9%84%D9%86%D8%B3%D8%AE/">استخدام وضع iPod Disk لتخزين الملفات والنسخ الاحتياطي</a></h3> <div class="amp-related-meta"> IPhone و iPod </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D8%A7%D8%B3%D8%AA%D9%85%D8%B9-%D8%A5%D9%84%D9%89-%D8%A3%D8%BA%D8%A7%D9%86%D9%8A-itunes-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%A7%D9%84%D8%A8%D9%84%D9%88%D8%AA%D9%88%D8%AB/"> <amp-img src="https://exse.eyewated.com/pict/447e60d4df1141df-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%A7%D8%B3%D8%AA%D9%85%D8%B9-%D8%A5%D9%84%D9%89-%D8%A3%D8%BA%D8%A7%D9%86%D9%8A-itunes-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%A7%D9%84%D8%A8%D9%84%D9%88%D8%AA%D9%88%D8%AB/">استمع إلى أغاني iTunes باستخدام البلوتوث على iPhone</a></h3> <div class="amp-related-meta"> البحث في الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/skylanders-%D9%85%D8%BA%D8%A7%D9%85%D8%B1%D8%A7%D8%AA-%D8%B3%D8%A8%D9%8A%D8%B1%D9%88-%D9%84%D8%B9%D8%A8%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%B9%D8%B1%D8%A7%D8%B6/"> <amp-img src="https://exse.eyewated.com/pict/6180b734aa4f3846-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/skylanders-%D9%85%D8%BA%D8%A7%D9%85%D8%B1%D8%A7%D8%AA-%D8%B3%D8%A8%D9%8A%D8%B1%D9%88-%D9%84%D8%B9%D8%A8%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%B9%D8%B1%D8%A7%D8%B6/">Skylanders: مغامرات سبيرو - لعبة الاستعراض</a></h3> <div class="amp-related-meta"> تعليقات المنتج </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA-%D9%84%D8%A3%D8%AC%D9%87%D8%B2%D8%A9-windows-10-mobile-%D8%AF%D9%84%D9%8A%D9%84-%D8%B3%D8%B1%D9%8A%D8%B9/"> <amp-img src="https://exse.eyewated.com/pict/fc994e4a550631fe-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA-%D9%84%D8%A3%D8%AC%D9%87%D8%B2%D8%A9-windows-10-mobile-%D8%AF%D9%84%D9%8A%D9%84-%D8%B3%D8%B1%D9%8A%D8%B9/">تطوير تطبيقات لأجهزة Windows 10 Mobile: دليل سريع</a></h3> <div class="amp-related-meta"> البحث في الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D9%85%D8%B3%D8%A7%D8%A8%D9%82%D8%A9-%D8%B1%D8%B3%D9%88%D9%85-%D8%AA%D8%AC%D9%88%D8%A7%D9%84-%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA-iphone/"> <amp-img src="https://exse.eyewated.com/pict/82001ee303af38cd-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D9%85%D8%B3%D8%A7%D8%A8%D9%82%D8%A9-%D8%B1%D8%B3%D9%88%D9%85-%D8%AA%D8%AC%D9%88%D8%A7%D9%84-%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA-iphone/">كيفية مسابقة رسوم تجوال بيانات IPhone</a></h3> <div class="amp-related-meta"> IPhone و iPod </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%AD%D9%81%D8%B8-%D9%82%D8%A7%D9%84%D8%A8-%D8%A7%D9%84%D8%A8%D8%B1%D9%8A%D8%AF-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-%D9%81%D9%8A-godaddy/"> <amp-img src="https://exse.eyewated.com/pict/1382751950514147-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%AD%D9%81%D8%B8-%D9%82%D8%A7%D9%84%D8%A8-%D8%A7%D9%84%D8%A8%D8%B1%D9%8A%D8%AF-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-%D9%81%D9%8A-godaddy/">كيفية حفظ قالب البريد الإلكتروني في GoDaddy Webmail</a></h3> <div class="amp-related-meta"> البريد الإلكتروني والمراسلة </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/xbox-one-%D9%88%D8%AD%D8%AF%D8%A9-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%88-kinect/"> <amp-img src="https://exse.eyewated.com/pict/82a989c1b35a3b3e-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/xbox-one-%D9%88%D8%AD%D8%AF%D8%A9-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%88-kinect/">Xbox One: وحدة التحكم و Kinect</a></h3> <div class="amp-related-meta"> الألعاب </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%A7%D9%84%D8%B1%D9%88%D8%A7%D8%A8%D8%B7-%D9%84%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D9%82%D9%88%D8%A7%D8%A6%D9%85-%D8%A7%D9%84%D9%85%D9%84%D8%A7%D8%AD%D8%A9/">استخدام الروابط لإنشاء قوائم الملاحة العمودية</a></h3> <div class="amp-related-meta"> تصميم مواقع الويب </div> </div> </div> <div class="amp-related-content"> <a href="https://ar.eyewated.com/5-%D8%A8%D8%A7%D8%B1%D8%AF-%D8%A7%D9%84%D8%A3%D8%B0%D9%86-%D8%AA%D8%AD%D8%AA-30-%D8%AF%D9%88%D9%84%D8%A7%D8%B1%D8%A7/"> <amp-img src="https://exse.eyewated.com/pict/3a270b00fc673285-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://ar.eyewated.com/5-%D8%A8%D8%A7%D8%B1%D8%AF-%D8%A7%D9%84%D8%A3%D8%B0%D9%86-%D8%AA%D8%AD%D8%AA-30-%D8%AF%D9%88%D9%84%D8%A7%D8%B1%D8%A7/">5 بارد الأذن تحت 30 دولارا</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 ar.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.235 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-03 21:31:28 --> <!-- 0.003 -->