چگونه ایجاد می‌شود: لیست گروهی

آموزش اینکه چگونه با استفاده از CSS یک لیست ساده را به "لیست گروهی" تبدیل کنید.

  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy

آزمایش کنید

چگونه لیست‌های گروهی ایجاد می‌کنیم

مرحله اول - HTML اضافه كنيد:

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>

دو مرحله - CSS اضافه كنيد:

ul {
  list-style-type: none; /* 移除项目符号 */
  padding: 0; /* 移除内边距 */
  margin: 0; /* 移除外边距 */
}
ul li {
  border: 1px solid #ddd; /* 为每个列表项添加细边框 */
  margin-top: -1px; /* 防止双边框 */
  background-color: #f6f6f6; /* 添加灰色背景颜色 */
  padding: 12px; /* 添加一些内边距 */
}

آزمایش کنید

صفحات مرتبط

آموزش:لیست CSS