Một vài ngày trước, tôi đã được thực hiện trong một trang web breadcrumbs tôi là làm việc trên. breadcrumbs không sử dụng thường xuyên, nhưng hầu hết các trang web của công ty đang sử dụng breadcrumbs. Trong bài này tôi sẽ hướng dẫn bạn tìm hiểu làm thế nào để tạo ra tốt đẹp có thể mở rộng CSS Dựa Breadcrumbs. Tôi đang sử dụng chỉ có một đơn giản đồ họa. Phần còn lại là cơ bản CSS phong cách với một danh sách có thứ tự như HTML.

Xem thử cuối cùng

Đây là những gì chúng tôi đi làm hôm nay Download file. (12,1 KB)

HTML Cơ cấu tổ chức

Đây là mã HTML của chúng tôi. Đó là một danh sách có thứ tự đơn giản:

 > <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > Main Lavel </a> </li> <li> <a href = "#" > Sub Lavel </a> </li> <li> <a href = "#" > Sub sub Lavel </a> </li> <li> Your Current page </li> </ul> <ul id = "breadcrumbs"> <li> <a href = "#"> Trang chủ </ a> </ li> <li> <a href = "#"> chính Lavel </ a> </ li> < li> <a href = "#"> Sub Lavel </ a> </ li> <li> <a href = "#"> Sub phụ Lavel </ a> </ li> <li> trang hiện tại của bạn </ li> </ ul> 

CSS Styling

Đây là phong cách đơn giản css

  body ( 
  / 1 .13em "verdana" , arial, tahoma, sans-serif ; font: 0 .69 em / 1 .13 em "verdana", arial, tahoma, sans-serif;  
  ; background: # fff; 
  ) 

  ul, li ( 
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
  ) 

  # breadcrumbs ( 
  ; chiều cao: 2 .7 em; 
  #c9c9c9 ; border: 1px solid # c9c9c9; 
  ) 

  # breadcrumbs li ( 
  float: left; 
  ; line-height: 2 .7 em; 
  ; color: # 777; 
  ; padding-left: 0,85 em; 
  ) 

  background : url ( breadcrums .jpg ) no-repeat right center ;         display :block ;         padding : 0 15px 0 0 ; } breadcrumbs # li a (background: url (breadcrums jpg). no-repeat trung tâm quyền; display: block; padding: 0 15px 0 0;) 

Đây là chỉ đơn giản góc phải mũi tên hình ảnh, mà là tôi đang sử dụng trong hướng dẫn này.

 , #breadcrumbs li a :visited { color : # 777 ;         text-decoration :none ; } breadcrumbs # li a: link, breadcrumbs # li a: visited (color: # 777; text-decoration: none;) 

  , a: link, a: visited,  
  , breadcrumbs # li a: hover, 
  { # breadcrumbs li một: tập trung ( 
  color: # 222 
  ) 

Kết quả cuối cùng

Đây là kết quả cuối cùng

Kết luận

Lời khuyên này áp dụng cho các dự án của bạn hiện tại và kế tiếp, và bạn chắc chắn sẽ đánh giá cao những nỗ lực.

Tải tập tin nguồn

Nếu bạn muốn kiểm tra công việc của bạn, bạn có thể tải file zip cho hướng dẫn này.

cssbreadcrumbs.rar (12,1 KB)

Nếu bạn nghĩ rằng có thể được hướng dẫn chi tiết hơn, Hãy chia sẻ với chúng tôi. Thảo luận với chúng tôi

nếu bạn muốn nhận được nhiều cảm hứng từ chúng tôi, hãy xem xét việc đăng ký vào nguồn cấp dữ liệu của chúng tôi bằng RSS, hoặc bằng email.

Filed under: Css, Hướng dẫn bởi admin