Viết html cho các thẻ chứa phần header
Nếu ăn theo trình duyệt thì có kích thước khá rộng trên desktop, để giới hạn kích thước này ta đặt navbar trong thẻ div có class=”grid”. Ở trong base.css ta đã khai báo chiều rộng của khối này là 1200px.
<header class="header">
<div class="grid">
<nav class="header__navbar">
</nav>
<div class="header-with-search">
</div>
</div>
</header>
- Tạo class=”header” để chứa toàn bộ phần đầu trang web
- Tạo class=”grid” để chưá nội dung phần đầu trang web
- Tạo class=”header__navbar” để chứa nội dung phần menu top
- Tạo class=”header-with-search” để chứa nội dung phần dưới top
Css cho phần header__navbar
Ở bài học Flexbox ta có cách sắp xếp này với thuộc tính trình bày là flex, sau đó ta cho hai danh sách này cách xa nhau vê hai bên bằng thuộc tính là “space-between”
.header__navbar{
display: flex;
justify-content: space-between;
}- Trình bày theo main axis
- Cho các phần tử cách xa nhau về hai bên
Tính chất khối
Mặt định trình duyệt áp dụng thuộc tính trình bày dạng khối. Ở cách trình bày này cho phép bạn dễ dàng đặt chiều ngang và chiều dọc cho css. Tính chất này sẽ kế thừa chiều ngang thẻ chứa nó. Như vậy html sẽ kế thừa chiều ngang của trình duyệt, body sẽ kế thừa chiều ngang của html suy ra nó cũng kế thừa từ trình duyệt. Ta xem xét trong thẻ header cũng có chiều ngang dài hết màn hình. Như vậy chỉ cần đặt chiều cao cho phần navbar này.
- Đặt chiều cao cho navbar là –header-height: 120px; khai báo biến trong file base.css
- Cho cái màu chuyển từ blue sang RoyalBlue1 lấy gốc tọa độ là 0
Sau đây là css cho phần main.css
.header{
height: var(--header-height);
background-image: linear-gradient(0,#0000FF, #4876FF )
}Viết html cho phần nội dung của header__navbar
- Tạo thẻ ul vói tên class=”header__navbar-list” để chứa phần QR và mạng xã hội
- Tương tự tạo thẻ ul với tên class=”header__navbar-list” thứ 2 để chứa phần Thông báo, Trợ giúp, User.
Và ta có đoạn code như sau:
<ul class="header__navbar-list">
</ul>
<ul class="header__navbar-list">
</ul>Css cho danh sách
- Bỏ dấu chấm tròn ở đầu mỗi phần tử của danh sách
- Xóa padding và cho top bằng 4px để rút ngắn khoảng cách từ nội dung đến mép trên trình duyệt
- Trình bày theo trục ngang
header__navbar-list{
list-style: none;
padding-left: 0;
margin: 4px 0 0 0;
display: flex;
}Viết html cho phần nội dung của header-with-search
- Tạo thẻ class=”header__logo” để chứa phần logo
- Tạo thẻ class=”header__search” để chứa phần tìm kiếm
- Tạo thẻ class=”header__cart” để chứa phần giỏ hàng
<div class="header__logo">
</div>
<div class="header__search">
</div>
<div class="header__cart">
</div>
