Hướng dẫn can you make a website with only html - bạn có thể tạo một trang web chỉ với html

& nbsp; Liên kết & nbsp; Liên kết & nbsp; Liên kết & nbsp; Liên kết

Sử dụng CSS để tạo kiểu cho thanh điều hướng:
.navbar {
  overflow: hidden; /* Hide overflow */
  background-color: #333; /* Dark background color */
}

/ * Kiểu thanh điều hướng hàng đầu */. Navbar {& nbsp; & nbsp; tràn: ẩn; / * Ẩn tràn */& nbsp; & nbsp; màu nền: #333; / * Màu nền tối */}
.navbar a {
  float: left; /* Make sure that the links stay side-by-side */
  display: block; /* Change the display to block, for responsive reasons [see below] */
  color: white; /* White text color */
  text-align: center; /* Center the text */
  padding: 14px 20px; /* Add some padding */
  text-decoration: none; /* Remove underline */
}

/ * Kiểu các liên kết thanh điều hướng */. Navbar a {& nbsp; Phao: Trái; / * Đảm bảo rằng các liên kết ở bên cạnh */& nbsp; Hiển thị: Khối; / * Thay đổi màn hình thành khối, vì lý do phản hồi [xem bên dưới] */& nbsp; màu trắng; / * Màu văn bản trắng */& nbsp; Văn bản-Align: Trung tâm; / * Trung tâm văn bản */& nbsp; Đệm: 14px 20px; / * Thêm một số phần đệm */& nbsp; Chế độ trang trí văn bản: Không có; / * Xóa gạch chân */}
.navbar a.right {
  float: right; /* Float a link to the right */
}

/ * Liên kết liên kết bên phải */. Navbar A.Right {& nbsp; Phao: Phải; / * Float một liên kết đến bên phải */}
.navbar a:hover {
  background-color: #ddd; /* Grey background color */
  color: black; /* Black text color */
}

/ * Tăng kích thước phông chữ của phần tử */ .header h2 {& nbsp; kích thước phông chữ: 40px;}

Hãy tự mình thử »

Thanh điều hướng

Một thanh điều hướng chứa một danh sách các liên kết để giúp khách truy cập điều hướng qua trang web của bạn:
 

& nbsp; Liên kết & nbsp; Liên kết & nbsp; Liên kết & nbsp; Liên kết

Sử dụng CSS để tạo kiểu cho thanh điều hướng:
* {
  box-sizing: border-box;
}

/ * Kiểu thanh điều hướng hàng đầu */. Navbar {& nbsp; & nbsp; tràn: ẩn; / * Ẩn tràn */& nbsp; & nbsp; màu nền: #333; / * Màu nền tối */}
.row {
  display: flex;
  flex-wrap: wrap;
}

/ * Kiểu các liên kết thanh điều hướng */. Navbar a {& nbsp; Phao: Trái; / * Đảm bảo rằng các liên kết ở bên cạnh */& nbsp; Hiển thị: Khối; / * Thay đổi màn hình thành khối, vì lý do phản hồi [xem bên dưới] */& nbsp; màu trắng; / * Màu văn bản trắng */& nbsp; Văn bản-Align: Trung tâm; / * Trung tâm văn bản */& nbsp; Đệm: 14px 20px; / * Thêm một số phần đệm */& nbsp; Chế độ trang trí văn bản: Không có; / * Xóa gạch chân */}
/* Sidebar/left column */
.side {
  flex: 30%; /* Set the width of the sidebar */
  background-color: #f1f1f1; /* Grey background color */
  padding: 20px; /* Some padding */
}

/ * Liên kết liên kết bên phải */. Navbar A.Right {& nbsp; Phao: Phải; / * Float một liên kết đến bên phải */}
.main {
  flex: 70%; /* Set the width of the main content */
  background-color: white; /* White background color */
  padding: 20px; /* Some padding */
}

/ * Tăng kích thước phông chữ của phần tử */ .header h2 {& nbsp; kích thước phông chữ: 40px;}

Hãy tự mình thử »

Thanh điều hướng
@media screen and [max-width: 700px] {
  .row {
    flex-direction: column;
  }
}

Một thanh điều hướng chứa một danh sách các liên kết để giúp khách truy cập điều hướng qua trang web của bạn:
@media screen and [max-width: 400px] {
  .navbar a {
    float: none;
    width: 100%;
  }
}

Hãy tự mình thử »

Mẹo: Để tạo ra một loại bố cục khác, chỉ cần thay đổi chiều rộng flex [nhưng đảm bảo rằng nó tăng thêm tới 100%]. To create a different kind of layout, just change the flex width [but make sure that it adds up to 100%].

Mẹo: Bạn có tự hỏi làm thế nào quy tắc @Media hoạt động không? Đọc thêm về nó trong chương Truy vấn truyền thông CSS của chúng tôi. Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.

Mẹo: Để tìm hiểu thêm về mô -đun bố cục hộp linh hoạt, hãy đọc chương CSS Flexbox của chúng tôi. To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Kích thước hộp là gì?

Bạn có thể dễ dàng tạo ba hộp nổi cạnh nhau. Tuy nhiên, khi bạn thêm một cái gì đó mở rộng chiều rộng của mỗi hộp [ví dụ: đệm hoặc đường viền], hộp sẽ bị hỏng. Thuộc tính 1 cho phép chúng tôi bao gồm phần đệm và đường viền trong tổng chiều rộng [và chiều cao] của hộp, đảm bảo rằng phần đệm ở bên trong hộp và nó không bị hỏng.

Bạn có thể đọc thêm về thuộc tính kích thước hộp trong hướng dẫn kích thước hộp CSS của chúng tôi.

Chân trang

Cuối cùng, chúng tôi sẽ thêm một chân trang.

& nbsp; Chân trang
 

Footer

Và phong cách nó:

.footer {& nbsp; Đệm: 20px; / * Một số phần đệm */& nbsp; & nbsp; văn bản-align: centre; /* Văn bản trung tâm*/ & nbsp; Bối cảnh: #DDD; / * Nền màu xám */}
  padding: 20px; /* Some padding */
  text-align: center; /* Center text*/
  background: #ddd; /* Grey background */
}

Hãy tự mình thử »

Xin chúc mừng! Bạn đã xây dựng một trang web đáp ứng từ đầu.

Không gian trường học W3schools

Nếu bạn muốn tạo trang web của riêng mình và lưu trữ các tệp .html của mình, hãy thử trình tạo trang web miễn phí của chúng tôi, được gọi là W3Schools Spaces:free website builder, called W3schools Spaces:

HTML có tốt cho việc tạo trang web không?

HTML có thể được sử dụng một mình không?

Có khó để tạo một trang web với HTML không?

Tôi chỉ có thể làm gì với HTML?