Băt đâu nao.

Đánh dấu HTML5

Đầu tiên, chúng ta cần tạo một html tài liệu với đánh dấu sau:

 
 
 
 
Apple iPhone 4 - 16GB
 
IPhone tuyệt vời nhất.
 
 
 
  
 
 
Chip A5 lõi kép nhanh hơn. Camera 8MP với ống kính hoàn toàn mới cũng quay video HD 1080p. Và giới thiệu Siri. Đây là chiếc iPhone tuyệt vời nhất.
 
 
Tính năng sản phẩm
 
 
Camera 8 megapixel với khả năng quay video 1080p đầy đủ
 
Siri giọng nói assitant
 
iCloud
 
In không khí
 
Màn hình hiển thị võng mạc
 
Gắn thẻ địa lý ảnh và video
 
 
 Mua ngay 
 
 

Chúng tôi sử dụng một số thẻ mới từ thông số HTML5., Như tiêu đề, nhóm, nhân vật, phần, và một người chúng ta đã thảo luận trước đây; các chi tiết và tóm lược nhãn.

Tuy nhiên, chúng tôi sẽ không đào sâu vào các thẻ này, không phải vì chúng tôi không sẵn lòng, mà là những chủ đề cơ bản mà bạn có thể dễ dàng tìm thấy ở nơi khác. Vì vậy, nếu bạn thực sự mới với HTML5, tôi khuyên bạn nên đọc các tài liệu tham khảo sau đây về các thẻ đó; họ đã giải thích chúng một cách toàn diện:

• Hãy nói về ngữ nghĩa
• Phần tử tiêu đề HTML5
• Yếu tố nhóm
• Tham chiếu thẻ HTML5

Bây giờ hãy xem sự xuất hiện đầu tiên của trang của chúng tôi.

Vâng, nó trông hợp lý mà không có bất kỳ phong cách. Ở trên cùng có tiêu đề, và sau đó đến phần hình ảnh, mô tả và cuối cùng là nút 'Mua ngay'. Bây giờ, hãy tìm hiểu trang này.

Phong cách

Chúng tôi sẽ bắt đầu bằng cách bình thường hóa tất cả các kiểu mặc định bằng cách sử dụng biểu định kiểu này và thêm nền gradient vào html nhãn.

 html chiều cao: 100%; nền: # f3f3f3; nền: -moz-linear-gradient (trên cùng, # f3f3f3 0%, #ffffff 50%); 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%, # f3f3f3), dừng màu (50%, # ffffff)); nền: -webkit-linear-gradient (trên cùng, # f3f3f3 0%, # ffffff 50%); nền: -o-linear-gradient (trên cùng, # f3f3f3 0%, # ffffff 50%); nền: -ms-linear-gradient (trên cùng, # f3f3f3 0%, # ffffff 50%); nền: gradient tuyến tính (trên cùng, # f3f3f3 0%, # ffffff 50%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Hãy nhớ rằng các yếu tố sản phẩm của chúng tôi đều được bao bọc trong một div với lớp sản phẩm. Vì vậy, ở đây chúng tôi muốn căn giữa trình bao bọc và đặt chiều rộng là khoảng 650px.

 .trình bao bọc width: 650px; lề: tự động; đệm: 25px 0px; 

Phần tiêu đề

Trong phần tiêu đề, chúng tôi có hai tiêu đề h1 và h4, vậy hãy tạo kiểu cho những yếu tố này.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serif; font-weight: bình thường; lề: 0;  h1 cỡ chữ: 24pt;  h4 cỡ chữ: 16pt; màu: #aaa; 

Và sau đó thêm một ít không gian ở dưới cùng của tiêu đề với một lề.

 tiêu đề lề-dưới: 20px; 

Nếu bạn nhìn vào phía bên phải của tiêu đề, sẽ có rất nhiều khoảng trắng ở phía đó.

Vậy tại sao chúng ta không đặt logo Apple ở đó.

 tiêu đề lề-dưới: 20px; nền: url ('Khác /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') không lặp lại trung tâm bên phải; 

Hình ảnh sản phẩm

