CSS + HTML พื้นฐาน
CSS + HTML พื้นฐาน
โปรแกรมเมอร์กากกาก จะมานำเสนอ CSS พื้นฐาน หรือหน้า mail หลักกันนะครับ ลองมาดู Code กันเลยดีกว่า
Code CSS พื้นฐาน
*{
margin: 0px;
padding: 0px;
font: 12px verdana;
}
h1{
font: bold 20px verdana;
}
h2{
font: bold 14px verdana;
}
body{
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
#wrapper{
width: 1000px;
margin: 10px auto;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex: 1;
}
header{
background: green;
border: 2px solid red;
padding: 20px;
}
nav{
background: blue;
color: white;
}
nav li{
display: inline-block;
list-style: none;
padding: 5px;
color: white;
font: bold 14px verdana;
}
#sec_wrapper{
display: -webkit-box;
-webkit-box-orient: horizontal;
border:2px solid blue;
}
section{
/*border: 2px solid blue;*/
-webkit-box-flex: 1;
margin: 10px;
padding: 10px;
}
aside{
background: gray;
width: 220px;
margin: 0px;
text-align:center;
}
article{
padding: 10px;
margin-bottom: 10px;
font-size; 12px;
}
article header{
background: white;
padding: 0px;
border:none;
}
article footer{
text-align: right;
padding-right: 10px;
border: none;
background:none;
}
footer{
text-align: center;
padding: 20px;
font-size: 9px;
background: red;
}
มาดู Code ส่วนของ HTML 5 กันหน่อยนะครับ
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>First Do</title> | |
| <link rel = "stylesheet" href = "main.css" type="text/css"/> | |
| </head> | |
| <body> | |
| <div id = "wrapper"> | |
| <header> | |
| <h1> ยินดีตอนรับสู่ เว็บ อารมภ์ศิลป์</h1> | |
| </header> | |
| <nav> | |
| <ul> | |
| <li> หน้าแรก </li> | |
| <li> ผลงาน </li> | |
| <li> ช่องทางชำระเงิน </li> | |
| <li> ติดต่อเรา </li> | |
| </ul> | |
| </nav> | |
| <div id="sec_wrapper"> | |
| <section> | |
| <article> | |
| <header> | |
| <hgroup> | |
| <h1> ข่าวกีฬา </h1><br/> | |
| <h2>โรเจอร์ เฟเดอเรอร์ อดีตนักหวดหมายเลข 1 ของโลก </h2><br/> | |
| </hgroup> | |
| <p> | |
| โรเจอร์ เฟเดอเรอร์ อดีตนักหวดหมายเลข 1 ของโลก เตรียมจับแร็กเก็ตใหม่ลงเช็กฟอร์มอีกครั้ง ในศึกเทนนิส รายการ "สวิส โอเพน" ที่เมืองกัสตาด ประเทศบ้านเกิด ในวันพุธนี้ พร้อมชี้ว่ารู้สึกผ่อนคลายไม่ต้องเครียดมากหลังจากได้กลับมาแข่งที่นี่อีกครั้ง | |
| นักเทนนิสจอมเก๋าวัย 31 ปี เพิ่งถูก เฟเดริโก เดลโบนิส จากอาร์เจนตินา เขี่ยตกรอบรองชนะเลิศในรายการที่ฮัมบูร์ก เมื่อสัปดาห์ก่อน เตรียมกลับมาลงแข่งรายการ "สวิส โอเพน" ที่เมืองกัสตาด สวิตเซอร์แลนด์ในสัปดาห์นี้ พร้อมเป็นการลงทดสอบแร็กเก็ตใหม่ต่อเนื่องที่เปลี่ยนจากขนาดเดิม 90 ตารางนิ้วเป็น 98 ตารางนิ้ว เพื่อสร้างความคุ้นเคยและความมั่นใจมากขึ้นก่อนไปแข่งรายการ มอนทรีออล มาสเตอร์ส ที่แคนาดา | |
| "แร็กเก็ตนี้เพิ่งเปลี่ยนมาใช้ได้ไมกี่เดือน เราต้องทำความคุ้นเคยกับมัน ผมพยายามหารูปแบบในรุ่นที่ชอบมากที่สุดและผมจะลงเล่นในรายการที่กัสตาดด้วยแร็กเก็ตนี้ แผนของผมคือการเดินหน้าต่อไปพร้อมเจ้าไม้เทนนิสตัวใหม่นี้" เจ้าของแชมป์แกรนด์แสลม 17 รายการ กล่าว | |
| นอกจากนี้ "เฟดเอ็กซ์" ได้เผยว่าเขารู้สึกผ่อนคลายมากกับการเดินทางมาทัวร์นาเมนต์นี้ "กัสตาดเป็นรายการที่ยอดเยี่ยมมากจริงๆ คุณอาจจะอยากมาที่นี่ก่อนสัก 6 สัปดาห์เผื่อเตรียมตัว ผมมาที่นี้ด้วยความผ่อนคลาย และแม้จะมีประสบการณ์ที่นี่ไม่มากแต่ผมจะได้แสดงออกมาแน่นอน" | |
| สำหรับ เฟเดอเรอร์ ถูกจัดให้เป็นมือวางอันดับ 1 ของรายการและเตรียมลงแข่งขันในรอบที่ 2 รอพบกับ ดาเนียล แบรนด์ส จากเยอรมนีในวันพุธที่ 24 ก.ค. นี้ หลังจากได้สิทธิ์บายในรอบแรก | |
| </p> | |
| <footer>My name is ping</footer> | |
| </header> | |
| </article> | |
| </section> | |
| <aside> | |
| <h4>I love my dog.</h4> | |
| <p> It name's esy </p> | |
| </aside> | |
| </div> | |
| <footer> Copy Right 2012 - by ping</footer> | |
| </div> | |
| </body> | |
| </html> |
ก็ลองเอาไปทดสอบกันดูนะครับ ทางโปรแกรมเมอร์กากกาก หวังว่าคงเป็นประโยชน์ต่อท่านผู้ที่สนใจนะครับ
Categories
:
CSS
,
CSS พื้นฐาน
,
HTML
0 ความคิดเห็น :
แสดงความคิดเห็น