تنسيق HTML5 و CSS3 سريع الاستجابة. قم بإنشاء صفحة سريعة الاستجابة في html5 و css3 للمبتدئين في ست خطوات! تنسيق سريع الاستجابة في html5 و css3

من المؤلف: منذ أن بدأت المقالات في الظهور على الويب توضح الخصائص الجديدة لـ HTML5 و CSS3 ، كانت لدي فكرة إنشاء تخطيط موقع بدون صور. مسلحًا بالتحسينات التي تم إجراؤها على HTML5 و CSS3 (على المواصفات السابقة الموقرة) ، ليس من الصعب جدًا كتابة موقع ويب لائق المظهر لا يحتاج إلى الاعتماد على الصور في ترميزه.

هذه صورة للموقع الذي سنقوم بترميزه في HTML5 و CSS3:

قبل أن نبدأ الخطوات العملية ، أنصحك بمشاهدة النتيجة التجريبية للعمل.

يمثل عنصر الرأس مجموعة تمهيدية أو أدوات مساعدة على التنقل.

بعد توصياتهم ، سيحتوي عنصر الرأس على شعارنا وعنواننا الفرعي والتنقل الرئيسي. عندما ندخل عنصر رأس ، رأس ، لدينا تفاصيل ترميز تحتوي على جميع أجزاء الصفحة التي نفكر فيها بشكل بديهي على أنها رأس. (أو كل تفاصيل الصفحة التي سيتم تضمينها في div بمعرف العنوان.) يمكن استخدام عنصر الرأس أكثر من مرة في الصفحة ، وسنستخدمه مرة أخرى داخل عناصر المقالة التي ستحتوي على مقدمة المنشورات.

عنصر Hgroup

أولاً داخل عنصر العنوان توجد علامة جديدة أخرى ، hgroup. سنستخدمه لعرض شعار موقعنا والعنوان الفرعي ، على التوالي ، في علامتي h1 و h2.

يُستخدم عنصر hgroup لتجميع مجموعة من عناصر h1-h6 عندما يحتوي العنوان على مستويات متعددة ، مثل العناوين الفرعية أو العناوين البديلة أو العناوين الفرعية.

قد يبدو عنصر hgroup وكأنه مبالغة ما لم تقم بلف العناوين في div كالمعتاد بحيث يكون للعنوان أو الاسم (الأسماء) الفرعية خلفية أو نمط عادي. ومع ذلك ، تلعب hgroup دورًا مهمًا في مخطط المستند. تقوم خوارزمية المخطط بفحص صفحتك وتمرير بنية الرأس. تحقق من رسم تخطيطي لعملك باستخدام أداة Outliner. عندما تواجه خوارزمية المخطط عنصر hgroup ، فإنها ستتجاهل كل شيء باستثناء عنوان المستوى الأعلى (عادةً h1).

الآن لدينا مشكلة: خوارزمية الدائرة ليست كاملة أو خالية من العيوب. على سبيل المثال ، العنصر التالي الذي سنناقشه هو عنصر التنقل ، وعلامة الترميز تشير إلى "قسم بدون عنوان". طُلب من مطوري العلامات تغيير خوارزمية المخطط لتمثيل عنصر التنقل كـ "تنقل". على أي حال ، يوفر لك عنصر hgroup طريقة لتجميع عناوينها وبالتالي تنظيمها هيكليًا ودلالة.

عنصر التنقل

ننتقل إلى عنصر HTML5 التالي - nav. في التنقل ، سنقوم بتضمين التنقل الرئيسي للموقع ، ملفوفًا في قائمة غير مرتبة.

يمثل عنصر التنقل قسمًا من الصفحة يرتبط بصفحات أو مناطق أخرى داخل الصفحة: منطقة بها روابط تنقل.

يعد استخدام التنقل لإنشاء التنقل الرئيسي لموقعك أمرًا مفروغًا منه إلى حد ما ، ولكن الظروف تقتضي وجود المزيد من مناطق الروابط على موقعك ؛ السؤال هو أي منهم يجب أن تلتف بعلامة التنقل. فيما يلي بعض حالات الاستخدام التي أعتقد أنها قد تنجح:

المنشورات ذات الصلة.

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

عنصر المادة

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

XHTML

2010

16 اب

عينة بوست 1

38

Curabitur ut congue hac، diam turpis [...]

2010 16 أبريل عينة بوست 1 38 Curabitur ut congue hac، diam turpis [...]

هنا تعريف W3C لعنصر المقال:

يمثل عنصر المقالة تكوينًا معياريًا [...] في مستند ، لذلك يُقصد به أن يصبح قائمًا بذاته أو يمكن إعادة استخدامه ، على سبيل المثال ، في الترويج (نشر المحتوى في وقت واحد على مواقع ويب متعددة).

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

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

عنصر التذييل

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

