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

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-01-29 00:09:23 +03:00
parent 6cfa0a2738
commit a2dd0148ab
25 changed files with 279 additions and 284 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,22 +1,28 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ваша верстка виджета, ваши стили -->
<ul id="images">
<li><img src="http://js.cx/carousel/1.png"></li>
<li><img src="http://js.cx/carousel/2.png"></li>
<li><img src="http://js.cx/carousel/3.png"></li>
<li><img src="http://js.cx/carousel/4.png"></li>
<li><img src="http://js.cx/carousel/5.png"></li>
<li><img src="http://js.cx/carousel/6.png"></li>
<li><img src="http://js.cx/carousel/7.png"></li>
<li><img src="http://js.cx/carousel/8.png"></li>
<li><img src="http://js.cx/carousel/9.png"></li>
<li><img src="http://js.cx/carousel/10.png"></li>
<button class="arrow">⇦</button>
<button class="arrow">⇨</button>
<ul>
<li><img src="http://js.cx/carousel/1.png">
<li><img src="http://js.cx/carousel/2.png">
<li><img src="http://js.cx/carousel/3.png">
<li><img src="http://js.cx/carousel/4.png">
<li><img src="http://js.cx/carousel/5.png">
<li><img src="http://js.cx/carousel/6.png">
<li><img src="http://js.cx/carousel/7.png">
<li><img src="http://js.cx/carousel/8.png">
<li><img src="http://js.cx/carousel/9.png">
<li><img src="http://js.cx/carousel/10.png">
</ul>

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

@ -0,0 +1,40 @@
.arrow {
padding: 0;
background: #ddd;
border-radius: 15px;
border: 1px solid gray;
font-size: 24px;
line-height: 24px;
color: #444;
display: block;
}
.arrow:focus {
outline: none;
}
.arrow:hover {
background: #ccc;
cursor: pointer;
}
ul {
height: 130px;
width: 9999px;
margin: 0;
padding: 0;
list-style: none;
}
ul img {
width: 130px;
height: 130px;
/* по умолчанию inline, но в ряде браузеров это даст лишнее пространство вокруг элементов */
display: block;
}
ul li {
/* если в HTML между элементами <li>..</li> есть пробелы, то они будут видны на странице,
чтобы их избежать, нужно либо писать <li>..</li><li>..</li> вплотную, либо не ставить закрывающие </li> */
display: inline-block;
}