Tiếp theo, thả hình ảnh sang trái và đặt chiều rộng tối đa của hình ảnh thành 350px.

 hình float: trái;  hình img max-width: 350px; 

Vì hình ảnh đã được đẩy sang trái, sau đó chúng tôi sẽ thả phần mô tả sang phải và đặt chiều rộng thành 300px.

 phần font-họ: Tahoma, Arial, sans-serif; chiều cao dòng: 150%; phao: phải; chiều rộng: 300px; màu: # 333; 

Bây giờ hãy xem kết quả cho đến nay.

Nó bắt đầu trông ổn, nhưng thẻ chi tiết vẫn chưa hoạt động (ngoại trừ trong Chrome), vì vậy hãy tạo kiểu cho nút tiếp theo.

Nút

Đối với các kiểu nút, chúng tôi sẽ bắt chước kiểu từ Cửa hàng Apple.com. Và đây là tất cả cú pháp bạn cần đặt trong biểu định kiểu cho nút.

 nút nền: # 36a9ea; nền: -moz-linear-gradient (trên cùng, # 36a9ea 0%, # 127fd2 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%, # 36a9ea), dừng màu (100%, # 127fd2)); nền: -webkit-linear-gradient (trên cùng, # 36a9ea 0%, # 127fd2 100%); nền: -o-linear-gradient (trên cùng, # 36a9ea 0%, # 127fd2 100%); nền: -ms-linear-gradient (trên cùng, # 36a9ea 0%, # 127fd2 100%); nền: gradient tuyến tính (trên cùng, # 36a9ea 0%, # 127fd2 100%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); viền: 1px solid # 00599d; màu: #fff; phần đệm: 8px 20px; -webkit-Border-radius: 3px; bán kính đường viền: 3px; -webkit-box-Shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), chèn 0px 1px 0px 0px rgba (250, 250, 250, .3); hộp bóng: 0px 1px 1px 0px rgba (0, 0, 0, .1), chèn 0px 1px 0px 0px rpx (250, 250, 250, .3); bóng văn bản: 0px 1px 1px # 156cc4; bộ lọc: dropshadow (color = # 156cc4, offx = 0, offy = 1); cỡ chữ: 10pt; nút: di chuột nền: # 2f90d5; nền: -moz-linear-gradient (trên cùng, # 2f90d5 0%, # 0351b7 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%, # 2f90d5), dừng màu (100%, # 0351b7)); nền: -webkit-linear-gradient (trên cùng, # 2f90d5 0%, # 0351b7 100%); nền: -o-linear-gradient (trên cùng, # 2f90d5 0%, # 0351b7 100%); nền: -ms-linear-gradient (trên cùng, # 2f90d5 0%, # 0351b7 100%); nền: gradient tuyến tính (trên cùng, # 2f90d5 0%, # 0351b7 100%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0); nút: kích hoạt nền: # 127fd2; -webkit-box-Shadow: in 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); hộp bóng: inet 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Bây giờ nút sẽ trông tốt hơn.

Sự cố trong Internet Explorer

Như IE thông thường (Internet Explorer) luôn gây ra một số rắc rối; nếu bạn mở cái này trong bất kỳ IE nào dưới 9, trang sẽ vẫn không được tạo kiểu.

Điều này là do Internet Explorer không nhận ra các thành phần mới (phần, tiêu đề, v.v.) vì vậy các kiểu mà chúng tôi đã chỉ định không áp dụng. Vì vậy, trong bước tiếp theo, chúng tôi sẽ làm việc để giải quyết vấn đề này.

Kiểm tra hỗ trợ trình duyệt

Trong bài viết trước của chúng tôi, chúng tôi đã giải quyết hỗ trợ trình duyệt cho phần tử chi tiết bằng cách sử dụng polyfill này; để nó có thể hoạt động trong các trình duyệt không được hỗ trợ. Tuy nhiên, lần này chúng tôi sẽ thử các cách khác nhau để làm điều đó với Modernizr.

