Software Project : Robotic Arm (7) - ปรับเเต่งหน้าเว็บและเชื่อมต่อ CSS
วันที่ 21 ตุลาคม พ.ศ.2562
ทำการเเต่งหน้าเว็บจากปกติ
หน้าเว็บปกติ
ทำการจัดโครหน้าเว็บโดยใช้ HTML
โค้ด HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename= 'BEAUTIF.css')}}"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <title>RobotArm Bluetooth</title> <body> <h2> Servo </h2> <div class="w3-container"> <section class="button"> <form action="/" method="post"> <p>Servo.1 Degree : {{XAX}}</p> servo NO.1 <button class="w3-button w3-border w3-hover-red" type="submit" name="submit" value="1/0"> 0 </button> <button class="w3-button w3-border w3-hover-pink" type="submit" name="submit" value="1/20"> 20 </button> <button class="w3-button w3-border w3-hover-purple" type="submit" name="submit" value="1/40"> 40 </button> <button class="w3-button w3-border w3-hover-blue" type="submit" name="submit" value="1/60"> 60 </button> <button class="w3-button w3-border w3-hover-aqua" type="submit" name="submit" value="1/80"> 80 </button> <button class="w3-button w3-border w3-hover-green" type="submit" name="submit" value="1/100"> 100 </button> <button class="w3-button w3-border w3-hover-light-green" type="submit" name="submit" value="1/120"> 120 </button> <button class="w3-button w3-border w3-hover-yellow" type="submit" name="submit" value="1/140"> 140 </button> <button class="w3-button w3-border w3-hover-orange" type="submit" name="submit" value="1/160"> 160 </button> <button class="w3-button w3-border w3-hover-deep-orange" type="submit" name="submit" value="1/180"> 180 </button> <p> <p>Servo.2 Degree : {{XAA}}</p> servo NO.2 <button class="w3-button w3-border w3-hover-red" type="submit" name="submit" value="2/0"> 0 </button> <button class="w3-button w3-border w3-hover-pink" type="submit" name="submit" value="2/20"> 20 </button> <button class="w3-button w3-border w3-hover-purple" type="submit" name="submit" value="2/40"> 40 </button> <button class="w3-button w3-border w3-hover-blue" type="submit" name="submit" value="2/60"> 60 </button> <button class="w3-button w3-border w3-hover-aqua" type="submit" name="submit" value="2/80"> 80 </button> <button class="w3-button w3-border w3-hover-green" type="submit" name="submit" value="2/100"> 100 </button> <button class="w3-button w3-border w3-hover-light-green" type="submit" name="submit" value="2/120"> 120 </button> <button class="w3-button w3-border w3-hover-yellow" type="submit" name="submit" value="2/140"> 140 </button> <button class="w3-button w3-border w3-hover-orange" type="submit" name="submit" value="2/160"> 160 </button> <button class="w3-button w3-border w3-hover-deep-orange" type="submit" name="submit" value="2/180"> 180 </button> <p> <p>Servo.3 Degree : {{XAB}}</p> servo NO.3 <button class="w3-button w3-border w3-hover-red" type="submit" name="submit" value="3/0"> 0 </button> <button class="w3-button w3-border w3-hover-pink" type="submit" name="submit" value="3/20"> 20 </button> <button class="w3-button w3-border w3-hover-purple" type="submit" name="submit" value="3/40"> 40 </button> <button class="w3-button w3-border w3-hover-blue" type="submit" name="submit" value="3/60"> 60 </button> <button class="w3-button w3-border w3-hover-aqua" type="submit" name="submit" value="3/80"> 80 </button> <button class="w3-button w3-border w3-hover-green" type="submit" name="submit" value="3/100"> 100 </button> <button class="w3-button w3-border w3-hover-light-green" type="submit" name="submit" value="3/120"> 120 </button> <button class="w3-button w3-border w3-hover-yellow" type="submit" name="submit" value="3/140"> 140 </button> <button class="w3-button w3-border w3-hover-orange" type="submit" name="submit" value="3/160"> 160 </button> <button class="w3-button w3-border w3-hover-deep-orange" type="submit" name="submit" value="3/180"> 180 </button> <p> <p>Servo.4 Degree : {{XAC}}</p> servo NO.4 <button class="w3-button w3-border w3-hover-red" type="submit" name="submit" value="4/0"> 0 </button> <button class="w3-button w3-border w3-hover-pink" type="submit" name="submit" value="4/20"> 20 </button> <button class="w3-button w3-border w3-hover-purple" type="submit" name="submit" value="4/40"> 40 </button> <button class="w3-button w3-border w3-hover-blue" type="submit" name="submit" value="4/60"> 60 </button> <button class="w3-button w3-border w3-hover-aqua" type="submit" name="submit" value="4/80"> 80 </button> <button class="w3-button w3-border w3-hover-green" type="submit" name="submit" value="4/100"> 100 </button> <button class="w3-button w3-border w3-hover-light-green" type="submit" name="submit" value="4/120"> 120 </button> <button class="w3-button w3-border w3-hover-yellow" type="submit" name="submit" value="4/140"> 140 </button> <button class="w3-button w3-border w3-hover-orange" type="submit" name="submit" value="4/160"> 160 </button> <button class="w3-button w3-border w3-hover-deep-orange" type="submit" name="submit" value="4/180"> 180 </button> <p> <p>Servo.5 Degree : {{XAD}}</p> servo NO.5 <button class="w3-button w3-border w3-hover-red" type="submit" name="submit" value="5/0"> 0 </button> <button class="w3-button w3-border w3-hover-pink" type="submit" name="submit" value="5/20"> 20 </button> <button class="w3-button w3-border w3-hover-purple" type="submit" name="submit" value="5/40"> 40 </button> <button class="w3-button w3-border w3-hover-blue" type="submit" name="submit" value="5/60"> 60 </button> <button class="w3-button w3-border w3-hover-aqua" type="submit" name="submit" value="5/80"> 80 </button> <button class="w3-button w3-border w3-hover-green" type="submit" name="submit" value="5/100"> 100 </button> <button class="w3-button w3-border w3-hover-light-green" type="submit" name="submit" value="5/120"> 120 </button> <button class="w3-button w3-border w3-hover-yellow" type="submit" name="submit" value="5/140"> 140 </button> <button class="w3-button w3-border w3-hover-orange" type="submit" name="submit" value="5/160"> 160 </button> <button class="w3-button w3-border w3-hover-deep-orange" type="submit" name="submit" value="5/180"> 180 </button> <p> <p>Servo.6 Degree : {{XAE}}</p> servo NO.6 <button class="w3-button w3-border w3-hover-red" type="submit" name="submit" value="6/0"> 0 </button> <button class="w3-button w3-border w3-hover-pink" type="submit" name="submit" value="6/20"> 20 </button> <button class="w3-button w3-border w3-hover-purple" type="submit" name="submit" value="6/40"> 40 </button> <button class="w3-button w3-border w3-hover-blue" type="submit" name="submit" value="6/60"> 60 </button> <button class="w3-button w3-border w3-hover-aqua" type="submit" name="submit" value="6/80"> 80 </button> <button class="w3-button w3-border w3-hover-green" type="submit" name="submit" value="6/100"> 100 </button> <button class="w3-button w3-border w3-hover-light-green" type="submit" name="submit" value="6/120"> 120 </button> <button class="w3-button w3-border w3-hover-yellow" type="submit" name="submit" value="6/140"> 140 </button> <button class="w3-button w3-border w3-hover-orange" type="submit" name="submit" value="6/160"> 160 </button> <button class="w3-button w3-border w3-hover-deep-orange" type="submit" name="submit" value="6/180"> 180 </button> <p> </form> </section> </div> </body> </html>
เพิ่มในส่วนของ CSS
body{ font-family: 'Montserrat', sans-serif; padding: 150px 0; background: url(https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105_960_720.png) center center; background-size: cover; text-align: center; color: #fff; position: relative; } h2{ color:LightSlateGray ; } #keys { display: inline-block; border: 2px solid #010101; padding: 10px 20px; color: #010101; text-decoration: none; transition: 0.3s; }หน้าเว็บเมื่อใช้ HTML ร่วมกับ CSSโดยเมื่อเสร็จ Feature หลักทั้งหมดจะทำการปรับปรุงหน้าเว็บเเละวิธีการควบคุม Servo อีกรอบ
ความคิดเห็น
แสดงความคิดเห็น