การจัดวางเว็บไซต์แบบคอลัมน์เดียวแบบง่ายๆ ใน CSS

ในบทเรียนนี้ เราจะฝึกสร้าง การจัดวางเว็บไซต์แบบคอลัมน์เดียวแบบง่ายๆ ลองมา สร้างตัวอย่างการจัดวางแบบนี้กัน:

มาเริ่มลงมือทำกัน โดยทั่วไปการจัดวางแต่ละครั้งมักจะ เริ่มต้นด้วย div หลักชื่อ wrapper ซึ่งครอบคลุมเนื้อหาทั้งหมดของเว็บไซต์:

html<div id="wrapper">
  
</div>

ในกรณีของเรา wrapper จะถูกจัดวางไว้ตรงกลาง หน้าจอ:

css#wrapper {
  width: 800px;
  margin: 50px auto;
}

และยังมีเส้นขอบด้วย:

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

ทีนี้มาสร้างโครงสร้างหลักของหน้าจากัน มันจะประกอบด้วยเมนูและเนื้อหา หลัก - คอนเทนต์:

html<div id="wrapper">
  <div id="menu">
    
  </div>
  <div id="content">
    
  </div>
</div>

มาเพิ่มเนื้อหาเข้าไปในบล็อกของเรา:

html<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

ตอนนี้สามารถเพิ่มสไตล์ให้กับบล็อกของเราได้แล้ว มาเพิ่มสไตล์ให้กับเมนูกัน:

css#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

และตอนนี้มาเพิ่มสไตล์ให้กับองค์ประกอบเนื้อหา:

css#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

ตอนนี้เราสามารถรวบรวมโค้ดทั้งหมดเข้าด้วยกันได้:

html<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

คำแนะนำที่ 1

สะดวกที่สุดคือการกำหนดระยะห่างจากบนลงล่าง ตัวอย่างเช่น เรามีเมนูและเนื้อหา และระหว่างพวกมัน - มีพื้นที่ว่าง เห็นได้ชัดว่า พื้นที่นี้สามารถสร้างได้จากระยะห่างด้านล่าง ของเมนู, ระยะห่างด้านบนของเนื้อหา, หรือผลกระทบพร้อมกันของทั้งสองอย่าง ในกรณีนี้ ควรกำหนดระยะห่างด้านล่างให้กับเมนู และลบระยะห่างด้านบน padding และ margin เริ่มต้น สำหรับ h1 ออกจากเนื้อหา

คำแนะนำที่ 2

องค์ประกอบลูกไม่ควรสร้างระยะห่างระหว่าง องค์ประกอบแม่ ตัวอย่างเช่น เรามีเมนู ระยะห่างด้านล่างของเมนูนี้สามารถสร้างได้ จาก margin ของ div ที่มีเมนู หรือ margin ของลิงก์ ควรเลือกตัวเลือกแรก เนื่องจาก ลิงก์ไม่ควรทำงานข้ามหัวของ องค์ประกอบแม่

คำแนะนำที่ 3

สมมติว่ามีระยะห่างระหว่างสององค์ประกอบ และในกรณีนี้ ไม่มีความแตกต่างทางสายตา ว่าจะเลือกอะไรสำหรับระยะห่าง - margin หรือ padding ในกรณีนี้ให้เลือก margin เนื่องจาก มันคือสิ่งที่ควรสร้างระยะห่างระหว่าง องค์ประกอบ

แบบฝึกหัด