في تصميم الويب، غالبًا ما نستخدم بعض الأسهم كديكور لتزيين صفحات الويب الخاصة بنا، على الرغم من أن العديد من مصممي مواقع الويب يرغبون الآن في استخدام أيقونات الخطوط لتحقيق تأثير الأسهم، إلا أن هذا سيعطي أيضًا بعض التأثير على تحميل صفحات الويب. اليوم، سيخبرك محرر Feiniao Muyu بكيفية استخدام div وCSS لتحقيق بعض تأثيرات الأسهم في تصميم الويب.
DIV+CSS لتحقيق تأثير الأسهم الصغيرة الصلبةفي بعض قوائم التنقل الثانوية أو القوائم التي تحتوي على وظائف منسدلة على صفحات الويب، سيتم تنفيذ بعض الأسهم الصغيرة للإشارة إلى أن DIV يحتوي على محتوى، فكيف ننفذ نمط هذه الأسهم الصغيرة؟
قم أولاً بوضع كود CSS
/*السهم لأعلى*/.to_top { width: 0; height: 0; border-bottom: 10px Solid #ccc; to_bottom { width: 0; height: 0; border-top: 10px Solid #ccc; 10 بكسل شفاف صلب؛}/*سهم إلى اليسار*/.to_left { width: 0; height: 0; border-right: 10px Solid #ccc; / *السهم إلى اليمين*/ .to_right { width: 0 height: 0; border-left: 10px Solid #cccf; شفاف؛ الحد السفلي: 10 بكسل شفاف؛}كود HTML
<p>سهم لأعلى</p><div class=to_top></div><p>سهم لليسار</p><div class=to_left></div><p>سهم لليمين</p>< div class =to_right></div><p>السهم لأسفل</p><div class=to_bottom></div>
نتائج تشغيل التعليمات البرمجية
إذا شعرت أن السهم كبير جدًا أو صغير جدًا، وأن اللون ليس هو ما تريده، فيمكننا ضبط حجم السهم عن طريق ضبط سمك حدود DIV ولونها.
DIV+CSS لتحقيق تأثير الأسهم الكبيرةعند تعديل السمة المكونة من ثلاثة أعمدة بالأمس، أبلغ بعض المستخدمين عن ضرورة إضافة سهم كبير لليسار ولليمين. على الرغم من أنه من السهل جدًا تنفيذه (يمكنك استخدام صورة خلفية بدلاً من ذلك)، إلا أنك تحتاج إلى إضافة وظيفة خلفية يمكنها تخصيص اللون، لذلك فكرت في استخدام DIV+CSS لرسم الأسهم، بحيث يمكنك تخصيص اللون بسهولة لون السهام.
كود CSS
.text{ العرض: كتلة مضمنة؛ الحدود العلوية: 2 بكسل صلبة؛ الحدود اليمنى: 2 بكسل صلبة؛ العرض: 100 بكسل؛ لون الحدود: # EA6000؛ تحويل: تدوير (-135 درجة)؛ تلقائي 100 بكسل؛}كود HTML
<span class=text></span>
نتائج تشغيل التعليمات البرمجية
يمكننا تغيير عدد الأسهم عن طريق تعديل الكود الموجود أسفل C، أو يمكننا تعديل العرض والارتفاع لتغيير حجم السهم.
transform: rotate(-135deg);/*调整旋转的角度*/
ما ورد أعلاه هو الكود الذي يقدمه لك المحرر لاستخدام div+CSS لتنفيذ رمز سهم بسيط في HTML، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد لك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!
إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!