CSS Snippets – Lists

css-snippets

Προσαρμογή της css του θέματος για δημιουργία διαφορετικών λιστών

Λίστα με αριθμούς (default)

  1. Ανεπαρκής (με ορθογραφικά και συντακτικά λάθη, χωρίς χωρισμό παραγράφων, χωρίς λογική αλληλουχία)
  2. Φτωχή (με λίγα λόγια, χωρίς εικόνες)
  3. Καλή (με χωρισμό παραγράφων, εικονικό υλικό, χωρίς γραμματικά λάθη)
  4. Πολύ καλή (με πλούσιο υλικό, εικονικό υλικό, σωστό χωρισμό παραγράφων, τίτλους)

Λίστα με κουκκίδες (default / disc & circle – BULLET)

  • Ανεπαρκής (με ορθογραφικά και συντακτικά λάθη, χωρίς χωρισμό παραγράφων, χωρίς λογική αλληλουχία)
    • Φτωχή (με λίγα λόγια, χωρίς εικόνες)
    • Καλή (με χωρισμό παραγράφων, εικονικό υλικό, χωρίς γραμματικά λάθη)
  • Πολύ καλή (με πλούσιο υλικό, εικονικό υλικό, σωστό χωρισμό παραγράφων, τίτλους)

Λίστα με χεράκι (☛) (BLACK RIGHT POINTING INDEX)

 class="pointinglist"
<ol class="pointinglist">
  1. Ανεπαρκής (με ορθογραφικά και συντακτικά λάθη, χωρίς χωρισμό παραγράφων, χωρίς λογική αλληλουχία)
  2. Φτωχή (με λίγα λόγια, χωρίς εικόνες)
  3. Καλή (με χωρισμό παραγράφων, εικονικό υλικό, χωρίς γραμματικά λάθη)
  4. Πολύ καλή (με πλούσιο υλικό, εικονικό υλικό, σωστό χωρισμό παραγράφων, τίτλους)

Λίστα με check (✓) (CHECK MARK)

 class="checklist"
<ol class="checklist">
  1. Ανεπαρκής (με ορθογραφικά και συντακτικά λάθη, χωρίς χωρισμό παραγράφων, χωρίς λογική αλληλουχία)
  2. Φτωχή (με λίγα λόγια, χωρίς εικόνες)
  3. Καλή (με χωρισμό παραγράφων, εικονικό υλικό, χωρίς γραμματικά λάθη)
  4. Πολύ καλή (με πλούσιο υλικό, εικονικό υλικό, σωστό χωρισμό παραγράφων, τίτλους)

Λίστα με ballot (☐) (BALLOT BOX)

 class="ballotlist"
<ol class="ballotlist">
  1. Ανεπαρκής (με ορθογραφικά και συντακτικά λάθη, χωρίς χωρισμό παραγράφων, χωρίς λογική αλληλουχία)
  2. Φτωχή (με λίγα λόγια, χωρίς εικόνες)
  3. Καλή (με χωρισμό παραγράφων, εικονικό υλικό, χωρίς γραμματικά λάθη)
  4. Πολύ καλή (με πλούσιο υλικό, εικονικό υλικό, σωστό χωρισμό παραγράφων, τίτλους)

Λίστα με square (❏) (LOWER RIGHT DROP-SHADOWED WHITE SQUARE)

 class="squarelist"
<ol class="squarelist">
  1. Ανεπαρκής (με ορθογραφικά και συντακτικά λάθη, χωρίς χωρισμό παραγράφων, χωρίς λογική αλληλουχία)
  2. Φτωχή (με λίγα λόγια, χωρίς εικόνες)
  3. Καλή (με χωρισμό παραγράφων, εικονικό υλικό, χωρίς γραμματικά λάθη)
  4. Πολύ καλή (με πλούσιο υλικό, εικονικό υλικό, σωστό χωρισμό παραγράφων, τίτλους)

Λίστα με arrowhead (➤) (BLACK RIGHT ARROWHEAD)

 class="arrowheadlist"
<ol class="arrowheadlist">
  1. Ανεπαρκής (με ορθογραφικά και συντακτικά λάθη, χωρίς χωρισμό παραγράφων, χωρίς λογική αλληλουχία)
  2. Φτωχή (με λίγα λόγια, χωρίς εικόνες)
  3. Καλή (με χωρισμό παραγράφων, εικονικό υλικό, χωρίς γραμματικά λάθη)
  4. Πολύ καλή (με πλούσιο υλικό, εικονικό υλικό, σωστό χωρισμό παραγράφων, τίτλους)

Πρόσθετη css για τις λίστες στην προσαρμογή του θέματος

.pointinglist li,
.checklist li,
.ballotlist li,
.squarelist li,
.arrowheadlist li {
	list-style: none;
	position: relative;
}
.pointinglist li:before,
.checklist li:before,
.ballotlist li:before,
.squarelist li:before,
.arrowheadlist li:before {
	position: absolute;
	margin-left: -22px;
}
.pointinglist li:before {content: "\261b";}
.checklist li:before {content: "\2713";}
.ballotlist li:before {content: "\2610";}
.squarelist li:before {content: "\274F";}
.arrowheadlist li:before {content: "\27A4";}

/* optional for mobile devices */
@media (max-width:480px) {
	.pointinglist li:before,
	.checklist li:before,
	.ballotlist li:before,
	.squarelist li:before {
		top: 2px;
	}
}

Χρήσιμα


Αφήστε μια απάντηση