<video data-type="video" type="video/mp4" src="/data/NFL.1.mp4" autoplay controls></video>
$(function (e) {
$('[data-type="video"]').on('play', function () {
var video = this;
setTimeout(function () {
video.pause();
}, 5000);
});
});
$('[data-type="video"]').on('timeupdate', function () {
if (this.currentTime > 5) {
this.pause();
}
});
<meta name="viewport" content="user-scalable=0">
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 29px,
rgba(255, 255, 255, .5) 29px,
rgba(255, 255, 255, .5) 30px
);
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 29px,
rgba(255, 255, 255, .5) 29px,
rgba(255, 255, 255, .5) 30px
);
background-size: 42px 42px;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 25%,
rgba(255, 255, 255, .5) 25%,
rgba(255, 255, 255, .5) calc(25% + 1px),
transparent calc(25% + 1px),
transparent 75%, rgba(255, 255, 255, .5) 75%,
rgba(255, 255, 255, .5) calc(75% + 1px),
transparent calc(75% + 1px),
transparent
);
background-size: 40px 40px;
Можно ли использовать rem для отступов блока друг от друга
К примеру, задать тегу html размер шрифта в один пиксель и использовать rem - так можно или не нужно и почему?
<input type="date" min="2015-04-20" max="2015-04-24">
#main-navigation li:not(:last-child) a {
border-right: 1px dashed #39f;
}
#main-navigation li + li a {
border-right: 1px dashed #39f;
}
<div class="container">
<div class="header"></div>
<div class="main">
<div class="content">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="sidebar"></div>
</div>
<div class="footer"></div>
</div>
html {
background: #f6f6f6;
}
body {
margin: 0;
}
html,
body,
.container {
height: 100%;
}
.container {
position: relative;
min-width: 600px;
}
.header {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 80px;
background: #9c6;
}
.main {
display: flex;
box-sizing: border-box;
min-height: 100%;
margin: 0 0 -120px;
padding: 80px 0 120px;
}
.content {
flex-grow: 1;
background: #ccf;
}
.sidebar {
flex-basis: 200px;
background: #f99;
}
.footer {
height: 120px;
background: #69c;
}
.content:before,
.content:after {
content: "";
display: table;
}
.block {
width: 150px;
height: 100px;
margin: 10px;
background: #f96;
}
<div class="container">
<div class="header"></div>
<div class="main">
<div class="content">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="sidebar"></div>
</div>
<div class="footer"></div>
</div>
html {
background: #f6f6f6;
}
body {
margin: 0;
}
html,
body,
.container {
height: 100%;
}
.container {
position: relative;
min-width: 600px;
}
.header {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 80px;
background: #9c6;
}
.main {
position: relative;
box-sizing: border-box;
min-height: 100%;
margin: 0 0 -120px;
padding: 80px 0 120px;
}
.main:after {
content: "";
display: block;
clear: both;
}
.content {
float: left;
width: 100%;
margin-right: -200px;
}
.sidebar {
float: right;
width: 200px;
}
.content:before,
.sidebar:before {
content: "";
position: absolute;
z-index: -1;
top: 80px;
bottom: 120px;
}
.content:before {
left: 0;
right: 200px;
background: #ccf;
}
.sidebar:before {
right: 0;
width: 200px;
background: #f99;
}
.footer {
clear: both;
position: relative;
height: 120px;
background: #69c;
}
.block {
width: 150px;
height: 100px;
margin: 10px;
background: #f96;
}
$(function () {
$('.cena').each(function () {
$(this).text($(this).text().replace(/^\s*(\d+)(\d{3})\s*([а-я\.]+)?\s*$/, '$1 $2 $3'));
});
});
body:after {
content: "";
position: fixed;
z-index: 1; /*Раззудись, молодецкое плечо*/
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<style>
#container {
display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Chrome */
display: flex; /* Opera 12.1, Firefox 20+ */
}
.column {
width: 50%;
}
.content.c1 {
height: 300px;
background: #cf9;
}
.content.c2 {
height: 500px;
background: #c9f;
}
</style>
<!--[if IE]>
<style>
#container {
font-size: 0;
}
.column {
display: inline-block;
vertical-align: top;
font-size: 1rem;
}
</style>
<![endif]-->
...
<div id="container">
<div class="column">
<div class="content c1"></div>
</div>
<div class="column">
<div class="content c2"></div>
</div>
</div>