Pirms dažām dienām es biju īstenošanas rīvmaize ir vietne, kuru es esmu strādā. rīvmaize neizmanto bieži, bet lielākā daļa no korporatīvās tīmekļa vietnes, izmantojot rīvmaize. Šajā mācību es uzzinātu, kā varat to izveidot jauku mērogojams CSS Based rīvmaize. Es izmantoju tikai vienu vienkāršu grafiku. Atpūta ir pamata CSS stils ar Nenumurēts saraksts, kā HTML kods.

Final Preview

Tas ir tas, ko mēs devusies darīt šodien. Download file (12,1 kb)

HTML Struktūra

Te ir mūsu HTML kodu. Tas ir vienkāršs Nenumurēts saraksts:

 > <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 = "#"> Sākums </ a> </ li> <li> <a href = "#"> Galvenie Lavel </ a> </ li> < li> <a href = "#"> Sub Lavel </ a> </ li> <li> <a href = "#"> Sub sub Lavel </ a> </ li> <li> Jūsu Current page </ li> </ ul> 

CSS Styling

Te ir vienkārša css stila

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

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

  # rīvmaize ( 
  ; augstums: 2 ,7 em; 
  #c9c9c9 ; border: 1px solid # c9c9c9; 
  ) 

  # rīvmaize li ( 
  float: left; 
  ; line-height: 2 ,7 em; 
  ; color: # 777; 
  ; padding-left: ,85 em; 
  ) 

  # rīvmaize li ( 
  ( breadcrums .jpg ) no-repeat right center ; background: url (breadcrums. jpg) no-repeat tiesības center; 
  display: block; 
  0 0 ; padding: 0 15px 0 0; 
  ) 

Tas ir vienkārši labajā stūrī bultiņa attēls, kas ir i am lietot šo pamācību.

 , #breadcrumbs li a :visited { color : # 777 ;         text-decoration :none ; } # rīvmaize li: link, # rīvmaize li: apmeklēja (color: # 777; text-decoration: none;) 

  , : link,: apmeklēja,  
  , # rīvmaize li: hover, 
  { # rīvmaize li: Focus ( 
  color: # 222 
  ) 

Galīgais rezultāts

Te ir gala rezultāts

Secinājums

Piemēro šos padomus, lai jūsu pašreizējo un nākamo projektu, un jūs noteikti novērtēs pūles.

Download source file

Ja jūs vēlaties pārbaudīt savu darbu, jūs varat lejupielādēt rar failu par šo pamācību.

cssbreadcrumbs.rar (12.1 kb)

Ja domājat, ka apmācība var būt labāk, lūdzu, dalīties ar mums. Komentēt mums

Ja jūs vēlētos saņemt vairāk iedvesmu no mums, lūdzu, apsveriet abonēšanas mūsu barības pa RSS vai pa e-pastu.

Iesniegts saskaņā ar: Css, konsultācijas by admin