Khi nào nên sử dụng phần tử Nút
Hỗ trợ trình duyệt cho các tính năng CSS3 và các tính năng liên quan sử dụng tích cực Trong thiết kế web, độ dốc, bóng và làm tròn đã dẫn đến việc làm mờ ranh giới rõ ràng giữa các thành phần giao diện tích hợp và các thành phần “vẽ”. Trên thực tế, người dùng không nên quan tâm đến những gì trước mặt mình, một liên kết hay một nút, ngay cả khi chúng trông giống hệt nhau, bởi vì cả hai đều có thể nhấp vào được. Thực tế, sử dụng không đúng cách Việc thay đổi một yếu tố này thay vì yếu tố khác có thể dẫn đến vi phạm sự hiểu biết về logic của trang web. Nói cách khác, nó sẽ trở nên bất tiện và khó chịu cho người truy cập trang web khi sử dụng nó.
Hãy tạo một liên kết và một nút, thiết kế chúng theo cùng một cách và xem chúng khác nhau như thế nào ngoài thiết kế. Ở ví dụ 1 mình đã chèn tag vào code và áp dụng lớp phong cách thiết kế cho chúng, đồng thời cố gắng loại bỏ sự khác biệt để hai yếu tố này trông giống nhau, giống như anh em sinh đôi.
Ví dụ 1. Thiết kế các phần tử
HTML5 CSS3 IE Cr Op Sa Fx
Liên kết và nút .design ( display: inline-block; /* Phần tử khối nội tuyến */ đệm: 5px 20px; /* Thêm trường */ text-trang trí: none; /* Xóa gạch chân khỏi liên kết */ con trỏ: con trỏ; / * Con trỏ tay */ nền: #deefff; /* Nền cho các trình duyệt không hỗ trợ độ dốc */ /* Độ dốc */ nền: -moz-Tuyến-gradient(top, #deefff 0%, #98bede 100%); nền: -webkit-gradient(tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0%,#deefff), dừng màu (100%,#98bede)); nền: -webkit-tuyến tính-gradient(trên cùng, # deefff 0%,#98bede 100%); nền: -o-Linear-gradient(top, #deefff 0%,#98bede 100%); nền: -ms-Linear-gradient(top, #deefff 0%,#98bede 100%); nền: gradient tuyến tính(top, #deefff 0%,#98bede 100%); bán kính đường viền: 10px; /* Làm tròn các góc */ đường viền: 1px liền khối #008; /* Thêm đường viền màu xanh * /font : 12px/1 Arial, sans-serif; /* Serif font */ color: #2c539e; /* Màu văn bản và liên kết */ )
Đây là giao diện của trình duyệt Chrome (Hình 1).
Thoạt nhìn không có sự khác biệt. Cả hai phần tử đều giống nhau; khi bạn di chuột qua chúng, nó sẽ biến thành một “bàn tay”. Bạn có thể nhấp vào và chờ âm báo trả lời. Đây là nơi những điều nhỏ nhặt bắt đầu, nơi ma quỷ nằm. Tôi hệ thống hóa sự khác biệt trong những điều nhỏ nhặt.
- trong dòng trạng thái, trình duyệt hiển thị địa chỉ của liên kết mà nó dẫn tới;
- liên kết có thể được mở trong một cửa sổ hoặc tab mới bằng nút chuột giữa;
- liên kết có thể được lưu thông qua menu ngữ cảnh của trình duyệt.
- Khi nút được nhấp vào, nó sẽ chuyển đến trang được chỉ định bên trong thuộc tính hành động của thẻ. Tất nhiên, điều này hiệu quả nếu chúng ta có một nút được nhúng trong biểu mẫu. Trong ví dụ trên, bạn thậm chí có thể nhấp vào nút, nhưng nó sẽ không dẫn đến điều gì cả;
- Bạn có thể đính kèm một hàm JavaScript vào nút, điều này sẽ làm được điều gì đó kỳ diệu mà một liên kết không thể làm được.
Hóa ra kết quả của việc nhấp vào nút là không thể đoán trước được, không giống như một liên kết. Ở đây chúng tôi biết chắc chắn rằng một trang mới sẽ mở ra. Trong trường hợp có một nút, một trang mới có thể mở ra, một tập lệnh có thể được thực thi hoặc sẽ không có gì xảy ra cả. Ngoài ra còn có sự nhầm lẫn giữa nút và liên kết. Nút siêu phong cách của chúng tôi trông không giống chính nó và để cho thấy rằng nó có thể được nhấp vào, chúng tôi thêm thuộc tính con trỏ vào các kiểu bằng con trỏ giá trị. Nhưng điều này dẫn đến thực tế là nút này hiện được coi là một liên kết và một số người dùng cố gắng mở nút như vậy trong một tab mới và điều này tất nhiên là không thể.
Có thể làm gì để loại bỏ mâu thuẫn này. Có một số lựa chọn.
Văn bản chấm được hiển thị trong Hình. 2. Để rõ ràng, tôi tăng kích thước phông chữ lên một chút.
Cơm. 2. Nút có dòng chữ gạch chân có dấu chấm
Một lần nữa, nếu nhấp vào nút sẽ mở ra một trang khác thì không cần thiết phải có dòng chấm vì nó sẽ khiến người dùng nhầm lẫn. Vì vậy, phương pháp 2 chỉ phù hợp với các tập lệnh thực hiện một số công việc trong cùng một trang.
- Hướng dẫn
Đây không phải là hướng dẫn toàn diện về các nút hoặc một ví dụ về thiết kế đáng kinh ngạc mà là một nỗ lực để chỉ ra rằng có sự khác biệt giữa các liên kết và nút.
Bài viết này dành cho ai?
Trước hết, đối với một nhà thiết kế thực hiện bố cục trang web nhưng không hoàn thiện các chi tiết đặc trưng cho web. Một nỗ lực đặc biệt nhằm giải thích rằng trang web nằm ngoài ranh giới của in phẳng.
Thứ hai, đối với người thiết kế bố cục đã nhận được một bố cục không có trạng thái, để có nơi nào đó gửi cho người thiết kế.
Thứ ba, thay vì một tràng đả kích khác về sự khác biệt giữa các nút/liên kết và sự cần thiết của thiết kế trạng thái, hãy chỉ đưa ra một liên kết.
Liên kếtGiới thiệuLiên kết nút nào
Bình thường, di chuột, nhấp chuột, tắt tương ứng.button - trạng thái nút bình thường ( nền: none; phác thảo: không; viền: không; chuyển đổi văn bản: chữ hoa; ) nút: di chuột, nút: tiêu điểm - trên nút di chuột: di chuột, nút: tiêu điểm ( color: hsla(108, 12%, 0%, 1); box-shadow: -1px 1px 2px hsla(108, 62%, 42%, 1); màu nền: hsla(108, 62%, 92 %, 1) ) nút:hoạt động - tại thời điểm nhấp vào nút:hoạt động ( color: hsla(108, 42%, 32%, 1); box-shadow: -2px 4px 8px hsla(64, 64%, 42% , 1 ); màu nền: hsla(64, 64%, 92%, 1); ) nút: vô hiệu hóa - nút bị vô hiệu hóa: bị vô hiệu hóa ( color: hsla(0, 0%, 64%, 1); nền: không có; box-shadow: none; opacity: 1; ) Một ví dụ phức tạp hơn
Hiển thị CSS
nút ( lề: .8rem; cỡ chữ: 1.42rem; phần đệm: 1rem; nền: hsla(180, 90%, 64%, 1); màu: hsla(180, 90%, 12%, 1); văn bản- bóng: 1px 1px 1px hsla(180, 90%, 32%, 1); bóng hộp: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, 42) %, 11%, 1), 1px 5px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), chèn 0 0 1px 0 hsla(180 , 90%, 90%, 1); đường viền: 1px hsla(180, 92%, 56%, 1) liền khối; màu đường viền trên cùng: hsla(180, 92%, 64%, 1); bán kính đường viền: 5px; đường viền: không có; vị trí: tương đối; chuyển tiếp: tất cả .22s dễ dàng; ) nút: di chuột ( nền: hsla(420, 90%, 42%, 1); màu: hsla(420, 90%, 12% , 1); bóng văn bản: 1px 1px 1px hsla(420, 90%, 32%, 1); đường viền: 1px hsla(420, 92%, 56%, 1) liền khối; màu viền trên cùng: hsla(420 , 90%, 64%, 1); bóng hộp: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 1px 5px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), chèn 0 0 1px 0 hsla(420, 90%, 90%, 1 ); ) nút: tiêu điểm ( nền: hsla(108, 90%, 42%, 1); màu: hsla(108, 90%, 12%, 1); bóng văn bản: 1px 1px 1px hsla(108, 90%, 32%, 1); đường viền: 1px hsla(108, 92%, 56%, 1) liền khối; màu viền trên cùng: hsla(108, 90%, 64%, 1); bóng hộp: -4px 4px 0 0 hsla(108, 90%, 22%, .87), -3px 4px 3px hsla(108, 42%, 11%, 1), 1px 5px 4px hsla(108, 42%, 11%, 1), -4px 1px 0 0 hsla(108, 90%, 32%, 1), chèn 0 0 1px 0 hsla(108, 90%, 90%, 1); ) nút: hoạt động ( nền: hsla(420, 90%, 42%, 1); màu: hsla(420, 90%, 12%, 1); bóng văn bản: 1px 1px 1px hsla(420, 90%, 32 %, 1); biến đổi: dịch (-4px, 4px); viền: 1px hsla(420, 92%, 22%, 1) rắn; viền-top-color: hsla(420, 92%, 56%, 1) ; bóng hộp: 0 0 0 0 hsla(420, 90%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11) %, 1), 0 0 0 0 hsla(420, 90%, 32%, 1), chèn 1px 1px 4px 0 hsla(420, 90%, 22%, 1); ) nút: bị tắt ( nền: hsla(420) , 0%, 64%, 1); màu: hsla(420, 0%, 12%, 1); bóng văn bản: 1px 1px 1px hsla(420, 0%, 32%, 1); biến đổi: dịch(- 4px, 4px); đường viền: 1px hsla(420, 0%, 22%, 1) Solid; đường viền màu trên cùng: hsla(420, 0%, 56%, 1); bóng hộp: 0 0 0 0 hsla (420, 0%, 22%, 0,87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla (420, 0%, 32%, 1), chèn 1px 1px 4px 0 hsla(420, 0%, 22%, 1); ) nút:disabled.in_ajax ( nền: hsla(108, 22%, 64%, 1) ); màu: hsla(108, 22%, 12%, 1); bóng văn bản: 1px 1px 1px hsla(108, 22%, 32%, 1); biến đổi: dịch(-4px, 4px); đường viền: 1px hsla(108, 22%, 22%, 1) liền khối; màu viền trên cùng: hsla(108, 22%, 56%, 1); bóng hộp: 0 0 0 0 hsla(108, 22%, 22%, . 87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1 ), chèn 1px 1px 4px 0 hsla(420, 0%, 22%, 1); )
Đối với một nhà thiết kế, bạn có thể không biết các ceeses, nhưng bạn phải vẽ các trạng thái!Ngoài bố cục có trạng thái thông thường là liên kết hoặc nút, người thiết kế phải đính kèm nhiều trạng thái khác nhau để không gây khó khăn cho người thiết kế bố cục.
Ví dụ như thế này:
Cảm ơn
Cảm ơn bạn đã đọc. Mọi thứ được viết ở đây không phải là sự thật 100%.
Kho
Liên kết đến kho lưu trữ cho bài viết này. Nếu bạn muốn thêm hoặc sửa, vui lòng gửi Yêu cầu kéo
Chỉ những người dùng đã đăng ký mới có thể tham gia khảo sát. , Vui lòng.
Có hai cách tiếp cận để tạo nút trên trang web dưới dạng liên kết. Chúng ta hãy xem xét từng chi tiết.
1. Nút ở dạng hình ảnhĐây là cách tiếp cận đơn giản nhất để tạo nút làm liên kết trên trang web. Để làm điều này, bạn chỉ cần tìm một hình ảnh phù hợp cho nút. Ví dụ: hình ảnh có nút của bạn được gọi là nút.jpg. Sau đó, để tạo liên kết, mã phải như sau:
...Đây là những gì nó biến thành trên trang của trang web:
Đây là tùy chọn cơ bản nhất. Tôi khuyên bạn nên đọc về thẻ và nhãn để tùy chỉnh nút chính xác theo yêu cầu của bạn.
Nhân tiện, có một trang web đặc biệt để tạo hình ảnh cho các nút: http://dabuttonfactory.com/. Tại đây, bạn có thể tạo một nút miễn phí theo sở thích của mình (đặt kiểu, chọn hình ảnh, viết văn bản phù hợp, v.v.).
2. Nút có sử dụng HTML nhãnTùy chọn này cũng là một trong những phương pháp tạo nút làm liên kết. Tôi sẽ đưa bạn ví dụ cơ bản nút được tạo bằng thẻ và:
... ...Đây là những gì nó sẽ trông giống như trên trang:
Thay vì URL1 và URL2, bạn cần viết địa chỉ của các trang bạn cần đến. Nếu bạn muốn liên kết mở trong tab mới (tương tự như thuộc tính target="_blank" của thẻ a), thì thay vì onclick="javascript:window.location="..."" bạn cần viết onclick=" javascript:window.open ="..."" (thay thế vị trí bằng mở).
Tôi gần như chắc chắn rằng bạn sẽ muốn thiết kế nút này theo cách khác (để phù hợp với thiết kế trang web của bạn). Để làm điều này, hãy giới thiệu lớp btn:
.btn ( //Nhiệm vụ phong cách chung cho chiều cao nút: 30px; màu viền :#c2e254 #9bb838 #9bb838 #c2e254 ; kiểu viền :rắn ; chiều rộng đường viền: 1px; nền :#c2e254 ; con trỏ:con trỏ; ) .btn:hover ( // Kiểu nút khi con trỏ di chuột qua nó border-color :#FFCC66 #FFFF99 #FFFF99 #FFCC66 ; border-style :solid ; border-width :1px ; Background :#FFFF99 ; ) .btn: tiêu điểm ( // Kiểu nút khi ở nền tiêu điểm :#ddd ; border-color :#ddd #333 #333 #ddd ; border-style :solid ; border-width :1px ; ) .btn:active ( // Kiểu nút khi đã nhấp vào nền :#ff0000 ; màu viền :#ddd #333 #333 #ddd ; kiểu đường viền :solid ; chiều rộng đường viền :1px ; )Sau đó, nút sẽ trông như thế này trên trang.
Bản thân nút này không thể tạo thành một liên kết; HTML cấm kết hợp các phần tử (cũng như ) và . Vì vậy, bạn không thể lồng một nút vào một liên kết hoặc một liên kết vào một nút. Có ba cách để đảm bảo rằng khi bạn nhấp vào nút, nút đó sẽ mở ra một trang web.
Sử dụng HTMLĐặt nút bên trong phần tử và đối với biểu mẫu, chúng tôi chỉ định thuộc tính hành động với địa chỉ trang web (ví dụ 1). Ngoài ra bạn có thể thêm thuộc tính mục tiêu với giá trị _blank thì trang web sẽ mở trong tab trình duyệt mới.
Ví dụ 1. thuộc tính hành động
Nút Theo dõi liên kết
Trong ví dụ này, việc nhấp vào nút sẽ mở trang web new.html trong tab mới.
Một hình thức không thể được đặt bên trong một hình thức khác. Trước khi thêm nút, hãy đảm bảo bạn chỉ có một biểu mẫu.
Sử dụng CSSVì nút không thể tạo thành một liên kết nên chúng tôi loại bỏ nó hoàn toàn và tạo kiểu cho liên kết sao cho nó trông giống như một nút. Ví dụ 2 hiển thị lớp btn khi thêm nó vào một phần tử liên kết thay đổi thiết kế của nó.
Nút .btn ( display: inline-block; /* Phần tử khối nội tuyến */ nền: #8C959D; /* Màu nền xám */ màu: #fff; /* Màu văn bản trắng */ phần đệm: 1rem 1,5rem; /* Lề xung quanh văn bản */ text-trang trí: none; /* Xóa phần gạch chân */ border-radius: 3px; /* Làm tròn các góc */ ) Theo liên kết
Kết quả ví dụ này thể hiện trong hình. 1.
Sử dụng JavaScriptBạn có thể sử dụng sự kiện onclick để điều hướng đến một trang web được chỉ định bằng cách thêm nó vào tệp . Bên trong onclick, chúng tôi viết document.location và dưới dạng giá trị là địa chỉ của trang web mong muốn (ví dụ 3). Hãy chú ý đến sự kết hợp của dấu ngoặc kép; địa chỉ trang web được đặt trong dấu ngoặc đơn.
