פשוט 2 טור פריסת CSS, CSS, תכנון, פריסת CSS |

פשוט 2 טור CSS פריסת

זהו הדרכה על אופן השימוש CSS פשוט ליצור שתי עמודות מתווה.

את העיצוב של כותרת, עיקרי תוכן העמוד, א הצדדי, וכן תחתונה. יפה בסיסי מתווה, ולא כלל קשה ליצור עם CSS ברגע שאתה יודע כיצד להתמודד עם באגים בלתי נמנע של Internet Explorer.

1. מבנה בסיסי

קודם כל, אנו יוצרים את מבנה ה-HTML בסיסי:


  > <div id = "page"> 
  > </div> <div id = "header"> </ div> 
  > </div> <div id = "sidebar"> </ div> 
  > </div> <div id = "main"> </ div> 
  > </div> <div id = "footer"> </ div> 
  </ div> 


  אחר כך, אנו שמים חלק מהתוכן של חלקים שונים: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> שם החברה </ h1> 
  <h4> הקלד את הסיסמה </ h4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> הניווט </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> דף הבית </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> מי אנחנו? </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> צור קשר </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> מפת האתר </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> תוכן </ h2> 
  <p> Lorem ipsum צער לשבת amet, consectetuer dipiscing 
  Elit.  Cum דיס יולדת montes, nascetur ridiculus mus.  1 בינואר  
  2002 Lorem ipsum צער לשבת amet, consectetuer adipiscing elit.  Cum דיס  
  יולדת montes, nascetur ridiculus mus.  1 בינואר, 2002 </ P> 
  </ div> 
  > <div id = "footer"> 
  <h2> הכותרת התחתונה </ h2> 
  </ div> 
  </ div>

2. קוד CSS

כעת אנו יוצרים קוד CSS:


  / * סגנון שתי עמודות פריסת * / 
  ; padding : 0 ; } * (Margin: 0; הריפוד: 0;) 
  גוף 
  ( 
  גופן, גודל: 100%; 
  גופן משקל: רגיל; 
  ; גופן משפחתי: Arial, Helvetica, sans-serif; 
  ) 
  * HTML, גוף 
  ( 
  גובה: 100%; 
  ; דק 'גובה: 100% / * Firefox * /; 
  ) 


  HTML, דף # 
  (  
  margin: 0; 
  הריפוד: 0; 
  גובה: 100%; 
  ) 
  # דף 
  ( 
  ; Margin: 0 auto; 
  הריפוד: 0; 
  רוחב: 1009px; 
  גובה: 100%; 
  ) 


  ; } א (טקסט decoration: none;) 

   text-decoration :underline } ת: לרחף (טקסט תפאורה: קו תחתון) 

  ; padding : 0 ; } ul, ol, li (margin: 0; הריפוד: 0;) 


  h1, h2, h3, h4, h5, h6 
  ( 
  margin: 0; 
  20px ; הריפוד: 10px 0 0 20px; 
  ) 

  ; } h1 (font-size: 28px;) 
  ; } h2 (font-size: 24px;) 
  ; } h3 (font-size: 18px;) 
  ; } h4 (font-size: 12px;) 
  ; } h5 (font-size: 10px;) 

  ; P (margin: 0; 
  קו-גובה: 18px; 
  10px 20px ; הריפוד: 0 0 10px 20px; 
  גופן, גודל: 12px;  
  ) 

  # דף 
  ( 
  ; Margin: 0 auto; 
  הריפוד: 0; 
  רוחב: 1009px; 
  גובה: 100%; 
  ) 

  # כותרת 
  ( 
  margin: 0; 
  הריפוד: 0; 
  רוחב: 100%; 
  גובה: 151px; 
  תצוגה: block; 
  ; צבע הרקע: # eeeeee; 
  ) 

  # sidebar 
  ( 
  גלגל הצלה: עזבו; 
  margin: 0; 
  הריפוד: 0; 
  ; תצוגה: inline / * Internet Explorer * /; 
  רוחב: 200px; 
  גובה: 100%; 
  ; צבע הרקע: # cccccc; 
  ) 

  # sidebar ul 
  ; } (רשימת בסגנון מסוג: none;) 

  display : inline /*internet explore*/ ; } # sidebar ul li (המוצגים: inline / Internet * לחקור * /;) 

  # sidebar ul li א 
  (  
  ; הריפוד: 3px 4px; 
  תצוגה: block; 
  16px ; margin: 0px 0 0 16px; 
  טקסט decoration: none; 
  צבע: # 0000E8 
  ) 

  # sidebar ul li a: לרחף 
  : #CC0000 } (צבע: # CC0000)  

  # ראשיות 
  ( 
  margin: 0; 
  הריפוד: 0; 
  גלגל הצלה: עזבו; 
  תצוגה: block; 
  רוחב: 809px; 
  גובה: 100%; 
  רקע: # dddddd 
  ) 
  # תחתונה 
  ( 
  margin: 0; 
  הריפוד: 0; 
  תצוגה: block; 
  רוחב: 100%; 
  גובה: 50px; 
  ; רקע: # eeeeee; 
  לדבוא: נסתר; 
  )