Từ trang web chính thức của nó, "Modernizr là một thư viện JavaScript mã nguồn mở giúp bạn xây dựng thế hệ tiếp theo HTML5 và CSS3-trang web hỗ trợ". Về mặt kỹ thuật, Modernizr sẽ kiểm tra sự hỗ trợ của trình duyệt đối với các yếu tố và tính năng mới nhất định. Nếu hỗ trợ không được cung cấp, thì chúng tôi phải cung cấp dự phòng cho dù đó là bằng cách đưa ra các phong cách khác nhau hoặc cung cấp polyfill. Trong trường hợp này, chúng tôi sẽ sử dụng Modernizr để giúp chúng tôi kiểm tra các chi tiết và yếu tố tóm tắt.

1. Truy cập Modernizr và tiến tới trang tải xuống của nó.

2. Trong trang tải xuống, Modernizr cung cấp một số tùy chọn để định cấu hình thư viện, do đó bạn chỉ phải chọn một số tính năng bạn thực sự cần cho trang web của mình. Trong trường hợp này, chúng tôi cần:

   • HTML5Shiv 3,4
   • Thêm các lớp CSS, tính năng này sẽ tự động chèn các lớp trong thẻ html.
   • các Hiện đại,
   • đi đến hộp tiện ích cộng đồng và chọn chi tiết elem,
   • Trong phần Mở rộng, chọn Modernizr.addTest.
3. Tạo và tải tập tin.
4. Liên kết nó với html của bạn và tải lại trang trong Internet Explorer. Trang bây giờ đã được tạo kiểu vì Internet Explorer hiện có thể nhận ra các thẻ.

Và, nếu bạn xem phần tử nguồn hoặc kiểm tra, bạn sẽ thấy lớp không có chi tiết đã được chèn vào thẻ html; chỉ ra rằng trình duyệt nơi chúng tôi đang xem trước trang; hiện không hỗ trợ yếu tố chi tiết. @@@@ [Tôi không thể hiểu câu này. ]

Sau đó, chúng ta có thể tạo dự phòng bằng cách sử dụng lớp này làm hook, mà chúng ta sẽ thực hiện trong bước tiếp theo.

Dự phòng

Trong bước này, chúng tôi sẽ cung cấp tương tự chi tiết chức năng phần tử cho các trình duyệt khác (không bao gồm Chrome). Trong bài viết trước, bước này đã được thực hiện tự động bằng cách sử dụng tập lệnh này, nhưng lần này chúng tôi sẽ tự tạo nó.

Chú thích: Chỉ cần xem lại một chút từ bài viết trước của chúng tôi; yếu tố chi tiết hiện chỉ được hỗ trợ trong trình duyệt Chrome.

Vì vậy, hãy bắt đầu làm việc với CSS trước.

Trên thẻ tóm tắt, chúng tôi thay đổi chế độ con trỏ của nó thành con trỏ, vì vậy người dùng sẽ nhận thấy rằng nó có thể nhấp được.

 tóm tắt con trỏ: con trỏ; cỡ chữ: 12pt; phác thảo: 0; 

Để cung cấp thêm không gian ở trên cùng và dưới cùng của phần tử chi tiết có lề.

 chi tiết lề: 20px 0px; 

Theo mặc định, thẻ tóm tắt sẽ có một mũi tên. Nhưng ở đây, chúng tôi muốn thay thế nó bằng một biểu tượng dấu cộng.

Chú thích: Trước khi tiếp tục, trước đây tôi đã tải xuống các biểu tượng từ bộ sưu tập này bởi Fugue, tải xuống và viết chúng vào một tệp.

Chúng ta hãy thêm một phần tử giả trước và đính kèm biểu tượng làm nền. Lưu ý rằng tại thời điểm này, vị trí nền nằm ở trên cùng sẽ hiển thị biểu tượng dấu cộng.

 chi tiết> tóm tắt: trước width: 16px; chiều cao: 16px; hiển thị: khối nội tuyến; nội dung: "! quan trọng; nền: url ('[/' tttps: http://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png ') 5px; vị trí: tương đối; top: 2px;

Sau đó, khi phần tử chi tiết được mở, vị trí nền sẽ di chuyển xuống dưới cùng sẽ hiển thị biểu tượng dấu trừ.

 chi tiết [mở]> tóm tắt: trước, chi tiết.open> tóm tắt: trước nền: url ('' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ) đáy trung tâm không lặp lại; 

Các [mở] dấu hiệu là một bộ chọn. Trong trường hợp này, nó sẽ chọn thuộc tính mở chi tiết trong trình duyệt hỗ trợ.

Cuối cùng, chúng ta nên ẩn mũi tên theo mặc định được hiển thị trong Chrome.

 chi tiết> tóm tắt :: - webkit-chi tiết-đánh dấu display: none; 

Sau đó, hãy xem kết quả trong trình duyệt một lúc.

Mũi tên mặc định hiện đã được thay thế bằng biểu tượng của chúng tôi và nếu bạn thấy nó trong Chrome, bạn sẽ có hiệu ứng chuyển đổi khi bạn nhấp vào nó; biểu tượng sẽ thay đổi tương ứng. Nhưng, trong các trình duyệt khác, sẽ không có gì xảy ra. Vì vậy, trong bước tiếp theo, chúng tôi sẽ cố gắng tái tạo hiệu ứng với jQuery.

Hiệu ứng chuyển đổi với jQuery

Trước khi chúng tôi bắt đầu với phần jQuery, tôi muốn cảm ơn Ian Devlin vì nguồn cảm hứng, kịch bản dưới đây thực sự là một sửa đổi nhỏ của anh ấy.

Được rồi, hãy tạo một biến để lưu thẻ tóm tắt.

 tóm tắt var = $ ('tóm tắt chi tiết'); 

Sau đó, chúng tôi bọc tất cả các yếu tố anh chị em của bản tóm tắt với một div.

tóm tắt.siblings (). quấn ALL ('
');

Và ẩn div đó khi phần tử chi tiết không có lớp mở.

$ ('chi tiết: không (.open) tóm tắt'). anh chị em ('div'). Hide ();

Khi tóm tắt được nhấp, chúng tôi muốn div ẩn được hiển thị và ngược lại, khi div ban đầu được mở, nó sẽ bị ẩn.

 tóm tắt.click (function () $ (this) .siblings ('div'). toggle (); $ ('chi tiết'). toggleClass ('open');); 

Để đảm bảo rằng các chức năng đó sẽ chỉ được thực thi trong các trình duyệt không được hỗ trợ, chúng tôi gói chúng bên trong câu lệnh có điều kiện này.

 if ($ ('html'). hasClass ('no-chi tiết')) // mã ở đây

Và dưới đây là mã chúng tôi có:

 if ($ ('html'). hasClass ('no-chi tiết')) var Tóm tắt = $ ('tóm tắt chi tiết'); tóm tắt.siblings (). quấn ALL ('
'); $ ('chi tiết: không (.open) tóm tắt'). anh chị em ('div'). Hide (); tóm tắt.click (function () $ (this) .siblings ('div'). toggle (); $ ('chi tiết'). toggleClass ('open');); 

Bây giờ hãy kiểm tra nó trong trình duyệt; Hiệu ứng chuyển đổi giờ đã hoạt động trên tất cả các trình duyệt, cá nhân tôi đã kiểm tra (cho đến Internet Explorer 7).

• Bản giới thiệu
• Tải xuống nguồn

Lời khuyên: Ngoài ra, bạn có thể thay đổi .chuyển đổi () với .slideToggle () để tạo hiệu ứng trượt. Ngoài ra nếu bạn muốn mở chi tiết ban đầu, bạn có thể thêm một lớp mở trong phần tử chi tiết.

Phần kết luận

Chúng tôi đã trải qua tất cả các bước tạo một trang sản phẩm bằng HTML5, gỡ lỗi cho các trình duyệt không được hỗ trợ cũng như sao chép hiệu ứng chuyển đổi cho thành phần chi tiết của chúng tôi, vì vậy hy vọng bạn có thể học được nhiều từ nó.

Tuy nhiên, tôi biết rằng tôi đã không giải thích chi tiết mọi thứ trong bài đăng này, vì vậy nếu bạn muốn làm rõ điều gì đó, vui lòng gửi câu hỏi trong hộp bình luận bên dưới.