Содержание

Красивое оформление списков на CSS3

1
2
3
4
5
6
7
8
9
10
11
12
13
<ol>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a>
        <ol>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
        </ol>
    </li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>						
</ol>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.rounded-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: . 4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;	
}
 
.rounded-list a:hover {
    background: #eee;
}
 
.rounded-list a:hover:before {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);	
}
 
.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;	
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
<ol>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a>
        <ol>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
        </ol>
    </li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>						
</ol>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
. rectangle-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;	
}
 
.rectangle-list a:hover {
    background: #eee;
}	
 
.rectangle-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;	
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #fa8072;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}
 
.rectangle-list a:after {
    position: absolute;	
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;				
}
 
.rectangle-list a:hover:after {
    left: -.5em;
    border-left-color: #fa8072;				
}

<ol>

<li><span>1.</span>Текст</li>

<li><span>2.</span>Текст</li>

….

</ol>

.num-list li {

margin-bottom: 15px;

margin-top: 10px;

list-style: none;

}

 

.num-list li span{

background: #05A4E8; /*фон */

color: #FFF; /* цвет цифр */

margin-right: 10px; /* правый отступ */

padding: 3px 6px; /* внутренние отступы */

font-weight: bold; /*жирность цифр */

font-size:16px; /*размер шрифта */

border-radius:12px; /*скругление углов */

}

ЧерныйBlack#000000rgb(0,0,0)
СерыйGray#808080rgb(128,128,128)
СеребряныйSilver#c0c0c0rgb(192,192,192)
БелыйWhite#ffffffrgb(255,255,255)
Фуксия, МаджентаFuchsia,Magenta#ff00ffrgb(255,0,255)
ПурпурныйPurple#800080rgb(128,0,128)
КрасныйRed#ff0000rgb(255,0,0)
Коричнево-малиновыйMaroon#800000rgb(128,0,0)
ЖёлтыйYellow#ffff00rgb(205,92,92)
ОливковыйOlive#808000rgb(240,128,128)
ЛаймLime#00ff00rgb(250,128,114)
ЗелёныйGreen#008000rgb(233,150,122)
Цвет морской волныAqua#00ffffrgb(205,92,92)
Окраски птицы чирокTeal#008080rgb(240,128,128)
СинийBlue#0000ffrgb(250,128,114)
Форма морских офицеровNavy#000080rgb(233,150,122)

Дымчато-белыйWhiteSmoke#f5f5f5rgb(245,245,245)
ГейнсбороGainsboro#dcdcdcrgb(220,220,220)
Светло серыйLightGrey,LightGray#d3d3d3rgb(211,211,211)
СеребряныйSilver#c0c0c0rgb(192,192,192)
Темно серыйDarkGray,DarkGrey#a9a9a9rgb(169,169,169)
СерыйGray,Grey#808080rgb(128,128,128)
Тусклый серыйDimGray,DimGrey#696969rgb(105,105,105)
Светлый аспидно-серыйLightSlateGray,LightSlateGrey#778899rgb(119,136,153)
Серый шиферSlateGray,SlateGrey#708090rgb(112,128,144)
Аспидно-серыйDarkSlateGray,DarkSlateGrey#2f4f4frgb(47,79,79)
ЧёрныйBlack#000000rgb(0,0,0)

Светло-коралловыйLightCoral#f08080rgb(240,128,128)
ЛососевыйSalmon#fa8072rgb(250,128,114)
Тёмно-лососёвыйDarkSalmon#e9967argb(233,150,122)
Светло-лососёвыйLightSalmon#ffa07argb(255,160,122)
МалиновыйCrimson#dc143crgb(220,20,60)
КрасныйRed#ff0000rgb(255,0,0)
Индийский красныйIndianRed#cd5c5crgb(205,92,92)
КирпичныйFireBrick#b22222rgb(178,34,34)
Коричнево-бордовыйBrown#a52a2argb(165,42,42)
Тёмно-красныйDarkRed#8b0000rgb(139,0,0)
Коричнево-малиновыйMaroon#800000rgb(128,0,0)