يمثل عنصر التذييل تذييل المقطع الذي يتم الوصول إليه. عادةً ما يحتوي التذييل على معلومات حول قسمه ، مثل الإسناد وروابط إلى المستندات ذات الصلة وتاريخ حقوق النشر والمزيد.

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

يحتوي التذييل المشترك على ثلاثة عناصر قسم وإشعار حقوق النشر. كلا استخدامات عنصر التذييل قانوني وتوصية W3C.

عنصر القسم

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

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

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

هناك سؤال آخر من المفيد طرحه من أجل إثبات صحة استخدام عنصر القسم وهو: هل تضيفه للأنماط فقط؟ يمكنك إضافته ببساطة لأنك تريد تمييز هذا القسم باستخدام JavaScript ، أو لأنك تريد تطبيق النمط العادي عليه ويجب عليك استخدام عنصر div بدلاً من ذلك.

سيكون تغليف عناصر المقالة الثلاثة لصفحة العرض التوضيحي الخاصة بنا في علامة القسم مبررًا إذا تضمن القسم عنوانًا مثل "منشورات المدونة الحديثة". سيكون من المنطقي. وإلا فإن العلامة التي توجد بداخلها عناصر المقالة هي مجرد دعم للأنماط - وهو شيء يساعدنا في استهدافها باستخدام JavaScript أو CSS.

جانبا العنصر

يتم استبعاد آخر عنصر HTML5 مستخدم لصفحة العرض ؛ استخدمناها كحاوية للشريط الجانبي.

يمثل العنصر الجانبي جزءًا من الصفحة مكونًا من محتوى مرتبط بشكل سطحي بالمحتوى الموجود حول الجانب الجانبي ، ويمكن اعتباره منفصلاً عن هذا المحتوى. غالبًا ما يتم تمثيل هذه الأقسام في الطباعة كأعمدة جانبية.

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

لقد وضعنا قسمين وملاحة واحدة. يحتوي عنصر القسم الأول على روابط إلى Twitter و RSS ، ويمثل العنصر الثاني آخر تغريدة (منشور Twitter الخاص بالمستخدم). العنصر الثاني ، القسم ، هو أيضًا أحد الحالات النادرة التي يفتقر فيها إلى عنوان. كان من الممكن أن يكون لها عنوان ، شيء مثل "آخر تغريدة" ، لكنني أعتقد أنها ليست ضرورية ، لأن القراء معتادون على رؤية كتل مثل هذه ، وعلامة Twitter الموجودة أسفل الاقتباس يمكن التعرف عليها بشكل كبير. يتم استخدام عنصر التنقل في الشريط الجانبي الخاص بنا لعرض قائمة المدونات ، وعلى عكس التنقل الرئيسي ، فإنه يحتوي على عنوان.

الكلمة الأخيرة

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

نشكرك على القراءة ولا تفوت الجزء الثاني من هذه المقالة ، حيث نناقش خصائص CSS3 المستخدمة لتزيين العلامات.

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

هيئة التحرير: روج فيكتور وأندريه بيرناتسكي. فريق Webformyself.

لا يمكنك الذهاب بعيدًا بدون HTML5 و CSS3

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

هل تعرف أن...

الآن في نتائج البحث (في أعلى 10) من Yandex ، 55٪ هي مواقع ويب ذات تصميم متجاوب يمكنه التكيف مع الأجهزة المحمولة. يشير هذا إلى أن Yandex (و Google أيضًا) يمنحان المزيد من الأفضلية للمواقع ذات التصميم سريع الاستجابة. أولئك. تلك التي يشعر المستخدم بالراحة معها.
ويتم إضافة HTML5 و CSS3 للموقع ميزات إضافية، والتي من خلالها يمكننا جعل الموقع أكثر ملاءمة.
لكل من المستخدمين والروبوتات.
الصفحة المقصودة ( الصفحة المقصودة, الصفحة المقصودة) يعمل على تحويل الزوار إلى مشتركين أو عملاء.
تستخدم أيضًا في بعض الأحيان لتجزئة حركة المرور.
يمكن أن تكون الصفحة المقصودة واحدة صفحة منفصلة على نطاق أو كجزء من موقع ويب كامل.
في هذه الحالة ، يتم الترويج للموقع في البحث ، ويتم استخدام الصفحة المقصودة للإعلان في Yandex.Direct و Google Adwods و Target Vkontakte وما إلى ذلك.
تتيح لك هذه المجموعة تحقيق أقصى استفادة من مجموعة متنوعة من أدوات التسويق عبر الإنترنت.
الآن هناك فرصة للتعلم بسرعة وتطبيق كل هذا في أنشطتهم.

HTML5 + CSS3 + الاستجابة + الصفحة المقصودة
مع هذه الدورة سوف تكون قادرًا على:

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

بالطبع مخطط

جزء تمهيدي

ميزات جديدة في HTML5 و CSS 3 تعمل على تبسيط وتسهيل عملية التخطيط.
الترميز الدلالي - أسراره وما الغرض منه.
إدخال كائنات الوسائط - كيفية تضمين الصوت والفيديو بدون مشغل.

