隐藏时如何暂停jquery计时器
16lz
2021-01-22
How do i stop the timer when it goes hidden it just keeps running but it is supposed to start running again when it gets displayed again.
如何在计时器被隐藏时停止它只是继续运行但它应该在再次显示时再次开始运行。
when it is displayed at first it start correctly but than it keeps running while t is hidden but is supposed to start running when it is displayed again.
当它首先显示它正确启动但是它在t被隐藏时继续运行但是当它再次显示时它应该开始运行。
it is supposed for tablets so i recommend running it while inspecting elements in a smaller screen.
它适用于平板电脑,所以我建议在检查较小屏幕中的元素时运行它。
// document.addEventListener('touchstart', this.touchstart);
document.addEventListener('touchmove', this.touchmove);
// function touchstart(e) {
// e.preventDefault()
// }
function touchmove(e) {
e.preventDefault()
}
var aNote = document.getElementById('aAudio')
$('#ring-animatie').mouseover(function(){
aNote.currentTime = 0;
aNote.play();
});
$('.activate-date').click(function() {
if ($('#gaop').hasClass('active')) {
$('#gaop').removeClass('active').addClass('hidden');
$('#beeindig').removeClass('hidden').addClass('active');
$('#timer').removeClass('hidden').addClass('active');
$('#knop').addClass('begin-date').addClass('shake');
$('#knop-deel2').addClass('begin-date').addClass('shake');
} else {
$('#gaop').removeClass('hidden').addClass('active');
$('#beeindig').addClass('hidden').removeClass('active');
$('#timer').addClass('hidden').removeClass('active');
$('#knop').removeClass('begin-date').removeClass('shake');
$('#knop-deel2').removeClass('begin-date').removeClass('shake');
}
$.ajax({ url: 'https://18003.hosts.ma-cloud.nl/light/script.php',
data: {
'hoi': 'hoi'
},
type: 'post',
success: function(output) {
console.log(output);
//if(checkCount == counter){ location.reload(); }
}
});
});
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
$('#gaop').removeClass('hidden').addClass('active');
$('#beeindig').addClass('hidden').removeClass('active');
$('#timer').addClass('hidden').removeClass('active');
$('#knop').removeClass('begin-date').removeClass('shake');
$('#knop-deel2').removeClass('begin-date').removeClass('shake');
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var twoMinutes = 60 * 2,
display = $('#time');
startTimer(twoMinutes, display);
});/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
@font-face {
font-family: 'Opensans-regular';
src: url(../fonts/OpenSans-Regular.ttf);
}
body {
background: url(../img/mockup_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: black;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
height: 100vh;
overflow: hidden;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
p {
text-align: center;
}
div.wrapper{
position: relative;
}
div.center{
position: absolute;
left: 0;
right: 0;
top: 0;
position: fixed;
}
.activate-date {
width: 400px;
height: 400px;
border-radius: 50%;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: 35%;
z-index: 3;
}
p.text-hint{
font-family: 'Opensans-regular';
color: white;
font-weight: 120%;
font-size: 1.5em;
text-align: center;
margin: 0 auto;
/*position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;*/
position: fixed;
top: 40%;
left: 0;
right: 0;
}
div.center div.text-timer{
font-family: 'Opensans-regular';
color: white;
font-weight: 120%;
font-size: 0.9em;
text-align: center;
margin: 0 auto;
/*position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;*/
position: fixed;
top: 42%;
left: 0;
right: 0;
}
.active{
display: block;
}
.hidden{
display: none;
}
#knop {
margin: 0px auto;
height: 400px;
width: 400px;
border: 10px solid white;
border-radius: 50%;
-webkit-box-shadow: 0 0px 60px white,
inset 0 0 60px white;
-moz-box-shadow: 0 0px 60px white,
inset 0 0 60px white;
box-shadow: 0 0px 60px white,
inset 0 0 60px white;
text-align: center;
margin-top: 35%;
}
#knop-deel2{
margin: 0px auto;
height: 400px;
width: 400px;
border: 10px solid white;
border-radius: 50%;
-webkit-box-shadow: 0 0px 60px white,
inset 0 0 60px white;
-moz-box-shadow: 0 0px 60px white,
inset 0 0 60px white;
box-shadow: 0 0px 60px white,
inset 0 0 60px white;
text-align: center;
margin-top: 35%;
position: absolute;
left: 0;
right: 0;
top: 0;
position: fixed;
}
div#knop.begin-date,
div#knop-deel2.begin-date{
border: 12px solid #c91c71;
-webkit-box-shadow: 0 0px 60px #c91c71,
inset 0 0 60px red;
-moz-box-shadow: 0 0px 60px #c91c71,
inset 0 0 60px #c91c71;
box-shadow: 0 0px 60px #c91c71,
inset 0 0 60px #c91c71;
}
.animated {
-webkit-animation-name: bounceIn;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-name: bounceIn;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
/*
* Animation for webkit
*/
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
/*
* Adding the animation to our element
*/
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
/*
ring-binnen
*/
@-webkit-keyframes ring-binnen {
0% { transform: scale(1); }
25% { transform: scale(0.9);}
48% { transform: scale(1.15);}
50% { transform: scale(1.2); }
75% { transform: scale(1.05);}
100% { transform: scale(1); }
}
@keyframes ring-binnen {
0% { transform: scale(1); }
25% { transform: scale(0.9);}
48% { transform: scale(1.15);}
50% { transform: scale(1.2); }
75% { transform: scale(1.05);}
100% { transform: scale(1); }
}
.ring-binnen {
-webkit-animation-name: ring-binnen;
animation-name: ring-binnen;
}
/*
ring-buiten
*/
@-webkit-keyframes ring-buiten{
0% { transform: scale(1); opacity: 0; }
25% { transform: scale(0.9);}
48% { transform: scale(1.15);}
50% { transform: scale(1.2); opacity: 1;}
75% { transform: scale(1.25);opacity: 1;}
85% { transform: scale(1.4); opacity: 0.5;}
100% { transform: scale(1.45); opacity: 0; }
}
@keyframes ring-buiten {
0% { transform: scale(1); opacity: 0; }
25% { transform: scale(0.9);}
48% { transform: scale(1.15);}
50% { transform: scale(1.2); opacity: 1;}
75% { transform: scale(1.25);opacity: 1;}
85% { transform: scale(1.4); opacity: 0.5;}
100% { transform: scale(1.45); opacity: 0; }
}
.ring-buiten {
-webkit-animation-name: ring-buiten;
animation-name: ring-buiten;
}
/*
* Flash animation
*/
@-webkit-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/*
* Shake animation
*/
@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
/**************************************/
/***********background bellen**********/
/**************************************/
.bg-bel{
height: 30px;
width: 30px;
position: fixed;
border: 4px solid #7ccced;
border-radius: 50%;
-webkit-box-shadow: 0 0px 6px white,
inset 0 0 6px white;
-moz-box-shadow: 0 0px 6px white,
inset 0 0 6px white;
box-shadow: 0 0px 6px white,
inset 0 0 6px white;
z-index: -20;
}
.animated-bg {
-webkit-animation-name: bounceIn;
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-name: bounceIn;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
/*
bg ring 1
*/
@-webkit-keyframes bg-ring {
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 76%; left: 40%; bottom: 20%; right: 60%;*/ opacity: 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: 110%; left: 30%; bottom: -10%; right: 70%;}
}
@keyframes bg-ring {
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 76%; left: 40%; bottom: 20%; right: 60%;*/ opacity: 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: 102%; left: 30%; bottom: -10%; right: 70%;}
}
.bg-ring {
-webkit-animation-name: bg-ring;
animation-name: bg-ring;
}
/*
bg ring 2
*/
@-webkit-keyframes bg-ringtwee {
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 20%; left: 60%; bottom: 76%; right: 40%;*/ opacity: 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: -10%; left: 70%; bottom: 102%; right: 30%;}
}
@keyframes bg-ringtwee {
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 20%; left: 60%; bottom: 76%; right: 40%; opacity:*/ 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: -10%; left: 70%; bottom: 102%; right: 30%;}
}
.bg-ringtwee {
border: #7ccced;
-webkit-animation-name: bg-ringtwee;
animation-name: bg-ringtwee;
}
/*
bg ring 3
*/
@-webkit-keyframes bg-ringdrie {
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 40%; left: 76%; bottom: 60%; right: 20%;*/ opacity: 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: 30%; left: 102%; bottom: 70%; right: -10%;}
}
@keyframes bg-ringdrie {
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 40%; left: 76%; bottom: 60%; right: 20%; opacity:*/ 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: 30%; left: 102%; bottom: 70%; right: -10%;}
}
.bg-ringdrie {
border: #7ccced;
-webkit-animation-name: bg-ringdrie;
animation-name: bg-ringdrie;
}
/*
bg ring 4
*/
@-webkit-keyframes bg-ringvier{
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 60%; left: 20%; bottom: 40%; right: 76%;*/ opacity: 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: 70%; left: -10%; bottom: 30%; right: 102%;}
}
@keyframes bg-ringvier {
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 60%; left: 20%; bottom: 20%; right: 76%;*/ opacity: 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: 70%; left: -10%; bottom: 30%; right: 102%;}
}
.bg-ringvier {
-webkit-animation-name: bg-ringvier;
animation-name: bg-ringvier;
}
/*
bg ring 7
*/
@-webkit-keyframes bg-ringzeven{
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 50%; left: 50%; bottom: 50%; right: 76%;*/ opacity: 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: 50%; left: -2%; bottom: 50%; right: 102%;}
}
@keyframes bg-ringzeven {
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 50%; left: 20%; bottom: 50%; right: 76%;*/ opacity: 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: 50%; left: -2%; bottom: 50%; right: 102%;}
}
.bg-ringzeven {
border: #7ccced;
-webkit-animation-name: bg-ringzeven;
animation-name: bg-ringzeven;
}
/*
bg ring 6
*/
@-webkit-keyframes bg-ringzes{
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 50%; left: 76%; bottom: 50%; right: 20%;*/ opacity: 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: 50%; left: 102%; bottom: 50%; right: -10%;}
}
@keyframes bg-ringzes {
0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
50% {/*top: 50%; left: 76%; bottom: 50%; right: 20%;*/ opacity: 1; transform: scale(1);}
/* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%;}
75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/
100% { top: 50%; left: 122%; bottom: 50%; right: -20%;}
}
.bg-ringzes {
-webkit-animation-name: bg-ringzes;
animation-name: bg-ringzes;
}
/*
bg ring 8
*/
@-webkit-keyframes bg-ringacht{
0% { top: 50%; left: 76%; bottom: 50%; right: 100%; opacity: 1; transform: scale(1);}
48% { opacity: 1; transform: scale(1);}
49% { top: 50%; left: 122%; bottom: 50%; right: -20%; opacity: 0; transform: scale(0);}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
100% { top: 50%; left: 76%; bottom: 50%; right: 100%; opacity: 1; transform: scale(1);}
}
@keyframes bg-ringacht {
0% { top: 50%; left: 76%; bottom: 50%; right: 10%; opacity: 1; transform: scale(1);}
48% { opacity: 1; transform: scale(1);}
49% { top: 50%; left: 122%; bottom: 50%; right: -20%; opacity: 0; transform: scale(0);}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
100% { top: 50%; left: 76%; bottom: 50%; right: 10%; opacity: 1; transform: scale(1);}
}
.bg-ringacht {
-webkit-animation-name: bg-ringacht;
animation-name: bg-ringacht;
}
/*
bg ring 9
*/
@-webkit-keyframes bg-ringnegen{
0% { top: 50%; left: 76%; bottom: 50%; right: 100%; opacity: 1; transform: scale(1);}
48% { opacity: 1; transform: scale(1);}
49% { top: 50%; left: 122%; bottom: 50%; right: -20%; opacity: 0; transform: scale(0);}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
100% { top: 50%; left: 76%; bottom: 50%; right: 100%; opacity: 1; transform: scale(1);}
}
@keyframes bg-ringnegen {
0% { top: 50%; left: 10%; bottom: 50%; right: 76%; opacity: 1; transform: scale(1);}
48% { opacity: 1; transform: scale(1);}
49% { top: 50%; left: -20%; bottom: 50%; right: 122%; opacity: 0; transform: scale(0);}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
100% { top: 50%; left: 10%; bottom: 50%; right: 76%; opacity: 1; transform: scale(1);}
}
.bg-ringnegen {
-webkit-animation-name: bg-ringnegen;
animation-name: bg-ringnegen;
}
/*
bg ring 10
*/
@-webkit-keyframes bg-ringtien{
0% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);}
48% { opacity: 1; transform: scale(1);}
49% { top: 120%; left: 120%; bottom: -20%; right: -20%; opacity: 0; transform: scale(0);}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
100% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);}
}
@keyframes bg-ringtien {
0% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);}
48% { opacity: 1; transform: scale(1);}
49% { top: 120%; left: 120%; bottom: -20%; right: -20%; opacity: 0; transform: scale(0);}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
100% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);}
}
.bg-ringtien {
-webkit-animation-name: bg-ringtien;
animation-name: bg-ringtien;
}
/*
bg ring 11
*/
@-webkit-keyframes bg-ringelf{
0% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);}
48% { opacity: 1; transform: scale(1);}
49% { top: 120%; left: 120%; bottom: -20%; right: -20%; opacity: 0; transform: scale(0);}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
100% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);}
}
@keyframes bg-ringelf {
0% { top: 15%; left: 15%; bottom: 85%; right: 85%; opacity: 1; transform: scale(1);}
48% { opacity: 1; transform: scale(1);}
49% { top: -20%; left: -20%; bottom: 120%; right: 120%; opacity: 0; transform: scale(0);}
50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);}
100% { top: 15%; left: 15%; bottom: 85%; right: 85%; opacity: 1; transform: scale(1);}
}
.bg-ringelf {
-webkit-animation-name: bg-ringelf;
animation-name: bg-ringelf;
} <div class="wrapper">
<div class="center">
<div class="activate-date"></div>
<div id="knop" class="animated ring-binnen"></div>
<div id="knop-deel2" class="animated ring-buiten"></div>
<p id="gaop" class="text-hint active" readonly>Ga op blind meeting</p>
<p id="beeindig" class="text-hint hidden" readonly>Beeindig meeting</p>
<div id="timer" class="text-timer hidden"><p> de meeting eindigt in <span id="time">02:00</span> minuten</p></div>
</div>
<!-- bg -->
<div class="bg-bel animated-bg bg-ring"></div>
<div class="bg-bel animated-bg bg-ringtwee"></div>
<div class="bg-bel animated-bg bg-ringdrie"></div>
<div class="bg-bel animated-bg bg-ringvier"></div>
<div class="bg-bel animated-bg bg-ringzeven"></div>
<div class="bg-bel animated-bg bg-ringzes"></div>
<div class="bg-bel animated-bg bg-ringacht"></div>
<div class="bg-bel animated-bg bg-ringnegen"></div>
<div class="bg-bel animated-bg bg-ringtien"></div>
<div class="bg-bel animated-bg bg-ringelf"></div>
</div>更多相关文章
- 字体图标的引入和通过媒体查询改变导航样式
- HTML样式和常用选择器
- 字体图标的引用和自定义样式/媒体查询的使用
- 数据库的CURD操作、PDO本质与原理的学习
- CSS之伪类选择器和简单盒子简单案例
- 伪类选择器与盒模型常用属性
- 伪类选择器-结构伪类、根据位置选择匹配
- 7.4——常用标签与应用场景之表格与单元格
- css伪类选择器和盒模型