Video: [Học CSS - 15] Trang trí danh sách với list-style 2025
Có một số cân nhắc cho ứng dụng CSS3 này từ góc độ phong cách. Tuy nhiên, nhu cầu cấp bách nhất là cung cấp một phương tiện để hiển thị đồ họa theo cách mà người dùng mong đợi, bất chấp cách định nghĩa các thẻ. Thông thường, các thành phần này sẽ xuất hiện một trong các thành phần khác. Bạn cần phải tạo một số CSS để có được sự xuất hiện yêu cầu.
Dưới đây là CSS cho ví dụ này:
h1 {text-align: center;} #Categories {width: 220px;}. Lựa chọn. ui-selected {background: màu xanh; màu trắng;}. Lựa chọn {margin: 0; đệm: 0; chiều rộng: 150px; list-style-type: none;} #DrawingContainer {width: 533px; chiều cao: 400px; biên giới: rắn; vị trí: tuyệt đối; trái: 250px; trên cùng: 80px;} # Đang vẽ {chiều rộng: 523px; chiều cao: 390px; margin: 5px;}
Lưu ý rằng chiều rộng của Categories là như vậy mà DrawingContainer có thể xuất hiện ở bên phải của nó. Các Lựa chọn được thiết lập để phù hợp với Thể loại. Khi thiết lập chiều rộng của Lựa chọn, bạn phải xác định phần thụt lề mà jQuery UI tự động cung cấp như là một phần của công cụ Accordion.
Phần quan trọng nhất của thiết lập DrawingContainer là cài đặt trái, phải được cấu hình để chứa tiện ích Accordion ở bên trái của nó. Kích thước của Vẽ là như vậy mà ứng dụng có thể duy trì tỷ lệ khía cạnh của hình ảnh nó sẽ hiển thị.
Với một số công việc bổ sung, bạn có thể cho phép hình ảnh có nhiều kích cỡ để vừa với một cách dễ dàng trong không gian - hình ảnh ví dụ có cùng kích thước.
