Cách tạo chuỗi tìm kiếm Yandex trong html. Khôi phục trường tìm kiếm trong menu bắt đầu
Xin chào tất cả độc giả và người đăng ký của trang web. Hôm nay mình sẽ nói về cách trang điểm HTML sành điệu mẫu tìm kiếm cho trang web.
Trên hầu hết các trang web và blog có một lượng lớn Những hình thức như vậy được sử dụng cho nhiều loại thông tin. Chúng cho phép khách truy cập tìm thấy bài viết mong muốn bằng cách sử dụng từ khóa, tôi nghĩ mọi người đều đã xem chúng.
Từ quan điểm của trình duyệt, đây là HTML đơn giản biểu mẫu, có hai thành phần: trường văn bản và nút gửi yêu cầu. Đôi khi có thể không có nút, sau đó biểu mẫu sẽ được gửi bằng cách nhấn phím enter.
Ví dụ: tôi lấy một trong những tác phẩm từ premiumpixels.com. Đây là một liên kết đến bài viết chính nó. Cái này miễn phí tập tin psd với thiết kế gồm sáu loại hình dạng, nó trông như trong hình bên dưới. Bạn có thể tải xuống PSD từ trang web đó vì nó được phân phối miễn phí.
Chúng ta sẽ hạn chế việc tạo ra ánh sáng và phiên bản tối, vì cái thứ ba là có màu xanh rất giống với ánh sáng.
Những gì chúng tôi nhận được cuối cùng, xem bên dưới:
Vì vậy, như tôi đã nói, mã HTML là một dạng có hai phần tử đầu vào. Để dễ thiết kế, tôi gói từng cái trong khối div.
Đối với tất cả các loại thiết kế, mã này sẽ giống nhau.
Những người đã từng làm việc với Drupal 7 có thể thấy rằng cấu trúc này rất giống với biểu mẫu tìm kiếm tiêu chuẩn trong Drupal 7. Đúng vậy. Nếu bạn nhúng thiết kế này vào trang web của mình bằng CMS này, bạn sẽ không cần thay đổi bất kỳ điều gì trong đầu ra HTML (ngoại trừ phần giữ chỗ, xem bên dưới).
Đối với trường đầu vào, chúng tôi đặt thuộc tính giữ chỗ. Giá trị của thuộc tính này được hiển thị bên trong trường đầu vào và biến mất khi trường nhận được tiêu điểm. Một tài sản rất thuận tiện.
Mặc định trong các trình duyệt khác nhau toàn bộ biểu mẫu tìm kiếm này sẽ trông khác và không phong cách lắm ở mọi nơi. Ví dụ: sự xuất hiện của nó trong Opera và Safari được hiển thị bên dưới:
Vì vậy, chúng ta không thể làm gì nếu không có dấu hiệu phong cách. Hãy cùng điểm qua các kiểu dáng cho phiên bản đèn tròn. TRONG tập tin CSS bạn cần chèn đoạn mã sau:
#search-block-form( width:248px; Height:28px; border-radius:15px; border:#c9c9c9 Solid 1px; Background:url(images/searchBg.png) trên bên trái lặp lại-x; ) .focus-active( border-color:#aaa !important; nền:#fff !important; ) #search-block-form input( đệm:0; lề:0; display:block; border:none; phác thảo:none ; nền: không có; chiều rộng: 100%; chiều cao: 100%; ) #search-block-form .form-actions( width:28px; chiều cao:28px; float:left; nền:url(images/searchIcon.png) 5px 2px không lặp lại; ) #search-block-form .form-actions input:hover( con trỏ:con trỏ; ) #search-block-form .form-actions input( tràn:hidden; text-indent:-9999px; ) # search-block-form .form-item( width:210px; đệm:0px 5px; float:right; Height:28px; ) #search-block-form .form-item input( font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; chiều cao: tự động !quan trọng; đệm: 6px 0;
Chúng ta hãy xem xét nó theo thứ tự và chi tiết hơn. Đầu tiên, chúng tôi tự đặt biểu mẫu với mã định danh #search-block-form về kích thước, màu đường viền và làm tròn góc.
#search-block-form( width:248px; chiều cao:28px; bán kính đường viền:15px; đường viền:#c9c9c9 rắn 1px; nền:url(hình ảnh/searchBg.png) lặp lại trên cùng bên trái-x; )
Tất cả các phần tử bên trong sẽ không có màu nền hoặc đường viền, vì vậy chúng tôi sẽ ghi đè tất cả các thuộc tính mặc định trên cả hai thẻ đầu vào.
#đầu vào dạng khối tìm kiếm( đệm:0; lề:0; hiển thị:khối; viền:none; phác thảo:none; nền:none; chiều rộng:100%; chiều cao:100%; )
Nếu có thể, chúng tôi sẽ thiết lập thiết kế của các div trong đó các phần tử được bao bọc chứ không phải của chính div đó.
Khối hành động biểu mẫu sẽ ở bên trái và khối mục biểu mẫu sẽ ở bên phải. Nút gửi biểu mẫu có văn bản, nhưng chúng tôi không cần nó, vì vậy chúng tôi xóa nó bằng phương pháp nổi tiếng sau.
#search-block-form .form-actions input( tràn:hidden; text-indent:-9999px; )
#search-block-form .form-item input( font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#222; Height:auto !important; đệm:6px 0; )
Bây giờ hãy xem mã JavaScript.
/* Copy đoạn code bên dưới vào file js của bạn. (JavaScript). */ $(document).ready(function(e) ( $("input").placeholder(); $("#search-block-form .form-item input").focus(function())( $ ("#search-block-form").addClass("focus-active"); .blur(function())( $("#search-block-form").removeClass("focus-active"); ) ); )); /* Kết thúc */
Có vẻ như tại sao lại cần JavaScript ở đây? Nó thực sự bổ sung thêm một số thứ hữu ích về khả năng sử dụng.
Đầu tiên, thuộc tính giữ chỗ đi kèm với HTML5 và khả năng hỗ trợ của nó trong các trình duyệt cũ hơn còn nhiều điều chưa được mong đợi. Nhưng có một giải pháp đơn giản dưới dạng plugin jQuery jQuery-Placeholder , sẽ đảm bảo hỗ trợ cho thuộc tính này trong tất cả các trình duyệt (bao gồm cả IE6!).
Để thực hiện việc này, hãy kết nối chính tệp đó và kích hoạt chức năng này:
$("đầu vào").placeholder();
Nếu chúng ta đã kết nối jQuery rồi thì chúng ta có thể làm việc khác. Ví dụ: giả sử rằng khi một biểu mẫu nhận được tiêu điểm, nó sẽ thay đổi theo cách nào đó.
Vì mục đích này chúng tôi đã tạo ra lớp học đặc biệt tập trung chủ động. Khi bạn thêm lớp này vào một biểu mẫu, nó sẽ thay đổi màu nền thành màu trắng và màu đường viền trở nên đậm hơn một chút. Biểu mẫu sẽ bắt đầu phản ứng với hành động của người dùng.
Tập trung hoạt động( border-color:#aaa !important; nền:#fff !important; )
Lớp The.placeholder định dạng văn bản từ thuộc tính placeholder trong các trình duyệt cũ hơn. Lớp này chỉ có thể được sử dụng nếu chúng ta sử dụng cùng một plugin jQuery.
Trình giữ chỗ(color:#cbcbcb !important;)
Đó là tất cả. Chúng tôi đã tạo một biểu mẫu tìm kiếm dễ tích hợp vào hầu hết các trang web.
Các phiên bản khác không có nhiều khác biệt, xem source code các trang demo thì có những nhận xét cần thiết.
Đó là tất cả cho ngày hôm nay. Viết nhận xét về những gì bạn muốn đọc trong các bài đăng blog mới, đồng thời đăng ký RSS và trở thành người đầu tiên nhận được thông tin về các bản cập nhật trang web!
Yandex.Search cho trang web sử dụng tất cả các công nghệ tìm kiếm "lớn" của Yandex. Điều này bao gồm việc tính đến các dạng từ khác nhau, sửa lỗi và lỗi chính tả cũng như bố cục bàn phím không chính xác.
Việc tìm kiếm có thể tìm thấy trên trang web không chỉ các từ xuất hiện trong truy vấn của người dùng mà còn cả các từ đồng nghĩa của chúng. Ví dụ: nếu người dùng đang tìm kiếm thông tin về thế giới trò chơi của Warcraft, anh ấy không nhất thiết phải viết toàn bộ tiêu đề. Yêu cầu của anh ấy có thể giống như , hoặc thậm chí là [BoV]. Nhưng Yandex sẽ hiểu một người cần gì và sẽ cho anh ta câu trả lời đúng.
Yandex.Search cho trang web hiểu các biến thể khác nhau từ chính tả, thậm chí cả những từ sai
Thiết lập từ đồng nghĩa để tìm kiếmBạn có thể bổ sung cơ sở dữ liệu chính về các từ đồng nghĩa tìm kiếm bằng các tùy chọn của riêng bạn, dành riêng cho trang web và người dùng của bạn. Để làm được điều này, Yandex.Search đã triển khai một giao diện đơn giản và trực quan cho trang web.
Ở cột bên trái, thêm các từ mà người dùng của bạn nhập vào biểu mẫu tìm kiếm và ở cột bên phải, thêm các từ đồng nghĩa tương ứng từ các trang trên trang web của bạn.
Cài đặt linh hoạtBạn chọn giao diện tìm kiếm Yandex trên trang web của mình. Nó có thể là một yếu tố nổi bật của giao diện hoặc không quá dễ thấy nhưng là một trợ lý đáng chú ý trong việc điều hướng - tất cả phụ thuộc vào sở thích và mục tiêu của bạn.
Có nên rời đi hay không là tùy bạn thiết kế tiêu chuẩn, quen thuộc với tất cả người dùng Yandex hoặc tạo Thanh tìm kiếm và kết quả là màu sắc đặc trưng của chúng.
Và nếu các tùy chọn thiết kế tiêu chuẩn cho biểu mẫu tìm kiếm và kết quả tìm kiếm không đủ để phù hợp hoàn hảo với tìm kiếm trong thiết kế trang web của bạn, thì bạn (hoặc nhà phát triển của bạn) có thể áp dụng các kiểu CSS của riêng bạn cho các thành phần cần thiết của biểu mẫu hoặc kết quả tìm kiếm. Nhờ đó, bạn hoàn toàn có thể kiểm soát giao diện của tìm kiếm và bổ sung nó với các yếu tố bạn cần.
Nếu tài liệu được tìm thấy có chứa video hoặc hình ảnh, bản xem trước của chúng sẽ được chèn vào kết quả tìm kiếm. Bạn cũng có thể tùy chỉnh giao diện của các bản xem trước này bằng cách áp dụng các kiểu CSS của riêng bạn.
Kết quả tìm kiếm mở trên trang web của bạn hoặc trên Yandex - như thế này.
Mẹo tìm kiếmTìm kiếm trang web, giống như tìm kiếm Yandex chính, chứa các đề xuất tìm kiếm - chúng tăng tốc độ nhập truy vấn. Ngay cả trước khi khách truy cập trang web nhập toàn bộ truy vấn, anh ta có thể đi đến tùy chọn mong muốn. Nó hoạt động nhanh hơn nhiều theo cách này.
Yandex sẽ tạo một bộ đề xuất tìm kiếm dành riêng cho nhu cầu của bạn. Họ sẽ tính đến các truy vấn của người dùng và nội dung của các trang web bạn muốn tìm kiếm.
Sẽ không sao nếu người dùng mắc lỗi khi nhập truy vấn. Tìm kiếm trang web có thể sửa lỗi chính tả, lỗi ngữ pháp và bố trí bàn phím không chính xác - bao gồm tất cả cùng một lúc. Bản sửa lỗi hoạt động đối với các yêu cầu bằng tiếng Nga, tiếng Anh, tiếng Ukraina, tiếng Belarus, tiếng Thổ Nhĩ Kỳ và một số ngôn ngữ khác.
Đề xuất tìm kiếm có thể sửa lỗi và lỗi chính tả cũng như bố cục bàn phím không chính xác.
Bạn có thể chỉnh sửa đề xuất tìm kiếm do Yandex đề xuất. Ví dụ: thêm những cái mới, thay đổi thứ tự của những cái hiện có và xóa những cái không cần thiết. Công cụ này giúp dễ dàng cho người dùng biết những gì cần tìm kiếm trên trang web của bạn.
Tinh chỉnh kết quả tìm kiếmBạn có thể giúp khách truy cập tìm thấy chính xác những gì họ cần trên trang web của bạn. Ví dụ, đây có thể là một bài báo được xuất bản vào tháng 8 năm 2010 hoặc một tài liệu từ phần Đánh giá và Kiểm tra. Tìm kiếm trang web cung cấp công cụ để tinh chỉnh các truy vấn - bạn có thể chọn một phần của trang web, chỉ định khoảng thời gian cũng như định dạng hoặc ngôn ngữ của tài liệu.
Bạn cũng có cơ hội chỉ định các từ khóa mà khách truy cập có thể thêm vào yêu cầu. Ví dụ: nếu trang web của bạn có liên quan đến trò chơi thì từ khóa có thể là “trò chơi”, “đánh giá”, “mua”, v.v.
Đây là giao diện của các sàng lọc trong kết quả tìm kiếm.
Tìm kiếm chủ đềNếu bạn cần tổ chức tìm kiếm trên nhiều trang web khác nhau hoặc một nhóm trang web có cùng chủ đề, hãy sử dụng chủ đề tìm kiếm. Một chủ đề tìm kiếm có thể hợp nhất tới 100.000 trang web. Danh sách của họ có thể dễ dàng chỉnh sửa bằng các yêu cầu HTTP.
Chuẩn bị một danh sách các trang web, tạo chủ đề mới và gửi nó đi kiểm duyệt. Sau khi xác nhận chủ đề, hãy tổ chức tìm kiếm dựa trên chủ đề đó bằng dịch vụ Yandex.Search cho trang web hoặc Yandex.XML.
Tạo chủ đề: http://site.yandex.ru/themes/new/
Thống kê truy vấn tìm kiếmNếu bạn muốn biết khách truy cập trang web của bạn đang tìm kiếm điều gì, hãy truy cập phần Thống kê. Nó chứa thông tin về yêu cầu của người dùng.
Thống kê yêu cầu được cập nhật hàng ngày và bao gồm các thông tin sau:
- danh sách các truy vấn tìm kiếm;
- mỗi truy vấn này được hỏi bao nhiêu lần;
- có bao nhiêu kết quả được hiển thị cho mỗi truy vấn;
- có bao nhiêu cú nhấp chuột từ kết quả tìm kiếm.
Số liệu thống kê sẽ giúp bạn hiểu phần nào trên trang web của bạn cần cải thiện.
Giao diện thống kê nền tảng tìm kiếm.
Chúng tôi sử dụng loại tìm kiếm này mọi lúc, mọi ngày.
Trường tìm kiếm cho trang web. Ý tưởng thiết kếĐể tìm câu trả lời cho một số câu hỏi của chúng ta, chúng ta chỉ cần nhập truy vấn vào thanh địa chỉ và nhấn Enter
CTRL + F Tìm »
Internet
Bên phải trường này là số lượng yêu cầu được tìm kiếm. Bạn có thể di chuyển từ kết quả này sang kết quả khác bằng cách sử dụng mũi tên lên và xuống. Từ hiện được chọn sẽ được đánh dấu bằng màu tối. Điều này sẽ giúp bạn xác định bạn đang ở đâu trên trang web. Cũng lưu ý rằng nếu bạn không đặt dấu cách sau “internet”, trình duyệt sẽ chỉ ra từ chứa tập hợp các ký tự đã nhập. "Internet" - "Internet". Vì vậy nếu bạn cần kết hợp chuẩn xác kết quả tìm kiếm với từ được tìm kiếm, sau khi nó đặt một khoảng trắng.
Phím tắt CTRL + F
Tìm (…) trên Google
Theo cách tương tự, bạn có thể tìm thấy dữ liệu về bất kỳ hình ảnh (hình ảnh) nào trên một trang của trang web. Tương tự, bấm vào ảnh click chuột phải chuột và chọn “Tìm hình ảnh (Google)”
Alexander Zhurba
Trong trường hợp bạn phải làm việc với tài liệu lớn, việc tìm kiếm một từ hoặc cụm từ cụ thể có thể khó khăn và tốn thời gian. Phần mềm soạn thảo văn bản cho phép tìm kiếm tự động trong toàn bộ tài liệu và nhanh chóng thay thế các từ và cụm từ bằng công cụ Tìm và Thay thế. Bạn có muốn tìm hiểu cách sử dụng công cụ này? Sau đó hãy đọc kỹ bài học này đến cuối!
Tìm kiếm văn bảnVí dụ: hãy tham gia một tác phẩm nổi tiếng và sử dụng lệnh Find để tìm tên nhân vật chính trong văn bản.
Bạn có thể gọi lệnh Tìm bằng cách nhấn Ctrl+F trên bàn phím.
Để truy cập nhiều tùy chọn tìm kiếm hơn, hãy sử dụng menu thả xuống được tìm thấy trong trường tìm kiếm.
Đôi khi xảy ra lỗi lặp đi lặp lại trong toàn bộ tài liệu. Ví dụ: tên của ai đó bị sai chính tả hoặc một từ hoặc cụm từ nhất định cần được đổi thành tên khác. Bạn có thể sử dụng tính năng Tìm và Thay thế để nhanh chóng chỉnh sửa. Trong ví dụ của chúng tôi, chúng tôi sẽ thay đổi tên đầy đủ của Microsoft Corporation thành MS viết tắt.
Bạn có thể đi đến hộp thoại Tìm và Thay thế bằng cách nhấn tổ hợp phím Ctrl + H trên bàn phím.
Để chọn thêm tùy chọn Tìm và Thay thế, hãy bấm vào Thêm trong hộp thoại Tìm và Thay thế. Tại đây bạn có thể chọn các tùy chọn như Chỉ toàn bộ từ hoặc Bỏ qua dấu câu.
Xin chào. Trước khi chuyển sang chủ đề hôm nay, tôi xin chúc mừng tất cả chúng ta về kỳ nghỉ lễ vừa qua - Chiến thắng vĩ đại. Hãy nói với các ông, các cụ đã chiến đấu và cũng là những người làm việc ở hậu phương. Xin cảm ơn rất nhiều. Cảm ơn các bạn đã đứng lên, vượt qua, lập nên chiến công anh hùng, vì bầu trời quang đãng, vì hòa bình trên đất nước chúng ta. Và cúi đầu chào những người đã đưa giờ Chiến thắng đến gần hơn. Cảm ơn!!!
Bây giờ chúng ta hãy quay lại chủ đề của chúng ta. Hôm nay chúng ta sẽ nói về cách sử dụng tìm kiếm trong trình duyệt. Chúng ta hãy nhìn vào một vài tính năng của Google Trình duyệt Chrome.
Dòng tìm kiếmChúng tôi sử dụng loại tìm kiếm này mọi lúc, mọi ngày. Để tìm được câu trả lời cho một số câu hỏi của mình, chúng ta chỉ cần nhập truy vấn vào thanh địa chỉ rồi nhấn Enter
Khi chúng tôi nhập yêu cầu của mình, trình duyệt sẽ đề xuất các kết hợp có thể có với yêu cầu đó mà những người dùng Internet khác đã nhập trước đó. Chúng tôi có quyền lựa chọn: tìm kiếm chính xác theo yêu cầu của chúng tôi hoặc chọn một cụm từ khác từ danh sách trình duyệt được đề xuất.
Ví dụ cho thấy chúng ta được yêu cầu tìm kiếm trong hệ thống Google, tuy nhiên bạn có thể đổi sang hệ thống khác.
Tìm kiếm trên trang webĐôi khi chúng ta cần tìm một từ hoặc cụm từ trên một trang web. Nhưng bởi vì số lượng lớn thông tin, điều này đôi khi có thể khó thực hiện. Giả sử rằng bạn tìm ra tên bài hát của nghệ sĩ của mình, hãy truy cập nguồn nơi trình bày tất cả các sáng tác của anh ấy. Việc tìm ra con đường phù hợp trong số tất cả những con đường khác là khá khó khăn. Trong trường hợp này, một phương pháp sẽ giúp chúng tôi, bây giờ chúng tôi sẽ phân tích chi tiết.
Vì vậy, ví dụ, bạn đã mở một cổng mà trên đó, như bạn giả định, có từ bạn đang tìm kiếm, tên thành phố, thành phần, v.v. Vì tìm kiếm nhanh trên trang web, chúng tôi sử dụng phím tắt CTRL + F hoặc vào menu chính của trình duyệt và chọn “Tìm”
Sau đó ở bên phải góc trên cùng một trường để nhập từ sẽ xuất hiện trong cửa sổ trình duyệt. Khi chúng ta gõ các ký tự, trình duyệt sẽ bắt đầu tìm kiếm và đánh dấu trong văn bản thứ tự các chữ cái mà chúng ta nhập.
Ví dụ: hãy xem có bao nhiêu từ "internet" được đặt trên trang chủ trang web của chúng tôi.
Chúng tôi chỉ ra nó trong trường được chỉ định và trình duyệt đánh dấu nó màu vàng kết quả tìm kiếm.
Bên phải trường này là số lượng yêu cầu được tìm kiếm. Bạn có thể di chuyển từ kết quả này sang kết quả khác bằng cách sử dụng mũi tên lên và xuống. Từ hiện được chọn sẽ được đánh dấu bằng màu tối. Điều này sẽ giúp bạn xác định bạn đang ở đâu trên trang web.
Cũng lưu ý rằng nếu bạn không đặt dấu cách sau “internet”, trình duyệt sẽ chỉ ra từ chứa tập hợp các ký tự đã nhập. "Internet" - "Internet". Do đó, nếu bạn cần kết quả khớp chính xác với từ tìm kiếm, hãy đặt dấu cách sau từ đó.
Phím tắt CTRL + F để tìm kiếm trang tài nguyên có thể được sử dụng trong bất kỳ trình duyệt hiện đại nào. TRONG Firefox đã cho Trường này nằm ở góc dưới bên trái. Hãy cẩn thận.
Tìm kiếm nhanh nghĩa của từ, cụm từ, hình ảnhTrong khi xem xét thông tin trên một số nguồn, chúng ta có thể gặp một thuật ngữ hoặc từ mà chúng ta không hiểu rõ nghĩa của nó. Để biết thêm nhận nhanh dữ liệu về từ hoặc cụm từ này, chúng tôi chỉ cần chọn một đoạn văn bản trên trang web và sử dụng nút chuột phải để mở menu trong đó chúng tôi chọn “Tìm (...) trong Google" (cụm từ hoặc từ được chọn sẽ là được chỉ định trong dấu ngoặc nhọn). Ví dụ, trong ví dụ của chúng tôi nó trông như thế này.
Theo cách tương tự, bạn có thể tìm thấy dữ liệu về bất kỳ hình ảnh (hình ảnh) nào nằm trên một trang của trang web.
Trường tìm kiếmTương tự, nhấp chuột phải vào ảnh và chọn “Tìm hình ảnh (Google)”
Bạn có thể tìm hiểu thêm về cách tìm hình ảnh trong Yandex và Google bằng cách đọc bài viết này và tại đây.
Có lẽ đó là tất cả những gì cần làm. Hôm nay chúng ta đã xem xét khả năng tìm kiếm trong trình duyệt. Cho đến lần sau.
Cách tốt nhất để học là trở thành trợ lý của một chuyên gia. Sẽ tệ hơn một chút nếu bạn tự mình thử mà không có sự giám sát của người biết. Lý thuyết chỉ hữu ích như một giả thuyết cần được kiểm nghiệm trong thực tế.
2018-04-23
Xin chào quý khách thân mến!
Trong bài viết trước, chúng tôi đã tạo Yandex.Search và thực hiện tất cả các cài đặt cơ bản của nó. Hôm nay, bằng cách sử dụng mã nhận được, chúng tôi sẽ tạo một biểu mẫu tìm kiếm trên trang web dành cho việc nhập truy vấn.
Đồng thời, để phần bổ sung này không khác biệt với các thành phần khác của trang web, chúng tôi sẽ cố gắng đặt nó trên trang web bằng cách sử dụng các kiểu CSS, mang lại giao diện gần nhất có thể với thiết kế hiện có.
Cần lưu ý rằng việc thiết kế biểu mẫu Yandex.Search để phù hợp với thiết kế trang web không phải là một nhiệm vụ hoàn toàn đơn giản.
Khó khăn nằm ở chỗ nó chứa một tập lệnh trong JavaScript, đảm bảo sự tương tác của biểu mẫu với dịch vụ Yandex.Search. Và khi nó được thực thi, sau mỗi lần tải trang, mã HTML và CSS của biểu mẫu sẽ tự động thay đổi. Theo đó, dẫn đến sự biến dạng về diện mạo của nó.
Đó là lý do tại sao mô tả chung Tài liệu đang được xem xét hóa ra khá đồ sộ với một lượng đáng kể mã và hình ảnh minh họa giải thích. Về vấn đề này, vật liệu được chia thành hai phần.
Trong bài viết này, chúng ta sẽ xem xét phần đầu tiên, tạo biểu mẫu tìm kiếm mã HTML nguồn được lấy trực tiếp từ dịch vụ Yandex.Search. Và trong phần tiếp theo, hãy xem cách bạn có thể điều chỉnh các kiểu CSS để mang lại diện mạo của nó trạng thái ban đầu sau cô ấy thay đổi năng động liên quan đến việc thực thi tập lệnh.
Cần lưu ý rằng trên Internet rất khó tìm ra phương pháp chi tiết để điều chỉnh giao diện của biểu mẫu Yandex.Search cho phù hợp với thiết kế trang web hiện có (ít nhất là tôi không thể làm được điều này)
Tôi hy vọng rằng tài liệu được thảo luận ở đây sẽ giúp ích cho nhiều người muốn sử dụng tìm kiếm Yandex trên trang web của họ, tận dụng tối đa tất cả các lợi thế của nó, bao gồm khả năng điều chỉnh giao diện của các thành phần tìm kiếm cho phù hợp với thiết kế trang web.
Mặc dù thực tế là trong các bài viết trước, việc tạo tìm kiếm từ Yandex đã được thực hiện trực tiếp trên trang web hiện có avtobezugona.ru nằm trên Internet (việc tạo Yandex.Search chỉ có thể thực hiện được trên các tài nguyên thực tế), để rõ ràng, các hoạt động được xem xét ở đây để hình thành các phần tử của nó sẽ được thực hiện bằng cách sử dụng ví dụ về phiên bản trang web "newsite.local", được lưu trữ trên máy chủ web cục bộ.
ảnh chụp màn hình 90
- Đặt mã HTML của biểu mẫu tìm kiếm
- Sử dụng các kiểu CSS để tạo giao diện của biểu mẫu tìm kiếm
- Tệp nguồnđịa điểm
Trong trang web đang được tạo, các phần tử tìm kiếm theo bố cục thiết kế sẽ được sử dụng trong khu vực thanh bên. Do đó, chúng tôi sẽ đặt mã HTML thu được từ các tài liệu bổ sung từ bài viết trước (tệp "seach_form.html") vào vị trí thích hợp trong tệp "aside.php", nằm trong thư mục "blocks" thư mục gốc"www".
Dưới đây là mã HTML trong Trình soạn thảo sổ tay++ tệp "aside.php" với một đoạn của biểu mẫu tìm kiếm được đặt trong vùng chứa đã tạo trước đó với lớp search .
Hình 1 Đoạn mã HTML nguồn của biểu mẫu tìm kiếm
Bây giờ, dựa trên mã HTML này, bạn có thể bắt đầu gán các thuộc tính CSS nhất định để mang lại cho phần tử này giao diện phù hợp.
Như đã lưu ý trước đây, trên ở giai đoạn này Chúng tôi đang thiết kế một biểu mẫu tìm kiếm mã HTML thuần túy được nhận trực tiếp từ dịch vụ Yandex.Search.
Do đó, để có cơ hội này, tập lệnh trong tệp “aside.php” phải tạm thời bị nhận xét hoặc xóa, như hiển thị bên dưới.
Tìm kiếm
"/*(function(w,d,c)(var s=d.createElement("script"),h=d.getElementsByTagName("script"),e=d.documentElement;if((" "+e. className+" ").indexOf(" ya-page_js_yes ")===-1)(e.className+=" ya-page_js_yes";)s.type="text/javascript";s.async=true;s.charset ="utf-8";s.src=(d.location.protocol==="https:"?"https:://http:")+"//site.yandex.net/v2.0/js /all.js";h.parentNode.insertBefore(s,h);(w[c]||(w[c]=)).push(function())(Ya.Site.Form.init()) ) ))(window,document,"yandex_site_callbacks");*/"
Hình 2 Mã HTML nguồn của biểu mẫu tìm kiếm có tập lệnh nhận xét
Như bạn có thể thấy, ở dòng 14, JavaScript đã được nhận xét, cho phép chúng ta chuyển sang Kiểu CSS cho phiên bản có mã HTML nguồn.
Sử dụng các kiểu CSS để tạo giao diện của biểu mẫu tìm kiếmNhiệm vụ của chúng tôi là làm cho hình thức trông giống nhất có thể với thiết kế trang web tiêu chuẩn. Do đó, khi gán thuộc tính CSS, chúng ta sẽ tiến hành từ kiểu được gán trước đó của các phần tử tương tự hiện có.
Điều này áp dụng cho cả vùng chứa có tìm kiếm lớp và các thành phần của chính biểu mẫu - các thẻ tạo thành trường nhập và nút tìm kiếm.
TRÊN khoảnh khắc này bảng hiện có Các kiểu CSS liên quan đến biểu mẫu tìm kiếm như sau.
/*-----Form tìm kiếm-----*/
Tìm kiếm(
chiều cao: 9,25em;
hình nền
bán kính đường viền: .625em;
bóng hộp: 0 0 3,75em 0 #fff;
đường viền trên cùng: .0625em rắn #dedede;
phần đệm: 0,3125em 1,25em;
cỡ chữ: .9375em;
màu: #212a68;
chiều cao dòng: .8;
tràn: ẩn;
lề trên: .9375em;
vị trí: tương đối;
Tìm kiếm h3 (
căn chỉnh văn bản: giữa;
cỡ chữ: 1.125em;
độ dày phông chữ: đậm;
chiều cao dòng: 1,2;
đệm-top: .5em;
lề dưới: 1.125em;
Nhãn tìm kiếm (
vị trí: tương đối; đáy: .5em;
Hình 3 Mã CSS của biểu mẫu tìm kiếm
Nếu bây giờ bạn mở trang của trang web, thì ở trạng thái này, bạn có thể thấy rằng biểu mẫu Yandex.Search nằm ở vị trí dành cho nó.
Để tăng/giảm kích thước ảnh click vào ảnh
Hình 4 Đặt biểu mẫu Yandex.Tìm kiếm
Tuy nhiên, bản thân hình thức bên ngoài vẫn chưa tương ứng với thiết kế hiện có. Điều này yêu cầu gán một số thuộc tính CSS nhất định cho các thành phần mà nó chứa.
Dưới đây là các phần bổ sung mã CSS dẫn biểu mẫu Yandex.Search tới vẻ bề ngoài, tương ứng với các đặc điểm thiết kế của trang web đang được tạo (các phần bổ sung được thực hiện sẽ được đánh dấu bằng nền sáng).
/*-----Form tìm kiếm-----*/
Tìm kiếm(
chiều cao: 9,25em;
hình nền: gradient tuyến tính(lên trên cùng, #c4c4c4 0%, #e9e9e9 5%, #eaeaea 10%, #eaeaea 94%, #f7f7f7 98%, #fafafa 100%);
bán kính đường viền: .625em;
bóng hộp: 0 0 3,75em 0 #fff;
đường viền trên cùng: .0625em rắn #dedede;
phần đệm: 0,3125em 1,25em;
cỡ chữ: .9375em;
màu: #212a68;
chiều cao dòng: .8;
tràn: ẩn;
lề trên: .9375em;
vị trí: tương đối;
Tìm kiếm h3 (
căn chỉnh văn bản: giữa;
cỡ chữ: 1.125em;
độ dày phông chữ: đậm;
chiều cao dòng: 1,2;
đệm-top: .5em;
lề dưới: 1.125em;
Nhãn tìm kiếm (
vị trí: tương đối; đáy: .5em;
Đầu vào dạng Ya-site (
chiều rộng: 100%;
chiều cao: 1,875em;
cỡ chữ: 1em;
phần đệm: .25em .5em 0 .5em ;
nền: #fdfadc;
kích thước hộp: hộp viền;
bóng hộp: .1875em .1875em .3125em 0 #8b8e8d inet;
bán kính đường viền: .3125em;
đường viền trên cùng: 0 rắn #fff;
viền trái: 0 liền khối #fff;
viền-đáy: .125em rắn #fff;
đường viền bên phải: .125em rắn #fff;
màu sắc: #000066 ;
Đầu vào dạng Ya-site (
chiều cao: 1,875em;
phần đệm: 0 .375em 0 .375em;
bán kính đường viền: .3125em;
căn chỉnh văn bản: giữa;
độ dày phông chữ: đậm;
hình nền: gradient tuyến tính (lên trên cùng,#653939,#a76d6d 70%,#c39696);
bóng hộp: .125em .125em .25em 0 #422a2a;
chiều rộng đường viền: .125em;
kiểu viền: liền khối;
màu viền: #ddbebe #241616 #241616 #ddbebe;
màu sắc: #fff ;
chiều cao dòng: 1,2;
cỡ chữ: .9375em;
vị trí: tuyệt đối; đáy: 1.0625em; phải: 1.3125em;
bay lượn(
bóng hộp: không có;
màu viền: #c39696 #a76d6d #653939 #a76d6d;
Đầu vào dạng trang Ya-site: đang hoạt động (
bóng hộp: 0 0 .4375em .125em #422a2a inet;
màu viền: #777 #fff #fff #777;
Hình 5 Mã CSS của biểu mẫu tìm kiếm
Trước đây, khi thiết kế các phần tử thanh bên, chúng tôi đã xem xét chi tiết mục đích của các kiểu CSS để định hình hình thức của biểu mẫu. Do đó, chúng tôi sẽ không lặp lại ở đây mà chỉ lưu ý rằng tất cả các thuộc tính cho các phần tử của trường đầu vào (vị trí 27 41) và nút “Tìm” (vị trí 42 57) được áp dụng cho trường hiện có. mã nguồn từ Yandex.Search đến một phần tử có lớp ya-site-form.
Và để trực quan hóa trạng thái của nút, các lớp giả được gán cho các phần tử giống nhau: : di chuột (pos. 58 61) - cho trạng thái hoạt động (nằm dưới con trỏ chuột) và : hoạt động (pos. 62 65) - cho trạng thái nhấn (được giữ bởi chuột nút). Điều này được thực hiện theo cách tương tự như cách chúng tôi tạo hiệu ứng cho các nút trước đây và làm cho chúng tương tác ở giai đoạn bố cục trang web.
Bây giờ hãy kiểm tra kết quả của các hành động được thực hiện bằng cách làm mới trang của trang.
Để tăng/giảm kích thước ảnh click vào ảnh
Hình.6 Biểu mẫu Yandex.Search cách điệu
Như đã thấy sau khi tạo kiểu phần tử này tìm kiếm đã có một hình thức điển hình cho trang web này.
Bây giờ, hãy nhận xét về mã JavaScript và xem nó sẽ trông như thế nào sau khi trang được tải đầy đủ và tập lệnh được thực thi để đảm bảo tương tác với dịch vụ Yandex.Search.
Để tăng/giảm kích thước ảnh click vào ảnh
Hình.7 Biểu mẫu Yandex.Search với mã HTML được thay đổi linh hoạt
Có thể thấy ở trạng thái này kích thước và cách sắp xếp các phần tử, cỡ chữ, màu nút bị biến dạng.
Như đã lưu ý trước đó, điều này là do việc thực thi tập lệnh sẽ dẫn đến sự xuất hiện ở dạng yếu tố bổ sung với các kiểu CSS của riêng bạn. Theo đó, dẫn đến những thay đổi như vậy.
Và để khắc phục điều này, trước tiên bạn phải xác định nội dung thực của mã HTML và CSS được sửa đổi động, sau đó nhập bổ sung cần thiết vào bảng định kiểu CSS. Đây là những gì chúng ta sẽ làm trong bài viết tiếp theo.
Tệp nguồn trang webBạn có thể tải xuống các tệp nguồn của trang web với các bản cập nhật được thực hiện trong bài viết này từ các tài liệu bổ sung đính kèm:
- tập tin thư mục www
- Bảng cơ sở dữ liệu MySQL
Trong hướng dẫn này, tôi muốn chia sẻ cách bạn có thể trang trí biểu mẫu tìm kiếm của mình. Chúng tôi sẽ không làm bất cứ điều gì quá phức tạp. Thay vào đó, hãy xem bốn cách bạn có thể trang trí biểu mẫu tìm kiếm của mình bằng cách sử dụng chuyển tiếp CSS
Dưới đây là mã cho hộp tìm kiếm thông thường.Để bắt đầu, trong tệp HTML của bạn, hãy tạo một phần tử đầu vào có thuộc tính type=search. Nếu bạn nhìn vào đoạn mã bên dưới, bạn sẽ thấy 4 yếu tố khác nhau: phần tử div với lớp .box , phần tử div có lớp .container-1 , .icon và chính thanh tìm kiếm.
Tất nhiên, tất cả bốn ví dụ sẽ có thanh tìm kiếm và biểu tượng tìm kiếm. Mỗi ví dụ trong số bốn ví dụ sẽ nằm trong một vùng chứa riêng biệt để chúng ta có thể sửa đổi chúng một cách độc lập với nhau. Cuối cùng, div chịu trách nhiệm giữ vùng chứa của chúng ta ở giữa.
Thêm phông chữ tuyệt vờiFont Awesome là một thư viện biểu tượng. Bạn có thể tìm hiểu thêm về thư viện này trên trang web của họ.
Đoạn mã ở trên hiển thị một ví dụ về cách bạn có thể đưa biểu tượng vào đánh dấu của mình. Tuy nhiên, để biểu tượng hoạt động, bạn cũng cần cung cấp liên kết đến thư viện Font Awesome, như được viết bên dưới. Thêm liên kết này vào thẻ đầu của tài liệu của bạn.
Kiểu ban đầu
Bây giờ chúng ta sẽ thêm một số kiểu vào tập tin riêng biệt(mà bạn cũng sẽ phải thêm vào thẻ đầu của tài liệu của mình).
Nội dung( nền: #343d46; ) .box( lề: 100px tự động; chiều rộng: 300px; chiều cao: 50px; )
Trong đoạn mã CSS ở trên, chúng tôi đã thêm một số kiểu dáng cơ bản cho trang. Các trường tìm kiếm sẽ có màu xanh đậm, do đó nền nội dung không nhất thiết phải có màu trắng hoàn toàn. Lớp hộp cũng được căn giữa trang bài học.
Kết thúc hộp tìm kiếmHướng dẫn này nói về việc tìm hiểu cách tùy chỉnh các hộp tìm kiếm của bạn. Tôi sẽ sử dụng ví dụ đầu tiên để giải thích chi tiết hơn những gì đang xảy ra; Hãy chắc chắn rằng bạn biết chính xác những gì đang xảy ra. Trong ba ví dụ còn lại, tôi sẽ chỉ cho bạn thấy các tùy chọn chuyển tiếp.
#1. Làm sáng nềnVí dụ đầu tiên chúng ta sẽ giải quyết là thay đổi nền đầu vào tìm kiếm khi di chuột. Chúng tôi sẽ thêm một quá trình chuyển đổi để sự thay đổi không đột ngột.
HTMLBạn đã thấy mã HTML cơ bản. Đây sẽ là một đoạn cho tất cả các ví dụ.
CSS
Để gán kiểu, chúng ta cần xác định kiểu CSS của chính hộp tìm kiếm. Hãy thêm mọi thứ Quy tắc CSS lần lượt để bạn biết chính xác chuyện gì đang xảy ra.
Container-1( chiều rộng: 300px; căn chỉnh dọc: giữa; khoảng trắng: nowrap; vị trí: tương đối; )
Đầu tiên, hãy thiết kế lớp container. Hầu hết tài sản quan trọng có lẽ là vị trí: tương đối. Mục đích của việc này là để biểu tượng có thể được đặt lên trên đầu vào, như bạn sẽ thấy.
Đầu vào container-1#search( chiều rộng: 300px; chiều cao: 50px; nền: #2b303b; đường viền: không có; cỡ chữ: 10pt; float: left; color: #63717f; đệm-trái: 45px; -webkit-border- bán kính: 5px; -moz-bán kính đường viền: 5px; bán kính đường viền: 5px)
Đầu vàoTiếp theo chúng ta sẽ tạo kiểu cho đầu vào. Tất cả những điều trên chỉ nhằm mục đích trang trí, vì bán kính đường viền hoặc màu nền không ảnh hưởng đến chức năng của đầu vào. Hãy chú ý đến các thuộc tính thụt lề trái. Điều này nhằm nhường chỗ cho biểu tượng để nó không nằm ở đầu văn bản bên trong đầu vào theo đúng nghĩa đen.
Dưới đây chúng tôi có bốn quy tắc khác nhau cho màu giữ chỗ văn bản trong ví dụ Tìm kiếm của chúng tôi. Thật không may, các quy tắc phải riêng biệt cho từng tiền tố của nhà cung cấp và không thể kết hợp thành một quy tắc bằng văn bản rút gọn. Điều này hơi khó chịu và sẽ được lặp lại trong mọi ví dụ!
Container-1 input#search::-webkit-input-placeholder ( color: #65737e; ) .container-1 input#search:-moz-placeholder ( /* Firefox 18- */ color: #65737e; ) .container- 1 input#search::-moz-placeholder ( /* Firefox 19+ */ color: #65737e; ) .container-1 input#search:-ms-input-placeholder ( color: #65737e; )
Biểu tượngCuối cùng là phong cách biểu tượng. Điều quan trọng là nó phải ở trên đầu vào, vì vậy chúng tôi chỉ định nó location: tuyệt đối . Lề giúp định vị biểu tượng trong vị trí hàng đầu bằng 50%.
.container-1 .icon( vị trí: tuyệt đối; trên cùng: 50%; lề trái: 17px; lề trên: 17px; z-index: 1; màu: #4f5b66; ) Thêm Hiệu ứng di chuộtBộ quy tắc sau đây xác định điều gì sẽ xảy ra với trường tìm kiếm khi di chuột. Trong ví dụ này, chúng tôi muốn thay đổi màu nền. Để loại bỏ ánh sáng màu vàng hoặc xanh lam xung quanh đầu vào (đôi khi được trình duyệt thêm vào), hãy đặtoutline: none .
Đầu vào vùng chứa-1#search:hover, .container-1 input#search:focus, .container-1 input#search:active( phác thảo:none; nền: #ffffff; )
Tạo chuyển tiếpĐể thực hiện chuyển đổi, chúng ta cần thêm một vài dòng mã. Hãy quay lại quy tắc mà chúng ta đã xác định input style.container-1 input#search . Trước dấu ngoặc đơn đóng, thêm đoạn sau:
Chuyển đổi Webkit: nền .55 giây dễ dàng; -moz-transition: nền dễ dàng 0,55 giây; -ms-transition: nền .55s dễ dàng; -o-transition: nền .55s dễ dàng; chuyển tiếp: nền .55s dễ dàng;
Chúng tôi xác định một lối tắt cho thuộc tính chuyển đổi, nhưng chúng tôi cũng có thể xác định ba tham số này một cách riêng lẻ. Đầu tiên, chúng tôi nói rằng quá trình chuyển đổi chỉ ảnh hưởng đến thuộc tính nền. Tiếp theo chúng ta nói rằng quá trình chuyển đổi sẽ mất hơn nửa giây một chút. Cuối cùng, chúng tôi xác định mức độ điều tiết của hiệu ứng chuyển tiếp. sự dễ dàng không phải là hiệu ứng duy nhất có thể hoạt động ở đây, ví dụ như chúng ta có thể sử dụng tuyến tính hoặc tính năng dễ dàng. Nó sẽ trông hơi khác một chút. Hãy thử nó để xem những gì bạn thích nhất.
kiểu đầu vào bây giờ trông giống như mã bên dưới.
Đầu vào container-1#search( chiều rộng: 300px; chiều cao: 50px; nền: #2b303b; đường viền: không có; cỡ chữ: 10pt; float: left; color: #262626; đệm-trái: 45px; -webkit-border- bán kính: 5px; -moz-border-radius: 5px; -webkit-transition: nền dễ dàng 0,55 giây; o-transition: nền dễ dàng 0,55 giây;
Quá trình chuyển đổi CSS hoạt động như thế nào? #2. Mở rộng đầu vào khi di chuộtTrong ví dụ này, việc tìm kiếm sẽ bắt đầu bằng biểu tượng kính ngắm. Khi bạn di chuột qua biểu tượng, tìm kiếm sẽ mở rộng, sau đó bạn có thể nhập truy vấn của mình. Hầu hết mã trong ví dụ này sẽ rất giống với mã trước đó.
HTML CSS .container-2( chiều rộng: 300px; căn chỉnh dọc: giữa; khoảng trắng: nowrap; vị trí: tương đối; )Kiểu đầu vào cho quá trình chuyển đổi này là khác nhau. Lối vào nhỏ hơn nhiều nên biểu tượng có thể nằm ở phía sau hình vuông. Tất cả các thuộc tính khác như màu nền hoặc màu phông chữ sẽ vẫn được giữ nguyên, chúng tôi không muốn thay đổi hoàn toàn kiểu tìm kiếm.
Đầu vào container-2#search( chiều rộng: 50px; chiều cao: 50px; nền: #2b303b; đường viền: không có; cỡ chữ: 10pt; float: left; màu: #262626; đệm-trái: 35px; -webkit-border- bán kính: 5px; -moz-border-radius: 5px; màu: #fff; -webkit-transition: chiều rộng 0,55 giây dễ dàng; -o-transition: chiều rộng 0,55 giây dễ dàng;
Như bạn có thể thấy, tôi đã ghi đè thuộc tính transition để chỉ ảnh hưởng đến chiều rộng. Tôi giữ nguyên thời gian vì nó đủ nhanh để không gây khó chịu cho người dùng nhưng đủ lâu để tạo hiệu ứng đẹp mắt.
Dưới đây là mã để đổi màu văn bản giữ chỗ.
Container-2 input#search::-webkit-input-placeholder ( color: #65737e; ) .container-2 input#search:-moz-placeholder ( /* Firefox 18- */ color: #65737e; ) .container- 2 input#search::-moz-placeholder ( /* Firefox 19+ */ color: #65737e; ) .container-2 input#search:-ms-input-placeholder ( color: #65737e; )
Một lần nữa chúng ta có kiểu CSS cho biểu tượng. Nó vẫn giống như trong ví dụ trước.
Container-2 .icon(vị trí: tuyệt đối; trên cùng: 50%; lề trái: 17px; lề trên: 17px; chỉ mục z: 1; màu: #4f5b66; )
Thêm hiệu ứng di chuộtĐiều cuối cùng chúng ta cần làm là xác định tra cứu chờ đợi sẽ như thế nào. Trong đoạn mã sau, quy tắc đầu tiên đảm bảo rằng không có ánh sáng do trình duyệt gây ra trên biểu mẫu và hộp tìm kiếm vẫn được mở rộng khi bạn nhập - khi bạn nhập. Quy tắc ở giữa chỉ đơn giản là mở rộng đầu vào lên toàn bộ chiều rộng khi di chuột.
Container-2 input#search:focus, .container-2 input#search:active(outline:none; width: 300px; ) .container-2:hover input#search( width: 300px; ) .container-2:hover . biểu tượng( màu: #93a2ad; )
Điều cuối cùng xảy ra trong đoạn mã trên là biểu tượng sẽ đổi màu khi được di chuột. Đây chỉ là một chi tiết để nhanh chóng cho người dùng biết rằng hộp tìm kiếm đang hoạt động chứ không phải ở trạng thái rảnh. Thay đổi này chưa được triển khai cho quá trình chuyển đổi.
#3. Tăng kích thước biểu tượng khi di chuộtCủa tất cả bốn ví dụ cái này là tinh tế nhất, cả từ quan điểm mã và hình ảnh. Trong trường hợp này, biểu tượng cửa sổ xem sẽ nổi nhẹ và tăng kích thước.
HTMLLại đánh dấu HTML biểu tượng và hộp tìm kiếm giống như trong hai ví dụ trước. Tất nhiên, ngoại trừ .container-3 .
CSS
TRONG kiểu CSS không có gì đặc biệt cho ví dụ này. Đối với hầu hết các phần, phần mở đầu rất giống với các ví dụ đầu tiên, trong đó trạng thái mặc định không có gì khác biệt. Dưới đây là mã cho vùng chứa và đầu vào. Lưu ý rằng không có sự chuyển đổi sang đầu vào lần này.
Container-3( chiều rộng: 300px; căn chỉnh dọc: giữa; khoảng trắng: nowrap; vị trí: tương đối; ) .container-3 input#search( chiều rộng: 300px; chiều cao: 50px; nền: #2b303b; viền: không có; cỡ chữ: 10pt; màu: #262626; -webkit-border-radius: 5px;
Một lần nữa chúng ta có các quy tắc giữ chỗ.
Container-3 input#search::-webkit-input-placeholder ( color: #65737e; ) .container-3 input#search:-moz-placeholder ( /* Firefox 18- */ color: #65737e; ) .container- 3 input#search::-moz-placeholder ( /* Firefox 19+ */ color: #65737e; ) .container-3 input#search:-ms-input-placeholder ( color: #65737e; )
Về hình thức, biểu tượng cho ví dụ này cũng giống như vậy. Cùng một vị trí, cùng một màu sắc, v.v. Tuy nhiên, tôi đã thêm một quá trình chuyển đổi vào nó. Những chuyển đổi này được gán cho tất cả các thuộc tính, ngắn hơn so với việc nêu chúng riêng lẻ.
Container-3 .icon( vị trí: tuyệt đối; trên cùng: 50%; lề trái: 17px; lề trên: 17px; z-index: 1; màu: #4f5b66; -webkit-transition: tất cả .55 giây dễ dàng; -moz -transition: tất cả .55s đều dễ dàng; -ms-transition: tất cả .55s đều dễ dàng; -o-transition: tất cả .55s đều dễ dàng;
Thêm hiệu ứng Hover .container-3 input#search:focus, .container-3 input#search:active( Outline:none; ) .container-3:hover .icon( lề-top: 16px; color: #93a2ad; -webkit -transform:scale(1.5); /* Safari và Chrome */ -moz-transform:scale(1.5); /* Firefox */ -ms-transform:scale(1.5); :scale(1.5); /* Opera */ Transform:scale(1.5);Có một số điều đang diễn ra trong đoạn mã trên. Đầu tiên, chúng tôi thay đổi màu di chuột của biểu tượng và di chuyển nó lên cao hơn một chút để nó ở giữa theo chiều dọc khi phóng to. Thứ hai, chúng tôi đã thêm phép chuyển đổi vào biểu tượng khi di chuột để nó có kích thước gấp 1,5 lần kích thước ban đầu. Bởi vì quá trình chuyển đổi được xác định trước đó đã được định cấu hình để ảnh hưởng đến Tất cả Properties, biểu tượng sẽ xuất hiện khi di chuột.
Chúng ta hãy xem xét lại để tìm hiểu thêm về sự chuyển đổi.
#4. Nút di chuộtKhông giống như sau ba ví dụ, cái này sẽ khó hơn. Khi con trỏ bật phần trên cùngđầu vào, một nút sẽ được nhấp vào cho phép bạn tiếp tục - như Gửi hoặc Đi . Có một biểu tượng kính lúp bên trong nút.
HTMLHTML này hơi khác một chút. Tất nhiên, đầu vào vẫn còn đó, nhưng biểu tượng hiện nằm bên trong thành phần nút xuất hiện sau đầu vào. Điều quan trọng là nút này phải xuất hiện sau dữ liệu đầu vào vì nó liên quan đến cách tạo hiệu ứng chờ trong CSS.
CSSCSS khác trong ví dụ này, xin lưu ý! Dưới đây là một đoạn về phong cách container. Thứ nhất, vị trí: tương đối bị thiếu; Điều này không còn quan trọng nữa vì biểu tượng không dựa vào nó để vừa với đầu vào. Tuy nhiên, chúng tôi có tràn:ẩn. Điều này ngăn nút hiển thị khi nó không chờ xử lý. Về mặt kỹ thuật, nút xuất hiện ở bên phải của đầu vào, nhưng nhờ tràn:ẩn, nó không xuất hiện khi vượt quá chiều rộng của vùng chứa - vùng chứa và đầu vào có cùng chiều rộng.
Container-4( tràn: ẩn; chiều rộng: 300px; căn chỉnh dọc: giữa; khoảng trắng: nowrap; )
Đầu vào bên dưới không có phần chuyển đổi vì giờ đây nó không còn là một phần tử nữa.
Đầu vào container-4#search( chiều rộng: 300px; chiều cao: 50px; nền: #2b303b; đường viền: không có; cỡ chữ: 10pt; float: left; color: #fff; đệm-trái: 15px; -webkit-border- bán kính: 5px; -moz-bán kính đường viền: 5px; bán kính đường viền: 5px)
Đoạn mã sau dùng để thay đổi màu của phần giữ chỗ.
Container-4 input#search::-webkit-input-placeholder ( color: #65737e; ) .container-4 input#search:-moz-placeholder ( /* Firefox 18- */ color: #65737e; ) .container- 4 input#search::-moz-placeholder ( /* Firefox 19+ */ color: #65737e; ) .container-4 input#search:-ms-input-placeholder ( color: #65737e; )
Dưới đây là mã để tạo kiểu cho nút khi di chuột. Để đánh lừa nó đến từ bên cạnh, bạn cần đặt nó ngay phía sau đầu vào và ẩn nó trước khi nhắm. Nút là một phần tử thay đổi - nó di chuyển - vì vậy nó là thứ xác định quá trình chuyển đổi. Để làm cho mọi việc dễ dàng hơn, tôi đã xác định một quá trình chuyển đổi sẽ ảnh hưởng đến tất cả các thuộc tính.
Nút container-4.icon( -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius -bottomright: 5px; bán kính đường viền dưới cùng bên phải: 5px; nền: #232833; chiều rộng: 50px; cỡ chữ: 10pt; -webkit-transition: dễ dàng .55s; ; .55 giây dễ dàng)
Thêm hiệu ứng di chuộtĐể mờ dần, nút phải được đặt phía trên đầu vào. Điều này được thực hiện thông qua mức ký quỹ âm. Trước đây chúng tôi đã đặt độ mờ của nút thành 0, vì vậy chúng tôi cần đặt lại thành 1 để làm cho nút hiển thị.
Quy tắc cuối cùng chỉ thay đổi nền của nút khi bạn di chuột qua nút. Thật tốt khi cho người dùng biết rằng nút này đang hoạt động và họ có thể nhấp vào nút đó để gửi yêu cầu; chẳng ích gì khi có một nút nếu nó có vẻ không hoạt động.
Container-4:hover Button.icon, .container-4:active Button.icon, .container-4:focus Button.icon(outline: none; độ mờ: 1; lề trái: -50px; ) .container-4: nút di chuột.icon:hover( nền: trắng; )
Phần kết luậnChà, chúng ta đã kết thúc thử nghiệm CSS của mình! Chúng tôi đã sử dụng biểu mẫu nhập tìm kiếm cơ bản và sử dụng một tập hợp hiệu ứng nhỏ để thay đổi hành vi của nó. Bạn có thể thay đổi đầu vào bằng cách nào khác? Bạn sẽ áp dụng những khía cạnh nào khác cho quá trình chuyển đổi hoặc chuyển đổi CSS? Hãy cho chúng tôi biết về nó trong phần bình luận!
Tôi đã bị chỉ trích, nói rằng bố cục tệ, nhưng vẫn có HTML5 và CSS3 hiện đại.
Tất nhiên, tôi hiểu, các tiêu chuẩn mới nhất đều tuyệt vời và tất cả những thứ đó. Nhưng thực tế là, theo quy định, tôi tạo bố cục theo thứ tự và trong hầu hết các trường hợp, việc nhận dạng đầy đủ trong các trình duyệt khác nhau là rất quan trọng, điều này không cho phép sử dụng các công nghệ mới nhất. Vì vậy, tôi tập trung chủ yếu vào khả năng tương thích giữa nhiều trình duyệt và theo thói quen, tôi đặt ra biểu mẫu tìm kiếm “theo cách cũ”.
Nói chung, với bài đăng này, tôi đang khắc phục tình trạng này (vì lợi ích của những người không hài lòng với bài viết trước =) và cung cấp phiên bản bố cục của cùng một biểu mẫu tìm kiếm của riêng tôi, nhưng sử dụng công nghệ HTML5 và CSS3.
Một ví dụ về những gì sẽ xảy ra là kết quả có sẵn.
Chúng ta mất gì khi thiết kế biểu mẫu này bằng HTML5 và CSS3?Trong phần còn lại trình duyệt hiện đại mọi thứ đều tuyệt vời. Tôi tin rằng những thiếu sót trên không nghiêm trọng, vì vậy đối với trang web của mình, tôi sẽ sử dụng một biểu mẫu được thiết kế bằng công nghệ mới nhất một cách an toàn.
Tìm kiếm mã HTML biểu mẫuNó trông như thế này:
So với hình thức từ bài viết trước, những thay đổi sau đã được thực hiện theo công nghệ HTML5:
Dưới đây là tất cả các phong cách cần thiết với ý kiến:
Tìm kiếm ( /* đặt chiều rộng yêu cầu của biểu mẫu tùy thuộc vào thiết kế ** biểu mẫu trải dài mà không gặp vấn đề gì */ chiều rộng: 35%; /* chúng tôi sẽ định vị hoàn toàn nút gửi, ** do đó thuộc tính này là cần thiết */ vị trí: tương đối; ) .search input ( /* vô hiệu hóa đường viền cho đầu vào */ border: none; ) /* kiểu cho trường đầu vào */ .search .input ( /* kéo giãn trường đầu vào theo toàn bộ chiều rộng của biểu mẫu */ width : 100%; /* do phần đệm bên trong trên cùng (8px) và dưới cùng (9px) ** điều chỉnh chiều cao của biểu mẫu ** phần đệmở bên phải (37px), chúng tôi làm cho nó lớn hơn bên trái, ** bởi vì nút gửi sẽ được đặt ở đó */ đệm: 8px 37px 9px 15px; /* sao cho chiều rộng trường đầu vào (100%) bao gồm phần đệm */ -moz-box-sizing: border-box; kích thước hộp: hộp viền; /* thêm bóng bên trong */ box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3); /* góc tròn */ bán kính đường viền: 20px; nền: #EEE; phông chữ: 13px Tahoma, Arial, sans-serif; màu sắc: #555; phác thảo: không có; ) /* thay đổi thiết kế của trường đầu vào khi được lấy tiêu điểm */ .search .input:focus ( box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0, 0,0.4 ); nền: #E8E8E8; màu: #333; ) /* thiết kế nút gửi */ .search .submit ( /* định vị nút tuyệt đối từ cạnh phải của biểu mẫu */ location: tuyệt đối; trên cùng: 0; phải: 0; chiều rộng: 37px; /* kéo dài nút đến toàn bộ chiều cao của biểu mẫu */ chiều cao: 100%; png) 50% không lặp lại; /* thêm độ trong suốt cho nút gửi */ độ mờ: 0,5 ; ) /* khi di con trỏ, thay đổi độ trong suốt của nút gửi */ .search .submit:hover ( opacity: 0.8; ) /* tài sản này cần thiết để trong trình duyệt ** Chrome và Safari có thể định kiểu đầu vào */ đầu vào ( -webkit-appearance: none; )
Và các kiểu cho IE bên dưới phiên bản 9:
/* đặt các kiểu riêng cho các trình duyệt IE bên dưới phiên bản 9 */ *+html .search ( /* đối với IE7, điều chỉnh độ rộng cho các trình duyệt khác và thêm phần đệm bên phải ** để đặt nút gửi */ width: 28 % ; phần đệm: 0 52px 0 0; ) .search .input ( border: 1px Solid #DFDFDF; border-top: 1px Solid #B3B3B3; buffer-top: 7px; buffer-bottom: 8px; ) .search .input: focus ( đường viền: 1px Solid #CFCFCF; đường viền trên cùng: 1px Solid #999; ) .search .submit ( filter: alpha(opacity=50); ) .search .submit:hover ( filter: alpha(opacity=80); )
tái bút Cảm ơn các nhà phê bình đã bình luận về bài viết trước! Nhờ có bạn, một số điểm bố cục mới đã đọng lại trong đầu tôi.
