ง่ายๆ 2 คอลัมน์รูปแบบ css, css, ออกแบบ, css เค้าโครง |

ง่ายๆ 2 คอลัมน์ css เค้าโครง

นี่คือการแนะนําเกี่ยวกับวิธีการใช้ CSS เพื่อสร้างง่ายๆสองคอลัมน์รูปแบบ.

รูปแบบประกอบด้วยหัวเรื่องมีเนื้อหาหลักคอลัมน์ที่แถบด้านข้างและส่วนท้าย. ที่น่ารักน่าชังพื้นฐานเลย์เอาต์และไม่ได้ยากทั้งหมดเพื่อสร้างกับ CSS เมื่อคุณทราบวิธีการจัดการกับการหลีกเล่ียงไม่ได้ใน Internet Explorer โรคจิต.

1. โครงสร้างพื้นฐาน

แรกของเราสร้าง HTML พื้นฐานโครงสร้าง:


 > <div id = "header" > </div> <div id = "sidebar" > </div> <div id = "main" > </div> <div id = "footer" > </div> </div> <div รหัส "page" => <div รหัส = "header"> </ div> <div รหัส = "sidebar"> </ div> <div รหัส = "main"> </ div> <div รหัส = "ส่วนท้าย "> </ div> </ div> 
  หลังจากนั้นเราจะนำเนื้อหาบางอย่างที่แตกต่างกันในส่วน:  > <div id = "header" > <h1> Company Name </h1> <h4> Type your slogan </h4> </div> <div id = "sidebar" > <h2> Navigation </h2> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Srevices </a> </li> <li> <a href = "#" > Contact </a> </li> <li> <a href = "#" > Sitemap </a> </li> </ul> </div> <div id = "main" > <h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing  elit. <div รหัส "page" => <div รหัส "header" => <h1> ชื่อบริษัท </ h1> <h4> ประเภทสโลแกนของคุณ </ h4> </ div> <div รหัส "sidebar" => <h2> นาวิเกต </ h2> <ul> <li> ที่ <a href = "#"> หน้าหลัก </ a> </ ลี้> <li> ที่ <a href = "#"> เกี่ยวกับเรา </ a> </ ลี้> < ลี้> ที่ <a href = "#"> Srevices </ a> ที่ </ ลี้> <li> ที่ <a href = "#"> ติดต่อ </ a> ที่ </ ลี้> <li> ที่ <a href = "#"> แผนผังเว็บไซต์ </ a> ที่ </ ลี้> </ UL> </ div> <div รหัส "main" => <h2> เนื้อหา </ h2> <p> Lorem ipsum dolor นั่ง amet, consectetuer dipiscing elit.  Cum dis parturient มอนเตส, nascetur ridiculus mus.  วันที่ 1 มกราคม 2002 Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit.  Cum dis parturient มอนเตส, nascetur ridiculus mus.  > <h2> Footer </h2> </div> </div> วันที่ 1 มกราคม 2002 </ p การ> </ div> <div รหัส "footer" => <h2> ส่วนท้าย </ h2> </ div> </ div>

2. Css รหัส

ตอนนี้เราสร้าง css รหัส:


  / * สไตล์สองคอลัมน์รูปแบบ * / 
  ; padding : 0 ; } * (ขอบ: 0; รอง: 0;) 
  ร่างกาย 
  ( 
  แบบอักษร ขนาด: 100%; 
  แบบ อักษร-น้ำหนัก: ปกติ; 
  ; แบบ อักษร-ครอบครัว: Arial, Helvetica, sans-serif; 
  ) 
  * HTML ที่, ร่างกาย 
  ( 
  ความ สูง: 100%; 
  ; นาที-ความ สูง: 100% / * ของ Firefox * /; 
  ) 


 margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } html ที่ # หน้า (ขอบ: 0; รอง: 0; ความ สูง: 100%;) (# หน้า ขอบ: 0 อัตโนมัติ; รอง: 0; ความ กว้าง: 1009px; ความ สูง: 100%;) 
 ; } a :hover { text-decoration :underline } ul,ol,li { margin : 0 ; padding : 0 ; } h1,h2,h3,h4,h5,h6 { margin : 0 ; padding : 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 ; line-height : 18px ; padding : 0 0 10px 20px ; font-size : 12px ; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } #header { margin : 0 ; padding : 0 ; width : 100 %; height : 151px ; display :block ; background-color : #eeeeee ; } #sidebar { float :left ; margin : 0 ; padding : 0 ; display :inline /*internet explorer*/ ; width : 200px ; height : 100 %; background-color : #cccccc ; } #sidebar ul { list-style-type :none ; } #sidebar ul li { display : inline /*internet explore*/ ; } #sidebar ul li a { padding : 3px 4px ; display :block ; margin : 0px 0 0 16px ; text-decoration :none ; color : #0000E8 } #sidebar ul li a :hover { color : #CC0000 } #main { margin : 0 ; padding : 0 ; float :left ; display :block ; width : 809px ; height : 100 %; background : #dddddd } #footer { margin : 0 ; padding : 0 ; display :block ; width : 100 %; height : 50px ; background : #eeeeee ; overflow :hidden ; } เป็น (ข้อความ อิสริยาภรณ์: ไม่มี;) ที่: (ฉวัดเฉวียน ข้อความ อิสริยาภรณ์: เน้น) UL, ol, ลี้ (ขอบ: 0; รอง: 0;) h1, h2, h3, h4, h5, h6 (ขอบ: 0; นุ่นที่ใช้ยัด เบาะ: 10px 0 0 20px;) h1 (แบบ อักษร ขนาด: 28px;) h2 (แบบ อักษร ขนาด: 24px;) h3 (แบบ อักษร ขนาด: 18px;) h4 (แบบ อักษร ขนาด: 12px;) h5 (ขนาด แบบ อักษร: 10px;) (p การ ขอบ: 0; บรรทัด-ความ สูง: 18px; รอง: 0 0 10px 20px; แบบอักษร ขนาด: 12px;) (# หน้า ขอบ: 0 อัตโนมัติ; รอง: 0; ความ กว้าง: 1009px; ความ สูง: 100%; ส่วนหัว () # ขอบ: 0; รอง: 0; กว้าง: 100%; ความ สูง: 151px; แสดง: บล็อก; พื้นหลังสี: # eeeeee;) (# แถบด้านข้าง ฟ่อง: ซ้าย; ขอบ: 0; รอง: 0; แสดง: ในบรรทัด / * โปรแกรม Internet Explorer * /; กว้าง: 200px; ความ สูง: 100%; พื้นหลังสี: # cccccc;) (# แถบด้านข้าง UL รายการแบบ ประเภท: ไม่มี;) # แถบด้านข้าง UL ลี้ (แสดง: ในบรรทัด / * อินเทอร์เน็ตสำรวจ * /;) # UL ลี้ แถบด้านข้าง ที่มี (รอง: 3px 4px; แสดง: บล็อก; ขอบ: 0px 0 0 16px; ข้อความ อิสริยาภรณ์: ไม่มี; สี: # 0000E8) # แถบด้านข้าง UL ลี้ ที่: (ฉวัดเฉวียน สี: # CC0000) # หลัก (ขอบ: 0; รอง: 0; ฟ่อง: ซ้าย; แสดง: บล็อก; กว้าง: 809px; ความ สูง: 100%; พื้นหลัง: # dddddd) (# ส่วนท้าย ขอบ: 0; รอง: 0; แสดง: บล็อก; ความ กว้าง: 100%; ความ สูง: 50px; พื้นหลัง: # eeeeee; ล้น: ซ่อน เร้น;)