تنسيق القوائم باستخدام css - مدرسة الويب web school

أعلان الهيدر

الرئيسية تنسيق القوائم باستخدام css

تنسيق القوائم باستخدام css

يمكن اجراء العديد من التنسيقات على القوائم من خلال css وذلك بجعل القوائم الرأسية تظهر أفقيا
وذلك من خلال css
<style>
ul{
display: inline
}
</style>
مثال:
<style>
                ul li{
                    display: inline;
                }
            </style>
        </head>
        <body>
            <h2>office applications</h2>
            <ul>
                <li>word</li>
                <li>excel</li>
                <li>power point</li>
                <li>access</li>
            </ul>
ناتج المثال:
وبمزيد من التنسيقات باستخدام css يمكن جعل القوائم تظهر كما يلى:-
<style>
  #list{padding:0;}
#list li{
   display: inline;
  }
 #list  a {
   background-color:black;
   color:white;
   padding:10px;
   text-decoration: none;
   border-radius: 6px 6px 6px 6px;
  }
  #list  a:hover{background-color: #dd0}
 </style>
</head>
<body >
 <h2>office</h2>
 <ul id="list">
 <li> <a href="#">word</li></a>
 <li> <a href="#">excel</li></a>
<li><a href="#">  access</li></a>
   </ul>
فيظهر ناتج المثال:
وعند الوقوف بالماوس على الارتباطات تظهر كما يلى:-



هناك تعليق واحد:

  1. مع أن الموضوع قديم ولكن تستحق يقالك شكرا وجزاك الله خير .

    ردحذف

شائع هذا الأسبوع

يتم التشغيل بواسطة Blogger.

تم الكشف عن مانع الإعلانات

الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك. شكرًا لك على الدعم ❤️