Цвет морской раковиныSeashell#fff5eergb(255,245,238)
БежевыйBeige#f5f5dcrgb(245,245,220)
Старое кружевоOldLace#fdf5e6rgb(253,245,230)
Цветочный белыйFloralWhite#fffaf0rgb(255,250,240)
Белый антикAntiqueWhite#faebd7rgb(250,235,215)
ЛьнянойLinen#faf0e6rgb(250,240,230)
Очищенный миндальBlanchedAlmond#ffebcdrgb(255,235,205)
БисквитныйBisque#ffe4c4rgb(255,228,196)
Белый навахоNavajoWhite#ffdeadrgb(255,222,173)
ПшеничныйWheat#f5deb3rgb(245,222,179)
Плотная древесинаBurlyWood#deb887rgb(222,184,135)
Цвет загараTan#d2b48crgb(210,180,140)
Красный песокSandyBrown#f4a460rgb(244,164,96)
Золотисто-березовыйGoldenrod#daa520rgb(218,165,32)
Тёмный золотарникDarkGoldenRod#b8860brgb(184,134,11)
ПеруPeru#cd853frgb(205,133,63)
ШоколадныйChocolate#d2691ergb(210,105,30)
Кожаного седла для лошадиSaddleBrown#8b4513rgb(139,69,19)
СиенаSienna#a0522drgb(160,82,45)
Светлый сомонLightSalmon#ffa07argb(255,160,122)
КоралловыйCoral#ff7f50rgb(255,127,80)
ТоматныйTomato#ff6347rgb(255,99,71)
Оранжево-красныйOrangeRed#ff4500rgb(255,69,0)
Тёмно-оранжевыйDarkOrange#ff8c00rgb(255,140,0)
ОранжевыйOrange#ffa500rgb(255,165,0)

Цвет пестиков неспелой кукурузыCornsilk#fff8dcrgb(255,248,220)
Слоновая костьIvory#fffff0rgb(255,255,240)
Светло-жёлтыйLightYellow#ffffe0rgb(255,255,224)
Лимонно-кремовыйLemonChiffon#fffacdrgb(255,250,205)
Светло-жёлтый золотистыйLightGoldenrodYellow#fafad2rgb(250,250,210)
Побег папайиPapayaWhip#ffefd5rgb(255,239,213)
МокасиновыйMoccasin#ffe4b5rgb(255,228,181)
Тёмно-персиковыйPeachPuff#ffdab9rgb(255,218,185)
Бледно-золотистыйPaleGoldenrod#eee8aargb(238,232,170)
Светлый хакиKhaki#f0e68crgb(240,230,140)
Тёмный хакиDarkKhaki#bdb76brgb(189,183,107)
ЖёлтыйYellow#ffff00rgb(255,255,0)
ЗолотойGold#ffd700rgb(255,215,0)

Медовая росаHoneydew#f0fff0rgb(240,255,240)
Мятно-кремовыйMintCream#f5fffargb(245,255,250)
Зелёно-жёлтыйGreenYellow#adff2frgb(173,255,47)
ШартрёзChartreuse#7fff00rgb(127,255,0)
Зелёная лужайкаLawnGreen#7cfc00rgb(124,252,0)
ЛаймLime#00ff00rgb(0,255,0)
Лаймово-зелёныйLimeGreen#32cd32rgb(50,205,50)
Бледный зелёныйPaleGreen#98fb98rgb(152,251,152)
Светло-зелёныйLightGreen#90ee90rgb(144,238,144)
Умеренный весенний зелёныйMediumSpringGreen#00fa9argb(0,250,154)
Весенне-зелёныйSpringGreen#00ff7frgb(0,255,127)
Умеренно-зелёное мореMediumSeaGreen#3cb371rgb(60,179,113)
Зелёное мореSeaGreen#2e8b57rgb(46,139,87)
Лесной зелёныйForestGreen#228b22rgb(34,139,34)
ЗелёныйGreen#008000rgb(0,128,0)
Очень тёмный лимонный зеленыйDarkGreen#006400rgb(0,100,0)
Жёлто-зелёныйYellowGreen#9acd32rgb(154,205,50)
Нежно-оливковыйOliveDrab#6b8e23rgb(107,142,35)
ОливковыйOlive#808000rgb(128,128,0)
Тёмный оливково-зеленыйDarkOliveGreen#556b2frgb(85,107,47)
Умеренный аквамариновыйMediumAquamarine#66cdaargb(102,205,170)
Тёмное зелёное мореDarkSeaGreen#8fbc8frgb(143,188,143)
Светлое зелёное мореLightSeaGreen#20b2aargb(32,178,170)
Тёмный цианDarkCyan#008b8brgb(0,139,139)
Окраски птицы чирокTeal#008080rgb(0,128,128)

