الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

CSS و HTML شبكة استجابة من السداسي.

عرض التوضيح المباشر

Flexbox vs CSS Grid

يستخدم هذا الفرع FlexBox لتخطيط السداسي. إصدار آخر باستخدام تخطيط شبكة CSS هو Availbale على فرع CSS-Grid.
تحتوي شبكة CSS على دعم متصفح أقل من Flexbox (انظر Caniuse) ولكن يجعل تباعد السداسي أسهل للفهم والعمل معه.

سمات

  • شبكة السداسي مستجيبة وفقًا لعرض الحاوية ( #hexGrid )
  • تحافظ السداسي على نسبة العرض إلى الارتفاع وفقًا لعرضها
  • عدد Hexagons لكل صف متكيف ويتغير من 5 إلى 2 على نقاط استراحة الاستعلام الإعلامية
  • ينزلق العنوان والنص القصير على تحوم السداسي والتركيز
  • Hexagons ويمكن تدويرها من خلال علامة التبويب (التنقل في لوحة المفاتيح)

تأثير النص وتحوم:

يتم تحديد CSS للنص وتأثير التحويم في ورقة أنماط hexagons.css . يمكنك إزالته تمامًا أو تغيير تأثير التحويم ، الخط ، حجم الخط ...

تغيير عدد السداسي لكل صف:

يحدد عرض عناصر .hex عدد السداسي لكل صف. خصائص CSS التي تحتاج إلى تغيير كلها في استفسارات وسائل الإعلام تحت HEXAGON SIZING AND EVEN ROW INDENTATION .
يغير كل استعلام إعلامي عدد السداسي لكل صف.

لتغيير عدد السداسي في كل صف ، تحتاج إلى:

عرض .hex

تخصيص مع عناصر .hex مع: 

 w = width of the .hex elements in percent
x = the number of hexagons you want on the odd rows (1st, 3rd, 5th...)

w = 100 / x

مثال على 8 hexagons على صفوف غريبة (هذا يعني أنه سيكون هناك 7 سداسيين على صفوف حتى): 

 w = 100 / 8 = 12.5%

المسافة البادئة حتى الصفوف

الصفوف الزوجية (الثانية ، الرابع ، السادس ...) بادئة مع margin-left على أول مسدس من الصفوف حتى.

المحدد:
يمكنك تحديد هذا المسدس مع .hex:nth-child(an+b) محدد (مزيد من المعلومات حول الفئة الزائفة nth-child() على MDN). لتحديد المحدد ، يمكنك استخدام هذه القاعدة: 

 .hex:nth-child(an+b)

x = the number of hexagons on odd rows(1st, 3rd, 5th...)
Y = the number of hexagons on even rows(2nd, 4th, 6th...)
a = x + y
b = x + 1

مثال على 8 hexagons على صفوف غريبة (هذا يعني أنه سيكون هناك 7 سداسيين على صفوف حتى): 

 x = 8
y = 7
a = 8 + 7 = 15
b = 8 + 1 = 9

The selector is : .hex:nth-child(15n+9)

قيمة الهامش اليسار:
قيمة الهامش اليسرى هي نصف عرض سداسي واحد ، لذا فإن 8 سداسي في صف غريب: 

 with of hexagons = 12.5% (see "width of .hex")
margin-left = 12.5 / 2 = 6.25%

تم إنشاؤها بواسطة Web-Tiki

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل