Trong bài hướng dẫn này, Nguyễn Văn Hiếu sẽ cùng bạn tạo giao diện trang web mẫu, cụ thể lấy ví dụ là trang Khoa Phạm Online bằng HTML và CSS. Bài tập này rất thú vị vì chúng ta sẽ sử dụng nhiều thuộc tính để quản lý bố cục trang web. Hãy bắt đầu ngay!
Bài tập HTML CSS
Chúng ta sẽ làm phần nội dung này
Kiến thức cần có:
Trong việc làm việc với HTML và CSS, bạn cần nắm vững một số thẻ HTML cơ bản như:
- Thẻ đóng khối
<div> - Thẻ tiêu đề
<h1>,<h2>, … - Thẻ đoạn văn
<p> - Thẻ hình ảnh
<img> - Thẻ link
<a> - Cách chèn icon và font từ Google
Các thuộc tính CSS cơ bản liên quan đến việc thiết kế trang web bao gồm:
flexbox: Được sử dụng để quản lý việc sắp xếp các phần tử trên trang web.
Các thuộc tính CSS liên quan đến flexbox bao gồm:
display: flex;: Khi được áp dụng cho một phần tử, nó biến phần tử đó thành một container linh hoạt.flex-direction: Điều chỉnh hướng sắp xếp của các phần tử con bên trong container.row: Sắp xếp theo hàng (tương đương vớifloat: left).row-reverse: Sắp xếp theo hàng từ sau ra trước (tương đương vớifloat: right).column: Sắp xếp theo cột từ trên xuống dưới.column-reverse: Sắp xếp theo cột từ dưới lên trên.
flex-wrap: Xác định liệu các phần tử con có nên xuống dòng khi không đủ chiều rộng hay không.no-wrap: Không xuống dòng, chỉ hiển thị trên một hàng.wrap: Tự động xuống dòng khi đủ chiều rộng của container.wrap-reverse: Đảo ngược xuống dòng.
justify-content: Canh chỉnh các phần tử con theo chiều ngang.center: Căn giữa tự động (tương đương vớitext-align: center).flex-start: Dồn sang trái.flex-end: Dồn sang phải.space-between: Chia đều các phần tử con trong container.space-around: Chia đều các phần tử con và tạo khoảng trống ở hai bên của container.
align-items: Canh chỉnh các phần tử con theo chiều dọc, với chiều cao của container bên ngoài cố định.stretch: Tự động lấp đầy chiều cao.flex-start: Dồn lên trên.flex-end: Dồn xuống dưới.base-line: Canh chỉnh chữ cho thẳng hàng.
Phân tích bài tập:
Khi xem xét bài tập, chúng ta có thể chia nó thành các khối sau:
- Khối lớn: Chứa tất cả các phần khác và đặt hình nền.
- Khối màn hình đen: Là con của khối lớn, được sử dụng để làm cho hình nền trở nên tối hơn và để sử dụng
flexboxđể căn giữa nội dung. - Khối đen: Là con của khối màn hình đen, chứa trực tiếp hai phần tìm kiếm và giới thiệu tiếp tục, và được sử dụng để chia cấu trúc.
- Khối tìm kiếm và giới thiệu: Cùng cấp với nhau.
- Khối _1khoi: Là một phần của khối giới thiệu, sau khi xử lý CSS xong, chúng ta sẽ nhân đôi nó.
Dưới đây là mã HTML và CSS:
Mã HTML:
<!DOCTYPE html>
<html>
<head>
<title>FLEX B0X</title>
<link rel="stylesheet" type="text/css" href="zing.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Quicksand:400,500,700&subset=vietnamese" rel="stylesheet">
</head>
<body>
<div class="khoito">
<div class="manhinhden">
<div class="khoiden">
<div class="text">
<h2>KHOA PHẠM ONLINE</h2>
<p id="txt1">Trang học lập trình phi lợi nhuận. Bạn sẽ phải ngạc nhiên vì mặc dù miễn phí<br/> nhưng chất hơn cả có phí</p>
</div>
<div class="timkiem">
<input type="text"><i class="fas fa-search"></i>
</div>
<div class="gioithieu">
<div class="_1khoi">
<i class="fas fa-address-book"></i>
<p>Nội dung học cập nhật mới liên tục theo yêu cầu của người học</p>
</div>
<div class="_1khoi">
<i class="fas fa-user-friends"></i>
<p>Livecode miễn phí giao lưu cùng người học tối hai, tư, sáu hàng tuần</p>
</div>
<div class="_1khoi">
<i class="fas fa-tablet-alt"></i>
<p>Miễn phí 100%, do chính giảng viên tại Khoa Phạm xây dựng bài học</p>
</div>
</div>
</div>
</div>
</body>
</html>
Mã CSS:
*{
border: none;
margin:0;
padding:0;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Quicksand', sans-serif;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
p{
color:white;
}
.khoito{
background-image: url("http://online.khoapham.vn/online/images/pexels-photo.jpg");
background-size: cover;
width: 100%;
height: 100%;
}
.manhinhden {
background-color: #00000059;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.khoiden {
width: 60%;
height: 65%;
background-color: #00000090;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.text{
display: flex;
flex-direction: column;
align-items: center;
}
h2{
color:white;
font-size: 40px;
font-weight: lighter;
}
#txt1{
color:white;
text-align: center;
line-height: 25px;
margin: 25px 0px;
}
div.timkiem{
width: 100%;
text-align: center;
}
.timkiem input{
width: 80%;
height: 50px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.timkiem i{
background-color: #0D7CC9;
color: white;
font-size: 20px;
padding:15px;
position: relative;
top:2px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.gioithieu{
display: flex;
flex-direction: row;
position: relative;
top: 30px;
width: 100%;
justify-content: space-evenly;
}
._1khoi{
width: 175px;
height: 93px;
justify-content: space-between;
}
._1khoi i{
color:white;
float:left;
font-size: 26px;
height: 90px;
margin-right: 20px;
}
._1khoi p{
font-size: 15px;
}
Hy vọng rằng phiên bản này giúp bạn dễ dàng hiểu hơn về cách thực hiện bài tập và tạo giao diện web sử dụng HTML và CSS.
Để lại một bình luận