Kiến thức cơ bản về trang web dựa trên Div: 7 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:37

Tài liệu hướng dẫn này sẽ chỉ cho bạn những điều cơ bản về cách xây dựng một trang web với div. Bởi vì bàn dùng để bố trí là xấu xa!: pĐể hiểu được hướng dẫn này, bạn sẽ cần biết html và css cơ bản. Nếu bạn không hiểu điều gì đó, hãy hỏi. Trang chủ cá nhân của tôi cũng sử dụng loại cấu trúc div này.

Bước 1: Tạo tệp cơ bản

Đầu tiên, hãy tạo tệp html của bạn. Chúng tôi sẽ thêm những điều cơ bản vào nó. Tệp css sẽ trống cho now.html tệp bây giờ chứa: test Lưu tệp html của bạn dưới dạng something.html. Bạn có thể chọn tên cho mình. Tệp css của bạn phải được lưu dưới dạng.css. Đảm bảo rằng bạn đặt tên giống như đã đề cập trong tệp html. Trong trường hợp này là "style.css". Bây giờ chúng ta có một trang html trống trơn khi xem trước trong trình duyệt của chúng ta.

Bước 2: Chỉnh sửa Thẻ nội dung cho Màu cơ bản, Phông chữ,…

Chúng tôi sẽ giữ nguyên tệp html và chỉ chỉnh sửa tệp css. Thêm mã sau vào tệp css của bạn: body {background: # 444444; font-family: verdana, arial, sans-serif; màu: # 444444; font-size: 12px; margin: 0px;} Với đoạn mã này, chúng tôi sẽ xác định tất cả các thuộc tính của thẻ body. Vì tất cả nội dung đều nằm trong thẻ body nên các cài đặt này sẽ ảnh hưởng đến toàn bộ trang. Nền và màu phông chữ (color), đã được đặt thành màu xám đậm. Họ phông chữ (font-family) đã được đặt thành verdana. Nếu máy tính được sử dụng để xem trang web của chúng tôi không có phông chữ "verdana", nó sẽ hiển thị trang web của chúng tôi bằng phông chữ "arial". Bạn có thể thêm nhiều phông chữ vào danh sách. "Sans-serif" là kiểu chung sẽ được sử dụng khi không có phông chữ bạn cung cấp. Kích thước phông chữ (font-size) đã được đặt thành 12 pixel. Đây là một giá trị tuyệt đối. Nếu bạn muốn chỉnh sửa các kích thước phông chữ khác (như tiêu đề, đoạn văn, mục menu,…), bạn có thể sử dụng đơn vị tương đối "em" thay cho "px". Bằng cách này, nếu bạn muốn thay đổi kích thước trang web của mình, bạn sẽ chỉ phải thay đổi kích thước phông chữ nội dung. Lề đã được đặt thành 0px cho tất cả bốn cạnh của thẻ nội dung. Điều này được thực hiện để đảm bảo trang web sẽ bám vào đầu cửa sổ.

Bước 3: Thêm vùng chứa có tiêu đề và nội dung

Bây giờ chúng ta sẽ thêm vùng chứa. Đây chỉ đơn giản là một div được căn giữa sẽ chứa toàn bộ trang web của chúng ta. Trong vùng chứa này, chúng ta sẽ thêm hai div nữa; một div nội dung và một div tiêu đề. Tệp html của chúng tôi bây giờ sẽ giống như sau: test Tiêu đề nội dung Chúng tôi sẽ thêm đoạn mã sau vào tệp css của chúng tôi: div # container {width: 800px; margin: 0px tự động; nền: #FFFFFF; padding: 0px;} div # content {width: 800px; padding-top: 100px; background: yellow;} div # header {width: 800px; chiều cao: 100px; nền: xanh lam; vị trí: tuyệt đối; top: 0px;}. clearfix: sau {content: "."; hiển thị: khối; chiều cao: 0; rõ ràng: cả hai; khả năng hiển thị: hidden;}. clearfix {display: inline-block;} / * Ẩn khỏi IE Mac / * /. clearfix {display: block;} div # container có nghĩa là chúng ta có thẻ div với id "container". Chúng tôi sẽ thêm một số màu và "margin: 0px auto;" để đảm bảo vùng chứa của chúng ta được căn giữa trong trang. màu sắc xấu xí. Nó chỉ để giúp bạn dễ dàng đọc màu sắc và xem các div khác nhau.

Bước 4: Tạo thành hai phần trong phần nội dung cho điều hướng và nội dung thực tế

Bây giờ chúng ta sẽ thêm hai div nữa trong div nội dung. Một cho điều hướng và một cho nội dung thực tế. Ở giữa thẻ nội dung; bạn sẽ thêm mã mới:

Điều hướng Nội dung chính Chúng tôi sẽ thêm một số mã css để hiển thị điều hướng và nội dung chính divs; div # nav {width: 200px; float: trái; background: orange;} div # maincontent {width: 600px; float: phải; background: pink;} Lưu ý thực tế là cả hai div này đều nổi. Nếu chúng ta không đặt thêm mã clearfix ở bước trước, các div sẽ trôi ra bên ngoài div xung quanh. Với phương pháp clearfix, chúng tôi sẽ đảm bảo điều đó không xảy ra.

Bước 5: Thêm một số bộ phận bổ sung cho cấu trúc trong điều hướng

Bây giờ chúng tôi sẽ thêm một số div bổ sung vào cả div "nav" để tạo một số loại cấu trúc trong trang web của chúng tôi. Thay đổi đoạn mã sau:

• Foo
• Quán ba

Bây giờ chúng ta sẽ quảng cáo một đoạn mã để xác định cách div "navblock" phải được hiển thị. Lưu ý rằng navblock có một lớp chứ không phải một id. Lý do cho điều này là đơn giản; div có id chỉ được hiển thị một lần (khối điều hướng, đầu trang, chân trang,…). Các đơn vị có các lớp có thể được hiển thị nhiều hơn một lần. Ở đây chúng tôi sẽ sử dụng một lớp. Đề phòng trường hợp chúng tôi muốn thêm một khối điều hướng khác sau on.div.navblock {width: 180px; margin: tự động 5px; border: 1px solid red;} Nếu chúng ta muốn thêm một khối điều hướng khác, bạn sẽ phải thêm một… cấu trúc mới. Mã của bạn bây giờ sẽ trông như thế này;

• Foo
• Quán ba
• Ụt
• Xa

Bước 6: Thêm một số bộ phận bổ sung cho cấu trúc trong nội dung chính

Bây giờ chúng ta sẽ làm tương tự đối với div nội dung chính, mã bây giờ trông giống như sau:

Lorem ipsum dolor sit amet,…

Một lần nữa, chúng tôi sẽ thêm một đoạn mã vào tệp css của chúng tôi để xác định cách div phải được hiển thị: div.contentblock {width: 580px; margin: tự động 5px; border: 1px solid white;} Bây giờ chúng ta có thể thêm một khối nội dung khác bằng cách thêm một "…" khác vào div nội dung chính như thế này;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Bước 7: Làm cho trang web bớt xấu xí hơn một chút

Bây giờ là phần thú vị; Màu sắc. Bây giờ chúng ta có cấu trúc div chính, chúng ta có thể thay đổi màu sắc thành một thứ gì đó ít hỗn loạn / xấu xí hơn một chút /… Chỉ cần thử với các màu trong tệp css. Đây là tệp html hoàn chỉnh của trang web được hiển thị trong hình ảnh: kiểm tra

• Foo
• Quán ba
• Ụt
• Xa

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Header Và đây là toàn bộ tệp css: body {background: # 444444; font-family: verdana, arial, sans-serif; màu: # 444444; font-size: 12px; margin: 0px;} div # container {width: 800px; margin: 0px tự động; nền: #FFFFFF; padding: 0px;} div # content {width: 800px; padding-top: 100px; background: #FFFFFF;} div # header {width: 800px; chiều cao: 100px; nền: # 888888; vị trí: tuyệt đối; top: 0px;} div # nav {width: 200px; float: trái; background: #FFFFFF;} div # maincontent {width: 600px; float: phải; background: #DDDDDD;} div.navblock {width: 180px; margin: tự động 5px; border: 1px solid #DDDDDD;} div.contentblock {width: 580px; margin: tự động 5px; border: 1px solid #FFFFFF;}. clearfix: after {content: "."; hiển thị: khối; chiều cao: 0; rõ ràng: cả hai; khả năng hiển thị: hidden;}. clearfix {display: inline-block;} / * Ẩn khỏi IE Mac / * /. clearfix {display: block;} Vậy là bạn đã có những kiến thức cơ bản. Tất nhiên vẫn còn rất nhiều thứ để chỉnh sửa như màu sắc, kích thước phông chữ, khối điều hướng đẹp hơn,… Nhưng phần hướng dẫn này chỉ nói về cấu trúc div. Nếu bạn muốn xem các tài liệu hướng dẫn liên quan khác, bạn luôn có thể hỏi. Tôi sẽ xem nếu tôi có thể tìm thấy thời gian.