บางครั้งเมื่อสร้างโฟลว์ของหน้าเว็บ คุณจะต้องหาวิธีที่จะแบ่งเนื้อหาออกเป็นส่วนๆ ที่มองเห็นได้ชัดเจน ในบทความนี้ เราจะเรียนรู้เกี่ยวกับกฎแนวนอนใน 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>
ทำได้ดีมาก! ตอนนี้คุณมีเครื่องมือที่จำเป็นในการสร้างไซต์ที่ดูดีโดยใช้
