จำนวนคนเข้าดู: 402

แบ่ง Layouts อย่างสวยงาม ทำง่ายมากๆ เลยครับ

ผมก็จะมาสอนการแบ่ง แบ่ง Layouts แบบเรียบๆ โดยจะมีดังนี้

header
menu
main
footer

ผมก็มี Code ไว้ให้แล้วนะครับ copy แล้วรันได้เลย

Code

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: #3498DB;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;

}
   
nav ul a {
    text-decoration: none;

}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;

&lt;header&gt;
   &lt;h1&gt;DEVTAI.COM&lt;/h1&gt;
&lt;/header&gt;
  
&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="http://devtai.com/"&gt;CODE&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://devtai.com/"&gt;HTML&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://devtai.com/"&gt;CSS&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;

&lt;article&gt;
  &lt;h1&gt;devtai.com&lt;/h1&gt;
  &lt;p&gt;สอนทำเว็บด้วยภาษา PHP+MySQli+Database [สอนเทคนิคต่างๆ และพื้นฐาน HTML,CSS,BOOSTRAP และ VB]&lt;/p&gt;
  &lt;p&gt;Teaching the web with language PHP + MySQli + Database [Teaches various techniques and basic HTML, CSS, BOOSTRAP and VB]&lt;/p&gt;
&lt;/article&gt;

&lt;footer&gt;Copyright &amp;copy; devtai.com&lt;/footer&gt;

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<style>

div.container {

width: 100%;

border: 1px solid gray;

}

header, footer {

padding: 1em;

color: white;

background-color: #3498DB;

clear: left;

text-align: center;

}

nav {

float: left;

max-width: 160px;

margin: 0;

padding: 1em;

}

nav ul {

list-style-type: none;

padding: 0;

}

nav ul a {

text-decoration: none;

}

article {

margin-left: 170px;

border-left: 1px solid gray;

padding: 1em;

overflow: hidden;

}

</style>

</head>

<body>

<h1>DEVTAI.COM</h1>

</header>

<nav>

<ul>

</ul>

</nav>

<h1>devtai.com</h1>

<p>สอนทำเว็บด้วยภาษา PHP+MySQli+Database [สอนเทคนิคต่างๆ และพื้นฐาน HTML,CSS,BOOSTRAP และ VB]</p>

<p>Teaching the web with language PHP + MySQli + Database [Teaches various techniques and basic HTML, CSS, BOOSTRAP and VB]</p>

</article>

</div>

</body>

</html>

ฝากกดติดตาม YouTube ด้วยนะคร้าฟ

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

CODE EDITOR HTML TEXT EDITOR

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

แบ่ง Layouts แบบเรียบๆ อย่างสวยงาม By devtai.com

แบ่ง Layouts อย่างสวยงาม ทำง่ายมากๆ เลยครับ

Code

Related

วัยวุฒิ ชุมเมืองปัก

แบ่ง Layouts อย่างสวยงาม ทำง่ายมากๆ เลยครับ

Code

Share this:

Related

วัยวุฒิ ชุมเมืองปัก