วันจันทร์งานที่เราต้องทำให้เสร็จคือ ลงโค้ดหน้า Login ซึ่งในหน้านี้หน้าเว็บของเราต้อง Responsive ได้นะเอออไม่งั้นมันไม่เก๋ เก็ทปะ เก็ทททททท ดังนั้นๆๆๆ เราต้องทำ (ทำไม่ด้ายยยยยยยยย) แต่ในหน้านี้เนื้อหาไม่เยอะ เน้นความสวยงามเพราะมันคือ first impression เลยนะเฮ้ยยยย เราจึงต้องทำสิ่งต่อไปนี้
- การทำให้ภาพพื้นหลัง Responsive สามารถทำได้โดยใช้คำสั่งต่อไปนี้และต้อง วางไว้ภายใน <style>…</style>
body {
background: url(“ชื่อภาพ.jpg”) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
2. การทำให้รูปภาพ responsive สามารถทำได้โดยใช้คำสั่ง class=”img-responsive” โดยเราจะวางคำสั่งนี้ไว้ภายใน <img /> //ของรูปภาพที่เราต้องการ
3. การทำให้หน้า UI ของเว็บไซต์สวยงามขึ้นโดยใช้ Font สามารถทำได้โดยใช้คำสั่งต่อไปนี้และต้องวางไว้ภายใน <style>…</style>
@font-face {
font-family: ชื่อ font ที่เราต้องการ;
src: url(“ชื่อ font.otf”);
} //ในส่วนนี้จะเป็นส่วนที่เราสร้างขึ้นสำหรับเรียกใช้งานแล้วเราจะนำ font ตัวนี้มาใช้งานยังไงหละ ??
<body>
<h1>Suchawadee Uengwanarat</h1>
</body>
จากโค้ดด้านบนเราต้องการให้คำว่า Suchawadee Uengwanarat กลายเป็นตัวอักษรที่สวยงามเมื่อเเสดงในหน้าเว็บ เราสามารถทำได้โดยเพิ่มคำสั่งเรียกใช้งาน (ด้านล่าง) ในส่วนของ <style>…</style>
h1{
font-family: ชื่อ font ที่เราต้องการ;
}
4. อยากได้ font หรือสัญญาลักษณ์ สำหรับใช้ในหน้าเว็บเราแบบสวยๆๆทำไงอะ ?? เช่น ปุ่ม Login ของ Facebook สามารถทำได้ง่ายยยยๆๆๆโดยเข้าไปเลือกสิ่งที่ต้องการจากเว็บไซต์ http://fontawesome.io/ จากนั้นก็อปลิ้งค์ที่ต้องการ เช่น <i class=”fa fa-facebook-official” aria-hidden=”true”></i> //คำสั่งนี้เป็นคำสั่งสำหรับ Login ของ Facebook จากนั้นนำมาวางไว้ใน <button>…</button>
ปล. เราจะใช้โค้ดจากเว็บไซต์ http://fontawesome.io/ ได้ต้อง Downlond แล้วเซฟลงโฟนเดอร์ที่เราเก็บโค้ดหน้าเว็บของเราอะ จากนั้นเรียกใช้โดยใช้คำสั่งต่อไปนี้ <link href=”font-awesome.min.css” rel=”stylesheet”> นำไปไว้ในส่วนของ <head>…</head>