คำตอบที่ได้รับเลือกจากเจ้าของกระทู้
ความคิดเห็นที่ 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 ไหนได้บ้าง
แสดงความคิดเห็น
สอบทำเว็บแสดงผลแนวๆ เว็บ Pinterest หน่อยครับ