دعنا نلقي نظرة على تصميم شبكة الموقع ونقسم المكونات الفردية. دعنا نستكشف لماذا يعد التعويم مفيدًا جدًا ، بالإضافة إلى التقنية الشائعة لبناء أول شبكة ويب من ثلاثة تدفقات وتذييل موقع.
لدراسة بناء الشبكة لموقع ما ، عليك أن تفهم ما هو "التدفق". التدفق هي عناصر الموقع ، وتقع الواحدة تلو الأخرى. على سبيل المثال ، يمكن أن تكون هذه عناصر div تسير الواحدة تلو الأخرى افتراضيًا. ولكن يمكن إعادة ترتيب التدفق ، ويمكن تغيير موضع عناصر الكتلة.
للتحكم في التدفق ، نستخدم خاصية الطفو ، والتي يمكنها وضع الكتلة على الجانب الأيسر أو الأيمن. يكفي أن تكتب في ملف CSS:
"اسم الفئة أو الكتلة" {float: right / left؛ }
العيب الوحيد في الطفو هو القدرة على "تداخل" كتلة واحدة فوق أخرى.
لتجنب الركض ، نستخدم clear: كلاهما - هذه الخاصية ستضبط التدفق حول الكتلة. نقوم بتعيين العرض والارتفاع ، كحد أقصى وأدنى ، بحيث يتم تكوين القيمة وفقًا لحجم المحتوى (نص ، صور). الهامش - اضبط القيمة على تلقائي بحيث يتم تشكيل الهوامش الخارجية تلقائيًا اعتمادًا على موقع الكتلة.
نظرًا لأن الطفو يمكنه وضع الكتل في اتجاهين ، فمن المعتاد تقسيم الموقع إلى تدفقات - يسارًا ويمينًا. إذا احتاج المبرمج إلى دفقين فقط ، فإنه يترك العوامات اليمنى واليسرى ، ولكن إذا كان هناك أكثر من اثنين ، فإنه يضبط الهوامش باستخدام الهامش. كيف يحدث هذا:
.column1 {float: left؛ العرض: 65 بكسل ؛ الحد الأدنى للارتفاع: 50 بكسل ؛ الهامش الأيمن: 9 بكسل ؛ // 9 بكسل من الصندوق المركزي}
2 تيار:
.column2 {float: left؛ // إلى الكتلة اليسرى ، ولكن بدون "تداخل" ، نظرًا لأننا طبقنا عرض الهامش: 80 بكسل ؛ الحد الأدنى للارتفاع: 50 بكسل ؛ }
3 تيار:
.column3 {float: right؛ العرض: 65 بكسل ؛ الحد الأدنى للارتفاع: 50 بكسل ؛ }
التعامل مع التذييل (.footer):
.footer {clear: both؛ // التفاف حول كلا الجانبين}
هذه هي الطريقة التي صنعنا بها شبكة للموقع باستخدام تعويم ، تتكون من ثلاثة تيارات.
