-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtk_layout.html
82 lines (75 loc) · 4.77 KB
/
tk_layout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout</title>
<style>
*{ padding: 0;margin: 0;
box-sizing: border-box;
}
header{
background-color: red;
color: white;
height: 150px;
}nav{
background-color: aqua;
display: flex;
min-height: 100px;
}
article{
background-color: yellow;
color: rgb(180, 0, 0);
float: left;
width: 70%;
height: 200px;
}
aside{
min-height: 200px;
height: 30%;
min-width: 30%;
float: left;
background-color: black;
}
footer{
background-color: pink;
clear: left;
min-height: 200px;
}
.tung{
font-size: 40px;
color: blue;
background-color: white;
border: 2px dashed orange;
min-width: 120px;min-height: 10px;
display: inline-block;
}
.border{
border: 1px black solid;
background-color: rebeccapurple;
min-height: 20px;min-height: 20px;
display: inline-block;
position: absolute;
bottom: 10px;
right: 20px;
}
</style>
</head>
<body>
<header>header</header>
<nav>meun</nav>
<article>phan than</article>
<aside>phan barder ( phan canh )</aside>
<footer>phan chan</footer>
<!-- <div class="tung">thanhtung o day </div> -->
<!-- <div class="border">vfvb</div> -->
</body>
</html>
<!--
SU KHAC NHAU CUA 3 KIEU DUNG TROGN LAYOUT
Câu hỏi của bạn liên quan đến việc sử dụng các thuộc tính CSS để xây dựng layout trang web. Dưới đây là một số lời khuyên về cách sử dụng các thuộc tính này:
- **Float**: Thuộc tính này được sử dụng để định vị và định dạng nội dung, ví dụ: để một hình ảnh nổi bên trái văn bản trong vùng chứa. Thuộc tính float có thể có một trong các giá trị sau: left – Phần tử nổi ở bên trái vùng chứa, right – Phần tử nổi ở bên phải vùng chứa, none – Phần tử không nổi, inherit – Kế thừa giá trị từ phần tử cha. Tuy nhiên, khi sử dụng thuộc tính này, bạn cần lưu ý rằng nó có thể gây ra một số vấn đề về định vị nội dung, đặc biệt là khi sử dụng với các phần tử có kích thước khác nhau.
- **Display**: Thuộc tính này được sử dụng để xác định kiểu hiển thị của phần tử. Các giá trị phổ biến của thuộc tính này bao gồm: block – Hiển thị phần tử dưới dạng khối, inline – Hiển thị phần tử dưới dạng nội tuyến, none – Không hiển thị phần tử, flex – Hiển thị phần tử dưới dạng container linh hoạt. Khi sử dụng thuộc tính này, bạn cần lưu ý rằng nó có thể ảnh hưởng đến việc định vị nội dung của phần tử.
- **Margin**: Thuộc tính này được sử dụng để xác định khoảng cách giữa các phần tử. Bạn có thể sử dụng thuộc tính này để tạo khoảng cách giữa các phần tử hoặc giữa phần tử và khung chứa của nó. Thuộc tính margin có thể có một trong các giá trị sau: auto – Tự động tính toán khoảng cách, length – Khoảng cách được xác định bằng đơn vị đo, percent – Khoảng cách được xác định bằng phần trăm. Khi sử dụng thuộc tính này, bạn cần lưu ý rằng nó có thể ảnh hưởng đến việc định vị nội dung của phần tử.
- **So sánh 3 câu hỏi trên có khi khác nhau có gì giống nhau và khi nào dùng đến nó**: Các câu hỏi này đều liên quan đến việc sử dụng các thuộc tính CSS để xây dựng layout trang web. Tuy nhiên, mỗi câu hỏi lại tập trung vào một thuộc tính cụ thể và có mục đích sử dụng khác nhau. Để hiểu rõ hơn về cách sử dụng các thuộc tính này, bạn có thể tìm kiếm các tài liệu hướng dẫn trực tuyến hoặc tham khảo các sách về CSS. Khi sử dụng các thuộc tính này, bạn cần lưu ý rằng chúng có thể ảnh hưởng đến việc định vị nội dung của phần tử và cần được sử dụng một cách cẩn thận để đảm
-->