home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีสร้างและจัดรูปแบบเส้นแนวนอนใน HTML

บางครั้งเมื่อสร้างโฟลว์ของหน้าเว็บ คุณจะต้องหาวิธีที่จะแบ่งเนื้อหาออกเป็นส่วนๆ ที่มองเห็นได้ชัดเจน ในบทความนี้ เราจะเรียนรู้เกี่ยวกับกฎแนวนอนใน HTML และวิธีใส่ลงในมาร์กอัปของคุณ เพื่อให้คุณสามารถทำให้หน้าเว็บของคุณดูน่าดึงดูดยิ่งขึ้นและใช้งานง่ายขึ้น

<hr> องค์ประกอบ HTML สามารถจัดรูปแบบได้เช่นเดียวกับองค์ประกอบ HTML อื่นๆ โดยใช้ CSS ข้อตกลงคือต้องเป็นแท็กแบบไม่ปิด (

) แทนที่จะเป็นแท็กปิดตัวเอง (
) แต่มาร์กอัปจะอ่านเหมือนกันไม่ว่าด้วยวิธีใด จะแสดงเป็นองค์ประกอบระดับบล็อกที่มีการสนับสนุนเบราว์เซอร์ระดับกว้าง และบ่งชี้ถึงการเปลี่ยนแปลงในหัวข้อบนหน้าเว็บของคุณ

ฉันคิดว่ามันดีที่สุดที่จะทดลองกับ CSS เพื่อดูว่ามันทำอะไรได้บ้าง แซนด์บ็อกซ์โค้ดต่อไปนี้แสดงหน้า HTML ขั้นพื้นฐานที่มี CSS บางส่วนที่ใช้ในการตกแต่งองค์ประกอบ HTML 


<!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>

ทำได้ดีมาก! ตอนนี้คุณมีเครื่องมือที่จำเป็นในการสร้างไซต์ที่ดูดีโดยใช้