ข่าว IT ล่าสุด
ถูกใจอย่าลืม Like Fanpage
จัดหน้าเว็บให้สวยงามด้วย Div และ CSS ใช้แทน Table
แสดงแล้ว 7336 ครั้ง /
ธันวาคม 10, 2010, 18:35

Moshi

ออฟไลน์
กระทู้ : 16,996
คะแนนขอบคุณ : 45
it4x สังคมแห่งการเรียนรู้
จัดหน้าเว็บให้สวยงามด้วย Div และ CSS ใช้แทน Table

ให้ลอง Copy Code นี้ไปวางที่ Dreamweaver หรือ NOtepad แล้ว Save เป็น .html ดูนะครับ

โค๊ด: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>à¸à¸²à¸£à¹à¸à¹ DIV à¸à¸±à¸ CSS</title><br /><style type="text/css"><br />#t-body {<br />&nbsp;  width:800px;/*à¸à¸à¸²à¸à¸à¸§à¸²à¸¡à¸à¸§à¹à¸²à¸à¸à¸­à¸à¹à¸à¸*/<br />&nbsp;  margin:0px auto;<br />}<br />#header{ margin:0 0 10px 0; padding:10px; height:100px; background-color:#FF0000;}/* margin: à¸à¸ à¸à¸§à¸² ลà¹à¸²à¸ à¸à¹à¸²à¸¢; à¸à¸²à¸¡à¹à¸à¹à¸¡à¸à¸²à¸¬à¸´à¸à¸²à¸à¸£à¸±à¸*/<br />#left{ float:left; width:200px; margin:0 0 10px 0; height:200px;}<br />#content{ float:right; width:590px; margin:0 0 10px 10px; height:200px; background-color:#00FFCC;}<br />#footer{clear:both; padding:20px; height:40px; background-color:#00FF00;}<br />ul,li {<br />list-style:none;<br />margin:0;<br />padding:0;<br />}<br />#menu {<br />border:solid 1px #f5f5f5;<br />}<br />.menu {<br />background-image:url(blue-grad.png);<br />font-size:14px;<br />height:22px;<br />margin:0;<br />padding:2px 0 0 10px;<br />}<br />.menu-sub1 {<br />border-bottom:solid 1px #f5f5f5;<br />cursor:pointer;<br />font-size:12px;<br />margin:1px 0;<br />padding:0 0 1px 20px;<br />}<br />.menu-sub2 {<br />background-image:url(blue-grad.png);<br />border-bottom:solid 1px #f5f5f5;<br />cursor:pointer;<br />font-size:12px;<br />margin:1px 0;<br />padding:0 0 1px 20px;<br />}<br />.menu img,.menu-sub1 img,.menu-sub2 img {<br />border:none;<br />}<br /></style><br /></head><br /><body><br /><div id="t-body"><br /><div id="header">Head</div><br /><div id="left"><br /><div id="menu"><br /><ul><br /><li class="menu">Menu</li><br /><li class="menu-sub1" onmouseover="this.className = &#39;menu-sub2&#39;" onmouseout="this.className = &#39;menu-sub1&#39;" onclick="this.className = &#39;menu-sub2&#39;"><a href="#">Home</a></li><br /><li class="menu-sub1" onmouseover="this.className = &#39;menu-sub2&#39;" onmouseout="this.className = &#39;menu-sub1&#39;" onclick="this.className = &#39;menu-sub2&#39;"><a href="#">Profile</a></li><br /><li class="menu-sub1" onmouseover="this.className = &#39;menu-sub2&#39;" onmouseout="this.className = &#39;menu-sub1&#39;" onclick="this.className = &#39;menu-sub2&#39;"><a href="#">About</a></li><br /></ul><br /></div><br /></div><br /><div id="content">Content</div><br /><div id="footer">footer</div><br /></div><br /></body><br /></html>
แล้วลองศึกษาจากโค้ดดู เข้าใจง่ายครับ


 

ด้วยฟังค์ชั่น ตอบด่วน คุณสามารถใช้โค๊ดและ เครื่องหมายแสดงอารมณ์ได้ เหมือนการตั้งกระทู้ธรรมดา แต่สามารถทำได้สะดวกกว่า

ระวัง: หัวข้อนี้ไม่มีการอัพเดทมานานถึง 120 วัน

แจ้งเตือน: โพสของคุณจะไม่แสดงจนกว่าผู้ดูแลจะอนุมัติ.
ชื่อ: อีเมล์: