ไม่ไร้สาระมากนักมาแสดงให้คุณเห็นการเรนเดอร์ก่อน:
เค้กแบ่งออกเป็นสามส่วนเค้กด้านล่างเค้กด้านบนและส่วนเทียน เค้าโครงของ HTML ยังเป็นเลย์เอาต์ตามสามส่วนนี้ อีกอย่างคือการใช้ตำแหน่ง CSS และ CSS3 หมุน มันง่ายกว่านี้ฉันเชื่อว่าเกษตรกรโค้ดเข้าใจ
ฉันจะไม่ทำซ้ำคนอื่น
รหัส HTML ที่สมบูรณ์และรหัส CSS ได้รับด้านล่าง
<HTML> <html> <head lang = en> <meta charset = utf-8> </tictle> <style>. -radius: 5px; Top-one. Bottom {Posity: Absolute; Box-shadow: 0px 0px 20px #3E2001;}. วันเกิด. ท็อป- หนึ่ง. ท็อป {โพสต์: ความกว้าง: 280px; ROTATEX (60DEG); Reperation-Radial-gradient (วงกลม, #783D01, #3E2001 10px, #914909 10px, สีขาว 20px);} : 1px Solid #3E2001; * / .brenday .Bottom-one {ตำแหน่ง: ความกว้าง: 400px; ด้านล่าง: -30px; .Bottom-one. line {ตำแหน่ง: ความกว้าง: 400px; : -5px: 1;}. birthday -one .top {โพสต์: 4: 4 00px; ROTATEX (60DEG); : 0px; PX; . Birthday. Flower I {ตำแหน่ง: ความกว้าง: 80px;的文字 **/. birthday .top-one. text {ความกว้าง: 100%; สี: #FFFFFF; 295px; ด้านบน {ความกว้าง: 10px; -radius: 5px; : หมุน (45DEG); div class = candle> <div class = fire> </div> <div class = top> </div> <div class = body> </div> <div class = ด้านล่าง> </div> </div> < div class = top-one> <div class = top> </div> <div class = size> </div> <div class = bottom> </div> <div class = text> happy birthday </div> < /div> <div class = bottom-one> <div class = top> </div> <div class = size> </div> <div class = bottom> <div class = line line1> </div> </// div> <div class = flower> <i style = top: -20px; <i style = top: 15px; /div> </body> </html>ข้างต้นเป็นเค้กวันเกิด HTML5+CSS3 ที่บริสุทธิ์ (รหัสนั้นเข้าใจง่าย) แนะนำโดยบรรณาธิการ ในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!