Các phần tử html chồng chéo
|
John Imbong là một nhà thiết kế tự do ăn HTML vào bữa sáng với một miếng thịt xông khói (mmmm…thịt xông khói). Anh ấy cũng là CTO cho Gourmee. com và là một trong những … Thông tin thêm về John ↬ Show
Bản tin emailEmail (đập vỡ) của bạn
Mẹo hàng tuần về giao diện người dùng & UX.
Kể từ khi CSS2 được đề xuất vào năm 1998, việc sử dụng các bảng đã dần dần mờ nhạt và đi vào sử sách. Do đó, bố cục CSS kể từ đó đồng nghĩa với sự thanh lịch trong mã hóa Trong số tất cả các khái niệm CSS mà các nhà thiết kế đã từng sử dụng, có lẽ cần phải trao giải thưởng cho việc sử dụng Lề âm vì đây là phương pháp định vị ít được nói đến nhất. Nó giống như một điều cấm kỵ trên mạng—mọi người đều làm nhưng không ai muốn nói về nó Bạn cũng có thể muốn xem các bài viết trên Tạp chí Smashing sau đây
1. Thiết lập kỷ lục thẳngTất cả chúng ta đều sử dụng lợi nhuận trong CSS của mình, nhưng khi nói đến lợi nhuận âm, mối quan hệ của chúng ta bằng cách nào đó sẽ trở nên tồi tệ hơn. Việc sử dụng lợi nhuận âm trong thiết kế web bị chia rẽ đến mức trong khi một số người trong chúng ta hoàn toàn thích nó, thì cũng có những người chỉ đơn giản nghĩ rằng đó là công việc của quỷ dữ Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓ Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác Chuyển đến hội thảo ↬ Lợi nhuận âm trông như thế này Biên độ âm thường được áp dụng với liều lượng nhỏ nhưng như bạn sẽ thấy sau này, nó có khả năng nhiều hơn thế. Một vài điều cần lưu ý về lợi nhuận âm là
2. Làm việc với lợi nhuận âmLợi nhuận âm rất mạnh khi được sử dụng đúng cách. Có 2 loại kịch bản trong đó tỷ suất lợi nhuận âm chiếm vị trí trung tâm Lề âm trên các phần tử tĩnhPhần tử tĩnh là phần tử không áp dụng float. Hình ảnh bên dưới minh họa cách các phần tử tĩnh phản ứng với lề âm
Lề âm trên các phần tử nổiHãy coi đây là đánh dấu thực tế của chúng tôi HTML
3. Kỹ thuật hiệu quảVì bây giờ chúng ta biết rằng việc áp dụng lề âm là mã CSS2 hợp lệ, nên việc sử dụng nó cung cấp một số kỹ thuật CSS rất thú vị Làm đĩa đơnthành một danh sách 3 cộtNếu bạn có một danh sách các mục quá dài để hiển thị theo chiều dọc, tại sao không chia chúng thành các cột? . Thật tuyệt vời khi nó cho phép bạn dễ dàng chia danh sách bên dưới thành 3 cột riêng biệt, như vậy HTML CSS Bằng cách thêm Chồng chéo để nhấn mạnh thêmCác yếu tố chồng chéo về mục đích cũng là một ẩn dụ thiết kế tốt. Nó thêm điểm nhấn cho các yếu tố cụ thể vì hiệu ứng chồng chéo tạo ra ảo giác về chiều sâu. Một ví dụ điển hình là phần bình luận của Phlashers. com, sử dụng kỹ thuật chồng chéo để thu hút sự chú ý đến số lượng bình luận mà một bài đăng có. Kết hợp điều này với tài sản Đập vỡ hiệu ứng văn bản 3DĐây là một thủ thuật gọn gàng. Tạo văn bản giống như Safari, hơi vát bằng cách tạo 2 phiên bản văn bản của bạn với 2 màu khác nhau. Sau đó, sử dụng các lề âm để chồng lên nhau với sự khác biệt khoảng 1 hoặc 2 pixel và bạn đã có văn bản vát thân thiện với rô-bốt có thể lựa chọn. Không cần jpeg hoặc gifs khổng lồ ngốn băng thông như lợn béo Bố cục 2 cột đơn giảnLề âm cũng là một cách tuyệt vời để tạo bố cục lỏng 2 cột đơn giản trong đó thanh bên có chiều rộng đặt trước và nội dung có chiều rộng lỏng là HTML CSS Và thế là bạn đã có một bố cục 2 cột ghi thời gian đơn giản. Nó cũng hoạt động hoàn hảo trong IE6. Bây giờ, để ngăn Khi được sử dụng đúng cách, lề âm cũng có thể cung cấp cái được gọi là Cấu trúc tài liệu linh hoạt, hoàn toàn có tác dụng đối với các bảng. Cấu trúc tài liệu linh hoạt là một kỹ thuật tiếp cận và SEO cho phép bạn sắp xếp đánh dấu của mình theo hầu hết mọi thứ tự tùy thuộc vào ý định của bạn. Tom Wright đã viết một bài báo thú vị thảo luận về các ứng dụng có thể có của lề âm trong bố cục nhiều cột Di chuyển các yếu tố vào vị tríĐây là cách sử dụng phổ biến nhất (và đơn giản nhất) cho lợi nhuận âm. Nếu bạn đang chèn một div thứ 10 trong biển 9 div khác và bằng cách nào đó, nó không thẳng hàng đúng cách, hãy sử dụng lề âm để div div thứ 10 đó vào vị trí thay vì phải chỉnh sửa 9 div kia. 4. Sửa lỗiCác vấn đề về văn bản và liên kếtSử dụng lợi nhuận âm với số float đôi khi gây khó chịu cho các trình duyệt cũ hơn. Một số triệu chứng bao gồm
Dung dịch. Chỉ cần thêm Hình ảnh của tôi đã bị cắtNếu bạn không may sử dụng IE6 trong văn phòng, đôi khi nội dung sẽ đột ngột bị cắt khi chồng chéo và thả nổi. Dung dịch. Một lần nữa, chỉ cần thêm 5. Sự kết luậnLợi nhuận âm có một vị trí trong thiết kế web hiện đại vì khả năng định vị các phần tử mà không cần bất kỳ đánh dấu bổ sung nào. Với việc nhiều người dùng chuyển sang các trình duyệt cập nhật hơn (bao gồm cả IE8), tương lai có vẻ rất tươi sáng cho các trang web dựa vào kỹ thuật này |
