Side Bar - HTML CSS
Source code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4 - side bar</title>
<!-- Nhúng google fonts vào HTML -->
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
<!-- Nhúng CSS vào HTML -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- chia cột thanh bên (thanh bên phải, thanh bên trái) -->
<div id="sidebar">
<div class="left">
<!-- tiêu đề không quan trong h3 -->
<!-- h1 h2 là quan trọng còn lại heading là thuộc kiểu không quan trọng -->
<h3>left</h3>
<!-- nội dung lorem... -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsam debitis assumenda, quas nobis earum velit! Reiciendis autem labore nulla omnis commodi nobis vel voluptates molestiae a iure ab rerum, reprehenderit placeat. Porro, similique sequi quod mollitia sunt libero quam in rerum laudantium. Quibusdam suscipit cum voluptates, sunt ab itaque.</p>
</div>
<!-- main content -->
<div class="content center">
<h3>Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsam debitis assumenda, quas nobis earum velit! Reiciendis autem labore nulla omnis commodi nobis vel voluptates molestiae a iure ab rerum, reprehenderit placeat. Porro, similique sequi quod mollitia sunt libero quam in rerum laudantium. Quibusdam suscipit cum voluptates, sunt ab itaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsam debitis assumenda, quas nobis earum velit! Reiciendis autem labore nulla omnis commodi nobis vel voluptates molestiae a iure ab rerum, reprehenderit placeat. Porro, similique sequi quod mollitia sunt libero quam in rerum laudantium. Quibusdam suscipit cum voluptates, sunt ab itaque.</p>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsam debitis assumenda, quas nobis earum velit! Reiciendis autem labore nulla omnis commodi nobis vel voluptates molestiae a iure ab rerum, reprehenderit placeat. Porro, similique sequi quod mollitia sunt libero quam in rerum laudantium. Quibusdam suscipit cum voluptates, sunt ab itaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsam debitis assumenda, quas nobis earum velit! Reiciendis autem labore nulla omnis commodi nobis vel voluptates molestiae a iure ab rerum, reprehenderit placeat. Porro, similique sequi quod mollitia sunt libero quam in rerum laudantium. Quibusdam suscipit cum voluptates, sunt ab itaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsam debitis assumenda, quas nobis earum velit! Reiciendis autem labore nulla omnis commodi nobis vel voluptates molestiae a iure ab rerum, reprehenderit placeat. Porro, similique sequi quod mollitia sunt libero quam in rerum laudantium. Quibusdam suscipit cum voluptates, sunt ab itaque.</p> -->
</div>
<div class="right">
<h3>right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsam debitis assumenda, quas nobis earum velit! Reiciendis autem labore nulla omnis commodi nobis vel voluptates molestiae a iure ab rerum, reprehenderit placeat. Porro, similique sequi quod mollitia sunt libero quam in rerum laudantium. Quibusdam suscipit cum voluptates, sunt ab itaque.</p>
</div>
</div>
</body>
</html>
style.css
/* reset CSS */
/*
kiểu selector * nghĩa là đại diện cho tất cả các thẻ trong file HTML
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-family: 'Lato', sans-serif;
/* nếu có phông Lato (load từ link google fonts) thì sử dụng phông Lato, nếu không có thì sử dụng phông không chân có sẵn trên máy user (người dùng) */
/* không viết cũng được vì là font-size mặc định là 16px */
font-size: 16px;
}
body {
/* màu nền */
background-color: #FF644A;
}
#sidebar {
/* emmet
df và bấm phím tab */
display: flex;
/* Chọn sidebar làm flex container
=> left content right là 3 flex item */
background-color: #fff;
/* set khoảng cách */
margin-top: 100px;
/* padding-top: 20px; */
/* padding-bottom: 20px; */
/* padding: 20px 0; */
/*
padding top là 20px
padding bottom là 20px
padding left là 0
padding right là 0
*/
}
#sidebar .left {
flex: 1;
background-color: palevioletred;
/* padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px; */
padding: 20px;
}
#sidebar .right {
flex: 1;
background-color: palevioletred;
/* padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px; */
padding: 20px;
}
#sidebar .center {
/* padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px; */
padding: 20px;
}
#sidebar .content {
flex: 5;
/* padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px; */
}
Result
