Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!

Home Explore หน่วยที่2HTML (ต่อ)

หน่วยที่2HTML (ต่อ)

Published by วิรยา สีขาว, 2019-05-26 23:37:39

Description: หน่วยที่2HTML (ต่อ)

Search

Read the Text Version

ตวั อยาง Navigation3  <!DOCTYPE html>  li a {  <html><head><style>  display: block;  ul {  color: #000;  list-style-type: none;  padding: 8px  margin: 0;  padding: 0; 16px;  width: 200px;  text-decoration:  background-color: none; #f1f1f1; } }

 i a.active {  background-color: #4CAF50;  color: white; }  li a:hover:not(.active) {  background-color: #555;  color: white; }  </style></head>

 <body><h2>Vertical Navigation Bar</h2>  <p>In this example, we create an \"active\" class with a green background color and a white text. The class is added to the \"Home\" link.</p>  <ul>  <li><a class=\"active\" href=\"#home\">Home</a></li>  <li><a href=\"#news\">News</a></li>  <li><a href=\"#contact\">Contact</a></li>  <li><a href=\"#about\">About</a></li>  </ul></body></html>



ใสเ สนขอบใหกับ Navigation  ul { border: 1px solid #555; }  li {  text-align: center;  border-bottom: 1px solid #555; }

 Short Hex Code  Short Hex Code เปน วธิ กี ารเขียนรหัสสที ีเ่ ปนแบบยอ จากหกหลกั เปนสามหลกั ซง่ึ จะกลายเปน แบบ RGB ทมี่ เี ลขอยา งละตวั เชน รหสั สเี ปน 036 ก็ คือ สแี ดง 0 สเี ขียว 3 สีน้าํ เงนิ 6 ซึ่งในท่นี ี้ กเ็ หมือนกับการเขียน รหัสสีเปน 003366 ดงั ตวั อยางดานลา ง

HTML5 กับการสรางภาพกราฟกโดย W3C  <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"190\"> <polygon points=\"100,10 40,180 190,60 10,60 160,180\" style=\"fill:lime;stroke:purple;stroke- width:5;fill-rule:evenodd;\"> </svg>

ตวั อยา งการใชงาน Canvas <canvas id=\"myCanvas\" width=\"200\" height=\"100” style=\"border:1px solid #d3d3d3;\"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c=document.getElementById(\"myCanvas\"); var ctx=c.getContext(\"2d\"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,\"red\"); grd.addColorStop(1,\"white\"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); </script>

อา งอิง  https://www.w3schools.com


Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook