หากคุณใช้วิธีการออกแบบตาราง โดยปกติจะเป็นเค้าโครงสามแถวที่มีแถวบน กลาง และล่าง 
- หากใช้ DIV ฉันลองใช้สามคอลัมน์สำหรับเลย์เอาต์เช่นนี้ 
-
2. กำหนดสไตล์ร่างกาย
ขั้นแรกให้กำหนดสไตล์ของเนื้อหาทั้งหน้า รหัสจะเป็นดังนี้:
เนื้อความ { ระยะขอบ: 0px;
การขยาย: 0px;
พื้นหลัง: url(../images/bg_logo.gif) #FEFEFE ไม่ทำซ้ำด้านล่างขวา;
ครอบครัวแบบอักษร: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
สี: #666;
ขนาดตัวอักษร:12px;
เส้น-ความสูง:150%; }
ฟังก์ชั่นของโค้ดข้างต้นได้รับการอธิบายโดยละเอียดในบทช่วยสอนของวันก่อนหน้า และทุกคนควรเข้าใจมันได้อย่างรวดเร็ว ระยะขอบถูกกำหนดเป็น 0 สีพื้นหลังคือ #FEFEFE ภาพพื้นหลังคือ bg_logo.gif และรูปภาพอยู่ที่มุมขวาล่างของหน้า โดยไม่มีการกำหนดขนาดตัวอักษรซ้ำ สี #666 ความสูงของเส้นคือ 150%
3. กำหนด div หลัก
ครั้งแรกที่ฉันใช้เลย์เอาต์ CSS ฉันตัดสินใจใช้เลย์เอาต์สามคอลัมน์ที่มีความกว้างคงที่ (ซึ่งง่ายกว่าการออกแบบความละเอียดแบบปรับได้ โฮ้ อย่าบอกว่าฉันขี้เกียจ ใช้แบบเรียบง่ายก่อนเพื่อให้มั่นใจมากขึ้น !). กำหนดความกว้างของด้านซ้าย กลาง และด้านขวาให้เป็น 200:300:280 ตามลำดับ โดยกำหนดไว้ดังนี้ใน CSS:
/*กำหนดรูปแบบคอลัมน์ด้านซ้ายของเพจ*/
#left{ WIDTH:200px;
ขอบ: 0px;
การขยาย: 0px;
พื้นหลัง: #CDCDCD;
-
/*กำหนดรูปแบบคอลัมน์ของเพจ*/
#middle{ ตำแหน่ง: สัมบูรณ์;
ซ้าย:200px;
บนสุด:0px;
ความกว้าง:300px;
ขอบ: 0px;
การขยาย: 0px;
พื้นหลัง: #DADADA;
-
/*กำหนดรูปแบบคอลัมน์ด้านขวาของหน้า*/
#right{ ตำแหน่ง: สัมบูรณ์;
ซ้าย:500px;
บนสุด:0px;
ความกว้าง:280px;
ขอบ: 0px;
การขยาย: 0px;
พื้นหลัง: #FFF; }
หมายเหตุ: ฉันใช้ POSITION: สัมบูรณ์; เมื่อกำหนดคอลัมน์กลางและ div คอลัมน์ด้านขวาแล้วกำหนด LEFT:200px;TOP:0px; และ LEFT:500px;TOP:0px; ตำแหน่งที่แน่นอนของเลเยอร์ กำหนดคอลัมน์กลางเป็น 200px จากขอบซ้ายของหน้าและ 0px จากด้านบน กำหนดคอลัมน์ขวาเป็น 500px จากขอบซ้ายของหน้าและ 0px จากด้านบน
ในขณะนี้ โค้ดของทั้งหน้าคือ:
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
<หัว>
<title>ยินดีต้อนรับสู่ "Web Designer" ใหม่: บทแนะนำมาตรฐานเว็บและการส่งเสริมการขาย</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿杰" />
<meta name="Copyright" content=" www.w3cn.org ลิขสิทธิ์ฟรี การทำซ้ำใดๆ" />
<meta name="description" content="นักออกแบบเว็บไซต์ใหม่ ไซต์แนะนำมาตรฐานเว็บ ส่งเสริมการประยุกต์ใช้มาตรฐานเว็บในประเทศจีน"
<meta content="มาตรฐานเว็บ, บทช่วยสอน, เว็บ, มาตรฐาน, xhtml, css, การใช้งาน, การเข้าถึง" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="ไอคอนทางลัด" href=" http://www.w3cn.org/favicon.ico " type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="ทั้งหมด" />
</หัว>
<ร่างกาย>
<div id="left">คอลัมน์ด้านซ้ายของหน้า</div>
<div id="middle">คอลัมน์กลางหน้า</div>
<div id="right">คอลัมน์ด้านขวาของหน้า</div>
</ร่างกาย>
</html>
ในขณะนี้ เอฟเฟกต์หน้าสามารถมองเห็นได้เพียงสามสี่เหลี่ยมสีเทาที่วางชิดกันและภาพพื้นหลังหนึ่งภาพเท่านั้น แต่อยากให้ส่วนสูงเต็มจอต้องทำอย่างไร?
ความสูงปรับได้ 4.100%?
เพื่อให้คอลัมน์ทั้งสามมีความสูงเท่ากัน ฉันลองตั้งค่า "height:100%;" ใน #left, #middle และ #right แต่พบว่าไม่มีเอฟเฟกต์การปรับความสูงที่คาดหวังเลย หลังจากพยายามไปบ้าง ฉันต้องกำหนดความสูงสัมบูรณ์ให้กับ div แต่ละรายการ: "height:1000px;" และเมื่อเนื้อหาเพิ่มขึ้น ฉันจึงต้องแก้ไขค่านี้อย่างต่อเนื่อง ไม่มีทางที่จะปรับความสูงได้เหรอ? เมื่อการศึกษาของ Ajie ลึกซึ้งขึ้น เขาก็ค้นพบวิธีแก้ปัญหาที่ยืดหยุ่น จริงๆ แล้ว ไม่จำเป็นต้องกำหนดไว้ 100% เลย วิธีนี้จะถูกนำเสนอโดยละเอียดในหัวข้อถัดไปของการศึกษา