Đây là văn bản bên trong lớp

Bao gồm cả thuộc tính style của thẻ div và các quy tắc cho thanh cuộn của lớp:

Sử dụng một phương pháp tương tự để thêm thanh cuộn nói chung. Theo mặc định, chúng xuất hiện khi cần thiết, nhưng nếu vì bất kỳ lý do gì, nó trở nên cần thiết cho sự hiện diện liên tục của chúng, thì quy tắc kiểu tương ứng sẽ được thêm vào mã html nguồn. Tìm thẻ đóng của phần đầu tài liệu trong mã trang và phía trước nó viết các hướng dẫn kiểu sau:

Ngày nay, có một trang web của riêng bạn không phải là một điều gì đó xa xỉ, mà là một điều cần thiết. Việc tạo ra nó đòi hỏi những kỹ năng và kiến ​​thức nhất định về html. Thật dễ dàng để tạo một trang web đơn giản. Tuy nhiên, trang trí nó và tạo các yếu tố tương tác cung cấp chức năng bổ sung cho trang web sẽ rất khó đối với người mới bắt đầu. Một trong những yếu tố tương tác giúp tăng sự tiện lợi của khách truy cập trang web là cuộn giấy... Nó đặc biệt hữu ích trong các lĩnh vực của trang web, nơi cung cấp kết nối của nó với các tập lệnh (tương tác của trang web với người dùng).

Bạn sẽ cần

• Internet hoặc bất kỳ hướng dẫn html nào

Hướng dẫn

Điều quan trọng nhất đối với bất kỳ ai là sự tiện lợi. Ý tưởng sử dụng dải cuộn giấy trên trang web của bạn sẽ chỉ phù hợp nếu nó được ra lệnh không phải bởi mong muốn của bạn mà bởi nhu cầu của nó. Tạo bố cục bạn muốn đặt dải cuộn giấy... Chọn một nơi để cuộn (đây còn được gọi là sọc cuộn giấy).

Chọn một vị trí cho dải cuộn giấy trên trang mà bạn quan tâm. Nó phải được liên kết chặt chẽ với một số phần tử (ví dụ: hộp văn bản hoặc danh sách thả xuống). Bạn phải tính địa điểm này bằng pixel hoặc phần trăm. Điều này không khó thực hiện, đặc biệt nếu bố cục trang web có cấu trúc rõ ràng.

Giữa các thẻ BODY, bạn phải thêm một số mã cuộn tiêu chuẩn. Bạn có thể tìm thấy nó trong bất kỳ hướng dẫn html nào. Có hai tùy chọn - thêm đoạn mã này trực tiếp vào mã html của trang hoặc đính kèm đoạn mã đó trong biểu định kiểu css. Phương pháp thứ hai sẽ thuận tiện hơn nếu bạn không thay đổi một mà thay đổi toàn bộ trang web. Sau đó, bạn cần nhập các thông số màu của dải cuộn giấy nếu không nó sẽ có màu xám và không thú vị. Hình bên cho thấy và dán nhãn các phần tử cuộn. Các tham số phải được nhập giống như trong hình, dấu chấm phẩy.

Bây giờ bạn chắc chắn cần những cải tiến của riêng bạn. Tước cuộn giấy trông giống nhau trong tất cả các trình duyệt, hãy kiểm tra trên các trình duyệt chính - Internet Explorer, Mozilla Firefox và Opera. Nếu cô ấy thuộc một trong số họ, hãy quay lại bước đầu tiên và sửa lỗi.

Lời khuyên hữu ích

Có một cách dễ dàng để tạo thanh cuộn cho một trang web. Đặt thông số chiều cao cho trang web của bạn thành 75%, sau đó cuộn sẽ tự xuất hiện. Đúng vậy, các phối màu của nó dù sao cũng có giá trị tùy chỉnh.

Nguồn:

• Trang web dành cho các nhà phát triển web mới bắt đầu vào năm 2019

Hướng dẫn

Đưa ra quyết định đúng đắn. Dải cuộn giấy chỉ nên xuất hiện trên trang web của bạn nếu nó được quyết định bởi nhu cầu tạo thêm sự tiện lợi cho người dùng, chứ không chỉ theo mong muốn của bạn. Tạo bố cục của trang bạn sẽ lưu trữ dải cuộn giấy... Chọn một nơi thích hợp cho cô ấy.

Tạo bìa cứng cho cuộn (để họ cũng có thể gọi dải cuộn giấy) đến một phần tử trang cụ thể. Nó có thể là một hộp văn bản đại diện cho a. Tính toán "chỗ đậu xe" của dải theo tỷ lệ pixel và tỷ lệ phần trăm. Sẽ không khó chút nào nếu trang được cấu trúc rõ ràng.

Thêm mã dải tiêu chuẩn cuộn giấy giữa các thẻ nội dung. Nếu bạn không biết nội dung này là gì, hãy tải xuống bất kỳ hướng dẫn nào về bố cục html. Ở đó nó sẽ được mô tả rõ ràng, một đoạn mã như vậy. Tốt nhất cho những trường hợp như vậy là có sẵn các mẫu sẵn để bạn có thể lấy một số yếu tố riêng lẻ của mã chương trình từ đó, điều này giúp đơn giản hóa cuộc sống một cách đáng kể. Vì vậy, bạn đã tìm thấy mã. Đặt nó trực tiếp vào mã trang hoặc đính kèm nó vào bảng css, điều này dễ dàng hơn nhiều, nhưng trong trường hợp bạn thay đổi không phải một mà là tất cả các trang của trang web.

Đặt thông số màu cho sọc, nếu không nó sẽ là màu xám tiêu chuẩn, rất có thể sẽ không phù hợp với thiết kế trang web. Các thông số này được đặt theo thứ tự như đối với bất kỳ phần tử đồ họa nào khác của trang. Thử nghiệm trên nhiều trình duyệt như Mozile, Opera và Explorer. Nếu bất kỳ ai trong số họ có nó, hãy sửa các lỗi trong mã chương trình.

Đặt tham số chiều cao trang web thành 75%, sau đó mã chương trình cho cuộn sẽ tự động được thêm vào. Nhưng bạn vẫn cần thay đổi dải cuộn giấy, và cụ thể - các thông số đồ họa của nó. Điều này được mô tả trong các đoạn trước.

Trong bài viết này, chúng tôi sẽ phân tích chi tiết thuộc tính tràn với tất cả các giá trị của nó, điều này cũng cho phép bạn thêm hoặc xóa thanh cuộn ngang / dọc. Nói cách khác, cách tạo thanh cuộn.

Overflow trong CSS chịu trách nhiệm về việc hiển thị thông tin trong một khối sẽ trông như thế nào nếu nội dung vượt quá chiều cao hoặc chiều rộng của khối này. Thuộc tính này chỉ áp dụng cho các phần tử khối (display: block; hoặc những phần tử ban đầu dựa trên khối - div, v.v.).

Các giá trị có thể có mà thuộc tính này nhận (hiển thị theo mặc định):

• Hiển thị - Hiển thị toàn bộ nội dung của phần tử, thậm chí vượt quá chiều cao và chiều rộng được chỉ định.
• Ẩn - Chỉ khu vực bên trong phần tử được hiển thị, phần còn lại sẽ bị ẩn.
• Cuộn - Các thanh cuộn luôn được thêm vào.
• Tự động - Các thanh cuộn chỉ được thêm vào khi cần thiết.
• Inherit - Kế thừa giá trị từ cha mẹ.

Thông thường thuộc tính này được sử dụng để xóa hoặc thêm thanh cuộn vào một số phần tử. Vì vậy, chẳng hạn, hãy làm với khung để không nhồi nhét chúng vào kích thước đầy đủ. Hoặc để chèn một số văn bản lớn để nó không chiếm nửa trang, nhưng nằm thoải mái trong một khối đặc biệt, và ở đó nó có thể được cuộn và đọc. Phần lớn, tài sản giải quyết vấn đề hiển thị thông tin thoải mái.

Trong bản demo, bạn có thể quan sát cách từng giá trị thuộc tính thực sự hoạt động:

Mã HTML

body (margin: 0 0 0 0; padding: 0 0 60px 0; font-size: 16px;) h2 (color: # CC0033;) div (width: 200px; / * fixed width * / height: 300px; / * fixed height * / border: 1px solid # 555; padding: 4px; margin: 4px; float: left;) .VosystemDiv (tràn: hiển thị;) .HiddenDiv (tràn: ẩn;) .ScrollDiv (tràn: cuộn;) .AutoDiv ( tràn: auto;)

Điều đáng chú ý là trong trường hợp cụ thể này, các khối có chiều cao và chiều rộng cố định cho trước. Điều này quan trọng, ví dụ, hãy xem xét tùy chọn khi chiều cao khối được đặt thành tự động:

Chúng ta có thể thấy rằng văn bản được hiển thị chính xác bên trong khối trong mọi trường hợp, ngoại trừ một chút bất tiện trong trường hợp cuộn, nơi các thanh cuộn không hoạt động xuất hiện.

Nhưng trong trường hợp này có một mối nguy hiểm nhỏ, mà nhiều người không hiểu tại sao nó lại phát sinh và làm thế nào để khắc phục nó. Vấn đề là nếu một khối có tràn: hiển thị; nghĩa là giá trị mặc định và nội dung của nó có các phần tử với bất kỳ giá trị float nào, ngoại trừ không có giá trị nào, thì tất cả điều này sẽ được hiển thị không chính xác. Để hiểu tình huống này là gì, hãy xem xét một ví dụ:

Có một khối khác trong khối VisibleDiv.

Không có gì trong khối VisibleDiv

body (margin: 0 0 0 0; padding: 0 0 60px 0; font-size: 16px;) h2 (color: # CC0033;) p (float: left;) div (width: 500px; height: auto; border: 1px solid # 555; padding: 4px; margin: 4px;) .VosystemDiv (tràn: hiển thị; background: rgba (0,255,0,0.1);) .ignor (background: rgba (0,255,0,0.6); color: # FFFFFF; font-weight: bold;)

Trong trường hợp đầu tiên, bạn có thể thấy rằng nội dung có thuộc tính float rời khỏi khối và không được nó tính đến khi xác định chiều cao khối, trong trường hợp thứ hai, bên dưới khối có tràn: hiển thị; một khối khác được đặt đặc biệt và tô màu khác. Đây không phải là những ví dụ duy nhất về cách các khối như vậy có thể hoạt động trên trang (với tràn: hiển thị; và chiều cao: tự động;). Điều này có thể được khắc phục bằng cách thay thế giá trị hiển thị bằng ẩn, cần nhớ rằng thuộc tính này chỉ nên được chỉ định cho các khối có chiều cao: auto; nếu có một chiều cao cố định, thì rất có thể nội dung sẽ bị ẩn nếu nó lớn hơn chiều cao được chỉ định.

Đây là phiên bản sửa đổi sẽ trông như thế nào:

Ngoài ra, bạn sẽ không gặp vấn đề như vậy nếu khối có tràn: hiển thị; và chiều cao: auto; cũng đặt một số giá trị cho thuộc tính float. Nói chung, trong nhiều trường hợp, việc hiển thị các mục phụ thuộc vào một tập hợp các thuộc tính chứ không phụ thuộc vào các thuộc tính riêng lẻ.

Bạn có thể sử dụng tràn-y: cuộn để cuộn theo chiều dọc.