Пара CSS-примеров оформления FAQ'ов

Работа с контентом, Дизайн и верстка Приведем несколько примеров симпатичного оформления FAQ.

example-1

А можно ли называть группы по-русски?

А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.

Здравствуйте. Есть ли возможность прикрутить к PmWiki подстветку синтаксиса для различных языков программирования?

Конечно! Она реализована прямо на этой странице и доступна на уровне ядра!

Что еще классного есть в PmWiki ?

Ну вот например: хотите верьте, хотите нет, но для оформления этой страницы используется CSS-код, написанный на ней же самой.

Это на редкость удобная возможность, особенно для написания технических материалов.

CSS-код для этого FAQ:
 *
.example-1 .question  {
	margin-left: -5px;
	font-size: 16px;
	font-variant: small-caps;
}


.example-1 .question:first-letter {
font-variant: small-caps;
font-family: Old English,Georgia,serif;
font-size: 35px;
float: left;
}

example-2

А можно ли называть группы по-русски?

А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.

Здравствуйте. Есть ли возможность прикрутить к PmWiki подстветку синтаксиса для различных языков программирования?

Конечно! Она реализована прямо на этой странице и доступна на уровне ядра!

Что еще классного есть в PmWiki ?

Ну вот например: хотите верьте, хотите нет, но для оформления этой страницы используется CSS-код, написанный на ней же самой.

Это на редкость удобная возможность, особенно для написания технических материалов.

CSS-код для этого FAQ:
 *
.example-2 .question:before  { content: "\e085"; font-family: 'Glyphicons Halflings'; }

example-3

Можно сделать FAQ в виде аккордеона, но для того применяется другая разметка
(:details summary="А можно ли называть группы по-русски?":)
А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.
(:detailsend:)
(:details summary="Здравствуйте. Есть ли возможность прикрутить к PmWiki подстветку синтаксиса для различных языков программирования?":)
Конечно! Она реализована прямо на этой странице и доступна на уровне ядра!
(:detailsend:)
(:details summary="Что еще классного есть в PmWiki ?":)
Ну вот например: хотите верьте, хотите нет, но для оформления этой страницы используется CSS-код, написанный на ней же самой. 

Это на редкость удобная возможность, особенно для написания технических материалов. 
(:detailsend:)
А можно ли называть группы по-русски?

А то! Можно! Но при копировании такой URL в буфер обмена выглядеть она будет так себе.

Здравствуйте. Есть ли возможность прикрутить к PmWiki подстветку синтаксиса для различных языков программирования?

Конечно! Она реализована прямо на этой странице и доступна на уровне ядра!

Что еще классного есть в PmWiki ?

Ну вот например: хотите верьте, хотите нет, но для оформления этой страницы используется CSS-код, написанный на ней же самой.

Это на редкость удобная возможность, особенно для написания технических материалов.

Todo:git

  • Taurus, подкинь еще примеров!