Khi bạn thay đổi kích thước trang, các phần tử khối nằm bên dưới nhau một cách duyên dáng. Tôi đã thiết lập một vài trường hợp truy vấn phương tiện khác nhau trong biểu định kiểu bên ngoài. Điều này giúp việc theo dõi các kiểu dễ dàng hơn khi quay lại để chỉnh sửa một cái gì đó sau này.

 
 
 
Jake Rocheleau
 
Nhà văn tự do & Nhà phát triển web
  Hudson, Massachusetts, Hoa Kỳ  jakerocheleau @ gmail Danh mục đầu tư của tôi • @jakerocheleau 
 
  
 
 

Trước khi chúng tôi chuyển sang CSS chi tiết, tôi muốn giải thích thêm về việc sử dụng microdata. Nếu bạn nhìn kỹ, tôi đã xả rác các thuộc tính bên trong nhiều yếu tố khác nhau với các tên vật phẩm, vật phẩm, và mục. Tất cả đều liên quan đến dự án Schmea, hy vọng sẽ cung cấp cấu trúc dữ liệu cho web.

Định dạng Microdata hữu ích

Tất cả các công cụ tìm kiếm lớn bao gồm Google, Yahoo!, Và Bing đã chấp nhận Schema là cú pháp tốt nhất để đánh dấu dữ liệu. Bằng cách dán nhãn chi tiết về bản thân, nó giúp các công cụ tìm kiếm này hiển thị các kết quả liên quan cho nội dung của bạn trực tuyến. Hãy chia nhỏ cách thiết lập những thứ này.

Thuộc tính itemscope được áp dụng cho bất kỳ vùng chứa nào chứa thông tin trên một mục lược đồ. Điều này luôn được theo sau bởi thuộc tính itemtype, trong kịch bản này là mô tả một người. Bên trong div trình bao bọc này, tôi có thể gắn nhãn bất kỳ nội dung nào bằng cách sử dụng itemprop cùng với bất kỳ chi tiết nào được liệt kê trên trang tài liệu của họ.

Phương pháp được đề xuất là bọc nội dung của bạn bên trong thẻ span thay vì nối trực tiếp vào phần tử. Khi bạn gắn nhãn một cái gì đó như ảnh, bạn nên đính kèm itemprop vào img yếu tố trực tiếp. Nhưng nếu không, bạn sẽ có đánh dấu sạch hơn nhiều bằng cách gói dữ liệu của bạn trong thẻ span.

Bao nhiêu là quá nhiều?

Tôi sẽ lập luận rằng không có giới hạn về số lượng chi tiết bạn có thể đi vào. Microdata có sẵn để giúp máy tính nhận ra con người, tổ chức, sản phẩm và các mặt hàng khác trong bối cảnh trực tuyến. Bạn càng cung cấp nhiều thông tin thì càng tốt.

Thật đáng để giữ và mở tâm trí và xem làm thế nào bạn có thể sử dụng microdata này trong các khía cạnh của trang web của riêng bạn. Nếu bạn dành 10-15 phút để xem tài liệu Schema, điều đó dễ dàng hơn bạn nghĩ rất nhiều. Chúng ta có thể xem xét hai ví dụ vững chắc từ bản demo sơ yếu lý lịch:

 
 
Kỹ năng
 
 
Phát triển
 
 
HTML5 / CSS3
 
JavaScript và jQuery
 
Phần cuối PHP
 
Cơ sở dữ liệu SQL
 
Wordpress
 
Pligg CMS
 
Một số mục tiêu-C
 
 
 
 
Phần mềm
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
Văn phòng MS 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Khi liệt kê các kỹ năng khác nhau của tôi, tôi đã thiết lập một thùng chứa mới xác định lược đồ ItemList. Không có bất kỳ loại kỹ năng hoặc kinh nghiệm nào được liệt kê dưới một Người, vì vậy đây là một sự thay thế an toàn. Giá trị ở đây là Google có thể hiểu từng itemListEuity có liên quan với nhau. Trong trường hợp này, chúng tôi có một danh sách các ngôn ngữ và phần mềm tôi biết cách làm việc với.

 
 
Bài viết gần đây
 
  10 phương pháp dự phòng hữu ích cho CSS và Javascript • Xuất bản năm Tháng 7 năm 2012
 
  Viết lại URL trong WordPress: Mẹo và Plugin • Xuất bản năm Tháng 7 năm 2012
 
  Tối ưu hóa JPEG cho web - Hướng dẫn cơ bản • Xuất bản năm Tháng 7 năm 2012
 
  9 thủ thuật để thiết kế bản tin HTML hoàn hảo • Xuất bản năm Tháng 5 năm 2012
 
  Hướng dẫn Thử nghiệm A / B với Trình tối ưu hóa trang web của Google • Xuất bản năm Tháng 3 năm 2012
 
 

