Thiết kế layout trang web là tạo nên bộ khung cho trang, là lúc bạn thể hiện ý tưởng của mình qua việc tạo các vùng thể hiện thông tin,
Các tag thường dùng để thiết kế layout
- header: là tag bao chứa phần đầu trang
- nav: : là tag bao chứa phần menu của trang
- aside: : là tag bao chứa phần thông tin mở rộng (phụ) của trang
- article: : là tag bao chứa phần thông tin chính của trang.
- footer: : là tag bao chứa phần chân của trang
- section: : là tag bao chứa phần trong trang
Thuộc tính float và clear
Đây là 2 thuộc tính bạn có thể dùng trong việc tạo layout cho trang, mục đích để tạo các cột nằm cạnh nhau.
- Float: thuộc tính cho tag dạt qua trái (left) hoặc dạt qua phải (right) của trang. Không gian còn lại nó nhường cho tag em của nó (tag em chạy lên nằm ngang với tag anh)
- Clear: thuộc tính này bỏ qua float của các tag phia trên. Giá trị left sẽ bỏ qua float là left của tag phia trên. Clear là right sẽ bỏ qua float là right của tag phía trên. Còn clear là both thì bỏ qua float là left và right của các tag phía trên.
Tạo layout đơn giản dùng float và clear
<style>
.container { width: 1140px; margin: auto; font-size: 28px;}
header { height: 200px; background: lightseagreen;}
nav { height: 60px; background: lightslategray;}
article { width: 75%; float: left; background:olivedrab; min-height: 450px;}
aside { width: 25%; float: right; background:orange; min-height: 450px;}
footer { height: 150px; background: darkslategray; clear: both; }
</style>
<div class="container">
<header> HEADER </header>
<nav> MENU </nav>
<article> NỘI DUNG CHÍNH </article>
<aside> THÔNG TIN BỔ SUNG </aside>
<footer> FOOTER </footer>
</div>
Thuộc tính display là flex
Đây là thuộc tính bạn có thể dùng trong việc tạo nhiều cột nằm cạnh nhau trong thiết kế layout cho trang, sử dụng thì đơn giản .
<div class="row" style="display:flex; height:500px" > <div id="cot1" style="width: 250px; background:red"> CỘT 1</div> <div id="cot2" style="width: 700px; background:GREEN"> CỘT 2</div> <div id="cot3" style="width: 250px; background:BLUE"> CỘT 3</div> </div>
Tạo layout đơn giản dùng display là flex
Code html:
<body> <div class="container"> <header> HEADER </header> <nav> MENU </nav> <div class="main"> <aside id="cottrai"> THÔNG TIN BỔ SUNG</aside> <article> THÔNG TIN CHÍNH </article> <aside id="cotphai"> THÔNG TIN BỔ SUNG</aside> </div> <footer> FOOTER</footer> </div> </body>
<style>
* { padding:0 ; margin: 0;}
.container { width: 1200px;margin: auto; font-size: 24px;}
header {background: lightseagreen; height: 180px;position: relative;}
nav {background: darkkhaki; height: 60px;}
footer{ background: darkseagreen;height: 40px; clear: both; }
.main { display: flex; min-height: 450px;}
aside#cottrai {background: lightblue; width: 250px;}
article {background: greenyellow;width: 700px;}
aside#cotphai {background: lightblue;width: 250px;}
</style>
Để có thể thiết kế layout trang web, bạn cần có kiến thức Cơ bản về Cascadung Style Sheet để đọc bài này nhé.