الجزء العملي

إنشاء صفحة مقصودة خطوة بخطوة.
من تخطيط التخطيط ، تخطيط كل كتلة متفاوتة التعقيد ، إلى توصيل البرامج النصية ومعالجات php للنماذج
دائري / شريط تمرير ، تمرير سلس ، أزرار ، صور متحركة لـ CSS، التحقق من صحة النموذج ، إلخ.

أضف. المواد

تحتوي المواد الإضافية على جميع البرامج النصية والمصادر التي سنعمل معها + أوراق الغش مع التعليمات البرمجية التي تحتاج فقط إلى نسخها ولصقها في المكان المناسب.
وكذلك مصادر أخرى مفيدة.
عدد دروس الفيديو: 23

ماذا يمكنك أن تفعل بعد الانتهاء من هذه الدورة؟

قيد التحضير

فهم تخطيط PSD مع فوتوشوب
قص الصور المرغوبة من تخطيط PSD
ابحث عن تصميمات جميلة للصفحة المقصودة والموقع الإلكتروني
كتل التصميم ومراحل التخطيط
ادمج الرموز في رموز CSS
العمل مع PhpDesigner

من حيث التصميم

الاتصال خطوط جميلة من تخزين google
استخدم الفئات الزائفة بشكل فعال
تكييف الموقع لجميع الأجهزة المحمولة
استخدم خلفيتين أو أكثر للكتلة ، الرسوم المتحركة ، التحويل ، RGBA ، إلخ.
العمل معmedia الاستعلامات
أدخل خرائط Yandex التفاعلية
إنشاء رموز CSS وتسريع تحميل الصفحة
استخدم أنماطًا مدروسة جيدًا (على غرار أطر مثل Bootstrap)

من حيث التحسين

إنشاء تأثيرات التمرير ("الرسوم المتحركة" عند التمرير)
قم بتمرير سلس للكتل ولزر "أعلى"
تحقق من صحة نماذج الملاحظات باستخدام jQuery
قم بإنشاء نماذج ملاحظات ذكية باستخدام علامات UTM
قم بتوصيل وتكوين الأهداف في Ya.Metrica باستخدام الأحداث
تفتيح الصفحات بجعل تحميلها أسرع
تحقق من العيوب في الصفحات وأصلحها

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

تستخدم محركات البحث عددًا من المعايير لتقييم استجابة الموقع عند عرضها أجهزة محمولةيا. تحاول Google تسهيل استخدام الإنترنت لمالكي الهواتف الذكية والأجهزة اللوحية من خلال تمييز مواقع الويب المتوافقة مع الجوّال بعلامة خاصة في نتائج بحث الجوّال متوافق مع الجوّال... لدى Yandex أيضًا خوارزمية تعطي الأفضلية للمواقع ذات إصدار الجوال / المستجيب للمستخدمين في بحث الجوال.

يمكنك التحقق من عرض الصفحة على الأجهزة المحمولة على الخدمات و.

الشكل: 1. إصدار الجوال من Yandex و Google مع ملاحظة حول ملاءمة الموقع للأجهزة المحمولة

ما هو تخطيط الاستجابة

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

يتم تقديم التقنيات الأساسية لإنشاء موقع ويب سريع الاستجابة في المقالة. إلى عن على الرسم المتجاوب يتم تعيين عرض الحاوية الرئيسية للموقع في٪ ، بينما يمكن أن تكون مساوية لـ 100٪ من عرض نافذة المتصفح ، أو أقل. يتم أيضًا تعيين عرض أعمدة الشبكة بالنسبة المئوية. في الرسم المتجاوب يتم إصلاح عرض الحاوية الرئيسية وأعمدة الشبكة باستخدام قيم px.

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

تخطيط الصفحة الرئيسية

تتكون الصفحة من ثلاث كتل رئيسية: رأس (رأس) ، وحاوية مجمعة للمحتوى الرئيسي والشريط الجانبي ، وتذييل (تذييل). سنأخذ 768 بكسل و 480 بكسل كنقاط تحول في التصميم.

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

الشكل: 2. مثال على تخطيط سريع الاستجابة

1. العلامات الوصفية والقسم

1) أضف إلى القسم الملفات الضرورية - رابط للخطوط المستخدمة ومكتبة jQuery والمكوِّن الإضافي الخالي من البادئات (حتى لا تكتب بادئات المتصفح للخصائص):

2. رأس الصفحة

في رأس الصفحة

ضع عناصر الحاوية التالية:
الشعار ;
زر لإظهار / إخفاء القائمة الرئيسية

;
القائمة الرئيسية

;
استمارة البحث عن الموقع
.

3. حظر مع ملخص المقال

غلف إعلان المقالات بعنصر

:



التصميم

ربيع

اللغة الروسية غنية جدًا بالكلمات المتعلقة بالفصول والظواهر الطبيعية المرتبطة بها.