Небесная лазурьAzure#f0ffffrgb(240,255,255)
Синяя ЭлисAliceBlue#f0f8ffrgb(240,248,255)
Светлый цианLightCyan#e0ffffrgb(224,255,255)
Циан,цвет морской волныCyan,Aqua#00ffffrgb(0,255,255)
АквамариновыйAquamarine#7fffd4rgb(127,255,212)
Светло-бирюзовыйTurquoise#40e0d0rgb(64,224,208)
Умеренно-бирюзовыйMediumTurquoise#48d1ccrgb(72,209,204)
Тёмно-бирюзовыйDarkTurquoise#00ced1rgb(0,206,209)
Бледно-синийPaleTurquoise#afeeeergb(175,238,238)
Пыльный голубойPowderBlue#b0e0e6rgb(176,224,230)
Светлый синийLightBlue#add8e6rgb(173,216,230)
Светлый стальной синийLightSteelBlue#b0c4dergb(176,196,222)
Городское небоSkyBlue#87ceebrgb(135,206,235)
Светло-голубойLightSkyBlue#87cefargb(135,206,250)
Морозное небоDeepSkyBlue#00bfffrgb(0,191,255)
Защитно-синийDodgerBlue#1e90ffrgb(30,144,255)
ВасильковыйCornflowerBlue#6495edrgb(100,149,237)
Умеренный аспидно-синийMediumSlateBlue#7b68eergb(123,104,238)
Кадетский синийCadetBlue#5f9ea0rgb(95,158,160)
Синяя стальSteelBlue#4682b4rgb(70,130,180)
Королевский синийRoyalBlue#4169e1rgb(65,105,225)
СинийBlue#0000ffrgb(0,0,255)
Средний синийMediumBlue#0000cdrgb(0,0,205)
Тёмный ультрамариновыйDarkBlue#00008brgb(0,0,139)
Формы морских офицеровNavy#000080rgb(0,0,128)
Полуночный чёрныйMidnightBlue#191970rgb(25,25,112)
Аспидно-синийSlateBlue#6a5acdrgb(106,90,205)
Тёмный аспидно-синийDarkSlateBlue#483d8brgb(72,61,139)

Призрачно-белыйGhostWhite#f8f8ffrgb(248,248,255)
ЛавандаLavender#e6e6fargb(230,230,250)
ЧертополохThistle#d8bfd8rgb(216,191,216)
Светлая сливаPlum#dda0ddrgb(221,160,221)
Розово-фиолетовыйViolet#ee82eergb(238,130,238)
ОрхидеяOrchid#da70d6rgb(218,112,214)
Фуксия,МаджентаFuchsia,Magenta#ff00ffrgb(255,0,255)
Умеренный фиолетово-красныйMediumVioletRed#c71585rgb(199,21,133)
Умеренный цвет орхидеиMediumOrchid#ba55d3rgb(186,85,211)
Умеренный пурпурныйMediumPurple#9370dbrgb(147,112,219)
Сине-лиловыйBlueViolet#8a2be2rgb(138,43,226)
Тёмно-фиолетовыйDarkViolet#9400d3rgb(148,0,211)
Тёмная орхидеяDarkOrchid#9932ccrgb(153,50,204)
Тёмный маджентаDarkMagenta#8b008brgb(139,0,139)
ПурпурныйPurple#800080rgb(128,0,128)
ИндигоIndigo#4b0082rgb(75,0,130)

БелоснежныйSnow#fffafargb(255,250,250)
Розово-лавандовыйLavenderBlush#fff0f5rgb(255,240,245)
Тускло-розовыйMistyRose#ffe4e1rgb(255,228,225)
РозовыйPink#ffc0cbrgb(255,192,203)
Светло-розовыйLightPink#ffb6c1rgb(255,182,193)
Ярко-розовыйHotPink#ff69b4rgb(255,105,180)
Глубокий розовыйDeepPink#ff1493rgb(255,20,147)
ЛиловыйPaleVioletRed#db7093rgb(219,112,147)
Розово-коричневыйRosyBrown#bc8f8frgb(188,143,143)

Необходимые знания:Базовое представление о компьютерах и базовое понимание HTML.
Цель:Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.