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

fix carousel task li space

Browse source
This commit is contained in:
Ilya Kantor 2015-03-09 19:16:21 +03:00
parent 40b715f6e4
commit bdf7259897
5 changed files with 32 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

20
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
View file

@ -11,16 +11,16 @@
<button class="arrow prev">⇦</button> <button class="arrow prev">⇦</button>
<div class="gallery"> <div class="gallery">
<ul class="images"> <ul class="images">
<li><img src="https://js.cx/carousel/1.png"> <li><img src="https://js.cx/carousel/1.png"></li>
<li><img src="https://js.cx/carousel/2.png"> <li><img src="https://js.cx/carousel/2.png"></li>
<li><img src="https://js.cx/carousel/3.png"> <li><img src="https://js.cx/carousel/3.png"></li>
<li><img src="https://js.cx/carousel/4.png"> <li><img src="https://js.cx/carousel/4.png"></li>
<li><img src="https://js.cx/carousel/5.png"> <li><img src="https://js.cx/carousel/5.png"></li>
<li><img src="https://js.cx/carousel/6.png"> <li><img src="https://js.cx/carousel/6.png"></li>
<li><img src="https://js.cx/carousel/7.png"> <li><img src="https://js.cx/carousel/7.png"></li>
<li><img src="https://js.cx/carousel/8.png"> <li><img src="https://js.cx/carousel/8.png"></li>
<li><img src="https://js.cx/carousel/9.png"> <li><img src="https://js.cx/carousel/9.png"></li>
<li><img src="https://js.cx/carousel/10.png"> <li><img src="https://js.cx/carousel/10.png"></li>
</ul> </ul>
</div> </div>
<button class="arrow next">⇨</button> <button class="arrow next">⇨</button>

4
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css
View file

@ -61,6 +61,10 @@ body {
padding: 0; padding: 0;
list-style: none; list-style: none;
transition: margin-left 250ms; transition: margin-left 250ms;
/* remove white-space between inline-block'ed li */
/* http://davidwalsh.name/remove-whitespace-inline-block */
font-size: 0;
} }
.gallery li { .gallery li {

24
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
View file

@ -14,22 +14,22 @@
<ul> <ul>
<li><img src="https://js.cx/carousel/1.png"> <li><img src="https://js.cx/carousel/1.png"></li>
<li><img src="https://js.cx/carousel/2.png"> <li><img src="https://js.cx/carousel/2.png"></li>
<li><img src="https://js.cx/carousel/3.png"> <li><img src="https://js.cx/carousel/3.png"></li>
<li><img src="https://js.cx/carousel/4.png"> <li><img src="https://js.cx/carousel/4.png"></li>
<li><img src="https://js.cx/carousel/5.png"> <li><img src="https://js.cx/carousel/5.png"></li>
<li><img src="https://js.cx/carousel/6.png"> <li><img src="https://js.cx/carousel/6.png"></li>
<li><img src="https://js.cx/carousel/7.png"> <li><img src="https://js.cx/carousel/7.png"></li>
<li><img src="https://js.cx/carousel/8.png"> <li><img src="https://js.cx/carousel/8.png"></li>
<li><img src="https://js.cx/carousel/9.png"> <li><img src="https://js.cx/carousel/9.png"></li>
<li><img src="https://js.cx/carousel/10.png"> <li><img src="https://js.cx/carousel/10.png"></li>
</ul> </ul>
<script> <script>
/* этот код помечает картинки цифрами, для удобства разработки // этот код помечает картинки цифрами, для удобства разработки
его можно убрать, если не нужен */ // его можно убрать, если не нужен
var lis = document.getElementsByTagName('li'); var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) { for (var i = 0; i < lis.length; i++) {
lis[i].style.position = 'relative'; lis[i].style.position = 'relative';

4
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/style.css
View file

@ -24,6 +24,10 @@ ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
/* убрать между inline-block li лишние пробелы, которые есть в HTML */
/* http://davidwalsh.name/remove-whitespace-inline-block */
font-size: 0;
} }
ul img { ul img {

4
2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
View file

@ -75,8 +75,8 @@
</div> </div>
<script> <script>
/* Показать полупрозрачный DIV, затеняющий всю страницу // Показать полупрозрачный DIV, затеняющий всю страницу
(а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная) */ // (а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная)
function showCover() { function showCover() {
var coverDiv = document.createElement('div'); var coverDiv = document.createElement('div');
coverDiv.id = 'cover-div'; coverDiv.id = 'cover-div';