บางครั้งตอนสร้าง flow ของหน้าเว็บ ต้องการแบ่งเนื้อหาเป็นส่วนที่แตกต่างกันชัดเจน บทความนี้เรียนรู้ horizontal rule ใน HTML และวิธีใส่ในมาร์กอัป เพื่อทำให้หน้าเว็บดูน่าสนใจและ user-friendly
เอลิเมนต์ HTML <hr> จัดสไตล์ได้เหมือนองค์ประกอบ HTML อื่นด้วย CSS มาตรฐานคือ non-closing tag (<hr>) แทน self-closing (<hr />) แต่ markup อ่านเหมือนกัน แสดงเป็น block-level element รองรับเบราว์เซอร์กว้างขวาง และบ่งบอกการเปลี่ยนหัวข้อในหน้าเว็บ
คิดว่าลองทดลอง CSS ดูดีที่สุด โค้ด sandbox ต่อไปแสดงหน้า HTML พื้นฐานพร้อม CSS ตกแต่ง <hr>:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>hr</title> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;700&display=swap" rel="stylesheet" /> <style> body { font-family: 'Roboto Mono'; } nav { display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; height: 50px; margin-left: 20px; } nav > div { display: flex; justify-content: space-around; align-items: center; width: 40%; } nav > div > a { text-decoration: none; color: black; } nav > a { text-decoration: none; font-variant: small-caps; align-self: center; } hr { border: none; border-top: 5px double black; color: #333; overflow: visible; text-align: center; height: 5px; } hr::after { content: '😀😀😀😀'; padding: 0 4px; position: relative; top: -18px; background: #fff; } section { width: 100%; display: flex; align-items: center; margin: 0 auto; } section > div { width: 50%; display: flex; justify-content: center; } section > h1 { width: 50%; text-align: center; } section > div > img { height: 350px; object-fit:cover; } #diff-style-hr { border: none; border-top: 3px dotted black;color: #333; overflow:visible; text-align: center; height: 5px; } #diff-style-hr::after { content: ""; padding: 0; } .lower-container { display: flex; flex-flow: row wrap; } .lower-main { display: flex; flex-direction: column; width: 40%; margin: 0 auto; } h4 { align-self: flex-start; } </style> </head> <body> <nav> <a href="#"> <div> Logo Goes Here </div> </a> <div> <a href=""> About Us </a> <a href=""> Services </a> <a href=""> Contact Us </a> <a href=""> Login </a> </div> </nav> <hr /> <main> <section> <div> <img src="https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2266&q=80" alt="code"/> </div> <h1>I'm a business name</h1> </section> <hr id="diff-style-hr"> <div class="lower-container"> <section class="lower-main"> <h4>I'm a headline</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> <section class="lower-main"> <h4>I'm a headline</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> <section class="lower-main"> <h4>I'm a headline</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> <section class="lower-main"> <h4>I'm a headline</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> </div> </main> </body> </html>
เยี่ยม! ตอนนี้คุณมีเครื่องมือสร้างไซต์สวยงามด้วย <hr> แล้ว
