วิธีสร้างเค้าโครง 3 คอลัมน์ใน CSS

เค้าโครง CSS ต้องการให้คุณนึกถึงเค้าโครงเว็บไซต์ของคุณโดยรวมจากนั้นจึงนำชิ้นส่วนเหล่านี้มารวมกัน เรียนรู้วิธีการสร้างเค้าโครง 3 คอลัมน์แบบง่ายๆด้วย CSS

01 จาก 09

วาดเค้าโครงของคุณ

J Kyrnin

คุณสามารถวาดเค้าโครงบนกระดาษหรือใน โปรแกรมกราฟิก หากคุณมีโครงลวดหรือการออกแบบที่กว้างขึ้นในใจให้ลดความซับซ้อนลงในกล่องขั้นพื้นฐานที่ประกอบขึ้นมาในไซต์ การออกแบบที่มาพร้อมกับบทความนี้มีสามคอลัมน์ในพื้นที่เนื้อหาหลักรวมทั้งส่วนหัวและส่วนท้าย ถ้าคุณมองใกล้ ๆ คุณจะเห็นว่าสามคอลัมน์มีความกว้างไม่เท่ากัน

หลังจากที่เค้าโครงของคุณวาดขึ้นคุณสามารถเริ่มคิดขนาดได้ ตัวอย่างการออกแบบนี้จะมีมิติข้อมูลพื้นฐานต่อไปนี้:

02 จาก 09

เขียน Basic HTML / CSS และสร้าง Element คอนเทนเนอร์

เนื่องจากหน้านี้จะเป็นเอกสาร HTML ที่ถูกต้องโปรดเริ่มต้นด้วยที่เก็บ HTML เปล่า