Một ví dụ khác là danh sách các bài viết được tìm thấy ở dưới cùng. Có một thiết lập lược đồ cho các bài viết và bài đăng trên blog, tất cả đều liên quan đến nội dung được tìm thấy trực tuyến. Tôi đã chỉ ra URL bài viết và ngày xuất bản là quá đủ thông tin cho các trình thu thập công cụ tìm kiếm này.

Chỉ cần nhớ rằng microdata là tất cả về định dạng nội dung được tổ chức bởi máy tính. Sơ yếu lý lịch một trang này là ví dụ hoàn hảo để xác định các đặc điểm về một người cụ thể. Chúng không hữu ích trên mọi trang web, nhưng đó là một phương pháp thú vị để hiểu.

Kiểu CSS tương đối

Trong phần cuối cùng này, hãy xem cách tạo kiểu cho toàn bộ trang web này. Hướng tới đỉnh của biểu định kiểu của chúng tôi Tôi đang xác định một số thiết lập lại ban đầu và các thuộc tính phần tử cơ bản. Chúng bao gồm các tiêu đề, mục danh sách và hiệu ứng di chuột liên kết neo.

* lề: 0; đệm: 0;  html chiều cao: 101%;  body nền: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); cỡ chữ: 62,5%; đệm dưới cùng: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; màu: # 454545; cỡ chữ: 3,6em; lề dưới: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; màu: # 484848; cỡ chữ: 2,5em; lề dưới: 10px; trang trí văn bản: gạch chân;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; màu: # 777; font-weight: bình thường; cỡ chữ: 1,8em; lề dưới: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; màu: # 656565; font-weight: in đậm; cỡ chữ: 1,75em; lề dưới: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; màu: # 565656; cỡ chữ: 1,8em; chiều cao dòng: 1,4em; lề dưới: 15px; đệm-trái: 35px;  nhỏ font-Family: "Balthazar", serif; màu: # 656565; cỡ chữ: 1.6em; hiển thị: khối; lề dưới: 6px;  ul hiển thị: khối; danh sách kiểu: không có;  ul li padding-left: 45px; list-style-type: none; dọc-align: trên cùng; nền: url ('https://assets.hongkiat.com/uploads/responsive-resume/bONS.png') 25px 5px không lặp lại; lề dưới: 5px; họ phông chữ: "Balthazar", serif; màu: # 666; cỡ chữ: 1.6em; chiều cao dòng: 2,3em;  img viền: 0; chiều rộng tối đa: 100%;  a màu: # 5582d6; trang trí văn bản: không có;  a: hover text-trang trí: gạch chân;  

Không có gì quá thú vị ngoại trừ một số ngăn xếp phông chữ tùy chỉnh. Tôi cũng đã lấy một biểu tượng dấu đầu dòng duy nhất thay vì sử dụng mặc định “đĩa”. Bạn có thể thử tìm kiếm thông qua một thư mục như Icon Finder khi cố gắng xác định vị trí thiết kế tương tự.

/ ** Bố cục lõi @group ** / #w lề: 0px 50px; phần đệm: 20px 40px; đệm-top: 35px; nền: #fff; chiều rộng tối thiểu: 260px; chiều rộng tối đa: 900px; viền-dưới-phải-bán kính: 8px; viền-dưới-trái-bán kính: 8px; -webkit-Border-bottom-left-radius: 8px; -webkit-Border-bottom-right-radius: 8px; -moz-Border-radius-bottomleft: 8px; -moz-Border-radius-bottomright: 8px;  tiêu đề chiều rộng: 100%;  / ** @group cài đặt cá nhân ** / #info float: left; lề dưới: 12px;  #photo float: phải;  #photo img -webkit-Border-radius: 3px; -moz-viền-bán kính: 3px; bán kính đường viền: 3px; -webkit-box-bóng: 0 2px 4px rgba (0, 0, 0, 0.2); -moz-box-bóng: 0 2px 4px rgba (0, 0, 0, 0.2); hộp bóng: 0 2px 4px rgba (0, 0, 0, 0.2); màu nền: #fff; viền: 1px solid #ccc; phần đệm: 5px;  

Chỉ có một vài khu vực khối quan trọng trên trang cần được chú ý. Tất nhiên, div trình bao bọc được thiết lập với lề và phần đệm thêm. Ngoài ra, chiều rộng tối đa bị giới hạn ở 900px vì bất kỳ kích thước lớn hơn nào cũng có cảm giác như trang có quá nhiều khoảng trắng. Tôi cũng đã sử dụng các góc tròn ở cuối trang để có hiệu ứng mượt mà hơn trên mắt.

Thiết kế đáp ứng

