ฉันไม่ได้อัปเดตเมื่อเร็ว ๆ นี้ดังนั้นฉันจะเพิ่มเอฟเฟกต์เล็กน้อยเพื่อเพิ่มคุณค่าให้กับมัน
ไม่มีใครงามขั้นตอนนี้
หีบเพลง CSS บริสุทธิ์:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> หีบเพลง CSS </title> <style> .showbox {width: 660px; ล้น: ซ่อน; } ul {list-style: none; มาร์จิ้น: 0; Padding: 0; ความกว้าง: 30000px; } ul li {float: ซ้าย; ตำแหน่ง: ญาติ; ความสูง: 254px; ความกว้าง: 110px; ล้น: ซ่อน; การเปลี่ยนแปลง: 0.3s ทั้งหมด; } /*นี่คือแกนหลักของหีบเพลง CSS ซึ่งเป็นการใช้โฮเวอร์ ** ก่อนอื่น UL: โฮเวอร์ลี่กระตุ้นการเปลี่ยนแปลงที่ผ่าน UL แต่ไม่ผ่าน UL ** จากนั้น ul li: โฮเวอร์ที่นี่คือการเปลี่ยนแปลงที่ผ่าน Lib หากคุณใช้การใช้งาน JS บริสุทธิ์อาจเป็นปัญหา */ ul: โฮเวอร์ li {width: 22px; } ul li: hover {width: 460px; } ul li img {width: 550px; ความสูง: 254px; } ul li span {width: 22px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ขวา: 0; ความสูง: 204px; Padding-Top: 50px; สี: #FFF; } ul li span.bg1 {พื้นหลัง: #333; } ul li span.bg2 {พื้นหลัง: #0f0; } ul li span.bg3 {พื้นหลัง: #ff7500; } ul li span.bg4 {พื้นหลัง: #0ff; } ul li span.bg5 {พื้นหลัง: #00f; } </style> <script type = "text/javascript"> </script> </head> <body> <div> <ul> <li> <pan> นี่คือ </span> <img src = "1.jpg"> <li> <li> <pan> src = "3.jpg"> </li> <li> <pan> นี่คือ </span> <img src = "4.jpg"> </li> <li> <pan> นี่คือสิ่งที่ห้า </span> <img src = "5.jpg"> </li> </ul> </ul> </ul>หีบเพลง CSS3:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css3-checked: </title> <style>/* ใช้คุณสมบัติตัวเลือกเดียวของวิทยุเพื่อให้ได้เอฟเฟกต์หีบเพลง*/ul {แสดง: ไม่มี; } อินพุต {display: none;} label {display: block; สายไฟ: 40px; ขอบด้านล่าง: 1px Solid #DDD; เคอร์เซอร์: ตัวชี้; ขนาดตัวอักษร: 15px; Font-Weight: bold;} .List> ul {display: none; -webkit-transition:. 5s linear ทั้งหมด; -MOZ-TRANSITION:. 5S ทุกเส้น; -MS-TRANSITION:. 5S ทุกเส้น; -O-Transition:. 5s linear ทั้งหมด; การเปลี่ยนแปลง:. 5s linear;} #list1: ตรวจสอบ + ul {display: block;} #list2: ตรวจสอบ + ul {display: block;} #list3: ตรวจสอบ + ul {display: block;} #list4: ตรวจสอบ + ul {display: block;} name = "list" id = "list1" checked = "chekced"/> <ul> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> ชื่อ </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> <a href = " <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <ul> <li> <a href = ""> ชื่อของเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> href = ""> ชื่อของเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> <li> <a href = ""> ชื่อเพื่อนร่วมชั้น </a> </li> </ul> <li> <a href = ""> เพื่อนร่วมชั้น </a> </li> <li> <a href = ""> เพื่อนร่วมชั้น </a> </li> <li> <a href = ""> เพื่อนร่วมชั้น </a> </li> <li> </div> </body> </html>หีบเพลงดำเนินการโดย JavaScript:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> accordion </title> <style>. showbox {width: 660px; ล้น: ซ่อน; } ul {list-style: none; มาร์จิ้น: 0; Padding: 0; ความกว้าง: 30000px; } ul li.active {width: 550px; } ul li {float: ซ้าย; ตำแหน่ง: ญาติ; ความสูง: 254px; ความกว้าง: 22px; ล้น: ซ่อน; } ul li img {width: 660px; ความสูง: 254px; } ul li span {width: 22px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ความสูง: 204px; Padding-Top: 50px; } ul li span.bg1 {พื้นหลัง: #333; } ul li span.bg2 {พื้นหลัง: #0f0; } ul li span.bg3 {พื้นหลัง: #ff7500; } ul li span.bg4 {พื้นหลัง: #0ff; } ul li span.bg5 {พื้นหลัง: #00f; } </style> <script type = "text/javascript"> window.onload = function () {createAccordion ('. showbox'); - ฟังก์ชั่น createAccordion (ชื่อ) { /*รับองค์ประกอบ* / var odiv = document.QuerySelector (ชื่อ); /*ประกาศความกว้างขั้นต่ำ*/ var iminwidth = 9999999; /*รับองค์ประกอบ*/ var Ali = odiv.getElementsByTagname ('li'); var aspan = odiv.getElementsByTagname ('span'); /*ตัวจับเวลาคอนเทนเนอร์เริ่มต้น*/ odiv.timer = null; /*ลูปเพิ่มเหตุการณ์และค่าดัชนีแอตทริบิวต์ที่กำหนดเอง*/ สำหรับ (vari = 0; i <aspan.length; i ++) {aspan [i] .index = i; aspan [i] .onmouseover = function () {gotoimg (odiv, this.index, iminwidth); - /*รับความกว้างขั้นต่ำ*/ iminwidth = math.min (iminwidth, Ali [i] .offsetWidth); - ฟังก์ชั่น gotoimg (odiv, iindex, iminwidth) {ถ้า (odiv.timer) { /*ล้างตัวจับเวลาเพื่อหลีกเลี่ยงการซ้อนทับ* / clearinterval (odiv.timer); } /*เปิดตัวจับเวลา* / odiv.timer = setInterval (function () {ChangeWidthinner (ODIV, iIndex, IminWidth);}, 30); } /*นี่คือคีย์, การเคลื่อนไหว* / ฟังก์ชั่น ChangeWidThinner (ODIV, IINDEX, IMINWIDTH) {var Ali = ODIV.GetElementSBYTAGNAME ('LI'); var aspan = odiv.getElementsByTagname ('span'); /*รับขนาดของกล่องนี่คือความกว้างทั้งหมด*/ var iwidth = odiv.offsetWidth; /*การประกาศความกว้างของรูปภาพเยื้อง*/ var w = 0; /*การประกาศการตัดสินเพื่อล้างการประกาศตัวจับเวลา*/ var bend = true; /*วนลูปเพื่อวนภาพแต่ละภาพเพื่อให้ได้องค์ประกอบขยายและหดตัว*/ สำหรับ (var i = 0; i <ali.length; i ++) {/*นี่คือการขยายดัชนีขยาย*/ if (i == iindex) {ดำเนินการต่อ; } /*มีองค์ประกอบที่ไม่มีการเปลี่ยนแปลงดังนั้นความกว้างขั้นต่ำจะถูกบันทึก* / ถ้า (iminwidth == Ali [i] .offsetWidth) { /*ความกว้างรวมลบความกว้างเหล่านี้เพราะมันอยู่ในความกว้างทั้งหมด* / iwidth- = Iminwidth; ดำเนินการต่อ; } /*รหัสในลูปต่อไปนี้คือองค์ประกอบที่ลดลง* / /*ไม่ล้างตัวจับเวลาและยังไม่ได้ออกกำลังกาย* / bend = false; / *รับความเร็วเร็วก่อนแล้วจึงช้า */speed = math.ceil ((Ali [i] .offsetWidth-Iminwidth)/10); /*ลดความกว้างที่เหลือ*/ w = Ali [i] .OffSetWidth-speed; /*เพื่อหลีกเลี่ยงองค์ประกอบการหดตัวน้อยกว่าความกว้างขั้นต่ำ*/ if (w <= iminWidth) {w = iminwidth; } /*ตั้งค่าความกว้างขององค์ประกอบการหดตัว* / Ali [i] .style.width = W+'PX'; /*ลบความกว้างการหดตัวความกว้างที่เหลือคือความกว้างขยาย*/ iwidth- = w; } /*ความกว้างขององค์ประกอบขยาย* / Ali [iIndex] .style.width = iWidth+'px'; if (โค้ง) {clearInterval (odiv.timer); odiv.timer = null; }} </script> </head> <body> <div> <ul> <li> <pan> นี่คือ </span> <img src = "1.jpg"> </li> <li> <pan> นี่คือ </span> <img src = "2.jpeg"> <li> <li> <span> นี่คือ </span> <img src = "4.jpg"> </li> <li> <pan> นี่คืออันดับที่ห้า </span> <img src = "5.jpg"> </li> </ul> </div>สิ่งต่อไปคือการใช้เอฟเฟกต์ภาพเคลื่อนไหวเพื่อที่จะห่อหุ้มการเคลื่อนไหว:
/*ใช้การโทร, วัตถุ OBJ, แอตทริบิวต์ attr, ความเร็วความเร็ว, ค่าที่ itarget ต้องการที่จะบรรลุ, ฟังก์ชันการโทรกลับ fn*//*เนื่องจากการเคลื่อนไหวนั้นอยู่ในหน่วยของ PX เช่นเดียวกับความโปร่งใสไม่มีหน่วยดังนั้นฉันจึงแยกที่นี่ ในความเป็นจริงฉันไม่ได้เปลี่ยนมันมากเพียงแค่ตัดสินว่ามันเป็นคุณลักษณะความโปร่งใสหรือไม่จากนั้นไปที่บรรทัดโปร่งใส*/ ฟังก์ชั่น domove (obj, attr, ความเร็ว, itarget, fn) {ถ้า (attr == "opacity") {obj.len = itarget-parsefloat } else {obj.len = itarget-parsefloat (getStyle (obj, "opacity")); } /*ทิศทางที่นี่ถูกตัดสิน หนึ่งหลังจากจุดเริ่มต้นเป็นลบและหนึ่งก่อนจุดเริ่มต้นคือบวก*/ speed = obj.len> 0? ความเร็ว: -speed; ClearInterval (obj.timer); obj.timer = setInterval (function () {ถ้า (! obj.num) {obj.num = 0;} ถ้า (attr == "ความทึบ") {obj.num = parsefloat (getStyle (obj, attr)*100+ความเร็ว; มาถึงแล้วหยุดการจับเวลาเมื่อมันมาถึง*/ ถ้า (obj.num> = itarget && obj.len> 0 || obj.num <= itarget && obj.len <0) {obj.num = itarget; } else {obj.style [attr] = obj.num+"px";} /*เพราะมันไม่สามารถตระหนักถึงฟังก์ชั่นที่สมบูรณ์ของฟังก์ชั่นการโทรกลับ; } /*หากคุณได้รับค่าแอตทริบิวต์ CSS คุณจะได้รับค่าของประสิทธิภาพ* / ฟังก์ชั่น getStyle (obj, attr) {return obj.currentstyle? obj.currentstyle [attt]: getComputedStyle (obj) [attt]; -ภาพม้าหมุน:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Carousel Diagram </title> <!-นี่คือการอ้างอิงถึงฟังก์ชั่นการเคลื่อนไหวที่ห่อหุ้ม-> <script type = "text/javascript" src = "domove.js" /*โทรไปใช้ Carousel* / Carousel ("Carousel")} ฟังก์ชั่น Carousel (ชื่อ) {var oscl = document.getElementById (ชื่อ); var oul = oscl.QuerySelector ("ul"); var Ali = OUL.QuerySelectorAll ("Li"); var next = document.getElementById ("ถัดไป"); var pre = document.getElementById ("pre"); var aindex = oscl.QuerySelectorall (". ดัชนี Span"); var num = 0; ดัชนี var = 0; /*ให้ระดับสูงสุดของภาพแรก*/ Ali [0] .style.zindex = 5; /*ตัดสินว่าตัวจับเวลามีอยู่*/ if (! oscl.timer) {oscl.timer = null; } /*นี่คือม้าหมุนอัตโนมัติบน* / oscl.timer = setInterval (function () {num ++; num%= Ali.length; play ();}, 2000); /*แสดงและซ่อนบนหน้าบนและล่าง*/ oscl.onmouseover = function () {/*ย้ายใน TECT Timer*/ ClearInterval (Oscl.Timer); next.style.display = "block"; pre.style.display = "block"; } oscl.onMouseOut = function () {next.style.display = "ไม่มี"; pre.style.display = "ไม่มี"; /*ย้ายออกบนตัวจับเวลา*/ oscl.timer = setInterval (ฟังก์ชัน () {num ++; num%= Ali.length; play ();}, 2000); } /*คลิกหน้าก่อนหน้าและหน้าถัดไป* / next.onclick = function () {num ++; num%= Ali.length; เล่น(); } pre.onclick = function () {ถ้า (! Ali [index]) {index = num; } num--; if (num <0) {num = Ali.Length-1; } เล่น(); } /*จุดดัชนี* / สำหรับ (var i = 0; i <aindex.length; i ++) {aindex [i] .index = i; aindex [i] .onmouseover = function () {num = this.index; เล่น(); }} /*ฟังก์ชั่นการทำงานของแอนิเมชั่น* /ฟังก์ชัน play () { /*เพียงแค่กำหนดว่ามันเป็นจุดทริกเกอร์เดียวกันเช่นการเคลื่อนไหวทั้งสองของจุดดัชนีจะเหมือนกัน หากไม่ได้ดำเนินการให้หลีกเลี่ยงการดำเนินการซ้ำอย่างต่อเนื่อง*/ if (index! = num) {สำหรับ (var i = 0; i <ali.length; i ++) {/*ตั้งค่าทุกระดับเป็น 1*/ ali [i] .style.zindex = 1; } /*ตั้งค่าระดับของม้าหมุนสุดท้ายเป็น 2* / ALI [ดัชนี] .style.zindex = 2; aindex [index] .className = ""; aindex [num] .className = "ใช้งาน"; ดัชนี = num; /*ตั้งค่าความโปร่งใสของรูปของม้าหมุนนี้เป็น 0*/ Ali [num] .style.Opacity = 0; /*ตั้งค่าระดับของรูปที่เป็นม้าหมุนถึง 5*/ Ali [num] .style.zindex = 5; /*การห่อหุ้มฟังก์ชั่นการเคลื่อนไหว, จางหายไปจากรูปภาพนี้*/ domove (Ali [num], "ความทึบ", 10,100); }}} </script> <style> a {การกำหนดข้อความ: ไม่มี; สี: #555; } #Carousel {Font-Family: "Microsoft Yahei"; ตำแหน่ง: ญาติ; ความกว้าง: 800px; ความสูง: 400px; มาร์จิ้น: 0 อัตโนมัติ; } #carousel ul {list-style: none; มาร์จิ้น: 0; Padding: 0; ตำแหน่ง: ญาติ; } #Carousel ul li {ตำแหน่ง: สัมบูรณ์; z-index: 1; ด้านบน: 0; ซ้าย: 0; } .imgbox img {width: 800px; ความสูง: 400px; } .BTN {ตำแหน่ง: สัมบูรณ์; z-index: 10; ด้านบน: 50%; ความกว้าง: 45px; ความสูง: 62px; ระยะขอบด้านบน: -31px; TEXT-ALIGN: CENTER; ความสูงของสาย: 62px; ขนาดตัวอักษร: 40px; ความเป็นมา: RGBA (0,0,0,0.4); ความทึบ: อัลฟ่า (ความทึบ = 50); แสดง: ไม่มี; } #pre {ซ้าย: 0; } #NEXT {ขวา: 0; } #Carousel .index {ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 10px; ซ้าย: 50%; z-index: 10; } #Carousel .index Span {Width: 15px; ความสูง: 15px; แนวชายแดน: 50%; ความเป็นมา: #87CEFA; แสดง: Inline-Block; Box-Shadow: 1px 1px 6px #4169E1; } #Carousel .Index Span.active {พื้นหลัง: #4169E1; Box-Shadow: 1px 1px 6px #87CEFA สิ่งที่ใส่เข้าไป; } </style> </head> <body> <div id = "Carousel"> <ul> <li> <a href = "#"> <img src = "1.jpg"> </a> </li> <li> <a href = "#"> <img src = "2.jpg" src = "2.jpg"> </a> </li> <li> <a href = "#"> <img src = "3.jpg"> </a> </li> <li> <a href = "#"> <img src = "4.jpg"> src = "5.jpg"> </a> </li></ul> <a href = "JavaScript:;" id = "next" >> </a> <a href = "JavaScript:;" id = "pre"> <</a> <div> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div> </div>สิ่งนี้ทำได้โดยใช้ปลั๊กอิน: responsiveslides.js
ขึ้นอยู่กับ jQuery
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เอกสาร </title> <!-แนะนำปลั๊กอิน js และ jQuery-> <script src = "jQuery-2.0.3.js"> </script> ความกว้าง: 800px; } /* แอตทริบิวต์ CSS เริ่มต้นของปลั๊กอิน* / .rslides {ตำแหน่ง: สัมพัทธ์; รายการสไตล์: ไม่มี; ล้น: ซ่อน; ความกว้าง: 100%; Padding: 0; มาร์จิ้น: 0; } .rslides li {-webkit-backface-visibility: ซ่อน; ตำแหน่ง: สัมบูรณ์; แสดง: ไม่มี; ความกว้าง: 100%; ซ้าย: 0; ด้านบน: 0; } .rslides li: ลูกคนแรก {ตำแหน่ง: ญาติ; แสดง: บล็อก; ลอย: ซ้าย; } .rslides img {display: block; ความสูง: อัตโนมัติ; ลอย: ซ้าย; ความกว้าง: 100%; ชายแดน: 0; } /*, แก้ไข, แก้ไขเป็นปุ่ม dot* / ul.rslides_tabs.rslides1_tabs {ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 10px; ซ้าย: 45%; รายการสไตล์: ไม่มี; z-index: 10; } ul.rslides_tabs.rslides1_tabs li {float: ซ้าย; } ul.rslides_tabs.rslides1_tabs li a {display: block; แนวชายแดน: 50%; ความกว้าง: 10px; ความสูง: 10px; มาร์จิ้น-ขวา: 10px; ความเป็นมา: #FFF; } / * .rslides_her นี่เทียบเท่ากับการใช้งาน * / ul.rslides_tabs.rslides1_tabs li.rslides_hare a {พื้นหลัง: #004f88; } /* ชื่อคลาสของปุ่มซ้ายและขวา* / .rslides_nav.rslides1_nav {ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; สี: #eee; ขนาดตัวอักษร: 40px; การตกแต่งข้อความ: ไม่มี; z-index: 4; } .rslides_nav.rslides1_nav.pre {ซ้าย: 10px; } .rslides_nav.rslides1_nav.next {ขวา: 10px; } .rslides img {ความสูง: 400px; } </style> <script> $ (function () {$ (". rslides"). การตอบสนอง ({pager: จริง, // ค่าเริ่มต้นเป็นเท็จเมื่อแสดง (จริง) จุดดัชนีจะปรากฏขึ้นค่าเริ่มต้นคือหมายเลข 12345 Pausecontrols: จริง, // บูลีน: หยุดชั่วคราวเมื่อเลื่อนการควบคุม, prevtext จริงหรือเท็จ: "<", // แก้ไขสัญลักษณ์ของปุ่มซ้ายและขวา textText: ">", // สตริง: ข้อความสำหรับปุ่ม "ถัดไป"): "800px"}; $ ("#banner"). mouseover (function () {$ (". rslides1_nav"). css ("แสดง", "block");}) $ ("#banner"). mouseout (function () {$ ("rslides1_nav") </script> </head> <body> <!-ใช้ div เพื่อห่อมันและแท็กเหล่านั้นที่เพิ่มโดย JS จะถูกโหลดโดยตรงด้านหลังแท็ก UL-> <div id = "Banner"> <ul id = "rslides"> <li> <img src = "111.jpg"> </li> src = "333.jpg"> </li> <li> <img src = "444.jpg"> </li> <li> <img src = "555.jpg"> </li>ภาพสไลด์:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> การเลื่อนภาพ </title> <style> .container {ตำแหน่ง: ญาติ; ความกว้าง: 630px; ชายแดน: 2px Solid #888; ช่องว่าง: 5px; } .c-wrap {width: 630px; ล้น: ซ่อน; } .Container img {width: 200px; ความสูง: 90px; } .container ul {list-style: none; มาร์จิ้น: 0; Padding: 0; } .container ul li {float: ซ้าย; มาร์จิ้น-ขวา: 10px; } .Container .ImGBIGBOX {WIDTH: 33000PX; ขอบซ้าย: 0px; } .imgbigbox: หลังจาก {เนื้อหา: ""; แสดง: บล็อก; ชัดเจน: ทั้งสอง; } .BTNGROUP {ชายแดน: 1PX SOLID #888; ความกว้าง: 65px; } .BtNgroup a {text-allign: center; ความสูงของสาย: 20px; การตกแต่งข้อความ: ไม่มี; สี: #888; ขนาดตัวอักษร: 20px; แสดง: Inline-Block; ความกว้าง: 30px; } .Btn1 {มาร์จิ้น-ขวา: 4px; ชายแดนขวา: 1px Solid #888; } </style> <!-ฟังก์ชั่นการเคลื่อนไหว-> <script type = "text/javaScript" src = "domove.js"> </script> <script type = "text/javascript"> window.onload = function () {/*ฟังก์ชั่นการโทร } ฟังก์ชั่นสไลด์ (ชื่อ) {var ocontainer = document.QuerySelector (ชื่อ); var oimgbigbox = ocontainer.QuerySelector (". imgbigbox"); var abtn = ocontainer.QuerySelectorall (". btngroup a"); var oc_wrap = ocontainer.QuerySelector (". c-wrap"); /*รับความกว้างการเลื่อน*/ var w = oc_wrap.offsetWidth; /*คลิกปุ่มซ้าย*/ abtn [0] .onclick = function () {domove (oimgbigbox, "marginleft", 10, -w, function () {var child = oimgbigbox.children [0] .clonenode oimgbigbox.removechild (oimgbigbox.children [0]); oimgbigbox.insertbefore (oimgbigbox.children [1], oimgbigbox.children [0]); oimgbigbox.style.marginleft = -w+"px"; domove (oimgbigbox, "marginleft", 10,0)}} </script> </head> <body> <div> <div> <div> <ul> <li> <img src = "1.jpg"> </li> <li> <li> <img src = "4.jpg"> </li> <li> <img src = "5.jpg"> </li> <li> <img src = "6.jpg"> </li> </ul> </div>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น