تخطيط متعدد الأعمدة (متعدد الأعمدة)
التخطيط متعدد الأعمدة هو تصميم محتوى النص في تخطيط متعدد الأعمدة مثل الصحيفة. بمعنى آخر، التدفق الشلالي الذي كان بإمكاننا تحقيقه من خلال js أو JQuery من قبل يمكن تحقيقه مباشرة من خلال CSS في CSS3، على الرغم من وجود مشكلات في التوافق. .
التوافق
IE10+، FireFox16+، Chrome26+، Safari6.1+، Opera12.1
خصائص التخطيط متعدد الأعمدة
يوفر CSS3 سلسلة من الخصائص لتنفيذ تخطيط متعدد الأعمدة، كما هو موضح في الجدول التالي:
1.columns يعين عدد أعمدة الكائن وعرض كل عمود
يقوم بتعيين أو استرداد عدد أعمدة الكائن وعرض كل عمود.
القواعد:
الأعمدة:<'عرض العمود'>||<'عدد الأعمدة'>;
وصف المعلمة:
(1) تشير المعلمة الأولى إلى عرض كل عمود
(2) تشير المعلمة الثانية إلى عدد الأعمدة. يمكنك كتابة اثنين أو واحد.
تعطي المعلمتان الأولوية لعدد الأعمدة (في حالة التخفيض). إذا لم يكن العرض كافيًا (عدد الأعمدة * ضبط العرض > عرض الحاوية)، فسيتم تلقائيًا تقليل عمود واحد وتوسيع عرض الفقرة تلقائيًا للوصول إلى عرض الحاوية. يتم إنشاء التباعد المناسب تلقائيًا في المنتصف.
مثال:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>تخطيط متعدد الأعمدة</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0.3);}div.test1{width:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{margin-top:20px; border:2pxsolidred;}div.test2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;}</style>< /head><body><div><div>من الوضع الأولي للاختراع بواسطة دينيس ريتشي، مخترع لغة C، نعلم أنه يجب أن يكون نظامًا، وليس برنامجًا رسوميًا بحد ذاته، ويجب أن يتضمن محركات تطوير ، قم بسلسلة من المهام الأساسية مثل نواة النظام، وإدارة الملفات، والإدارة الداخلية، واتصالات الشبكة، وما إلى ذلك. لذلك، فقط من خلال تعلم بناء جملة لغة C، يجب عليك أيضًا تعلم موضوعات أخرى مثل مبادئ نظام التشغيل، وبروتوكولات الاتصال، مبادئ المترجم وهياكل البيانات أكمل المتطلبات السابقة. </div><div>في هذا الوقت، عندما ترى دليل اللوحة الأم باللغة الإنجليزية، ستعرف الواجهة التي يجب قراءتها، وكيف يتم النص على بروتوكول الاتصال، وعدد البايتات التي يجب قراءتها... وما إلى ذلك، قبل يمكنك الكتابة فقط ويمكن كتابة برامج التشغيل واستخدام النوى للتواصل. إلى هذا الحد، حتى لو كان الطلب على مواهب الشركات في المجتمع صغيرًا نسبيًا، فلا توجد مشكلة في عدم القدرة على العثور على وظيفة على الإطلاق. اخترت وظيفة بل ودفعت مقابلها، لأنه لا يمكنك القيام بذلك فحسب، بل إن العديد من المهام ذات الصلة، مثل تطوير برنامج التشغيل، وحل DNS، ومكافحة الفيروسات، وأمن الاتصالات، وتكنولوجيا المحاكاة الافتراضية، وتقليم kernel، كلها مختصة، ويمكنك ذلك حتى تطوير نظام تشغيل جديد بنفسك. </div><div>ومع ذلك، في بيئتنا الحالية، فإن التوجه التعليمي للغة C في معظم الجامعات هو أنه بالإضافة إلى دورات لغة C، يجب أن تقدم بعض الكليات فقط بنية البيانات، وهندسة الكمبيوتر، ومبادئ المترجم، والدورات مثل مبادئ نظام التشغيل، وبعض المدارس تحتفظ فقط بهياكل البيانات في هذه الدورات، أو حتى لم تعد تقدم هياكل البيانات. لذلك، يتم وضع لغة C فقط على أنها تنوير برمجي، ويكفي أن تكون على دراية بالتفكير الموجه نحو العمليات وC بناء جملة اللغة. </div><div>تأمل المدرسة أنه بعد تعلم لغة C، يمكنهم بعد ذلك تعلم لغة C++ أو Java أو لغات أخرى عالية المستوى حتى يتمكنوا من القيام بأشياء أكثر عملية والعثور على وظيفة بسهولة إذا كانوا أكثر شغفًا لتحقيق النجاح، يمكنهم فقط استخدام لغة C. لا مزيد من التعلم، فقط تعلم Java أو C++ أو لغات أخرى عالية المستوى بدون أساس. هذا هو في الواقع الفرق بين الطبقة المهنية ومؤسسة التدريب. إذا كنت لا تتعلم المعرفة عبثًا، فيجب عليك التفكير أكثر فيما إذا كانت مفيدة أم لا. </div></div><br><div><div>لذلك انطلاقًا من البيئة العامة الحالية، إذا كنت تتخصص في الكمبيوتر/البرمجيات في كلية رئيسية، فيجب عليك العمل بجد على هذه المواد الحقيقية. لا تهدر موارد التدريس في البلاد، لأنك مسؤول عن مستقبل صناعة برمجيات تكنولوجيا المعلومات في البلاد. إذا كنت ترغب في الانخراط في البحث والتطوير/تطوير البرمجيات، فيجب عليك على الأقل أن تتعلم بنية البيانات جيدًا، لأنه يتعين عليك إنشاءها؛ ، وليس نسخ حمال التعليمات البرمجية. إذا كنت ترغب فقط في كسب لقمة العيش، فما عليك سوى تعلم تقنية يمكن أن تؤدي إلى نتائج. </div><div>أخيرًا، دعونا نلقي نظرة على الأغراض الشائعة للطلاب لتعلم لغة C، بدءًا من الكلية الإعدادية وحتى درجة البكالوريوس، واختبار القبول للدراسات العليا، ولغة C من المستوى الثاني، وتعتمد البرامج التعليمية الموجهة نحو الطلب في الغالب على. الأسئلة النظرية، وأسئلة التدريب، والامتحانات، وبالتالي فإن نوع المشروع أقل صعوبة بكثير في موارد لغة C، لذلك من الطبيعي أن ترى أشياء رسومية نادرًا. بالطبع، باعتبارها مؤيدًا قويًا للغة C، ستقوم Dotcpp أيضًا بتعزيز موارد البرمجة هنا في المستقبل لتزويد الجميع بدعم الموارد الكافي. </div><div>عندما نتعلم لغة C، لأننا نختار برامج وحدة التحكم، يتم تشغيل برامجك في نافذة سوداء. إذا كتبت تطبيق Windows، فلن يكون هناك مثل هذه النافذة السوداء، وسيظهر بناء جملة لغة C لا تزال تستخدم، يمكن للجميع أن يفهموا. </div><div>إذا كان التطوير رسوميًا بلغة C خالصة، اعتمادًا على المرحلة الخاصة بك، فيمكنك التفكير في استخدام وظيفة واجهة الرسومات التي يدعمها مترجم TurBoC أو تثبيت مكتبة easyX في VC6 لتحقيق التطوير الرسومي لبعض الألعاب، مثل لعبة الطاولة، وTetris، وألعاب الكرة والدبابيس، وSnake، وما إلى ذلك، والتي تكون جميعها رسومية وتفاعلية. بالنسبة للألعاب الأكثر تقدمًا، مع الأخذ في الاعتبار تحديث الصورة والتحسين الاحترافي، يمكنك التفكير في استخدام MFC أو QT. </div></div></body></html>نتائج التشغيل:
قم بتعيين أعمدة div.test1: 300px 4؛ أي أن عرض كل عمود هو 300 بكسل، وهناك 4 أعمدة إجمالاً، لكن الحاوية 900 بكسل، أي أقل من 1200 بكسل، وبالتالي سيتم تحديد عدد الأعمدة تلقائيًا سيتم تقليله، وسيتم زيادة عرض العمود بشكل مناسب لعرضه بالطريقة الأنسب. ومع ذلك، لا يقوم div.test2 بتعيين عرض الحاوية، ويتم تعيين عرض العمود على 300 بكسل، ويتم تعيين عدد الأعمدة على 4 أعمدة. سيتم تحديد عدد الأعمدة لتحسين عرض العمود.
ملاحظة: قم بتعيين أعمدة div.test1: 300px 4؛ أي أن عرض كل عمود هو 300 بكسل، وهناك 4 أعمدة في المجموع، ولكن الحاوية 900 بكسل، أي أقل من 1200 بكسل، وبالتالي فإن عدد الأعمدة سيكون سيتم تقليله تلقائيًا، وسيتم زيادة عرض العمود بشكل مناسب لتحقيق الطريقة الأكثر ملاءمة للعرض. ومع ذلك، لا يقوم div.test2 بتعيين عرض الحاوية، ويتم تعيين عرض العمود على 300 بكسل، ويتم تعيين عدد الأعمدة على 4 أعمدة. سيتم تحديد عدد الأعمدة لتحسين عرض العمود.
2. عرض العمود يحدد عرض العمود
القواعد:
عرض الأعمدة:<الطول>|الافتراضي التلقائي؛
: استخدم قيمة الطول لتحديد عرض العمود، ولا يُسمح بقيم سلبية؛ تلقائي: قم بتخصيص العرض وفقًا لعدد الأعمدة.
على الرغم من تعيين عرض العمود، سيتم تخصيص العرض تلقائيًا بناءً على عدد الأعمدة وعرض الحاوية.
ملحوظة: الفجوة في كل عمود هي 14 بكسل.
3. عدد الأعمدة يحدد عدد الأعمدة
يقوم بتعيين أو استرداد عدد أعمدة الكائن.
القواعد:
عدد الأعمدة:<عدد صحيح>|تلقائي؛
وصف المعلمة:: استخدم القيم الصحيحة لتحديد عدد الأعمدة، ولا يُسمح بالقيم السالبة؛ تلقائي: تخصيص عرض التخصيص وفقًا لعرض العمود.
4. فجوة العمود تحدد الفجوة بين الأعمدة
يقوم بتعيين أو استرداد الفجوات بين أعمدة الكائن.
القواعد:
فجوة العمود:<الطول>|عادي؛
وصف المعلمة: استخدم قيمة الطول لتحديد الفجوة بين الأعمدة (ليس المسافة بين الكلمات، ولكن المسافة بين الفقرات)، ولا يُسمح بالقيم السالبة العادية: مثل حجم الخط. يعتمد التباعد الطبيعي على حجم الخط. نفس حجم الخط.
مثال:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>تخطيط متعدد الأعمدة</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .test3{border:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{background-color:rgb(0,0,0,.3);هامش -أعلى: 20px;}div.test1{العرض:900px;الأعمدة:300px4;font-size:14px;}div.test2{columns:400px;font-size:30px;}div.test3{column-count:4; column-gap:14px;</style></head><body><h3>الخط: 14px، بدون تعيين فجوات: الافتراضي هو نفس الخط 14px؛</h3><div><div>متعدد لقد تعلم الناس لغة C بالتأكيد سيكون لدى أصدقائي هذا السؤال عندما ينظرون إلى لغة C لماذا تعمل لغة C دائمًا في نافذة سوداء؟ برنامج إما يحسب مساحة المثلث أو يطبع عدد أزهار النرجس؟ بغض النظر عن مدى روعة البرمجة، لماذا لا نستطيع تنفيذ تلك البرامج الرائعة في النهاية، إنها مجرد طفولية! لماذا. </div><div>أولاً، موضع اختراع لغة C، منذ بداية اختراعها على يد دينيس ريتشي مخترع لغة C، نعلم أنها نظام وليست برنامج رسومي بحد ذاته، يجب أن يتضمن سلسلة من المهام الأساسية مثل تطوير برامج التشغيل، وصنع نواة النظام، وإدارة الملفات، والإدارة الداخلية، واتصالات الشبكة، وما إلى ذلك. </div><div>ثانيًا، وضع التدريس الشائع في الصين، في بيئتنا الحالية، فإن وضع التدريس في معظم الجامعات للغة C هو أن بعض الكليات فقط هي التي يجب أن تقدم هياكل البيانات بالإضافة إلى دورات لغة C. وهندسة الكمبيوتر ومبادئ المترجم ومبادئ نظام التشغيل ودورات أخرى. </div><div>بالإضافة إلى ذلك، قامت لجنة مقاطعة وانان لفحص الانضباط والإشراف بالتحقيق في أداء الواجبات من قبل الوحدات والموظفين المعنيين مثل مكتب التعليم والرياضة بالمقاطعة، وإدارة السوق ومراقبة الجودة بالمقاطعة، و حكومة بلدة جيانتيان، واستعرضت الإشراف الأشخاص المسؤولين في مكتب التعليم والرياضة بالمقاطعة، وإدارة السوق ومراقبة الجودة بالمقاطعة، ومكتب الزراعة بالمقاطعة، ولجنة الصحة وتنظيم الأسرة بالمقاطعة، وحكومة بلدة جيانتيان والوحدات الأخرى ذات الصلة التي فشلوا في القيام بعملهم وقد رفعوا القضايا بشكل منفصل ومراجعتها. وفي الوقت نفسه، ستجري لجنة فحص الانضباط والإشراف بالمقاطعة تحقيقًا في عملية تقديم العطاءات للوجبات الغذائية للطلاب، وستعلن النتائج للجمهور بمجرد توفرها. </div></div><br><h3>الخط: 30 بكسل، بدون فجوة: الافتراضي هو 30 بكسل، وهو نفس الخط؛</h3><div><div>العديد من الأصدقاء الذين درسوا لغة C ينظرون إلى لغة C عندما يتعلق الأمر باللغات، ستكون هناك بالتأكيد أسئلة مثل هذه: لماذا تعمل لغة C تحت نافذة سوداء؟ برنامج إما يحسب مساحة المثلث أو يطبع عدد أزهار النرجس؟ بغض النظر عن مدى روعة البرمجة، لماذا لا نزال قادرين على تنفيذ تلك البرامج الرائعة؟ في النهاية، إنها مجرد طفولية! لماذا. </div><div>أولاً، موضع اختراع لغة C، منذ بداية اختراعها على يد دينيس ريتشي مخترع لغة C، نعلم أنها نظام وليست برنامج رسومي بحد ذاته، يجب أن يتضمن سلسلة من المهام الأساسية مثل تطوير برامج التشغيل، وصنع نواة النظام، وإدارة الملفات، والإدارة الداخلية، واتصالات الشبكة، وما إلى ذلك. </div><div>ثانيًا، وضع التدريس الشائع في الصين، في بيئتنا الحالية، فإن وضع التدريس في معظم الجامعات للغة C هو أن بعض الكليات فقط هي التي يجب أن تقدم هياكل البيانات بالإضافة إلى دورات لغة C. وهندسة الكمبيوتر ومبادئ المترجم ومبادئ نظام التشغيل ودورات أخرى. </div><div>ثالثًا، يمكن استخدام لغة C للقيام بذلك، ولكن نادرًا ما يتم ذلك مباشرة بلغة C، عندما نتعلم لغة C، نختار برامج وحدة التحكم، لذلك تعمل برامجك في نافذة سوداء عند كتابة تطبيق Windows، لن تكون هناك مثل هذه النافذة السوداء، وستظل هي بناء جملة لغة C، والتي يمكن للجميع فهمها. </div></div><br><h3>الخط: 30 بكسل، ضبط الفجوة: 14 بكسل؛</h3><div><div>سيعرف العديد من الأصدقاء الذين درسوا لغة C بالتأكيد عندما ينظرون إلى لغة C لدي هذا السؤال، لماذا تعمل لغة C تحت نافذة سوداء؟ برنامج إما يحسب مساحة المثلث أو يطبع عدد أزهار النرجس؟ بغض النظر عن مدى روعة البرمجة، لماذا لا نستطيع تنفيذ تلك البرامج الرائعة في النهاية، إنها مجرد طفولية! لماذا. </div><div>أولاً، موضع اختراع لغة C، منذ بداية اختراعها على يد دينيس ريتشي مخترع لغة C، نعلم أنها نظام وليست برنامج رسومي بحد ذاته، يجب أن يتضمن سلسلة من المهام الأساسية مثل تطوير برامج التشغيل، وصنع نواة النظام، وإدارة الملفات، والإدارة الداخلية، واتصالات الشبكة، وما إلى ذلك. </div><div>ثانيًا، وضع التدريس الشائع في الصين، في بيئتنا الحالية، فإن وضع التدريس في معظم الجامعات للغة C هو أن بعض الكليات فقط هي التي يجب أن تقدم هياكل البيانات بالإضافة إلى دورات لغة C. وهندسة الكمبيوتر ومبادئ المترجم ومبادئ نظام التشغيل ودورات أخرى. </div><div>ثالثًا، يمكن استخدام لغة C للقيام بذلك، ولكن نادرًا ما يتم ذلك مباشرة بلغة C، عندما نتعلم لغة C، نختار برامج وحدة التحكم، لذلك تعمل برامجك في نافذة سوداء عند كتابة تطبيق Windows، لن تكون هناك مثل هذه النافذة السوداء، وستظل هي بناء جملة لغة C، والتي يمكن للجميع فهمها. </div></div></body></html>نتائج التشغيل:
5. قاعدة العمود تحدد الحدود بين الأعمدة
القواعد:
قاعدة العمود:<عرض قاعدة العمود>||<نمط قاعدة العمود>||<لون قاعدة العمود>
وصف المعلمة
● عرض القاعدة العمود سمك الحدود
● نمط الحدود على غرار العمود القاعدة
●لون الحدود لون القاعدة العمود
ملاحظة: انتبه بشكل خاص إلى حقيقة أنه إذا كانت الفجوة بين الأعمدة أقل من عرض الحدود، فسيكون هناك موقف حيث تغطي الأعمدة الحدود.
(1) عرض قاعدة العمود
يضبط أو يسترد سمك الحدود بين أعمدة الكائن.
القواعد:
عرض قاعدة العمود:<الطول>|رفيع|متوسط|سميك؛
وصف المعلمة
●الطول: استخدم قيمة الطول لتحديد سمك الحدود، ولا يُسمح بالقيم السالبة؛
●medium: يحدد السُمك الافتراضي للحدود؛
●رفيع: يحدد حدًا أرق من السُمك الافتراضي؛
●سميك: يحدد حدودًا أكثر سمكًا من السُمك الافتراضي.
(2) يحدد نمط قاعدة العمود نمط الحدود
يقوم بتعيين أو استرداد نمط الحدود بين أعمدة الكائن.
قواعد اللغة
نمط قاعدة العمود: لا شيء|مخفي|منقط|متقطع|صلب|مزدوج|أخدود|تلال|داخل|بداية؛
وصف المعلمة
● لا شيء: لا يوجد مخطط تفصيلي؛
●مخفي: إخفاء الحدود؛
●منقط: مخطط منقط؛
●متقطع: مخطط تفصيلي متقطع؛
●صلب: مخطط تفصيلي متين؛
●مزدوج: مخطط خطي مزدوج؛
●الأخدود: شكل أخدود ثلاثي الأبعاد؛
●التلال: شكل أخدود محدب ثلاثي الأبعاد؛
●أدخل: كفاف حافة مقعرة ثلاثية الأبعاد؛
●البداية: مخطط حافة محدبة ثلاثية الأبعاد.
ملاحظة: إذا كان هناك مخطط تفصيلي بخطين، فإن العرض سيشمل المسافة بين الخطين.
(3) لون قاعدة العمود يضبط لون الحدود
يقوم بتعيين أو استرداد لون الحدود بين أعمدة الكائن.
القواعد:
لون قاعدة العمود:<color>;
وصف المعلمة: تحديد اللون. بدون العرض والأسلوب، سوف يفشل اللون. الأسود الافتراضي.
6. column-span يضبط العنصر ليشمل جميع الأعمدة
يضبط أو يسترد ما إذا كان عنصر الكائن يمتد إلى كافة الأعمدة.
القواعد:
امتداد العمود: لا شيء|الكل؛
وصف المعلمة: لا شيء: لا يمتد إلى جميع الأعمدة؛
ولا يتم استخدامه في الحاوية مثل سمات الأعمدة الأخرى، ولكن في العناصر الفرعية للحاوية.
7. ملء الأعمدة يضبط ارتفاع الأعمدة المراد توحيدها (غير متوافق حاليًا مع المتصفحات الرئيسية)
يضبط أو يسترد ما إذا كان ارتفاع جميع أعمدة الكائن موحدًا.
القواعد:
ملء العمود:افتراضي|التوازن؛
وصف المعلمة: تلقائي: المحتوى التكيفي لارتفاع العمود: يتم توحيد ارتفاع جميع الأعمدة مع العمود الأعلى.
المتصفحات الرئيسية غير متوافقة مع هذه السمة.
8. فاصل الأعمدة يحدد السطر الجديد
●column-break-before يضبط ما إذا كان سيتم فصل سطر قبل الكائن المحدد.
●column-break-after يضبط ما إذا كان سيتم فصل سطر بعد الكائن المحدد.
●column-break-inside يضبط ما إذا كان سيتم فصل الخطوط داخل الكائن
(1) عمود فاصل قبل
ما إذا كان سيتم فصل الخطوط قبل ضبط الكائن أو استرداده.
القواعد:
فاصل الأعمدة قبل: تلقائي|دائمًا|تجنب؛
وصف المعلمة: تلقائي: لا يفرض ولا يحظر كسر الأسطر قبل العناصر وإنشاء أعمدة جديدة؛ دائمًا: كسر الأسطر قبل العناصر وإنشاء أعمدة جديدة دائمًا؛ تجنب: تجنب كسر الأسطر قبل العناصر وإنشاء أعمدة جديدة.
(2) عمود فاصل بعد
ما إذا كان سيتم فصل الخطوط بعد ضبط الكائن أو استرجاعه.
القواعد:
فاصل الأعمدة بعد: تلقائي|دائمًا|تجنب؛
وصف المعلمة: تلقائي: لا يفرض ولا يحظر فصل الأسطر بعد العناصر وإنشاء أعمدة جديدة؛ دائمًا: فصل الأسطر بعد العناصر وإنشاء أعمدة جديدة دائمًا؛ تجنب: تجنب كسر الأسطر بعد العناصر وإنشاء أعمدة جديدة.
(3) سمة فاصل الأعمدة من الداخل
يضبط أو يسترد ما إذا كانت الخطوط مقطوعة داخل الكائن.
القواعد:
فاصل الأعمدة من الداخل: تلقائي | تجنب