Có thể khía cạnh quan trọng nhất của sơ yếu lý lịch trực tuyến này là chức năng đáp ứng. Tôi có năm thiết lập điểm dừng khác nhau để đạt được các hiệu ứng khác nhau khi thay đổi kích thước cửa sổ trình duyệt.

@media chỉ màn hình và (max-width: 740px) h1 font-size: 4.5em;  h3 cỡ chữ: 2.2em;  h2 hiển thị: khối; văn bản-align: trung tâm;  #info float: none; hiển thị: khối; văn bản-align: trung tâm;  #photo float: none; hiển thị: khối; văn bản-align: trung tâm;  #w padding: 20px 15px;  p đệm: 0;  

Chữ cái đầu 740px là ngay xung quanh nơi hình ảnh sẽ xung đột với văn bản tiêu đề của chúng tôi. Thay vì để hình ảnh thả xuống ở phía bên phải, chúng tôi xóa cả hai yếu tố và căn giữa toàn bộ bố cục. Tôi cũng đã tăng kích thước văn bản tiêu đề để có tác động vững chắc hơn.

Khi cửa sổ trở nên nhỏ hơn, tôi đã loại bỏ một số phần đệm thêm từ div và đoạn văn của trình bao bọc. Vấn đề tiếp theo chúng tôi gặp phải sau tiêu đề là từ danh sách kỹ năng UL. Tôi chia nhỏ cách tiếp cận hai cột và thay vào đó có các mục danh sách nổi bên cạnh nhau.

@media chỉ màn hình và (max-width: 570px) ul li display: inline-block; đệm-trái: 15px; chiều rộng: 140px; vị trí nền: -5px 0px; lề phải: 6px; chiều cao dòng: 1,7em;  # skill-left, skill-right lề-bottom: 15px;  

Điều này cũng yêu cầu định vị lại nhiều thuộc tính văn bản mặc định. Chúng tôi phải cập nhật chiều cao dòng và định vị lại biểu tượng dấu đầu dòng của mỗi mục trong danh sách. Tôi đã đặt chiều rộng cố định để lưới có vẻ ngăn nắp hơn cho đến điểm dừng tiếp theo.

Mã hóa cho điện thoại thông minh

Ba truy vấn phương tiện cuối cùng là nhỏ nhưng rất quan trọng. Khi bạn chuyển giữa chế độ ngang và dọc, iPhone sẽ thay đổi kích thước bất kỳ trình duyệt di động nào. Đây cũng là trường hợp với hầu hết các thiết bị Android và điện thoại Windows Mobile.

@media chỉ màn hình và (max-width: 480px) ul li width: 120px;  #w lề: 0 20px;  Màn hình chỉ @media và (max-width: 320px) #w lề: 0 10px;  / ** Chỉ màn hình iPhone ** / @media và (max-device-width: 480px) ul li width: 150px;  

Khi lần đầu tiên nhấn 480px hoặc nhỏ hơn, chúng tôi sẽ xóa một số phần đệm khác khỏi trình bao bọc và cũng kích thước lại các mục danh sách. Sau đó, ở 320px tôi đã xóa một số không gian lề bên ngoài tài liệu. Bạn vẫn có thể nhìn thấy nền kết cấu, nhưng nó không quan trọng lắm trên khung nhìn dọc mỏng như vậy.

Cuối cùng tôi đang sử dụng chiều rộng tối đa của thiết bị để nhắm mục tiêu chính thiết bị iPhone, hoặc cụ thể là bất kỳ màn hình di động nào khác có chiều rộng tối đa 480px. Trong trường hợp này tôi muốn cập nhật các mục danh sách rộng hơn một chút để chúng điền vào toàn bộ màn hình. Nó sẽ chỉ ảnh hưởng đến các danh sách kỹ năng trong chế độ xem ngang vì chân dung quá mỏng để nhận thấy bất kỳ sự khác biệt nào.

• Bản giới thiệu
• Tải về mã nguồn

Suy nghĩ cuối cùng

Làm việc qua Internet thường yêu cầu ít nhất một số loại danh mục đầu tư trực tuyến. Khi bạn có thể liên kết đến một trang tiếp tục với tất cả các chi tiết của bạn được sắp xếp cùng nhau, điều đó cho thấy bạn có nghĩa là kinh doanh. Các nhà tuyển dụng nghiêm túc và các khách hàng tiềm năng sẽ phải đối mặt với sự phô trương chuyên nghiệp như vậy trong thiết kế web.

Tôi hy vọng bạn có thể lấy một số điểm chính từ hướng dẫn này. Những người làm việc tự do ở bất kỳ địa điểm nào trên thế giới đều có thể tự tiếp thị chỉ với một chút nỗ lực kỹ thuật. Vui lòng tải xuống mã nguồn demo của tôi ở trên và chia sẻ suy nghĩ của bạn về bài viết này trong khu vực bình luận của chúng tôi.