זה מאוד פשוט, verticale CSS בתפריט. הדרכה זו מסייעת ליצור פשוט אטרקטיבי CSS התפריט עם אפקט מגניב לרחף.

שלב: 1

קודם כל תן לנו לכתוב את הקוד של תפריט CSS. עובר כאן את הקוד ..

  # nav ul ( 
  margin: 0; 
  הריפוד: 0; 
  רשימת בסגנון מסוג: none; 
  ) 


  # nav ul li ( 
  ; /*IE 6*/ תצוגה: inline; / * IE 6 * / 
  ) 


 display :block ; background : #d9d9d9 ; width : 200px ; text-decoration :none ; padding : 4px /*padding for top, bottom*/ 7px /*padding for left, right*/ ; border-bottom : 1px solid #eeeeee ; border-top : 1px solid #cccccc ; border-left : 5px solid # 333333 ; color : # 333333 ; # nav ul li (א לתצוגה: לחסום; רקע: # d9d9d9; רוחב: 200px; טקסט decoration: none; הריפוד: 4px / * הריפוד של הדף, תחתון * / 7px / * הריפוד של שמאל, ימין * /;-הגבול תחתית: 1px solid # eeeeee; הגבול-top: 1px solid # cccccc;-הגבול עזבו: 5px solid # 333333; צבע: # 333333; 
  { border-left-color : #0099FF ; color : #0066FF ; background : #c4c4c4 ; } # nav ul li a: לרחף (-הגבול השמאלי צבע: # 0099FF; צבע: # 0066FF; רקע: # c4c4c4;) 

שלב: 2

עכשיו אנחנו ליצור מבנה HTML בסיסי.

 > <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About Us </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Contact </a> </li> < /ul> </div> <div id = "nav"> <ul> <li> <a href = "#"> דף הבית </ a> </ li> <li> <a href = "#"> מי אנחנו? </ a> </ li> <li> <a href = "#"> שירותים </ a> </ li> <li> <a href = "#"> מפת האתר </ a> </ li> <li> <a href = " # "> צור קשר </ a> </ li> </ ul> </ div> 

כן ..! את עשית! פשוט לראות איך הוא ליצור תפריט CSS ... א בהדגמה ..?

מתויק תחת: CSS, הדרכות על ידי Admin