คำตอบที่ได้รับเลือกจากเจ้าของกระทู้
ความคิดเห็นที่ 2
CSS คือคำตอบครับ ลองข้างล่างนี้ดูนะครับ copy แล้วเอาไป paste ใน nodepad แล้ว save เป็น .html
<html>
<head>
<style>
ul { margin:0; padding:0; }
li { float:left; width:100px; height:100px; padding:10px; margin:10px; display:block; background:#ccc; border-radius:5px;
border-color:#ddd gray #ddd gray; box-shadow: 2px 2px 5px #ededed; }
</style>
</head>
<body>
<ul>
<li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li>
<li>10</li><li>11</li><li>12</li>
</ul>
</body>
</html>
เปิดด้วย browser ที่รัน HTML5 ได้นะครับ ซึ่งจะเห็นว่าใน code html ไม่มีอะไรเลย สิ่งที่คุมการแสดงผลคือ CSS ในส่วน head ครับ ต่อไปก็เริ่มจากแกะทีละคำสั่งของ CSS ครับ ว่าแต่ละคำสั่ง เขียนลงไปแล้ว ก่อให้เกิดการแสดงผลแบบไหน อย่างไร ใช้กับ Browser ไหนได้บ้าง
<html>
<head>
<style>
ul { margin:0; padding:0; }
li { float:left; width:100px; height:100px; padding:10px; margin:10px; display:block; background:#ccc; border-radius:5px;
border-color:#ddd gray #ddd gray; box-shadow: 2px 2px 5px #ededed; }
</style>
</head>
<body>
<ul>
<li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li>
<li>10</li><li>11</li><li>12</li>
</ul>
</body>
</html>
เปิดด้วย browser ที่รัน HTML5 ได้นะครับ ซึ่งจะเห็นว่าใน code html ไม่มีอะไรเลย สิ่งที่คุมการแสดงผลคือ CSS ในส่วน head ครับ ต่อไปก็เริ่มจากแกะทีละคำสั่งของ CSS ครับ ว่าแต่ละคำสั่ง เขียนลงไปแล้ว ก่อให้เกิดการแสดงผลแบบไหน อย่างไร ใช้กับ Browser ไหนได้บ้าง
แสดงความคิดเห็น
อ่านกระทู้อื่นที่พูดคุยเกี่ยวกับ
กราฟิกดีไซน์ (Graphic Design)
สอบทำเว็บแสดงผลแนวๆ เว็บ Pinterest หน่อยครับ