jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor renovations, beautify round 2 (final)

Browse source
This commit is contained in:
Ilya Kantor 2015-03-12 10:26:02 +03:00
parent fad6615c42
commit 8410ce6421
212 changed files with 1981 additions and 1717 deletions
Download patch file Download diff file Expand all files Collapse all files

36
8-css-for-js/17-css-sprite/article.md
View file

@ -11,24 +11,27 @@ CSS-спрайт -- способ объединить много изображ
```html
<ul>
<li class="open">
<div class="icon"></div>
<div class="text">Раздел 1<br>В две строки</div>
<ul>
<li class="open">
<div class="icon"></div>
<div class="text">Раздел 1
<br>В две строки</div>
<ul>
<li class="closed">
<div class="icon"></div>
<div class="text">Раздел 1.1 в одну строку</div>
</li>
<li class="leaf">
<div class="icon"></div>
<div class="text">Страница 1.2
<br> в две строки</div>
</li>
</ul>
</li>
<li class="closed">
<div class="icon"></div>
<div class="text">Раздел 1.1 в одну строку</div>
<div class="text">Раздел 2
<br>В две строки</div>
</li>
<li class="leaf">
<div class="icon"></div>
<div class="text">Страница 1.2<br> в две строки</div>
</li>
</ul>
</li>
<li class="closed">
<div class="icon"></div>
<div class="text">Раздел 2<br>В две строки</div>
</li>
</ul>
```
@ -78,6 +81,7 @@ CSS-спрайт -- способ объединить много изображ
А теперь самое забавное. Размер `DIV'а` для иконки -- жёстко фиксирован:
```css
/*+ no-beautify */
.icon {
*!*
width: 16px;
@ -103,6 +107,7 @@ CSS-спрайт -- способ объединить много изображ
В спрайте `icons.gif` изображения объединены так, что сдвиг на `16px` покажет следующую иконку:
```css
/*+ no-beautify */
.icon {
width: 16px;
height: 16px;
@ -164,6 +169,7 @@ background-position: -90px -40px;
Его стиль:
```css
/*+ no-beautify */
.rss {
width: 35px; /* ширина/высота больше чем размер иконки */
height: 35px;