HTML+CSS 实现水流流动效果_html/css_WEB-ITnose
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title></title>
7 <script src="/Scripts/jquery-1.10.2.min.js"></script>
8
9 <link rel="stylesheet" href="">
10 <style>
11 *{
12 padding:0;
13 margin:0;
14 font: 24px/24px "Microsoft Yahei";
15 color:white;
16 }
17 body{
18 background:#202020;
19 }
20 .main{
21 width: 1520px;
22 height:900px;
23 background:#06192A;
24 margin:0 auto;
25 border:2px solid white;
26 }
27 .main header{
28 height: 150px;
29 border-bottom:2px solid #637382;
30 }
31 .main header h1{
32 text-align:center;
33 font-weight:bolder;
34 position: relative;
35 bottom:0;
36 padding-top: 104px;
37 }
38 .main section{
39 /*width:1296px;*/
40 height:500px;
41 margin:0 auto;
42 }
43
44 .main section .title{
45 display:inline-block;
46 height:30px;
47 line-height:30px;
48 padding-top:20px;
49 width: 100%;
50 }
51
52 .main section b.radio,.main section b.radio:before{
53 display:block;
54 position: relative;
55 }
56 .main section b.radio{
57 width:16px;
58 height:16px;
59 border-radius:8px;
60 background:white;
61 margin-left:2px;
62
63 float:right;
64 margin-right:68px;
65 }
66
67 .main section b.green:before,.main section b.red:before,.main section b.yellow:before{
68 width:12px;
69 height: 12px;
70 content:"";
71 border-radius:6px;
72 top:2px;
73 left:2px;
74 }
75
76 .main section b.green:before{
77 background:#008F40;
78 }
79
80 .main section b.red:before{
81 background:#D10F12;
82 }
83
84 .main section b.yellow:before{
85 background:#F4A700;
86 }
87
88 .main section b.green:after,.main section b.red:after,.main section b.yellow:after{
89 display:block;
90 width:40px;
91 font-size:20px;
92 position: relative;
93 top:-17px;
94 left:-47px;
95 }
96
97 .main section .title b.green:after{
98 content:"运行";
99 }
100 .main section .title b.red:after{
101 content:"故障";
102 }
103 .main section .title b.yellow:after{
104 content:"报警";
105 }
106
107 .content{
108 display:inline-block;
109 position: relative;
110 width: 100%;
111 height: 100%;
112 }
113
114 .content .bg b{
115 position: absolute !important;
116 margin-right:15px !important;
117 }
118
119 .content .s1{
120 background-image:url(images/hospital/s1.png);
121 width:368.4px;
122 height: 412.8px;
123 }
124
125 .content .s1 .arrow{
126 -webkit-transform: rotate(90deg);
127 -moz-transform: rotate(90deg);
128 -ms-transform: rotate(90deg);
129 -o-transform: rotate(90deg);
130 transform: rotate(90deg);
131 top: 92px;
132 left: 57px;
133 }
134
135 .content .s1 b{
136 bottom: 24px;
137 right: 70px;
138 }
139
140 .content .s2{
141 background-image:url(images/hospital/s2.png);
142 width: 250.2px;
143 height: 208.2px;
144 left: 380px;
145 top: 216px;
146 }
147
148 .content .s2 b,.content .s3 b,.content .s4 b{
149 bottom: 35px;
150 right: 35px;
151 }
152
153 .content .s3{
154 background-image:url(images/hospital/s3.png);
155 width: 250.2px;
156 height: 208.2px;
157 left: 680px;
158 top: 216px;
159 }
160
161 .content .s4{
162 background-image:url(images/hospital/s4.png);
163 width: 250.2px;
164 height: 208.2px;
165 left: 980px;
166 top: 216px;
167 }
168
169 .content .s5{
170 background-image:url(images/hospital/s5.png);
171 width: 202.15px;
172 height: 113.75px;
173 left: 1270px;
174 top: 300px;
175 }
176
177 .content .s5 span{
178 font-size:20px;
179 position: relative;
180 left: 80px;
181 }
182
183 .content .arrow{
184 background-image:url(images/hospital/arrow.png);
185 width:53.1px;
186 height: 23.4px;
187 zoom:2 !important;
188 top: -8px;
189 left:1px;
190 }
191
192 .content .f1{
193 background-image:url(images/hospital/f1.png);
194 width: 171.6px;
195 height: 163.8px;
196 top: 33px;
197 left: 416px;
198 }
199
200 .content .f1 b{
201 bottom:53px;
202 left:-24px;
203 }
204
205 .content .f1 b:after{
206 content:"余氮值";
207 width: 60px !important;
208 left:-21px !important;
209 top: -40px !important;
210 }
211
212 .content .f2{
213 background-image:url(images/hospital/f2.png);
214 width: 250.2px;
215 height: 208.2px;
216 top: 0;
217 left: 680px;
218 }
219
220 .content .t1{
221 background-image:url(images/hospital/f1.png);
222 width: 171.6px;
223 height: 163.8px;
224 top: 530px;
225 left: 416px;
226 }
227
228 .content .t2{
229 background-image:url(images/hospital/t2.png);
230 width: 182px;
231 height: 140.25px;
232 top: 530px;
233 left: 701px;
234 }
235
236 .content .t2 b{
237 right: -16px;
238 top: 65px;
239 }
240
241 .pt92{
242 top:92px !important;
243 }
244
245 .content .bg{
246 background-repeat: no-repeat;
247 background-position:center center;
248 background-size: cover;
249 -webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */
250 -o-background-size: cover;/* 兼容Opera */
251 zoom: 1;
252 position: absolute;
253 z-index: 2;
254 }
255 2
56 .pr48{
257 right:48px !important;
258 }
259 .pb33{
260 bottom:33px !important;
261 }
262 .pr12{
263 right:12px !important;
264 }
265 .pb44{
266 bottom:44px !important;
267 }
268
269 .content .gw{
270 content:"";
271 height: 7px;
272 border-top:1px solid #83868C;
273 border-bottom:1px solid #83868C;
274 position: absolute;
275
276 background:#06192A;
277 }
278
279 .content .f1-f2{
280 left: 544px;
281 top: 135px;
282 width:693px;
283 }
284
285 .content p.full{
286 background:#B3B3B6;
287 /*height:inherit;
288 width:inherit;*/
289 }
290
291 .content .gw p.full{
292 width:0;
293 height:inherit;
294 }
295
296 .content .gh p.full{
297 height:0;
298 width:inherit;
299 }
300
301 .lTor{302 -webkit-transition: all 0.5s linear;
303 -moz-transition: all 0.5s linear;
304 -ms-transition: all 0.5s linear;
305 -o-transition: all 0.5s linear;
306 transition: all 0.5s linear;
307
308 -webkit-animation: lToR 2s ease infinite;
309 -o-animation: lToR 2s ease infinite;
310 animation: lToR 2s ease infinite;
311 }
312
313 .content .f1-f2 .a1 span{
314 display: inline-block;
315 font-size: 20px;
316 position: relative;
317 top: -26px;
318 left: -10px;
319 width: 60px;
320 }
321
322 .content .f1-f2 .arrow{
323 left: 330px;
324 top: -13.5px;
325 }
326
327 .content .f1-f2 .arrow span{
328 font-size:10px;
329 left: 40px;
330 top: -3px;
331 position: relative;
332 }
333
334 .content .a1{
335 background-image:url(images/hospital/a1.png);
336 width: 36.4px;
337 height: 30.8px;
338 top: -15px;
339 left: 55px;
340 }
341
342 .content .a1 b{
343 bottom:-20px;
344 left:-4px;
345 }
346
347 .pr20{
348 left:23px !important;
349 }
350
351 .content .gh{
352 content:"";
353 width: 7px;
354 border-left:1px solid #83868C;
355 border-right:1px solid #83868C;
356 position: absolute;
357
358 background:#06192A;
359 }
360 361 .content .f2-s3{
362 left: 790px;
363 top: 135px;
364 height:150px;
365 }
366
367 .tTod{
368 -webkit-transition: all 0.5s linear;
369 -moz-transition: all 0.5s linear;
370 -ms-transition: all 0.5s linear;
371 -o-transition: all 0.5s linear;
372 transition: all 0.5s linear;
373
374 -webkit-animation: tTod 2s ease infinite;
375 -o-animation: tTod 2s ease infinite;
376 animation: tTod 2s ease infinite;
377 }
378
379 .content .s2-s5{
380 left: 300px;
381 top: 347px;
382 width:1050px;
383 }
384
385 .content .s2-t1{
386 left: 495px;
387 top: 355px;
388 height: 125px;
389 }
390
391 .content .s2-t1-wl{
392 left: 468px;
393 top: 480px;
394 width: 32px;
395
396 -webkit-transform: rotateY(-180deg);
397 -moz-transform: rotateY(-180deg);
398 -ms-transform: rotateY(-180deg);
399 -o-transform: rotateY(-180deg);
400 transform: rotateY(-180deg);
401 }
402
403 .content .s2-t1-wr{
404 left: 500px;
405 top: 480px;
406 width: 32px;
407 }
408
409 .content .s2-t1-dl{
410 left: 468px;
411 top: 480px;
412 height:125px;
413 }
414
415 .content .s2-t1-dl .a1{
416 left: -16px;
417 top: 40px;
418 }
419
420 .content .s2-t1-dl .a1 b.green{
421 left: -25px;
422 top: -8px;
423 }
424
425 .content .s2-t1-dl .a1 b.red{
426 left: -25px;427 top: 20px;
428 }
429
430 .content .s2-t1-dr{
431 left: 523px;
432 top: 480px;
433 height:125px;
434 }
435
436 .content .s2-t1-dr .a1{
437 left: -16px;
438 top: 40px;
439 }
440
441 .content .s2-t1-dr .a1 b.green{
442 left: 40px;
443 top: -8px;
444 }
445
446 .content .s2-t1-dr .a1 b.red{
447 left: 40px;
448 top: 20px;
449 }
450
451 .content .s3-t2{
452 top: 363px;
453 width:5px;
454 height:125px;
455 }
456
457 .st-1{left: 733px;}
458 .st-2{left: 773px;}
459 .st-3{left: 813px;}
460 .st-4{left: 853px;}
461
462 .s3-t2-wl{
463 left: 733px;
464 top: 480px;
465 width: 63.5px;
466 }
467
468 .s3-t2-wr{
469 left: 797px;
470 top: 480px;
471 width: 63.5px;
472
473 -webkit-transform: rotateY(-180deg);
474 -moz-transform: rotateY(-180deg);
475 -ms-transform: rotateY(-180deg);
476 -o-transform: rotateY(-180deg);
477 transform: rotateY(-180deg);
478 }
479
480 .s3-t2-d{
481 left: 792px;
482 top: 481px;
483 height: 125px;
484 }
485
486 .a2{
487 background-image:url("images/hospital/a2.jpg");
488 width: 23px;
489 height: 19px;
490 display: inline-block;
491 position: absolute;
492 top: 57px;
493 left: -8px;
494 }
495
496 .a2:before{
497 font-size:20px;
498 position: relative;
499 left: -12px;
500 top: -4px;
501 }
502
503 .st-1 .a2:before{
504 content:"1";
505 }
506
507 .st-2 .a2:before{
508 content:"2";
509 }
510
511 .st-3 .a2:before{
512 content:"3";
513 }
514
515 .st-4 .a2:before{
516 content:"4";
517 }
518
519 .st-4 .a2:after{
520 content:"电磁阀";
521 font-size:20px;
522 position: absolute;
523 left: 26px;
524 top: -4px;
525 width: 60px;
526 }
527
528 .s3-t2 b{
529 margin-right:0 !important;
530 position: absolute !important;
531 top: 80px;
532 left: -7px;
533 }
534
535 .arr{
536 position: absolute;
537 }
538
539 .arr img{
540 width: 106.2px;
541 height: 46.8px;
542 }
543
544 .s1 .arr{
545 -webkit-transform: rotate(90deg);
546 -moz-transform: rotate(90deg);
547 -ms-transform: rotate(90deg);
548 -o-transform: rotate(90deg);
549 transform: rotate(90deg);
550
551 left: calc(50% - 70px);
552 top: calc(50% - 25px);
553 }
554
555 .s5 .arr{
556 top:-16px;
557 }
558
559 .content .f1-f2 .arr{
560 right: -72px;
561 top: -27px;
562 }
563
564 .content .f1-f2 .arr span{
565 font-size:20px;
566 left: 80px;
567 top: 15px;
568 position: absolute;
569 width: 80px;
570 }
571
572 /**/
573 .content .s2-t1-wl,.content .s2-t1-wl .full,
574 .content .s2-t1-wr,.content .s2-t1-wr .full,
575 .content .s2-t1-dr,.content .s2-t1-dr .full{
576 border-radius: 0 10px 0 0;
577 }
578 .content .s2-t1-dl,.content .s2-t1-dl .full{
579 border-radius:10px 0 0 0;
580 }
581 .content .st-1,.content .st-1 .full,
582 .content .s3-t2-wl,.content .s3-t2-wl .full,
583 .content .s3-t2-wr,.content .s3-t2-wr .full{
584 border-radius: 0 0 0 10px;
585 }
586 .content .st-4,.content .st-4 .full{
587 border-radius: 0 0 10px 0;
588 }
589
590 @-webkit-keyframes lToR{
591 0% {width:0;}
592 100% {width:100%;}
593 }
594
595 @-moz-keyframes lToR{
596 0% {width:0;}
597 100% {width:100%;}
598 }
599
600 @-o-keyframes lToR{
601 0% {width:0;}
602 100% {width:100%;}
603 }
604
605 @keyframes lToR{
606 0% {width:0;}
607 100% {width:100%;}
608 }
609
610 @-webkit-keyframes tTod{
611 0% {height:0;}
612 100% {height:100%;}
613 }
614
615 @-moz-keyframes tTod{
616 0% {height:0;}
617 100% {height:100%;}
618 }
619
620 @-o-keyframes tTod{
621 0% {height:0;}
622 100% {height:100%;}
623 }
624
625 @keyframes tTod{
626 0% {height:0;}
627 100% {height:100%;}
628 }
629
630 .count{
631 position: absolute;
632 top: -38px;
633 right: 60px;
634 }
635
636 .count span {
637 position: absolute;
638 left: -65px;
639 top: 3px;
640 font-size: 20px;
641 }
642
643 .count ul{
644 height: 30px;
645 color: #ddd;
646 font-family: Consolas, monaco, monospace;
647 background:#000009;
648 margin:0 1px !important;
649 text-align:center;
650 list-style: none;
651 }
652
653 .count ul li{
654 font-size: 20px;
655 width:18px;
656 height:26px;
657 margin-top:2px;
658 background:#1A2730;
659 /*font-weight:lighter;*/
660 float:left;
661 margin-left:1px;
662 }
663 </style>
664 </head>
665 <body>
666 <p class="main">
667 <header>
668 <h1>污水处理系统</h1>
669 </header>
670 <section>
671 <p class="title">
672 <b class="radio yellow"></b>
673 <b class="radio red"></b>
674 <b class="radio green"></b>
675 </p>
676 <p class="content">
677 <p class="f1 bg">
678 <b class="radio yellow"></b>
679 </p>
680 <p class="f2 bg">
681 </p>
682 <p class="s1 bg">
683 <!-- <p class="arrow bg"></p> -->
684 <p class="arr">
685 <img src="images/hospital/arrow.png" alt="">
686 </p>
687 <b class="radio red pr48 pb33"></b>
688 <b class="radio green"></b>
689 </p>
690 <p class="s2 bg">
691 <b class="radio red pr12 pb44"></b>
692 <b class="radio green"></b>
693 </p>
694 <p class="s3 bg">
695 <b class="radio red pr12 pb44"></b>
696 <b class="radio green"></b>
697 </p>
698 <p class="s4 bg">
699 <b class="radio red pr12 pb44"></b>
700 <b class="radio green"></b>
701 </p>
702 <p class="s5 bg">
703 <!-- <p class="arrow bg"></p> -->
704 <p class="arr">
705 <img src="images/hospital/arrow.png" alt="">
706 </p>
707 <span>环卫车外运</span>
708 </p>
709 <p class="t1 bg">
710 </p>
711 <p class="t2 bg">
712 <b class="radio red pt92"></b>
713 <b class="radio green"></b>
714 </p>
715 <p class="gw f1-f2">
716 <p class="full"></p>
717 <!-- <p class="arrow bg">
718 <span>达标排外</span>
719 </p> -->
720 <p class="arr">
721 <img src="images/hospital/arrow.png" alt="">
722 <span>达标排外</span>
723 </p>
724
725 <p class="count">
726 <span>总流量</span>
727 <ul>
728 <li>0</li>
729 <li>4</li>
730 <li>3</li>
731 <li>5</li>
732 <li>0</li>
733 <li>.</li>
734 <li>4</li>
735 <li>6</li>
736 <li>1</li>
737 </ul>
738 </p>
739
740 <p class="a1 bg">
741 <span>加药泵</span>
742 <b class="radio red pr20"></b>
743 <b class="radio green"></b>
744 </p>
745 </p>
746 <p class="gh f2-s3">
747 <p class="full"></p>
748 </p>
749 <p class="gw s2-s5">
750 <p class="full"></p>
751 </p>
752 <!-- 多个一组 -->
753 <p class="gh s2-t1">
754 <p class="full"></p>
755 </p>
756 <p class="gw s2-t1-wl">
757 <p class="full"></p>
758 </p>
759 <p class="gw s2-t1-wr">
760 <p class="full"></p>
761 </p>
762 <p class="gh s2-t1-dl">
763 <p class="full"></p>
764 <p class="a1 bg">
765 <b class="radio red"></b>
766 <b class="radio green"></b>
767 </p>
768 </p>
769 <p class="gh s2-t1-dr">
770 <p class="full"></p>
771 <p class="a1 bg">
772 <b class="radio red"></b>
773 <b class="radio green"></b>
774 </p>
775 </p>
776 <!-- 多个一组 -->
777 <p class="gh s3-t2 st-1">
778 <p class="full"></p>
779 <span class="a2"></span>
780 <b class="radio green"></b>
781 </p>
782 <p class="gh s3-t2 st-2">
783 <p class="full"></p>
784 <span class="a2"></span>
785 <b class="radio green"></b>
786 </p>
787 <p class="gh s3-t2 st-3">
788 <p class="full"></p>
789 <span class="a2"></span>
790 <b class="radio green"></b>
791 </p>
792 <p class="gh s3-t2 st-4">
793 <p class="full"></p>
794 <span class="a2"></span>
795 <b class="radio green"></b>
796 </p>
797 <p class="gw s3-t2-wl">
798 <p class="full"></p>
799 </p>
800 <p class="gw s3-t2-wr">
801 <p class="full"></p>
802 </p>
803 <p class="gh s3-t2-d">
804 <p class="full"></p>
805 </p>
806 </p>
807 </section>
808 </p>
809 </body>
810 <script>
811 $(function(){
812 var count = 0;
813 //*
814 var a = setInterval(function(){
815 $(".f1-f2").find(".full").animate({
816 width: "100%"
817 },2000, function() {
818 });
819
820 $(".f2-s3").find(".full").delay("500").animate({
821 height: "100%"
822 },500, function() {
823 });
824
825 var c = $(".s2-s5").find(".full");
826 if(!c.is(":animated")){
827 $(".s2-s5").find(".full").animate({
828 width: "100%"
829 },2500, function() {
830 if(count == 6){
831 clearInterval(a);
832 return;
833 }
834
835 $(".f1-f2").find(".full").css("width",0);
836 $(".s2-s5").find(".full").css("width",0);
837 $(".s2-t1-wl,.s2-t1-wr").find(".full").css("width",0);
838 $(".s3-t2-wl,.s3-t2-wr").find(".full").css("width",0);
839
840 $(".f2-s3").find(".full").css("height",0);
841 $(".s2-t1").find(".full").css("height",0);
842 $(".s2-t1-dl,.s2-t1-dr").find(".full").css("height",0);
843 $(".s3-t2").find(".full").css("height",0);
844 $(".s3-t2-d").find(".full").css("height",0);
845
846 count += 1;
847 });
848 }
849
850 $(".s2-t1").find(".full").delay(500).animate({
851 height: "100%"
852 },500, function() {
853 });
854
855 $(".s2-t1-wl,.s2-t1-wr").find(".full").delay(1000).animate({
856 width: "100%"
857 },100, function() {
858 });
859 $(".s2-t1-dl,.s2-t1-dr").find(".full").delay(1100).animate({
860 height: "100%"
861 },500, function() {
862 });
863
864 $(".s3-t2").find(".full").delay(1000).animate({
865 height: "100%"
866 },500, function() {
867
868 });
869
870 $(".s3-t2-wl,.s3-t2-wr").find(".full").delay(1500).animate({
871 width: "100%"
872 },200, function() {
873
874 });
875
876 $(".s3-t2-d").find(".full").delay(1700).animate({
877 height: "100%"
878 },500,function(){
879
880 });
881 }, 3000);
882 //*/
883 });
884 </script>885 </html>로그인 후 복사
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
2 몇 주 전
By DDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7530
15
7530
15
Cakephp 튜토리얼
1379
52
1379
52
Steam의 계정 이름 형식은 무엇입니까?
82
11
82
11
Win11 활성화 키 영구
54
19
54
19
NYT 연결 힌트와 답변
21
76
21
76
HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?
Mar 17, 2025 pm 12:20 PM
기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.
& lt; Progress & Gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:34 PM
이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
& lt; datalist & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:33 PM
이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?
Mar 17, 2025 pm 12:27 PM
이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.
& lt; meter & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:35 PM
이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?
Mar 20, 2025 pm 05:56 PM
이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.
& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?
Mar 20, 2025 pm 06:05 PM
이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