أكمل القراءة

...

4. العمود الجانبي

إلى العمود الجانبي

5. التذييل

في تذييل الصفحة سنضع معلومات حول حقوق النشر وأزرار الوسائط الاجتماعية ورابط إلى البريد الإلكتروني:

6. أنماط CSS العامة

الأنماط العامة ، إعادة تعيين الأنماط الافتراضية للمتصفح:

* ، *: بعد ، *: قبل (تحجيم الصندوق: مربع الحدود ؛ المساحة المتروكة: 0 ؛ الهامش: 0 ؛ الانتقال: سهولة الدخول والخروج بمقدار 5 ثوانٍ ؛ / * إضافة انتقالات سلسة لجميع عناصر الصفحة * /) ul ( list-style: none؛) a (text-decoration: none؛ outline: none؛) img (display: block؛ width: 100٪؛) h1، h2، h3، h4، h5، h6 (font-family: "Playfair عرض "؛ font-weight: normal؛ letter-spacing: 1px؛) body (font-family:" Open Sans "، arial، sans-serif؛ font-size: 14px؛ line-height: 1؛ color: # 373737؛ background: # f7f7f7؛) / * إضافة منظف دفق لجميع الحاويات التي بها أطفال ملفوفون بداخلها * / header: after، .container: after، footer: after، .widget-posts-list li: after، #subscribe: after (content: ""؛ display: table؛ clear: both؛) / * فئة النمط التي تتحكم في عرض حاوية الشبكة * / .container (margin: 0 auto؛ width: 100٪؛ max-width: 960px؛ padding: 0 15px ؛)

7. أنماط العنوان ومحتوياته

رأس (العرض: 100٪ ؛ الخلفية: أبيض ؛ مربع الظل: 3 بكسل 3 بكسل 1 بكسل rgba (0،0،0 ، .05) ؛ الحشو: 15 بكسل 0 ؛ الهامش السفلي: 30 بكسل ؛ الموضع: نسبي ؛) / * الشعار * / .logo (display: block؛ float: left؛) .logo span (color: white؛ display: inline-block؛ width: 30px؛ height: 30px؛ line-height: 30px؛ border-radius: 50٪؛ margin: 5px 0؛ text-align: center؛ text-shadow: 2px 2px 1px rgba (0،0،0، .4)؛) .logo span: nth-child (odd) (background: # EF5A42؛) .logo span: nth-child (even) (background: # F8B763؛) / * menu * / #menu (float: right؛) #menu li (display: inline-block؛ margin-right: 30px؛) # menu a (color: # 111؛ تحويل النص: أحرف كبيرة؛ تباعد الأحرف: 1 بكسل؛ وزن الخط: 600؛ عرض: كتلة؛ ارتفاع الخط: 40 بكسل؛) # menu a: hover (color: # EF5A42؛) #menu li: last-child (margin-right: 0؛) / * نموذج البحث * / #searchform (float: right؛ margin-left: 46px؛ display: inline-block؛ position: النسبي؛) #searchform input (width: 170px؛ float: left؛ الحد: لا شيء ؛ المساحة المتروكة: 10 بكسل ؛ الارتفاع: 40 بكسل ؛ تجاوز: مخفي. المخطط التفصيلي: لا شيء ؛ اللون: # 9E9C9C ؛ نمط الخط: مائل ؛ ) زر #searchform (الخلفية: شفافة ؛ الارتفاع: 40 بكسل ؛ الحدود: لا شيء ؛ الموضع: مطلق ؛ اليمين: 10 بكسل ؛ اللون: # EF5A42 ؛ المؤشر: المؤشر ؛ حجم الخط: 18 بكسل ؛) # إدخال نموذج البحث: التركيز (المخطط التفصيلي: 2 بكسل صلب # EBEBE3؛) / * زر تبديل القائمة الذي يظهر بعرض 768 بكسل * / .nav-toggle (عرض: بلا ؛ موضع: نسبي ؛ عائم: يمين ؛ عرض: 40 بكسل ؛ ارتفاع: 40 بكسل ؛ هامش اليسار: 20 بكسل ؛ الخلفية: # EF5A42 ؛ المؤشر: المؤشر ؛) .nav-toggle span (عرض: كتلة ؛ موضع: مطلق ؛ أعلى: 19 بكسل ؛ يسار: 8 بكسل ؛ يمين: 8 بكسل ؛ ارتفاع: 2 بكسل ؛ الخلفية: أبيض ؛) .nav-toggle span: before ، .nav-toggle span: after (content: ""؛ position: المطلق ؛ العرض: الكتلة ؛ اليسار: 0 ؛ العرض: 100٪ ؛ الارتفاع: 2 بكسل ؛ الخلفية: أبيض ؛) .nav-toggle span: before (أعلى: -10px؛) .nav-toggle span: after (bottom: -10px؛) / * الفئة التي ستتم إضافتها إلى القائمة العلوية عند النقر فوق الزر وستظهر القائمة المخفية * / # menu.active (max-height: 123px؛)

8. أنماط الكتلة مع المحتوى الرئيسي

/ * الحاوية اليسرى * / .posts-list (margin-bottom: 30px ؛ width: 64٪ ؛ float: left؛) / * post block * / .post (margin-bottom: 35px؛) .post-content p ( ارتفاع السطر: 1.5 ؛ حجم الحشو: 1em ؛). post-image (margin-bottom: 30px ؛). الفئة (margin-bottom: 15px ؛). الفئة a (color: # F8B763 ؛ تحويل النص: أحرف كبيرة ؛ ) .post-title (margin-bottom: 12px؛ font-size: 26px؛) / * block مع زر "متابعة القراءة" وأزرار الوسائط الاجتماعية * / .post-footer (border-top: 1px solid # EBEBE3؛ border- أسفل: 1 بكسل صلب # EBEBE3 ؛ الموضع: نسبي ؛ أعلى الهامش: 15 بكسل ؛). رابط أكثر (الموضع: نسبي ؛ عرض: كتلة مضمنة ؛ حجم الخط: 10 بكسل ؛ تحويل النص: أحرف كبيرة ؛ اللون: أبيض ؛ خط -ارتفاع: 44 بكسل ؛ المساحة المتروكة: 0 22 بكسل ؛ الخلفية: # 3C3D41 ؛ تباعد الأحرف: 0.1em ؛ مسافة بيضاء: nowrap ؛). رابط أكثر: بعد (المحتوى: "" ؛ العرض: الكتلة ؛ الموضع: مطلق ؛ العرض : 0 ؛ ارتفاع: 0 ؛ أعلى: 0 ؛ يمين: 0 ؛ حد: صلب شفاف ؛ عرض الحدود: 22 بكسل 18 بكسل ؛ لون الحدود اليسرى: # 3C3D41 ؛ التحويل: translateX (100٪ ) ؛ ). post-social (الوضع: مطلق ؛ يسار: تلقائي ؛ أعلى: 50٪ ؛ يمين: 0 ؛ محاذاة النص: يمين ؛ تحويل: translateY (-50٪) ؛ padding: 0 ؛ حجم الخط: 12 بكسل ؛). بعد اجتماعي أ (عرض: كتلة مضمنة ؛ الهامش الأيسر: 8 بكسل ؛ اللون: # F8B763 ؛ العرض: 25 بكسل ؛ الارتفاع: 25 بكسل ؛ ارتفاع السطر: 23 بكسل ؛ محاذاة النص: المركز ؛ نصف قطر الحدود: 50٪ ؛ الحدود : 1 بكسل صلب ؛)

9. أنماط العمود الجانبي

/ * الحاوية اليمنى * / جانبًا (العرض: 33٪ ؛ تعويم: يمين ؛) / * مربع عناصر واجهة المستخدم * / .widget (الحشو: 20 بكسل 15 بكسل ؛ الخلفية: أبيض ؛ حجم الخط: 13 بكسل ؛ الهامش السفلي: 30 بكسل ؛ مربع -shadow: 3px 3px 1px rgba (0،0،0، .05)؛) .widget-title (font-size: 18px؛ padding: 10px؛ margin-bottom: 20px؛ text-align: center؛ border: 2px Solid # F8B763؛ box-shadow: 3px 3px 0 0 # F8B763؛) .widget-category-list li (border-bottom: 1px solid # EBEBE3؛ padding: 10px 0؛ color: # c6c6c6؛ font-style: italic؛). widget-category-list li: last-child (border-bottom: none ؛) .widget-category-list li a (color: # 626262؛ margin-right: 6px؛ font-style: normal؛) .widget-category- list li a: before (content: "\\ f105"؛ display: inline-block؛ font-family: "FontAwesome"؛ margin-right: 10px؛ color: # c6c6c6؛) .widget-posts-list li (border-top : 1px solid # EBEBE3؛ padding: 15px 0؛) .widget-posts-list li: nth-child (1) (border-top: none؛) .post-image-small (width: 30٪؛ float: left؛ margin-right: 15px؛) .widget-post-title (float: left ؛ ) / * نموذج الاشتراك * / #subscribe (الوضع: نسبي ؛ العرض: 100٪ ؛ المساحة المتروكة: 15 بكسل 0 ؛) #subscribe input (width: 100٪ ؛ display: block ؛ float: left ؛ border: 2px solid # EBEBE3 ؛ padding : 0 0 0 10px ؛ الارتفاع: 40 بكسل ؛ الموضع: نسبي ؛ مخطط تفصيلي: لا شيء ؛ اللون: # 9E9C9C ؛ نمط الخط: مائل ؛) # زر الاشتراك (المساحة المتروكة: 0 15 بكسل ؛ الخلفية: شفافة ؛ الارتفاع: 40 بكسل ؛ الحد: لا شيء ؛ الموقف: مطلق ؛ اليمين: 0 ؛ اللون: # EF5A42 ؛ المؤشر: المؤشر ؛ حجم الخط: 18 بكسل ؛) # إدخال الاشتراك: التركيز + الزر (الخلفية: # EF5A42 ؛ اللون: أبيض ؛)

10. أنماط للتذييل

قسّم تذييل الموقع إلى ثلاثة أعمدة متساوية:

تذييل (المساحة المتروكة: 30 بكسل 0 ؛ الخلفية: # 3C3D41 ؛ اللون: أبيض ؛). footer-col (العرض: 33.3333333333٪ ؛ float: left ؛) .footer-col a (color: white ؛) .footer-col: last- طفل (محاذاة النص: يمين ؛). التفاف شريط اجتماعي (محاذاة النص: مركز ؛). شريط اجتماعي التفاف أ (الحشو: 0 7 بكسل ؛ حجم الخط: 18 بكسل ؛)

11. استفسارات وسائل الإعلام

media (max-width: 768px) (/ * أظهر الزر لتبديل التنقل العلوي * / .nav-toggle (عرض: كتلة ؛) رأس (padding: 10px 0 ؛) / * إخفاء القائمة العلوية ، إلغاء الالتفاف ، وضعه ، عن طريق التحول إلى ارتفاع رأس الموقع * / # menu (max-height: 0؛ background: white؛ float: none؛ position: مطلق؛ overflow: hidden؛ top: 63px؛ right: 0؛ left: 0؛ margin: 0؛ padding: 0؛ z-index: 3؛) / * اجعل عناصر القائمة ممتلئة بحيث تلائم أحدها تحت الآخر * / #menu li (display: block؛ text-align: center؛ border-bottom: 1px solid # EBEBE3؛ margin-right : 0 ؛) / * فك الأعمدة اليسرى واليمنى ، ضعها على 100٪ * / .posts-list ، جانباً (العرض: 100٪ ؛ float: none ؛) .widget-post-title (font-size: 1.5em ؛))media (max-width: 480px) (/ * فك الشعار ومحاذاة الوسط * / .logo (float: none؛ margin: 0 auto 15px؛ display: table؛) .logo span (margin: 0 2px ؛) / * ضع القائمة على ارتفاع الرأس المتزايد * / # القائمة (أعلى: 118 بكسل ؛ ) / * ضع نموذج البحث على اليسار * / #searchform (float: left؛ margin-left: 0؛) / * قم بإزالة الحدود العلوية والسفلية وقم بمحاذاة الزر إلى المركز * / .post-footer (border-top: none؛ border-bottom: none ؛ text-align: center ؛) / * إلغاء تحديد موضع أزرار الوسائط الاجتماعية * /. post-social (position: static ؛ text-align: center ؛ التحويل: لا شيء ؛ margin-top: 20px ؛) .widget- post-title (حجم الخط: 1.2em ؛) / * de-wrap لأعمدة التذييل * / .footer-col (float: none؛ margin-bottom: 20px؛ width: 100٪؛ text-align: center؛). footer-col: last-child (text-align: center ؛ margin-bottom: 0 ؛))

12. برنامج نصي لقائمة الجوال

رمز jQuery ، الذي أضفناه سابقًا إلى ترميز الصفحة قبل علامة الإغلاق ، مسؤول عن إظهار / إخفاء القائمة العلوية عند النقر فوق الزر (يتم تبديل ارتفاع القائمة - من الصفر إلى مساوٍ لمحتواها). :

أطلقنا سراحنا كتاب جديد "تسويق المحتوى في الشبكات الاجتماعية: كيفية الوصول إلى رأس المشتركين والوقوع في حب علامتك التجارية ".

على وجه الخصوص ، يتم استخدام هذه التقنية بنشاط بحيث يتم عرض الموقع بشكل متساوٍ أنواع مختلفة الأجهزة: أجهزة الكمبيوتر / أجهزة الكمبيوتر المحمولة والهواتف الذكية / الأجهزة اللوحية بأحجام عرض مختلفة.

تم إنشاء موقع سريع الاستجابة اليوم باستخدام لغة ترميز HTML5 وأوراق الأنماط المتتالية CCS3. ولكن حتى اللحظة التي أصبحت فيها التقنيات المقابلة هي المعيار لجميع المتصفحات الشائعة ، تم استخدام لغة برمجة JavaScript للأغراض المقابلة. حتى في وقت سابق (قبل عام 2010) ، كان من الضروري إنشاء عدة إصدارات من نفس الصفحات ، ولكن بترميز مختلف ، بحيث يتم عرض الموقع الذي كانوا يطورونه بشكل صحيح على شاشات مختلفة.

ما هو تخطيط الصفحة سريعة الاستجابة؟

حتى وقت قريب نسبيًا ، عند زيارة العديد من المواقع في الجزء السفلي من المتصفح ، كان بإمكانك رؤية شريط تمرير يمرر الصفحة أفقيًا. حدث هذا ، على سبيل المثال ، إذا لم يتم تكبير نافذة متصفح الإنترنت إلى وضع ملء الشاشة ، ولكنها احتلت مساحة صغيرة نسبيًا. أيضًا ، يمكن رؤية ذلك دائمًا تقريبًا عندما كانت دقة الشاشة التي عُرضت عليها الصورة 800 × 600 أو ، أكثر من ذلك ، 640 × 480 بكسل.

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

لماذا ومتى ظهر التصميم سريع الاستجابة؟

بحلول بداية العقد الثاني من القرن الحادي والعشرين ، كانت هناك حاجة قوية لإنشاء تقنيات من شأنها أن تسمح بتطوير صفحات ويب عالمية. كانت المتطلبات الأساسية التي أدت إلى إنشاء وتطوير تصميم سريع الاستجابة هي:

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

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

بعد مرور بعض الوقت ، اقترح محرر بودكاست آخر معروف إضافات للمفاهيم التي كان يتحدث عنها زميله.

بماذا وكيف يتم إنشاء التخطيط التكيفي؟

قبل البدء في النظر في مسألة كيفية عمل تخطيط سريع الاستجابة ، من الضروري مراجعة التقنيات الرئيسية المستخدمة بإيجاز. يوجد الآن اثنان منهم: HTML5 و CSS3. حتى وقت قريب ، تم استخدام HTML4 و CSS2 ، ولكن من أجل إنشاء تصميم عام معهم ، كان عليك أيضًا استخدام JavaScript.

CSS3 هو الجيل التالي من أوراق الأنماط المتتالية. تهدف هذه التقنية إلى إنشاء قواعد لعرض عناصر الصفحة في متصفح المستخدم. باستخدامه ، يمكنك تحديد ، على سبيل المثال ، الحجم الذي يجب أن يكون عليه العنصر بدقة شاشة معينة للمستخدم ، أو تعيين قاعدة أنه يجب أن يشغل دائمًا نسبة مئوية معينة من المساحة (100 ٪ - ملء منطقة عمل المتصفح بالكامل).

ظهرت قاعدة "استعلامات الوسائط" في الجيل الثالث ، والتي يمكن لمصمم التخطيط من خلالها إنشاء فئات منفصلة لكل دقة محددة.

نقطة مهمة جدا!

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

بالنسبة إلى HTML5 ، يتم استخدامه لترميز الصفحة مباشرةً ، أي أنه يشير إلى مكان وضع عناصر معينة. لجعل الكائنات تتكيف مع الدقة ، تحدد معلمات علامات HTML الفئات التي تم إنشاؤها مسبقًا باستخدام CSS3.

مثال بسيط على التصميم سريع الاستجابة

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

أولاً ، استخدم HTML لوضع العنصر نفسه على الصفحة:

علامة DIV - تشير إلى أن كل شيء موجود بداخلها عبارة عن كتلة منفصلة. عندما يكون هناك العديد من هذه الكتل على الصفحة ، يتم تحديد سمة "class". يعد هذا ضروريًا للمتصفح لفهم القاعدة التي يجب تطبيقها على كتلة معينة.

الآن أنت بحاجة إلى إنشاء القاعدة نفسها مباشرة ، ما يسمى ،

حاوية CSS:

Div (العرض: 100٪ ؛ محاذاة النص: المركز ؛) div img (wight: 100٪ ؛ الارتفاع: تلقائي ؛)

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

التحقق من تنسيق الاستجابة

هناك أدوات خاصة لاختبار التخطيط سريع الاستجابة. على سبيل المثال ، في متصفح Google Chrome ، يمكنك الضغط على مفتاح "F12" ، وبعد ذلك ، في اللوحة التي تفتح ، انقر فوق الرمز الذي يحمل صورة الهاتف الذكي والجهاز اللوحي. بعد هذا الإجراء ، ستظهر عدة لوحات أخرى تحتاج فيها إلى تحديد دقة الاهتمام.

يمكن جعله أسهل. للتحقق مما إذا كان التصميم سريع الاستجابة يعمل ، تحتاج إلى الضغط باستمرار على CTRL ثم الضغط على "+" أو "-". بعد هذا الإجراء ، يجب أن تزيد الصفحة أو تنقص وفقًا لذلك ، لكن العنصر الذي يتم تطبيق التخطيط المتجاوب عليه سيحتفظ بنسبة العرض إلى الارتفاع (أو يفعل شيئًا آخر ، ما تم تحديده في القواعد).

الأدوات التي تبسط تخطيط التصميم سريع الاستجابة

تخطيط التصميم سريع الاستجابة مهمة شاقة إلى حد ما. لذلك ، من أجل تقليل الوقت اللازم لتنفيذ كل هذه الإجراءات ، من الأفضل استخدام أدوات خاصة. يمكن تسمية إطار Bootstrap * المعروف بواحد منها.

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

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

* Bootstrap هو برنامج مفتوح المصدر مصدر الرمزتم تطويره بواسطة Twitter Inc. يتم توزيعه مجانًا وله مجتمع واسع يمكنك دائمًا طلب المشورة منه.


قال الزعيم الفنزويلي نيكولاس مادورو ، في برنامج RT الخاص برفائيل كوريا ، إن الرئيس الأمريكي دونالد ترامب لديه هوس بالشعوب الإسبانية. "أتحدث بصراحة ...

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

أجرى زيلينسكي محادثات هاتفية مع بنس
أجرى رئيس أوكرانيا فولوديمير زيلينسكي محادثات هاتفية مع نائب الرئيس الأمريكي مايك بنس. ذكرت من قبل "Strana.ua" وشكر الزعيم الأوكراني بنس على التمديد ...

يصف البنتاغون روسيا بأنها أكبر تحد أمني للولايات المتحدة
قال رئيس البنتاغون مارك إسبر إن روسيا هي أكبر تحد أمني للولايات المتحدة على المدى القريب. لا تزال روسيا أكبر تحدٍ أمني لنا ...

هجوم ليس من اليمن: السعودية تلقي باللوم على إيران في الهجوم على مصفاة
كشفت السلطات السعودية علنا \u200b\u200bعن حطام طائرات بدون طيار وطائرات أخرى أُطلقت على مصفاة حكومية ليلة السبت 14 سبتمبر. في وزارة دفاع المملكة ...

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

وضعت أوكرانيا مرة أخرى شروطا لتنفيذ "صيغة شتاينماير"
وضع الوفد الأوكراني في الاجتماع الدوري لمجموعة الاتصال الذي عقد يوم الأربعاء في مينسك مرة أخرى شروطًا صارمة لكي تفي كييف بالنقاط السياسية لاتفاقيات مينسك. تم تأكيد ذلك ...

جونسون وترامب يناقشان الرد الضروري على الهجوم على المصافي السعودية
لندن ، 18 سبتمبر - ريا نوفوستي ، ماريا تاباك. أعلن رئيس الوزراء البريطاني بوريس جونسون والرئيس الأمريكي دونالد ترامب عن الحاجة إلى رد دبلوماسي موحد من الشركاء الدوليين ...

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

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

نتنياهو قدم للاسرائيليين خيارا
علق رئيس الوزراء الإسرائيلي بنيامين نتنياهو على النتائج الأولية للانتخابات التي احتل فيها حزب الليكود القومي المرتبة الثانية. ظهر المنشور المقابل ...

"صيغة شتاينماير": قدمت كييف تنازلات بشأن دونباس
وافق وزير الخارجية الأوكراني فاديم بريستايكو على استخدام "صيغة شتاينماير" لحل الصراع في دونباس. تنص هذه المبادرة على توفير ...

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

قبل أن تغفو: اعتبر البنك المركزي أنه من القانوني تجميد حسابات الروس
"سوف يديرون أنفسهم": خطة جديدة عند "عودة" شبه جزيرة القرم ، ستهرب ريا نوفوستي القرم إلى أوكرانيا ، إذا لم تنشر العفن وخلق فرصة سانحة. حول هذا ، كما ذكرت "الوكالة الاتحادية ...

وسائل الإعلام: نتنياهو ألغى زيارته للجمعية العامة للأمم المتحدة بسبب الأوضاع السياسية في البلاد
لن يتوجه رئيس الوزراء الإسرائيلي بنيامين نتنياهو إلى نيويورك الأسبوع المقبل للمشاركة في المناقشة السياسية العامة للدورة 74 للجمعية العامة للأمم المتحدة بسبب الأوضاع السياسية في البلاد ...

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

وجد ترامب بديلاً لبولتون
سيكون مستشار الأمن القومي الجديد لرئيس الولايات المتحدة هو روبرت أوبراين ، وهو حاليًا الممثل الخاص للرئيس بشأن الرهائن ...

تستعد أوكرانيا لانسحاب القوات في دونباس
أعلن قائد عملية القوات المشتركة (JF) ، فلاديمير كرافشينكو ، الاستعداد لسحب الأسلحة على طول خط التماس في دونباس. تحدث عن هذا خلال لقاء مع دائم ...

الأطر الزمنية وخرائط الطريق: خطط لتكامل روسيا وبيلاروسيا
قد يوافق الرئيسان فلاديمير بوتين وألكسندر لوكاشينكو على خطة دمج روسيا وبيلاروسيا بحلول 8 ديسمبر. تم تطوير "خرائط الطريق" في 31 اتجاهًا. حتى 1 نوفمبر ، موسكو ...

الفائز لا يقرر: من سيشكل حكومة اسرائيل؟
الانتخابات البرلمانية المبكرة في إسرائيل لم تكشف بعد عن فائز واضح في السباق ، على الرغم من أن كتلة الليكود اليمينية ، وفقًا للبيانات الأولية من لجنة الانتخابات المركزية في البلاد ، تتقدم على منافستها - ...