Untitled Document </ title> </ head> <body> </ body> </ html> <p> เพิ่มในรูปแบบ CSS ขั้นพื้นฐานให้ <a href="https://th.eyewated.com/%E0%B9%83%E0%B8%8A%E0%B9%89-css/">เป็นศูนย์จากขอบหน้าขอบและการเบาะรองศีรษะ</a> ในขณะที่มี <a href="https://th.eyewated.com/%E0%B8%97%E0%B8%B3%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A-cascading-style-sheets-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-css/">สไตล์ CSS มาตรฐาน</a> อื่น ๆ สำหรับเอกสารใหม่รูปแบบเหล่านี้เป็นขั้นต่ำที่คุณต้องได้รับรูปแบบที่สะอาด เพิ่มไว้ในส่วนหัวของเอกสาร: </p> <style type = "text / css"> html, body {margin: 0px; padding: 0px; เส้นขอบ: 0px; } </ style> <p> เมื่อต้องการเริ่มสร้างเค้าโครงให้วางองค์ประกอบคอนเทนเนอร์ บางครั้งอาจเกิดขึ้นที่คุณสามารถลบคอนเทนเนอร์ได้ในภายหลัง แต่สำหรับรูปแบบความกว้างคงที่มากที่สุดการมีองค์ประกอบคอนเทนเนอร์ช่วยให้สามารถจัดการกับเว็บเบราเซอร์ต่างๆได้ง่ายขึ้น ดังนั้นในร่างกายใส่นี้: </p> <div id = "container"> </ div> <p> และในสไตล์ชีต CSS ให้ใส่: </p> #container {} <p> <strong>03 จาก 09</strong> </p> <h3> จัดรูปแบบคอนเทนเนอร์ </h3><p> คอนเทนเนอร์กำหนดว่าเนื้อหาของหน้าเว็บจะกว้างแค่ไหนรวมทั้งขอบด้านนอกและช่องว่างด้านใน สำหรับเอกสารนี้คอนเทนเนอร์มีขนาดกว้าง 870 พิกเซลและมีรางน้ำ 20 พิกเซลอยู่ทางด้านซ้าย รางน้ำถูกเซ็ตอัพด้วยรูปแบบส่วนขอบ แต่ช่องว่างบนคอนเทนเนอร์จะไม่ได้รับการตั้งค่าให้เป็นศูนย์เพื่อป้องกันไม่ให้องค์ประกอบใด ๆ ที่อยู่ใกล้กับภาชนะบรรจุ </p> #container {width: 870px; margin: 0 0 0 20px; / * ด้านขวาล่างซ้าย * / padding: 0; } <p> หากคุณบันทึกเอกสารไว้ในตอนนี้จะเห็นคอนเทนเนอร์ได้ยากเพราะไม่มีอะไรเลย หากคุณเพิ่มข้อความตัวยึดตำแหน่งคุณจะเห็นองค์ประกอบคอนเทนเนอร์ได้ชัดเจนยิ่งขึ้น </p> <p> <strong>04 จาก 09</strong> </p> <h3> ใช้ Headline Tag สำหรับ Header </h3><p> วิธีการที่คุณกำหนดสไตล์แถวส่วนหัวขึ้นอยู่กับสิ่งที่อยู่ในนั้น หากแถวส่วนหัวเป็นเพียงแค่จะมีโลโก้กราฟิกและบรรทัดแรกแล้วใช้แท็กบรรทัดแรก (<h1>) ทำให้รู้สึกมากกว่าการใช้ <div> คุณสามารถจัดรูปแบบพาดหัวได้เช่นเดียวกับที่คุณกำหนดสไตล์ div และหลีกเลี่ยงแท็กที่ไม่เกี่ยวข้อง </p> <p> HTML สำหรับแถวส่วนหัวไปที่ด้านบนสุดของคอนเทนเนอร์และมีลักษณะดังนี้: </p> <h1> แถวส่วนหัวของฉัน </ h1> <p> จากนั้นในการตั้งรูปแบบบนเส้นขอบสีแดงถูกเพิ่มไว้ที่ด้านล่างเพื่อให้คุณสามารถมองเห็นว่าส่วนไหนที่สิ้นสุดระยะขอบและช่องว่างที่กำหนดไว้เป็นศูนย์ออกความกว้างที่กำหนดไว้คือ 100% และความสูง 150px: </p> #container h1 {margin: 0; padding: 0; ความกว้าง: 100%; ความสูง: 150px; ลอย: ซ้าย; border-bottom: # c00 solid 3px; } <p> อย่าลืมลอยองค์ประกอบนี้ด้วย float: left; คุณสมบัติ กุญแจสำคัญในการเขียนเค้าโครง CSS คือการลอยทุกอย่าง - แม้กระทั่งสิ่งที่มีความกว้างเช่นเดียวกับคอนเทนเนอร์ ด้วยวิธีนี้คุณจะรู้ได้เสมอว่าองค์ประกอบใดจะอยู่บนหน้าเว็บ </p> <p> <a href="https://th.eyewated.com/css-descendant-selector-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/">ตัวเลือกลูกหลาน CSS</a> ใช้ลักษณะเฉพาะกับองค์ประกอบ H1 ที่อยู่ภายในองค์ประกอบ #container </p> <p> <strong>05 จาก 09</strong> </p> <h3> เพื่อให้ได้คอลัมน์สามคอลัมน์โดยเริ่มจากการสร้างสองคอลัมน์ </h3><p> เมื่อคุณสร้างเค้าโครงสามคอลัมน์ด้วย CSS คุณต้องแบ่งเค้าโครงของคุณออกเป็นสองกลุ่ม ดังนั้นสำหรับรูปแบบสามคอลัมน์นี้คอลัมน์กลางและด้านขวาและจัดกลุ่มและวางไว้ถัดจากคอลัมน์ทางซ้ายในรูปแบบสองคอลัมน์ที่คอลัมน์ด้านซ้ายกว้าง 250px และคอลัมน์ด้านขวากว้าง 610px (แต่ละคอลัมน์ 300 สำหรับคอลัมน์สองคอลัมน์ , บวก 10px สำหรับรางน้ำระหว่างพวกเขา) </p> <p> HTML มีลักษณะดังนี้: </p> <div id = "col1"> <p> Ut aliquip ex ea commodo consequat. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. ในการต่อต้านการออกกำลังกายในขณะนอนหลับ eu fugiat nulla pariatur คุณควรจะได้รับการยอมรับจากผู้เชี่ยวชาญด้านการจัดหาแรงงานที่มีผลกระทบต่อการดำเนินงานของ บริษัท </ p> </ div> <div id = "col2outer"> <p> Ut enim ad minim veniam, sed us eusmod tempor incididunt ullamco laboris nisi. Ut labore และ dolore magna aliqua คุณจะได้รับการช่วยเหลือจากผู้อื่น </ p> </ div> <p> ข้อความตัวยึดตำแหน่งในคอลัมน์จะทำให้มองเห็นได้มากขึ้นเมื่อทดสอบ CSS มีลักษณะดังนี้: </p> #container # col1 {ความกว้าง: 250px; ลอย: ซ้าย; } #container # col2outer {width: 610px; ลอย: ขวา; margin: 0; padding: 0; } <p> คอลัมน์ด้านซ้ายจะลอยไปทางซ้ายขณะที่อีกด้านหนึ่งลอยไปทางขวา เนื่องจากความกว้างรวมของทั้งสองคอลัมน์เป็น 860px มีรางน้ำ 10px อยู่ระหว่างกัน </p> <p> <strong>06 จาก 09</strong> </p> <h3> เพิ่มคอลัมน์สองคอลัมน์ภายในคอลัมน์ที่สองกว้าง </h3><p> ในการสร้างคอลัมน์สามคอลัมน์ให้เพิ่ม div สองส่วนภายในคอลัมน์ที่สองที่กว้างขึ้นเช่นเดียวกับที่คุณเพิ่ม div 2 รายการภายในคอลัมน์คอนเทนเนอร์ในขั้นตอนสุดท้าย HTML มีลักษณะดังนี้: </p> <div id = "col2outer"> <div id = "col2mid"> <p> ไม่อนุญาตให้มีการใช้ข้อมูลร่วมกัน Ut labore และ dolore magna aliqua </ p> </ div> <div> </ div> <div> </ div> <font> </ div> <div> </ div> <div> </ div> <div> Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. มันเป็นเรื่องที่สำคัญที่สุดในชีวิตของคุณ </ p> </ div> </ div> </ p> <p> <p> CSS มีลักษณะดังนี้: </p> # col2outer # col2mid {กว้าง: 300px; ลอย: ซ้าย; # col2outer # col2side {width: 300px; ลอย: ขวา; } <p> เนื่องจากทั้งสองกล่องกว้าง 300px อยู่ภายในกล่องกว้าง 610px จะมีรางน้ำอีก 10px อยู่ระหว่างกัน </p> <p> <strong>07 จาก 09</strong> </p> <h3> เพิ่มในส่วนท้าย </h3><p> ขณะที่ส่วนที่เหลือของเพจถูกจัดรูปแบบคุณสามารถเพิ่มในส่วนท้ายได้ ใช้ div สุดท้ายที่มีรหัส "ท้าย" และเพิ่มเนื้อหาเพื่อให้คุณสามารถดูได้ นอกจากนี้คุณยังสามารถเพิ่มเส้นขอบที่ด้านบนเพื่อที่คุณจะได้ทราบว่าจะเริ่มจากที่ไหน </p> <p> HTML: </p> <div id = "footer"> <p> ลิขสิทธิ์© 2017 </ p> </ div> <p> CSS: </p> #container #footer {float: left; ความกว้าง: 870px; border-top: # c00 แบบทึบ 3px; } <p> <strong>08 จาก 09</strong> </p> <h3> เพิ่มในสไตล์และเนื้อหาส่วนบุคคลของคุณ </h3><p> ตอนนี้คุณมีเค้าโครงเสร็จแล้วคุณสามารถเริ่มต้นเพิ่มสไตล์และเนื้อหาส่วนตัวของคุณเองได้ โปรดจำไว้ว่าขอบบนส่วนหัวและท้ายกระดาษถูกเพิ่มเพื่อแสดงส่วนเค้าโครงโดยเฉพาะสำหรับการออกแบบ </p> <p> <strong>09 จาก 09</strong> </p> <h3> Final HTML / CSS </h3><p> นี่คือเอกสารทั้ง HTML และ CSS: </p> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" เนื้อหาเนื้อหาประเภท "content =" text / html; charset = utf-8 "/> <title> Untitled Document </ title> <type type = "text / css"> html, body {ขอบ: 0px; padding: 0px; เส้นขอบ: 0px; } #container {width: 870px; margin: 0 0 0 20px; / * ด้านขวาล่างซ้าย * / padding: 0; สีพื้นหลัง: #fff; } #container h1 {margin: 0; padding: 0; ความกว้าง: 100%; ความสูง: 150px; ลอย: ซ้าย; border-bottom: # c00 solid 3px; } #container # col1 {width: 250px; ลอย: ซ้าย; } #container # col2outer {width: 610px; ลอย: ขวา; margin: 0; padding: 0; # col2outer # col2mid {width: 300px; ลอย: ซ้าย; # col2outer # col2side {width: 300px; ลอย: ขวา; } #container #footer {float: left; ความกว้าง: 870px; border-top: # c00 แบบทึบ 3px; </ div> <div> <div class = 'story_text'> </ div> <div class = 'story_text'> </ h1> / div> <div id = "col2side"> <p> </ div> <div> <div> <p> Nam Libero tempore. </ p> </ div> </ div> <div class = 'story_text'> </ div> <div class = 'story_text'> </ p> </ div> </ div> </ </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%97%E0%B8%B3%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B9%80%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B9%83%E0%B8%88-css-float/"> <amp-img src="https://exse.eyewated.com/pict/26ae6d06d2733294-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%97%E0%B8%B3%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B9%80%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B9%83%E0%B8%88-css-float/">ทำความเข้าใจ CSS Float</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%99%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%AB%E0%B8%B2%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B9%88/"> <amp-img src="https://exse.eyewated.com/pict/049d95d89eac3a60-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%99%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%AB%E0%B8%B2%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B9%88/">การสร้างเนื้อหาแบบเลื่อนใน HTML5 และ CSS3 โดยไม่ใช้ MARQUEE</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/css-descendant-selector-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/"> <amp-img src="https://exse.eyewated.com/pict/aa4897828e4c329a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/css-descendant-selector-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/">CSS Descendant Selector คืออะไร?</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-css-selector/"> <amp-img src="https://exse.eyewated.com/pict/6fe96cd6b2ae3300-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-css-selector/">เรียนรู้อะไร CSS Selector</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%81%E0%B8%97%E0%B9%87%E0%B8%81%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%AD%E0%B8%B1%E0%B8%81%E0%B8%A9%E0%B8%A3%E0%B9%80%E0%B8%97%E0%B8%B5%E0%B8%A2%E0%B8%9A%E0%B8%81%E0%B8%B1%E0%B8%9A-cascading-style/"> <amp-img src="https://exse.eyewated.com/pict/6d2b7e25b9f23181-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%81%E0%B8%97%E0%B9%87%E0%B8%81%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%AD%E0%B8%B1%E0%B8%81%E0%B8%A9%E0%B8%A3%E0%B9%80%E0%B8%97%E0%B8%B5%E0%B8%A2%E0%B8%9A%E0%B8%81%E0%B8%B1%E0%B8%9A-cascading-style/">แท็กแบบอักษรเทียบกับ Cascading Style Sheets (CSS)</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%99%E0%B8%B4%E0%B8%A2%E0%B8%B2%E0%B8%A1%E0%B8%82%E0%B8%AD%E0%B8%87-css-property/"> <amp-img src="https://exse.eyewated.com/pict/3a2920899cf83249-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%99%E0%B8%B4%E0%B8%A2%E0%B8%B2%E0%B8%A1%E0%B8%82%E0%B8%AD%E0%B8%87-css-property/">นิยามของ CSS Property</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%A2%E0%B8%88%E0%B8%B8%E0%B8%A5%E0%B8%A0%E0%B8%B2%E0%B8%84%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1/"> <amp-img src="https://exse.eyewated.com/pict/2fec7cdccd2f38f7-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%A2%E0%B8%88%E0%B8%B8%E0%B8%A5%E0%B8%A0%E0%B8%B2%E0%B8%84%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1/">เครื่องหมายจุลภาคสำหรับ CSS Selectors คืออะไร?</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/z-index-%E0%B9%83%E0%B8%99-css/"> <amp-img src="https://exse.eyewated.com/pict/a94683f8de32307d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/z-index-%E0%B9%83%E0%B8%99-css/">Z-Index ใน CSS</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%81%E0%B8%99%E0%B8%B0%E0%B8%99%E0%B8%B3-css3/"> <amp-img src="https://exse.eyewated.com/pict/1ff4661d0ba8312e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%81%E0%B8%99%E0%B8%B0%E0%B8%99%E0%B8%B3-css3/">การแนะนำ CSS3</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>See Newest</h2> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/dhclient-%E0%B8%84%E0%B8%B3%E0%B8%AA%E0%B8%B1%E0%B9%88%E0%B8%87-linux-unix/">Dhclient - คำสั่ง Linux / Unix</a></h3> <div class="amp-related-meta"> ลินุกซ์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%94%E0%B8%B9%E0%B9%81%E0%B8%A5%E0%B8%A3%E0%B8%B0%E0%B8%9A%E0%B8%9A%E0%B8%97/"> <amp-img src="https://exse.eyewated.com/pict/5c3e57a53be831f7-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%94%E0%B8%B9%E0%B9%81%E0%B8%A5%E0%B8%A3%E0%B8%B0%E0%B8%9A%E0%B8%9A%E0%B8%97/">เครื่องมือการดูแลระบบที่ซ่อนอยู่ของ Windows 8</a></h3> <div class="amp-related-meta"> ของ windows </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/dhcp-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-dynamic-host-configuration-protocol/"> <amp-img src="https://exse.eyewated.com/pict/dcb57d5209c53f69-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/dhcp-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-dynamic-host-configuration-protocol/">DHCP คืออะไร? (Dynamic Host Configuration Protocol)</a></h3> <div class="amp-related-meta"> อินเทอร์เน็ตและเครือข่าย </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%89%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%9E%E0%B8%B4%E0%B9%88%E0%B8%87%E0%B8%A1%E0%B8%B5-ipad-%E0%B8%A1%E0%B8%B5%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3%E0%B9%83%E0%B8%AB%E0%B8%A1%E0%B9%88/"> <amp-img src="https://exse.eyewated.com/pict/03e710156f8e32fd-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%89%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%9E%E0%B8%B4%E0%B9%88%E0%B8%87%E0%B8%A1%E0%B8%B5-ipad-%E0%B8%A1%E0%B8%B5%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3%E0%B9%83%E0%B8%AB%E0%B8%A1%E0%B9%88/">ฉันเพิ่งมี iPad ... มีอะไรใหม่?</a></h3> <div class="amp-related-meta"> IPad </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/7-4/"> <amp-img src="https://exse.eyewated.com/pict/52d8709f6dad342a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/7-4/">7 ข้อควรพิจารณาก่อนเริ่มธุรกิจ DJ</a></h3> <div class="amp-related-meta"> โฮมเธียเตอร์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B8%AA%E0%B8%B2%E0%B8%A1%E0%B8%B2%E0%B8%A3%E0%B8%96%E0%B8%AA%E0%B9%88%E0%B8%87%E0%B8%AD%E0%B8%B5%E0%B9%80%E0%B8%A1%E0%B8%A5%E0%B9%83%E0%B8%99-apple-mail/"> <amp-img src="https://exse.eyewated.com/pict/86e8c253a3b43202-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B8%AA%E0%B8%B2%E0%B8%A1%E0%B8%B2%E0%B8%A3%E0%B8%96%E0%B8%AA%E0%B9%88%E0%B8%87%E0%B8%AD%E0%B8%B5%E0%B9%80%E0%B8%A1%E0%B8%A5%E0%B9%83%E0%B8%99-apple-mail/">ไม่สามารถส่งอีเมลใน Apple Mail</a></h3> <div class="amp-related-meta"> ซอฟต์แวร์และแอป </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%A7-logitech-classic-keyboard-200/"> <amp-img src="https://exse.eyewated.com/pict/5b26ebd070583526-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%A7-logitech-classic-keyboard-200/">รีวิว: Logitech Classic Keyboard 200</a></h3> <div class="amp-related-meta"> ของ windows </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/onedrive-%E0%B9%83%E0%B8%99-windows-10-%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B9%81%E0%B8%9A%E0%B9%88%E0%B8%87/"> <amp-img src="https://exse.eyewated.com/pict/d1f31c507070369c-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/onedrive-%E0%B9%83%E0%B8%99-windows-10-%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B9%81%E0%B8%9A%E0%B9%88%E0%B8%87/">OneDrive ใน Windows 10: บ้านแบ่ง</a></h3> <div class="amp-related-meta"> ของ windows </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/top-6-sites-shopping-%E0%B8%A2%E0%B8%AD%E0%B8%94%E0%B8%99%E0%B8%B4%E0%B8%A2%E0%B8%A1%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/"> <amp-img src="https://exse.eyewated.com/pict/6d22da87af1335f4-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/top-6-sites-shopping-%E0%B8%A2%E0%B8%AD%E0%B8%94%E0%B8%99%E0%B8%B4%E0%B8%A2%E0%B8%A1%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/">Top 6 Sites Shopping ยอดนิยมออนไลน์</a></h3> <div class="amp-related-meta"> เว็บ & ค้นหา </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%80%E0%B8%AB%E0%B8%95%E0%B8%B8%E0%B8%9C%E0%B8%A5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%84%E0%B8%A7%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%A7%E0%B8%B4%E0%B8%94%E0%B8%B5%E0%B9%82%E0%B8%AD%E0%B8%9A/"> <amp-img src="https://exse.eyewated.com/pict/4480d8c9b1643cd9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%80%E0%B8%AB%E0%B8%95%E0%B8%B8%E0%B8%9C%E0%B8%A5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%84%E0%B8%A7%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%A7%E0%B8%B4%E0%B8%94%E0%B8%B5%E0%B9%82%E0%B8%AD%E0%B8%9A/">เหตุผลที่ควรใช้วิดีโอบนเว็บไซต์ของคุณ</a></h3> <div class="amp-related-meta"> เว็บ & ค้นหา </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%97%E0%B8%B3%E0%B9%84%E0%B8%A1%E0%B8%84%E0%B8%B8%E0%B8%93%E0%B8%84%E0%B8%A7%E0%B8%A3%E0%B9%80%E0%B8%9B%E0%B8%A5%E0%B8%B5%E0%B9%88%E0%B8%A2%E0%B8%99%E0%B8%A3%E0%B8%AB%E0%B8%B1%E0%B8%AA%E0%B8%9C/"> <amp-img src="https://exse.eyewated.com/pict/5765a41d2adf3409-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%97%E0%B8%B3%E0%B9%84%E0%B8%A1%E0%B8%84%E0%B8%B8%E0%B8%93%E0%B8%84%E0%B8%A7%E0%B8%A3%E0%B9%80%E0%B8%9B%E0%B8%A5%E0%B8%B5%E0%B9%88%E0%B8%A2%E0%B8%99%E0%B8%A3%E0%B8%AB%E0%B8%B1%E0%B8%AA%E0%B8%9C/">ทำไมคุณควรเปลี่ยนรหัสผ่านเริ่มต้นบนเครือข่าย Wi-Fi</a></h3> <div class="amp-related-meta"> อินเทอร์เน็ตและเครือข่าย </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%AB%E0%B8%A5%E0%B8%B5%E0%B8%81%E0%B9%80%E0%B8%A5%E0%B8%B5%E0%B9%88%E0%B8%A2%E0%B8%87%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%94%E0%B8%B2%E0%B8%A7%E0%B8%99%E0%B9%8C%E0%B9%82%E0%B8%AB%E0%B8%A5%E0%B8%94/"> <amp-img src="https://exse.eyewated.com/pict/505f42b649e537b9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%AB%E0%B8%A5%E0%B8%B5%E0%B8%81%E0%B9%80%E0%B8%A5%E0%B8%B5%E0%B9%88%E0%B8%A2%E0%B8%87%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%94%E0%B8%B2%E0%B8%A7%E0%B8%99%E0%B9%8C%E0%B9%82%E0%B8%AB%E0%B8%A5%E0%B8%94/">หลีกเลี่ยงการดาวน์โหลดโฟลเดอร์อีเมลจดหมายขยะของ Yahoo Mail</a></h3> <div class="amp-related-meta"> อีเมลและข้อความ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/tekken-tag-tournament-cheats-%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1%E0%B8%9A-ps2/"> <amp-img src="https://exse.eyewated.com/pict/a801543bb5f63630-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/tekken-tag-tournament-cheats-%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1%E0%B8%9A-ps2/">Tekken Tag Tournament Cheats สำหรับ PS2</a></h3> <div class="amp-related-meta"> การเล่นเกม </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A5%E0%B8%9A%E0%B8%AD%E0%B8%B5%E0%B9%80%E0%B8%A1%E0%B8%A5%E0%B9%83%E0%B8%99-outlook/"> <amp-img src="https://exse.eyewated.com/pict/d5fbec319c3e2f0d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A5%E0%B8%9A%E0%B8%AD%E0%B8%B5%E0%B9%80%E0%B8%A1%E0%B8%A5%E0%B9%83%E0%B8%99-outlook/">วิธีการลบอีเมลใน Outlook อย่างถาวร</a></h3> <div class="amp-related-meta"> อีเมลและข้อความ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A5%E0%B8%9A%E0%B8%A3%E0%B8%B2%E0%B8%A3%E0%B8%B5%E0%B8%AA%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B9%83%E0%B8%99-vlc/"> <amp-img src="https://exse.eyewated.com/pict/449bf668480b356f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A5%E0%B8%9A%E0%B8%A3%E0%B8%B2%E0%B8%A3%E0%B8%B5%E0%B8%AA%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B9%83%E0%B8%99-vlc/">การสร้างไลบรารีสื่อใน VLC Player</a></h3> <div class="amp-related-meta"> ซอฟต์แวร์และแอป </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%80%E0%B8%81%E0%B9%87%E0%B8%9A-gadget/">วิธีเก็บ Gadget ไว้ในที่อากาศร้อน</a></h3> <div class="amp-related-meta"> เว็บ & ค้นหา </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%95%E0%B8%B4%E0%B8%94%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87%E0%B9%81%E0%B8%97%E0%B9%88%E0%B8%99%E0%B8%A7%E0%B8%B2%E0%B8%87%E0%B8%97%E0%B8%B5%E0%B8%A7%E0%B8%B5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%94/">ติดตั้งแท่นวางทีวีที่ดีที่สุด 8 ช่องเพื่อซื้อในปีพ. ศ. 2561</a></h3> <div class="amp-related-meta"> คู่มือการซื้อ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B9%89%E0%B9%84%E0%B8%82-0x0000005a-bsod-critical_service_failed-2/"> <amp-img src="https://exse.eyewated.com/pict/314bec381dce3a5f-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B9%89%E0%B9%84%E0%B8%82-0x0000005a-bsod-critical_service_failed-2/">วิธีการแก้ไขข้อผิดพลาด STOP 0x0000005A</a></h3> <div class="amp-related-meta"> ของ windows </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%94%E0%B8%B9%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%88%E0%B8%B2%E0%B8%81-infotainment-system-%E0%B8%82%E0%B8%AD%E0%B8%87-gm-intellilink/"> <amp-img src="https://exse.eyewated.com/pict/4ffd94ce0de536da-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%94%E0%B8%B9%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%88%E0%B8%B2%E0%B8%81-infotainment-system-%E0%B8%82%E0%B8%AD%E0%B8%87-gm-intellilink/">ดูข้อมูลจาก Infotainment System ของ GM Intellilink</a></h3> <div class="amp-related-meta"> Car Tech </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89-twitter/"> <amp-img src="https://exse.eyewated.com/pict/659c97ddf60831d8-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89-twitter/">วิธีการใช้ Twitter เป็นเครือข่ายทางสังคม</a></h3> <div class="amp-related-meta"> สื่อสังคม </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%84%E0%B8%9F%E0%B8%A5%E0%B9%8C-alp-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/"> <amp-img src="https://exse.eyewated.com/pict/bf1de19cf9ca32c9-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%84%E0%B8%9F%E0%B8%A5%E0%B9%8C-alp-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/">ไฟล์ ALP คืออะไร?</a></h3> <div class="amp-related-meta"> ของ windows </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%80%E0%B8%AB%E0%B8%95%E0%B8%B8%E0%B8%9C%E0%B8%A5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%94%E0%B8%B5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%84%E0%B8%B8%E0%B8%93%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B8%84%E0%B8%A7/"> <amp-img src="https://exse.eyewated.com/pict/f0c2d559f9fd38ae-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%80%E0%B8%AB%E0%B8%95%E0%B8%B8%E0%B8%9C%E0%B8%A5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%94%E0%B8%B5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%84%E0%B8%B8%E0%B8%93%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B8%84%E0%B8%A7/">เหตุผลที่ดีที่คุณไม่ควรซื้อ Hoverboards</a></h3> <div class="amp-related-meta"> คู่มือการซื้อ </div> </div> </div> </div></article> <footer class="amp-wp-footer"> <div class="amp-wp-footer-inner"> <a href="#" class="back-to-top">Back to top</a> <p class="copyright"> © 2024 th.eyewated.com </p> <div class="amp-wp-social-footer"> <a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a> </div> </div> </footer> <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/"> </amp-pixel> </div> </body> </html> <!-- Dynamic page generated in 1.192 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-04 00:23:27 --> <!-- 0.003 -->