Đôi khi khi tạo luồng trang web, bạn sẽ muốn tìm một số cách để chia nội dung của mình thành các phần riêng biệt về mặt hình ảnh. Trong bài viết này, chúng ta sẽ tìm hiểu về quy tắc ngang trong HTML và cách đặt quy tắc này vào phần đánh dấu của bạn để bạn có thể làm cho trang web của mình trở nên hấp dẫn và thân thiện với người dùng hơn.
<hr> Phần tử HTML có thể được tạo kiểu giống như bất kỳ phần tử HTML nào khác bằng cách sử dụng CSS. Quy ước cho nó là thẻ không đóng (
) thay vì thẻ tự đóng (
), nhưng đánh dấu được đọc theo cách giống nhau. Nó được hiển thị dưới dạng phần tử cấp khối có hỗ trợ trình duyệt cấp độ rộng và cho biết sự thay đổi chủ đề trên trang web của bạn.
Tôi nghĩ tốt nhất chỉ nên thử nghiệm với CSS để xem nó hoạt động như thế nào. Hộp cát mã sau minh họa một trang HTML rất, rất cơ bản với một số CSS được sử dụng để trang trí phần tử 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>
Bạn đã làm rất tốt! Bây giờ bạn có các công cụ cần thiết để xây dựng một trang web đẹp bằng cách sử dụng
.