البرمجة

تحسين تصميم HTML باستخدام عناصر ul و li

01/02/2024
5 دقيقة واحدة

عندما نقوم بالنظر إلى الكود الذي قدمته، يظهر أنك تحاول تحرير تصميم HTML باستخدام عناصر

و

، وتبحث عن تحويله إلى تنسيق أفقي باستخدام عناصر

    و

  • . يتضمن التصميم الحالي روابط لمنتجات الأزياء مع الصور.

    لتحقيق هذا الهدف، يمكننا استخدام عناصر القائمة التعدادية (

      ) مع عناصر الفرع (

    • ) لكل فئة من المنتجات. سنقوم بإعادة بناء الهيكل باستخدام العناصر المناسبة لضمان استمرار عرض الصور بشكل صحيح.

      html
      html>
<html lang="ar">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تحرير تصميم HTML باستخدام عناصر ul و lititle>
head>

<body>
  <ul>
    <li>
      <a href="http://www.fatkart.com/lehengas">LEHENGA CHOLIa>
      <ul>
        <li><a href="http://www.fatkart.com/lehengas">Designer Lehengasa>li>
        <li><a href="http://www.fatkart.com/bollywood-lehengas">Bollywood Lehengasa>li>
        <li><a href="http://www.fatkart.com/lehenga-choli-below-3999">Lehengas Below Rs.3999/-a>li>
        <li><a href="http://www.fatkart.com/lehenga-choli-below-4999">Lehengas Below Rs.4999/-a>li>
      ul>
    li>
  ul>

  <ul>
    <li><a href="http://www.fatkart.com/esha-gupta"><img alt=" " src="http://d66kn5h946avo.cloudfront.net//image/data/zas/menu/L1.jpg" title=" " width="185">a>li>
    <li><a href="http://www.fatkart.com/alia-bhatt"><img alt=" " src="http://d66kn5h946avo.cloudfront.net//image/data/zas/menu/L2.jpg" title=" " width="185">a>li>
    <li><a href="http://www.fatkart.com/kriti-sanon"><img alt=" " src="http://d66kn5h946avo.cloudfront.net//image/data/zas/menu/L3.jpg" title=" " width="185">a>li>
    <li><a href="http://www.fatkart.com/shraddha-kapoor"><img alt=" " src="http://d66kn5h946avo.cloudfront.net//image/data/zas/menu/L4.jpg" title=" " width="185">a>li>
  ul>
body>

html>

      في هذا الكود، قمت بتحويل الروابط الرئيسية إلى عناصر

        و

      • لتكون هيكلية أكثر تنظيمًا واستخدمت عناصر
          و

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

          المزيد من المعلومات

          بالطبع، دعنا نقوم بتوسيع نقاشنا حول الكود المقدم وكيف يمكن تحسينه وتنظيمه بشكل أفضل.

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

          html
          html>
<html lang="ar">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تحرير تصميم HTML باستخدام عناصر ul و lititle>
  <style>
    body {
      font-family: 'Verdana, Arial, Helvetica, sans-serif, Trebuchet MS';
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    ul a {
      text-decoration: none;
      color: #969696;
    }

    ul li {
      margin-bottom: 5px;
      background-color: #332F2C;
      border-bottom: 1px solid #292623;
    }

    ul ul {
      padding-left: 15px;
    }

    img {
      display: block;
      width: 185px;
      height: auto;
    }
  style>
head>

<body>
  <ul>
    <li>
      <a href="http://www.fatkart.com/lehengas">LEHENGA CHOLIa>
      <ul>
        <li><a href="http://www.fatkart.com/lehengas">Designer Lehengasa>li>
        <li><a href="http://www.fatkart.com/bollywood-lehengas">Bollywood Lehengasa>li>
        <li><a href="http://www.fatkart.com/lehenga-choli-below-3999">Lehengas Below Rs.3999/-a>li>
        <li><a href="http://www.fatkart.com/lehenga-choli-below-4999">Lehengas Below Rs.4999/-a>li>
      ul>
    li>
  ul>

  <ul>
    <li><a href="http://www.fatkart.com/esha-gupta"><img alt=" " src="http://d66kn5h946avo.cloudfront.net//image/data/zas/menu/L1.jpg" title=" ">a>li>
    <li><a href="http://www.fatkart.com/alia-bhatt"><img alt=" " src="http://d66kn5h946avo.cloudfront.net//image/data/zas/menu/L2.jpg" title=" ">a>li>
    <li><a href="http://www.fatkart.com/kriti-sanon"><img alt=" " src="http://d66kn5h946avo.cloudfront.net//image/data/zas/menu/L3.jpg" title=" ">a>li>
    <li><a href="http://www.fatkart.com/shraddha-kapoor"><img alt=" " src="http://d66kn5h946avo.cloudfront.net//image/data/zas/menu/L4.jpg" title=" ">a>li>
  ul>
body>

html>

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

          الوسوم
          01/02/2024
          5 دقيقة واحدة
          جميع الحقوق محفوظة مركز حلول تكنولوجيا المعلومات
          زر الذهاب إلى الأعلى